🎨
Meet the Design Editor
In this lesson, you will learn the basics of the Design Editor
The Design Editor is, without exaggeration, the core of Vev. It's where you craft your projects and where you’ll likely spend time the most. It is what paves the way for the Content Editor, and it is where great things you build in the Code Editor come to life.
Check out the Product Tour to learn more about all three Editors within Vev.
With this grand introduction, the Design Editor is where:
You CAN
  • Add, remove, resize, position, and configure elements and sections
  • Have full control over the style and content in a project
  • Set up projects and templates that can be used in the Content Editor
You CANNOT
  • Create new types of elements and sections
  • Change the code of existing elements

Accessing the Editor

  • Click “Open in Design Editor“ when hovering over the thumbnail of a project in the Dashboard.
  • Or switch to it anytime from the Top Bar when a project is open.

Understanding 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, 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.
Adjusting the size of the canvas
Adjusting the canvas size
When you place Elements from the create menu in the Top Bar, you position them directly on the Canvas. Simply add sections and put the Elements you want inside and you have a working web page.
Some Elements can be used as Sections as well. I.e. YouTube, Video, Image and many more!
To select an Element, simply use the Pointer-tool to select, or click and drag to select multiple. When an Element is selected on the Canvas, you will see their corresponding Layer in the Page Content-panel highlighted.
You can hold down SPACE while you drag to move around the Canvas. By holding the CTRL key and using your mouse wheel you will zoom in/out.

Top Bar Navigation

The Top Bar gives you quick access to some of the most essential tools you need in Vev. On the left side, you have:
  • (Our beloved) Vev logo, which takes you to the Dashboard.
  • Pointer
  • Add menu, a library of all elements and sections.
  • Shortcuts to essential elements and sections, such as text, image, and video.
In the middle of the Top Bar is a contextual set of tools.
For example, when you first enter the project, or in project setting mode you will see Workspace name (left) Project name (right) Separated with a “/”.
If you have selected a component on the canvas you will see:
  • Create Main Component
  • Swap Element/Section
  • Attach Addons
Lastly, over on the right side, we have:
  • Zoom settings
  • Device Modes
  • Preview mode
  • Design, Content, and Code Editor selector
  • Publish
All of these terms and topics will be discussed in due course.
You arrange and style your Sections & Elements freely on the Canvas.
The Canvas is where you place all your content. What you see on the Canvas is not only how it will look in the browser, it is your website running in the browser. In order to resize your Canvas and see how it is currently looking at different screen heights/device mode, you can use the handlebars at the bottom and sides to adjust your screen size, or use the Device Mode drop-down to switch between specific devices.

Page Content & Layer Panel

The Page Content Panel contains all the Elements on your Canvas. It’s built up of Sections which you can place other Elements freely inside.
From the Image above we can see two sections with Elements and nested Elements (grouped Elements or Components).
  • If an item contains any other items, this will be indicated by the down caret/arrow icon. You can click this to collapse and un-collapse the content.
  • Double-clicking Section will make the layer name editable.
  • The Lock icon locks the layer, meaning the layer can't be edited
  • The Eye icon hides that layer from the current View Mode.
You can hide a component from e.g. the tablet mode but will stay visible on desktop and phone view. Hidden components will not show up on the canvas or on the published page.
  • You can drag items in the Page Content Panel to arrange them. You can also right-click to open up a context menu with helpful commands, such as copy, paste, and a lot more.
Last modified 2mo ago