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, re-position, 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 - Vev Cloud and Hosting: Advanced)

Toolbar

Along the far left edge are a few tools and shortcuts at your disposal:

• Add sections

• Layers Panel

• Project Settings

We will go over these in due time.