The Design Editor is where you build your Vev projects. You’ll spend most of your time here designing layouts and adding content.
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 the viewport that represents the screen size of a user viewing your Vev content. It will vary by device and when a user resizes their browser window. Since devices come in all sizes and shapes, the Viewport has different breakpoints to help you see how your content will look on each of them.
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/CTRLand scrolling up and down.Hover over content to identify the different sections and elements.
Press
1,2, and3on 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
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)
Preview and Publish
Preview
The preview button allows you to view the project within the editor, complete with all interactions and animations you have added. Take this time to review how the project looks and feels as well as experiment with different screen sizes by switching breakpoints or by grabbing the window size handles to the right and bottom of the canvas. If you have interactions or animations set up, you’ll be able to see these in action.
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
Content Panel
The content panel is located on the left-hand side of the editor and consists of tabs to allow you to add and manage the content on your page. 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. The view and tools consist of:
Layers: Manage the pages of your project and the content within them.
Add menu: Access the add menu, view all element and section components available for use. You’ll also be able to access custom-coded components and main components on your account.
Image library: Manage your images by uploading, removing and editing image description and title. Or search through royalty-free images through the search bar.
Video library: Manage your videos by uploading via URL or locally from your computer.
Shape library: Manage your icons and shapes. Search through our integrated shapes library from Font Awesome.
Design Editor switcher: Switch the view and permissions to the design editor.
Content Editor switcher: Switch the view and permissions to the content editor.
Project settings: Project settings apply to your whole project. In this tab you will find the settings for color palette, default font, guides, breakpoints and more.
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.
Style, Properties & Interactions Panel
The style panel will appear in place instead of page settings when you have selected any element or section on your canvas.
Style tab
Depending on what component you have selected you’ll get contextual styling options. For example, if you have a text box selected, you will have the options to change the fonts and styles for each text tag. As well as options for background, border, border-radius, padding, margin and more! Or when you have a section, you can use this panel to set a background color or image.
Interactions
The Interactions tab allows you to enhance your project by adding interactivity to your design.
Page settings
Page settings can be accessed via the panel on the right-hand side which will be visible when clicking outside of the canvas or pressing the ESC key. 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
Edit the page path
Change the page status
Turn on the ‘Scroll snap’ feature
Copy the embed code of your page
Create a template from this page’s design
Customize the page’s HTML variables
