Meet to the Design Editor

The Design Editor is, without exaggeration, the core of Vev. It 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 (More info in the product tour)

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

Where is the Design 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.

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

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.

  • Select tool

  • Add menu, giving you access to all elements and sections you can use.

  • Shortcut buttons to essential elements and sections, such as text, image, and video.

In the middle of the Top Bar is a contextual set of tools which depend on your selection:

  • Master Components

  • Swap Element/Section

  • Add-ons

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. Also, the Design Editor UI is covered in detail in Design - Reference Docs.