Skip to main content

Navigating the Design Editor

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated over 2 weeks ago

The Design Editor is where you build your Vev projects. You’ll spend most of your time here designing layouts and adding content.

What you can do

  • Add, remove, resize, and style elements

  • Control layout and content

  • Create templates for the Content Editor

What you can’t do:

  • Create new types of elements or sections

  • Edit the code of existing elements

How to Open the Design Editor

  • Click a project on your Dashboard.

  • If you have Design access, it opens in Design mode.

  • If you're a Content user, it opens in Content Editor.

  • You can switch modes anytime using the “Design” icon in the bottom-left corner.

Understanding the Canvas

The Canvas is your main workspace. It includes the Viewport, which shows how your content will look on different devices (desktop, tablet, mobile).

  • Hover over elements to see their outlines.

  • Use Edit Mode to make changes.

  • Use Preview Mode to test functionality like links or videos.

Quick Tips:

  • Scroll to move up/down the page

  • Hold CMD/CTRL + scroll to zoom

  • Press 1, 2, or 3 to switch between Desktop, Tablet, and Mobile

  • Press P to switch between Edit and Preview mode

  • Hold SPACE and drag to pan around

  • CTRL + mouse wheel to zoom in/out

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.

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 P to switch between Edit and Preview mode.

Adjusting the size of the Canvas

Placing & Selecting Elements & Components

  • Drag elements from the add menu to the Canvas.

  • Some elements (like images or videos) can be used as full sections.

  • Use the Pointer tool to select elements or drag to select multiple.

  • Selected elements are also highlighted in the Page Content panel.

Top Bar Navigation

The Top Bar gives you quick access to some of the most essential tools you need in Vev. Let's find out what some of these tools are for.

Cursor tools

Image showing the cursor and movement icons in Vev

Depending on your user type and access right, you will find all cursor tools in the top-left corner of the Canvas view. The following tools are currently available:

  • Pointer (shortcut: press V)

  • Pan (shortcut: hold space + drag your canvas — Design editor or admin-only)

  • Comment (shortcut: press C)

Components (Design editor or admin-only)

Image showing the build tool icons in Vev

Next to your cursor tools, you will find the Components menu and shortcuts to some of the most commonly used components. Here, you’ll find:

  • Add menu, our no-code library of all elements and sections (Shortcut: Press M)

  • Section tool (Shortcut: Press K)

  • Text tool (Shortcut: Press T)

  • Image tool (Shortcut: Press I)

  • Video tool

  • Shapes tool (Shortcut: Press R)

Preview and Publish

The “Preview” and “Publish” buttons are located on the right side of the canvas view. Using the preview button, you can preview your content before publishing it anywhere, allowing you to test your designs beforehand.

You can publish your content (what you see in your preview) to either a staging domain or directly to where you would like to publish your content using the publish button.

Device Modes and Breakpoints

In order to see how it is currently looking at different screen heights/device modes, you can click the device modes or breakpoints that are located in the bottom left corner of your canvas view.

Using this feature, you can switch between the breakpoints in your project to see how your design looks on the different devices you want to design for.

Zoom and Refresh Canvas

You can find the zoom tool and refresh button in the bottom-right corner of the canvas. When you open the zoom tool, you will find the different ways you can zoom in on your canvas and the shortcuts for each control.

Page Content and Layer Panel

The Page Content Panel contains all the Elements on your Canvas. It’s built up of Sections where you can place other Elements freely inside.

  • 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.

Helpful tips

  • 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.

Right-Side Panel

The right-side panel is where a lot of your customizations on your design will happen. Depending on your selection, you will be presented with different tab options in this panel; there are four different tab options available presented in sets of two; the Style & Addons Tab, Page settings & Project settings.

Style & Addons Tabs

When a section, any element or component on your canvas is selected, the style tab will be available in the right-side panel.

Style

Depending on what component you have selected, different styling options presented will be different. For example, below we have a section selected, and so we have the option to add padding to the top and bottom of the section.

Interactions

The Interactions tab allows you to quickly browse and apply different interactions to your selected sections and elements on your canvas.

Page settings

The page settings tab only applies to 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

  • Copy the embed code of your page

  • Learn more about page settings here.

Did this answer your question?