The Design Editor

Tiril Uggerud avatar Halit Kendigül avatar Yujin avatar +3
96 articles in this collection
Written by Tiril Uggerud, Halit Kendigül, Yujin and 3 others

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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Meet the Design Editor

In this lesson, you will learn the basics of the Design Editor
Diego Muralles avatar
Written by Diego Muralles
Updated this week

Creating projects in Vev

Learn how to create, structure, and manage a project in the Design & Content editors
Diego Muralles avatar
Written by Diego Muralles
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.
Diego Muralles avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Guides & Grids

Use helpful tools like guides and grids to design and build your content
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Pinning an element

Pin elements position to the user's view
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Main Components

Learn how to create and manage main components
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Figma Import

Transform Figma files into functional sites in a click
Diego Muralles avatar
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
Yujin avatar
Written by Yujin
Updated over a week ago

Project settings

This is where you find the non-design related settings to your projects, such as integrations, export, meta data etc.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Pages

Diego Muralles avatar
Written by Diego Muralles
Updated this week

SEO and Social Sharing

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago
Elements

Adding Forms

Add a simple form to your project using the Embed Anything element.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

3D Image Carousel

A slick and dynamic take on traditional image carousels
Halit Kendigül avatar
Written by Halit Kendigül
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Hover Gallery

Bringing light-touch interactivity to a classic slideshow format
Halit Kendigül avatar
Written by Halit Kendigül
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Fan Menu

Learn how to add and customize a Fan Menu element
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Standard Menu

Learn how to add and customize a Standard Menu element
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Burger Menu

Learn how to add and customize a Burger Menu element
Diego Muralles avatar
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.
Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Add an Embed Anything element

Embed code from an external platform
Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Adding a Flourish element

Embed your custom data visualizations made with Flourish Studio
Lewis Bowen avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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.
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding an Instagram element

Embed your Instagram posts into your Vev project
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Number Counter element

Animate counting numbers using the Number Counter element
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Text Accordion

A component that organizes content within collapsable containers
Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Adding a Stats Card

Diego Muralles avatar
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
Lewis Bowen avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Slideshow

Feature a slideshow gallery of all your chosen images
Diego Muralles avatar
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.
Lewis Bowen avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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
Diego Muralles avatar
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
Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

Adding Share Buttons

Add and customize social sharing icons to your Vev project
Layal Hasrouni avatar
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
Tiril Uggerud avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Video Carousel

Sliding gallery of tiles, each containing a video and a title
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding Audio Players

Bring a memorable soundscape to your Vev projects
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding an image compare element

Reveal images with an image comparison slider in Vev
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding text elements

Learn how to add text styles and markups to your project
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding Google Maps

Showcase the location of your business or event
Diego Muralles avatar
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Using Animated Words

Animate and customize words in your Vev project
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a video

Bring movement to your project with video
Layal Hasrouni avatar
Written by Layal Hasrouni
Updated over a week ago

Using Animated Letters

Animate and customize your copy
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding Images

Add and style your images.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Lottie animation

Add and customize a Lottie animation on your canvas
Yujin avatar
Written by Yujin
Updated this week

Adding Link Buttons

Link to internal project pages and elements or an external URL
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding shapes and icons

Add preset shapes or custom SVGs to your project
Tiril Uggerud avatar
Written by Tiril Uggerud
Updated over a week ago

Adding frames to elements

Group your elements in a frame to keep them organized.
Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago
Element and Section Addons

Adding a Sticky Animation addon

Stick an element to the users view and animate it.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding an Animation addon

Diego Muralles avatar
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.
Diego Muralles avatar
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.
Diego Muralles avatar
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a GTM Event on Click addon

Diego Muralles avatar
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding an Isometric View addon

Add a 3d transformation to your elements.
Diego Muralles avatar
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.
Diego Muralles avatar
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.
Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Zoom addon

Expands the clicked element to fill the screen.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Tooltip addon

Displays an informative pop-up when the target element is hovered.
Diego Muralles avatar
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.
Diego Muralles avatar
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.
Diego Muralles avatar
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding a Link addon

Turn any element into a clickable link
Diego Muralles avatar
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.
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Adding GTM Event on Visible addon

Diego Muralles avatar
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
Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago