The Design Editor

Start here

Learning a new tool can be exciting and daunting. In this help center, you’ll be introduced to all you need to know so you can feel at home.

Written by Diego Muralles
Updated yesterday

Meet the Design Editor

In this lesson, you will learn the basics of the Design Editor

Written by Diego Muralles
Updated yesterday

Creating projects in Vev

Learn how to create, structure, and manage a project in the Design & Content editors

Written by Diego Muralles
Updated yesterday

Shortcuts

Written by Michael Jaeger
Updated over a week ago

Auto Layout

Auto layout will allow you to create dynamic frames and components that can resize and reorder based on different breakpoints.

Written by Diego Muralles
Updated over a week ago

Creating and managing effects

Create more depth and dynamism to your design with the effects editor, such as adding drop shadow to icons or creating unique blur effects

Written by Diego Muralles
Updated over a week ago

Sizing Components

Specify the sizing of an element, frame, or section by using values like pixel, percentage, or auto-size

Written by Diego Muralles
Updated over a week ago

Spacing options

Create responsive content by using spacing options and guides like padding and margin in the Style Panel

Written by Diego Muralles
Updated over a week ago

Using constraints

Use Constraints to control an element’s position across breakpoints, increasing the speed of making your designs responsive

Written by Diego Muralles
Updated over a week ago

Guides & Grids

Use helpful tools like guides and grids to design and build your content

Written by Diego Muralles
Updated this week

Pinning an element

Pin elements position to the user's view

Written by Diego Muralles
Updated over a week ago

Understanding the Safe Zone

Use the Safe Zone to place content on the canvas to be visible across all default breakpoints

Written by Diego Muralles
Updated this week

Main Components

Learn how to create and manage main components

Written by Diego Muralles
Updated this week

Figma Import

Transform Figma files into functional sites in a click

Written by Diego Muralles
Updated over a week ago

Project Breakpoints

Setting breakpoints helps you apply a set of styling rules to your Vev content based on the screen size it is viewed on

Written by Yujin
Updated yesterday

Project settings

This is where you find the non-design related settings to your projects, such as integrations, export, meta data etc.

Written by Diego Muralles
Updated over a week ago

Pages

Written by Diego Muralles
Updated over a week ago

SEO and Social Sharing

Written by Diego Muralles
Updated over a week ago

Adding Forms

Add a simple form to your project using the Embed Anything element.

Written by Diego Muralles
Updated over a week ago

Adding a Quiz Submit Button

Use with the Quiz Questions element to send the quiz taker to a targeted link based on their quiz score.

Written by Diego Muralles
Updated over a week ago

Adding a Quiz Questions element

Create multiple-choice style questions. Use the Quiz Submit Button element to send the user to a targeted page based on their quiz score.

Written by Diego Muralles
Updated over a week ago

Adding a Fan Menu

Learn how to add and customize a Fan Menu element

Written by Diego Muralles
Updated over a week ago

Adding a Standard Menu

Learn how to add and customize a Standard Menu element

Written by Diego Muralles
Updated over a week ago

Adding a Burger Menu

Learn how to add and customize a Burger Menu element

Written by Diego Muralles
Updated over a week ago

Adding an Iframe element

Allows you to upload a live external web URL to display inside a container.

Written by Lewis Bowen
Updated over a week ago

Add an Embed Anything element

Embed code from an external platform

Written by Lewis Bowen
Updated over a week ago

Adding a Flourish element

Embed your custom data visualizations made with Flourish Studio

Written by Lewis Bowen
Updated over a week ago

Adding Arrow Key Navigation

Allows you to navigate between the pages of the project using the left and right keyboard arrows

Written by Diego Muralles
Updated over a week ago

Adding a Page Tile Menu

Learn how to add and customize a Page Tile Menu element

Written by Diego Muralles
Updated over a week ago

Adding a Multiple Choice element

A series of multiple-choice questions that provides immediate feedback on the user's answer

Written by Diego Muralles
Updated over a week ago

Adding a Fullscreen element

