Accessing the Editor

Understanding the canvas

Top Bar Navigation

Device Modes and Breakpoints

Zoom and Refresh Canvas

Page Content & Layer Panel

Settings Panel

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.

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 by clicking "Design" icon at the bottom left corner 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, or 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 P to switch between Edit and Preview mode.

Adjusting the size of the canvas

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, Images, 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 its corresponding Layer in the Page Content panel highlighted.

You can hold down SPACE while you drag it 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. Let's find out what some of these tools are for.

Cursor tools

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)

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)

Contextual tools (Design editor and admin-only)

Next to your components is a contextual set of tools. Here, you will be able to turn a group of highlighted elements into a main component, swap them for something else, or attach an add-on to them.

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.

Read more about managing your breakpoints.

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.

Tip: 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.

Settings Panel

When your canvas is unselected, the settings panel will appear to the right of the canvas. To unselect your canvas, press “ESC” or click anywhere outside the canvas. This will show the settings panel with two tabs: one for project settings and one for page settings.

Project settings

Project settings apply to your whole project. In this tab you will find:

  • Color styles: When you create a template using Color Styles, you can set a color theme for the workspace. This will be used when you create future projects using templates and includes:

    • Accent palette

    • Background palette

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?