The Vev Design Editor is the primary workspace for building and designing Vev projects. This is where you will spend most of your time creating layouts and adding content to your projects.
Opening 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 the Content Editor.
You can switch modes anytime using the "Design" icon in the bottom-left corner.
Understanding the Canvas
Understanding the Canvas
The canvas is the viewport that represents the screen size of someone viewing your Vev content. Because devices come in many sizes, the canvas has breakpoints (preset screen widths) so you can see how your content will look on each one.
Hover over elements to see their outlines.
Use Edit Mode to make changes.
Use Preview Mode to test functionality like links or videos.
Quick Canvas Navigation and Editing Tips
Use the following shortcuts and actions to navigate and edit your project efficiently:
Scroll: Scroll up or down to move through the page.
Zoom:
CMD/CTRL + scroll: Hold these keys and scroll to zoom in and out of the canvas.
CTRL + mouse wheel: Use this shortcut to zoom in and out.
Device Breakpoints: Press 1, 2, or 3 to quickly switch between the Desktop, Tablet, and Mobile views.
Switch Modes: Press P to toggle between Edit and Preview modes.
Pan: Hold the SPACE key and drag your mouse to pan around the canvas.
Adjusting the size of the Canvas
To adjust the size of the canvas, use the handles located on the right and bottom of the canvas window. You can grab and drag these handles to simulate different screen sizes and test how your design responds.
Placing and Selecting Elements
Elements and components are the building blocks of your Vev project.
Placing Elements: Drag elements directly from the Add menu onto the canvas. Some elements, such as images or videos, can be used to create full sections.
Selecting Elements:
Use the Pointer tool to select individual elements.
Drag your cursor to select multiple elements at once.
When an element is selected, it will also be highlighted in the Page Content panel.
Top Bar Navigation: Cursor Tools
The Top Bar provides quick access to essential tools. In the top-left corner of the canvas, you will find a selection of cursor tools.
Pointer Tool: Use this for selecting elements. (Shortcut: V)
Pan Tool: Use this to pan around the canvas. This is available to users with Design access or admin roles. (Shortcut: hold SPACE + drag)
Comment Tool: Use this to add comments. (Shortcut: C)
Top Bar Navigation: Components
Next to the cursor tools, you will find the Components menu and shortcuts to the most commonly used components.
Add Menu: The no-code library of all available elements and sections. (Shortcut: M)
Section Tool: Use this to add a new section. (Shortcut: K)
Text Tool: Use this to add a text element. (Shortcut: T)
Image Tool: Use this to add an image. (Shortcut: I)
Video Tool: Use this to add a video.
Shapes Tool: Use this to add a shape. (Shortcut: R)
Preview and Publish
The Preview and Publish features allow you to finalize and share your project.
Preview Button: The preview button lets you view your project within the editor itself, including all interactive elements and animations. This is a crucial step for reviewing your design and functionality on various screen sizes.
Publish Button: The publish button allows you to publish your content (the content visible in your preview) to a staging domain or directly to its final destination.
Device Modes and Breakpoints
You can find the device modes and breakpoints in the bottom-left corner of your canvas. Clicking these allows you to switch between the different breakpoints in your project to see how your design looks on the devices you are designing for.
Zoom and Refresh Canvas.
The zoom tool and refresh button sit in the bottom-right corner of the canvas. Open the zoom tool to see the available zoom controls and their keyboard shortcuts.
Page Content and Layer Panel
Content Panel
The Content Panel sits on the left side of the editor and includes tabs for adding and managing your page's content:
Layers: Manage your project's pages and the content within them.
Add menu: Browse every available element and section, plus any custom-coded or main components on your account.
Image library: Upload, remove, and edit image titles and descriptions, or search Vev's built-in royalty-free image library.
Video library: Upload videos via URL or from your computer.
Shape library: Manage icons and shapes, including Vev's integrated Font Awesome library.
Design Editor switcher: Switch to Design Editor view and permissions.
Content Editor switcher: Switch to Content Editor view and permissions.
Project settings: Settings that apply to the whole project, including color palette, default font, guides, and breakpoints.
Helpful Tips
You can hide a component on one breakpoint (e.g., tablet) while keeping it visible on others (e.g., desktop and mobile). Hidden components won't appear on the canvas or on the published page.
Drag items in the Page Content panel to reorder them, or right-click for a context menu with commands like copy and paste.
Style, Properties, & Interactions Panel
The Style Panel appears on the right-hand side of the editor when an element or section is selected on the canvas.
Style Panel: Provides contextual styling options based on the selected component. For example, when a text box is selected, you can change fonts and styles. Other options include background, border, padding, and margin.
Interactions Tab: Allows you to add interactivity to your design to enhance your project.
Page Settings
The Page Settings panel is located on the right-hand side and is visible when you click outside the canvas or press the ESC key. These settings apply only to the page you are currently viewing. Here, you can:
Meta Settings: Set the page name, image, and description.
Page Path: Edit the URL path for the page.
Page Status: Change the page's status.
Scroll Snap: Turn on the 'Scroll snap' feature.
Embed Code: Copy the embed code of your page.
Template Creation: Create a template from the current page's design.
HTML Variables: Customize the page's HTML variables.