✏️ Meet the Content Editor

You have been briefly introduced to the Content Editor (see Product tour) 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.
But first, how do I access it?
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 Top Bar while in the Design Editor.\
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 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, 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 TAB to switch between Edit and Preview mode.\
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:
(Our beloved) Vev logo
Takes you to the Dashboard.
Name of current page
Displays the name of the current page. Clicking it takes you to page settings. (See Managing pages)
Status of current page
Shows and changes the status of the page. (See Managing pages)
Back, Forward, Refresh, Home
Equivalent to standard navigation buttons in web browsers. They are especially useful in Preview mode.
Zoom controller
Shows full zoom controls.
Also remember you can always hold CMD/CTRL and scroll up and down.
Device mode
Shows and changes the active device mode.
You can easily switch between these device modes by pressing 1, 2, and 3 on your keyboard for Desktop, Tablet, and Mobile, in that order.
And gliding over to the right …
Preview
Toggles Preview mode on and off in the Canvas.
Pressing TAB has the same effect.
Design
Takes you to the Design Editor.
Publish
Takes you to Publish Settings. (See Hosting)
Top Toolbar
Left: On the left, you will find the pointer and commenting tool. The pointer tool lets you select different layers in the canvas; the commenting tool lets you add comments on the layers in the canvas.
Middle: The center lists the workspace your project belongs to, as well as your project’s name. Clicking the workspace name lets you move your project to a different workspace, while clicking the project name lets you rename your project.
Right: On the right, you will find the zoom tool, the different editor modes, project-related settings, and the publish button.
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 the intersection between two sections:
1.An add button will appear upon hover to indicate where the section will be added.
2.When you click the “Add new section” button, a panel will appear on the right listing all the section types you can add.

Templates - Previous

Using Templates

Next - Content Editor

Edit Elements

Last modified 3d ago

Copy link

Contents

But first, how do I access it?