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:
Add, remove, arrange, resize sections (based on a template)
Change copy (text), images, shapes, videos, links
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.
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.
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!
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.
3 on your keyboard to switch between Desktop, Tablet, and Mobile.
TAB to switch between Edit and Preview mode.
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.
Shows full zoom controls.
Also remember you can always hold
CMD/CTRL and scroll up and down.
Shows and changes the active device mode.
You can easily switch between these device modes by pressing
3 on your keyboard for Desktop, Tablet, and Mobile, in that order.
And gliding over to the right …
Toggles Preview mode on and off in the Canvas.
TAB has the same effect.
Design Takes you to the Design Editor.
Along the far left edge are a few tools and shortcuts at your disposal:
We will go over these in due time.