Allows you to make your page the full width of the viewport.

Written by Diego Muralles
Updated over a week ago

Adding a Scroll Progress Bar

A bar that displays the user's scroll progress down the length of the page

Written by Diego Muralles
Updated over a week ago

Adding an Instagram element

Embed your Instagram posts into your Vev project

Written by Diego Muralles
Updated over a week ago

Adding a Number Counter element

Animate counting numbers using the Number Counter element

Written by Diego Muralles
Updated over a week ago

Adding an Image Card element

A pre-designed card with navigation controls to flip through multiple cards

Written by Diego Muralles
Updated over a week ago

Adding a Text Accordion

A component that organizes content within collapsable containers

Written by Lewis Bowen
Updated over a week ago

Adding a Stats Card

Written by Diego Muralles
Updated over a week ago

Adding a Text Card element

A pre-designed card with navigation controls to flip through multiple cards

Written by Lewis Bowen
Updated over a week ago

Adding a Scroll to Top addon

Transitions the page's scroll position to the top of the page

Written by Diego Muralles
Updated over a week ago

Adding a Slideshow

Feature a slideshow gallery of all your chosen images

Written by Diego Muralles
Updated over a week ago

Adding a Labeled Image

Add clickable hotspots to an image that trigger an assigned element to pop up.

Written by Lewis Bowen
Updated over a week ago

Adding a Card Slider

A carousel-style layout of cards is effective for concisely presenting a collection of items

Written by Diego Muralles
Updated over a week ago

Adding a Tab Accordion

A vertically stacked list of items where one item is expanded into a panel at a time

Written by Diego Muralles
Updated over a week ago

Adding a Video Hover element

Switch to a different video background and text caption when the user hovers over the element

Written by Diego Muralles
Updated over a week ago

Adding an Image Carousel

Learn how to add and customize a sliding gallery of image tiles

Written by Lewis Bowen
Updated over a week ago

Adding Share Buttons

Add and customize social sharing icons to your Vev project

Written by Layal Hasrouni
Updated over a week ago

Adding a 3D object element

Add a 3d object to any design and let users play and interact with it directly on the page

Written by Tiril Uggerud
Updated over a week ago

Adding Charts

Add, customize, and style charts directly on your canvas. Display data and build out infographic content

Written by Diego Muralles
Updated over a week ago

Adding a Video Carousel

Sliding gallery of tiles, each containing a video and a title

Written by Diego Muralles
Updated over a week ago

Adding Audio Players

Bring a memorable soundscape to your Vev projects

Written by Diego Muralles
Updated over a week ago

Adding an image compare element

Reveal images with an image comparison slider in Vev

Written by Diego Muralles
Updated over a week ago

Adding fonts in Vev

How to add Google, Adobe, or custom fonts to your workspace or project

Written by Diego Muralles
Updated over a week ago

Adding text elements

Learn how to add text styles and markups to your project

Written by Diego Muralles
Updated over a week ago

Adding Google Maps

Showcase the location of your business or event

Written by Diego Muralles
Updated over a week ago

Adding a Typewriter element

Alternate through a list of custom phrases in a mock-typewriter fashion.

Written by Diego Muralles
Updated over a week ago

Using Animated Words

Animate and customize words in your Vev project

Written by Diego Muralles
Updated over a week ago

Adding a video

Bring movement to your project with video

Written by Layal Hasrouni
Updated over a week ago

Using Animated Letters

Animate and customize your copy

Written by Diego Muralles
Updated over a week ago

Adding Images

Add and style your images.

Written by Diego Muralles
Updated over a week ago

Adding a Lottie animation

Add and customize a Lottie animation on your canvas

Written by Yujin
Updated over a week ago

Adding Link Buttons

Link to internal project pages and elements or an external URL

Written by Diego Muralles
Updated over a week ago

Adding shapes and icons

Add preset shapes or custom SVGs to your project

Written by Tiril Uggerud
Updated over a week ago

Adding frames to elements

Group your elements in a frame to keep them organized.

