Navigating the Design Editor

Learn how to browse and add components from the Add Menu.

Adding Components

Iselin Ekornes

Jørgen Wigum Lurvik

Halit Kendigül

Learn how to use features in the design editor 

The Design Editor

Projects, Pages, Sections, Frames, Elements, Interactions and Animations

Structure of the building blocks

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

Section

Group your elements in a frame to keep them organized.

Frame

Learn how to add text styles and markups to your project

Text

Get an overview of how you can manage your project assets.

Project images, videos, and shapes

Learn how to manage and style your images

Image

Bring movement to your project with video

Video

Add preset shapes or custom SVGs to your project

Shapes and icons

Design Tools

Get an overview of the right-side style tab and its features.

Style Tab Overview

Create responsive content with padding and margins

How to add spacing

How to add effects

How to use style indicators

Learn how to manage and integrate Google, Adobe, self-hosted, and custom fonts

Managing Fonts

Creating custom button

Diego Muralles

Style and Layout

Global headers and footers are sections that can be applied to all pages on your site.

Global Header & Footer

Learn how to create, edit, and manage variables for a consistent and streamlined design.

Setting up and managing Variables

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

How to use shared styles

Learn how to create and manage Main components.

Understanding Main Components

Reusable Design

Lewis Bowen

Vev Library

Bring a memorable soundscape to your Vev projects.

Audio elements

Add and customize a Lottie animation on your canvas.

LottieFiles

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

Typewriter

Slider

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

Image Carousel

A slick and dynamic take on traditional image carousels

3D Image Carousel

Feature a slideshow gallery of all your chosen images

Slideshow

Bringing light-touch interactivity to a classic slideshow format

Hover Gallery

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

Video Carousel

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

Image Card

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

Card Slider

Text Card

A component that organizes content within collapsable containers

Text Accordion

Stats Card

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

Charts

Animate counting numbers using the Number Counter component.

Number Counter

Embed your custom data visualizations made with Flourish Studio.

Flourish

Reveal images with an image comparison slider in Vev

Image Compare

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

Tab Accordion

Video Hover

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

Labeled Image

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

Fullscreen

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

3D Object

Create unique 3D experiences in Vev by embedding Spline.

Spline

Learn how to add and customize a Fan Menu component

Fan Menu

Learn how to add and customize a Burger Menu component

Burger Menu

Learn how to add and customize a Standard Menu Component

Standard Menu

Learn how to add and customize a Page Tile Menu component

Page Tile Menu

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

Arrow Key Navigation

Link to internal project pages and elements or an external URL

Link Button

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

Scroll Progress Bar

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

Quiz Questions

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

Quiz Submit Button

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

Multiple Choice

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

Forms

Embed HubSpot forms directly into your Vev project.

HubSpot form

Typeform

Embed Mailchimp Forms into your Vev projects.

Mailchimp

Google Form

Add and customize social sharing icons to your Vev project

Share Button

Embed your Instagram posts into your Vev project.

Instagram

Showcase the location of your business or event

Google Maps

Embed Anything

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

iFrame

Bring ready-made Common Ninja widgets into your Vev projects

Embed widgets from Common Ninja

Learn how to configure Youtube, Vimeo, and JW Player components.

Add a video from a third-party source

You can add the Rive component to embed motion graphics that respond to different states and user inputs in your Vev project.

Rive

Use an Image parallax section to add the motion effect to your images

Image Parallax Section

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

Multilayer Parallax section

Add a video that plays as the user scrolls

Video Scroll

Expandable section

Horizontal Scroll

Sticky Background section

Scrollytelling JWPlayer section

Tell beautiful scroll-based image stories

Scrollytelling Image

Elements

Copy content, view changes, or restore pages of an earlier project version

How to use version history

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