You have been briefly introduced to the Content Editor and now is the time to learn all the ins and outs.

Remember that the Content Editor helps you focus solely on changing the content, not the design, of your project, meaning that:

You CAN

Add, remove, arrange, resize sections (based on a template)
Change copy (text), images, shapes, videos, links
Configure elements

You CANNOT

Add, remove, reposition, or resize elements
Change the style of elements, such as text font and color

With that all clear, we will start with a tour of the user interface.

✍🏽 Accessing the Content Editor

The Content Editor can be accessed by:

Clicking “Open in Content Editor“ when hovering over the thumbnail of a project in the Dashboard.

Clicking “Content“ in the bottom left bar while in the Design Editor.

🖼 The canvas

The Canvas is much like a boundless surface where you craft your content before it goes out in the world.

It is home to the Viewport, which is the rectangle through which you can see the actual content. It represents the device screen of someone viewing your Vev content.

Since devices come in all sizes and shapes, the Viewport has different device modes to help you see how your content will look on each of them, e.g. desktop, tablet, or mobile.

Page content, i.e. sections and elements, are highlighted with blue borders when you hover over them. Anything beyond the Viewport is invisible but will still be highlighted.

Lastly, the Canvas can be set in either of two modes:

Edit mode, where elements and sections are selectable and editable. They are not fully functional in this mode, e.g. clicking links doesn’t take you anywhere and videos don’t play.
Preview mode, where web content is rendered with full functionality as it would in real life.

And in case you’re wondering, behind the Viewport is a nameless, infinite dark space to help you zoom and pan around with ease!

Play Time!

Open a project in the Content Editor and try out the following:

Scroll up and down to view the whole length of the page.
Zoom in and out by holding CMD/CTRL and scrolling up and down.
Hover over content to identify the different sections and elements.
Press 1, 2, and 3 on your keyboard to switch between Desktop, Tablet, and Mobile.
Press P to switch between Edit and Preview mode.

🔝 The Top Bar

Across the top of the Content Editor is a handy set of buttons. Here’s a quick walk-through from left to right:

Vev logo: Click to open the project settings
Project name: Click to show the project name and the workspace it belongs to
Pointer: Lets you select the pointer
Comments: Open the comments panel to see all the comments on your project
Preview Toggles Preview mode on and off in the Canvas. Pressing p has the same effect
Publish Takes you to Publish Settings (See Hosting)

📄 Page settings

On the right, you will find page settings for the page you are currently viewing. Here you can:

Set meta settings, such as page name, image, and description
Change the page status
Edit the page path

➕ Adding sections

You can add sections to the canvas by hovering over the intersection between two sections:

An add button will appear upon hovering to indicate where the section will be added.
When you click the “Add new section” button, a panel will appear on the right listing all the section types you can add.