Written by Lewis Bowen
Updated over a week ago

Adding a Sticky Background section

Written by Diego Muralles
Updated over a week ago

Adding a Multilayer Parallax section

Create a staggered parallax effect by adding multiple layers of a background and foreground image.

Written by Diego Muralles
Updated over a week ago

Adding a Video Scroll section

Add a video that plays are users scroll

Written by Lewis Bowen
Updated over a week ago

Adding an Expandable section

Written by Diego Muralles
Updated over a week ago

Adding a Horizontal Scroll section

Written by Diego Muralles
Updated over a week ago

Adding a Flourish Scroll Stories section

Written by Diego Muralles
Updated over a week ago

Adding a Scrollytelling JWPlayer section

Written by Diego Muralles
Updated over a week ago

Adding a Scrollytelling Video

Written by Diego Muralles
Updated over a week ago

Adding a Scrollytelling Image

Make your sections' backgrounds fade into one another as the user scrolls down the page

Written by Diego Muralles
Updated over a week ago

Adding a Section

Add and customize a Section, the basic building block in Vev.

Written by Diego Muralles
Updated over a week ago

Adding a Sticky Animation addon

Stick an element to the users view and animate it.

Written by Diego Muralles
Updated over a week ago

Adding an Animation addon

Written by Diego Muralles
Updated over a week ago

Adding a Show/Hide Widgets addon

Create custom triggers that make the target element visible when clicked.

Written by Diego Muralles
Updated over a week ago

Adding a Sticky Position addon

Pin an element to your page and set how long it should stick.

Written by Diego Muralles
Updated over a week ago

Adding an Alignment addon

Set the alignment of your elements to the right or left of the viewport.

Written by Diego Muralles
Updated over a week ago

Adding a GTM Event on Click addon

Written by Diego Muralles
Updated over a week ago

Adding a Tab Ident addon

Adds a Tab indent to the beginning of your text elements.

Written by Diego Muralles
Updated over a week ago

Adding an Isometric View addon

Add a 3d transformation to your elements.

Written by Diego Muralles
Updated over a week ago

Adding a Scroll Speed addon

Allows you to control how reactive an element's position is to page scrolling.

Written by Diego Muralles
Updated over a week ago

Adding a Scroll Zoom addon

Control the zoom of an element by the amount that it has scrolled up the view.

Written by Diego Muralles
Updated over a week ago

Adding a Snap To addon

Take the users to the position of the element the addon is attached to as soon as soon as it comes into view

Written by Diego Muralles
Updated over a week ago

Adding a Zoom addon

Expands the clicked element to fill the screen.

Written by Diego Muralles
Updated over a week ago

Adding a Tooltip addon

Displays an informative pop-up when the target element is hovered.

Written by Diego Muralles
Updated over a week ago

Adding a Hide Until addon

Hide an element until a certain amount of time has passed in seconds or until a specific date is reached.

Written by Diego Muralles
Updated over a week ago

Adding a Hide Overflow addon

Hide the content of the container that extends over the container's width and height limits.

Written by Diego Muralles
Updated over a week ago

Adding Mouse Move Parallax addon

Move the position of an element in relation to the cursor's movement.

Written by Diego Muralles
Updated over a week ago

Adding a Link addon

Turn any element into a clickable link

Written by Diego Muralles
Updated over a week ago

Adding a Lazy Load Content addon

Elements will not be loaded until they are close to entering the view.

Written by Diego Muralles
Updated over a week ago

Adding GTM Event on Visible addon

Written by Diego Muralles
Updated over a week ago

Adding an Anchor Link addon

Use the Anchor Link addon to add named links such as your.site/#about-us to jump to the About Us section of your content

Written by Diego Muralles
Updated over a week ago

Creating and managing design styles

Set and organize shared styles across elements and mass update in one click

Written by Diego Muralles
Updated over a week ago

Setting up navigation & menus

Add and customize menus and navigation to your canvas

Written by Lewis Bowen
Updated over a week ago