The anatomy of a project: Sections, Elements, Add-ons, and Frames

Components in Vev

Learn how to create and manage main components

Main Components

Adding dropshadows and blur effects to elements

Creating and managing effects

Diego Muralles

Lewis Bowen

Yujin

Articles on Sections, Elements, and Addons

Vev Components

Add and customize menus and navigation to your canvas

Setting up navigation & menus

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

Global Header & Footer (In Beta)

Section Headings

Adding a Sticky Background section

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

Adding a Multilayer Parallax section

Adding a Video Scroll

Adding an Expandable section

Adding a Horizontal Scroll section

Adding a Flourish Scroll Stories section

Adding a Scrollytelling JWPlayer section

Tell beautiful scroll-based video stories

Adding a Scrollytelling Video

Tell beautiful scroll-based image stories

Adding a Scrollytelling Image

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

Adding a Section

Sections

Pinning an element

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

Adding Forms

A slick and dynamic take on traditional image carousels

3D Image Carousel

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

Adding a Quiz Submit Button

Bringing light-touch interactivity to a classic slideshow format

Hover Gallery

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

Adding a Quiz Questions element

Learn how to add and customize a Fan Menu element

Adding a Fan Menu

Learn how to add and customize a Standard Menu element

Adding a Standard Menu

Learn how to add and customize a Burger Menu element

Adding a Burger Menu

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

Adding an Iframe element

Add an Embed Anything element

Embed your custom data visualizations made with Flourish Studio

Adding a Flourish element

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

Adding Arrow Key Navigation

Learn how to add and customize a Page Tile Menu element

Adding a Page Tile Menu

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

Adding a Multiple Choice element

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

Adding a Fullscreen element

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

Adding a Scroll Progress Bar

Embed your Instagram posts into your Vev project

Adding an Instagram element

Animate counting numbers using the Number Counter element

Adding a Number Counter element

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

Adding an Image Card element

A component that organizes content within collapsable containers

Adding a Text Accordion

Adding a Stats Card

Adding a Text Card element

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

Adding a Scroll to Top addon

Feature a slideshow gallery of all your chosen images

Adding a Slideshow

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

Adding a Labeled Image

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

Adding a Card Slider

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

Adding a Tab Accordion

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

Adding a Video Hover element

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

Adding an Image Carousel

Add and customize social sharing icons to your Vev project

Adding Share Buttons

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

Adding a 3D object element

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

Adding Charts

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

Adding a Video Carousel

Bring a memorable soundscape to your Vev projects

Adding Audio Players

Reveal images with an image comparison slider in Vev

Adding an image compare element

Learn how to add text styles and markups to your project

Adding text elements

Showcase the location of your business or event

Adding Google Maps

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

Adding a Typewriter element

Animate and customize words in your Vev project

Using Animated Words

Bring movement to your project with video

Adding a video

Using Animated Letters

Adding Images

Add and customize a Lottie animation on your canvas

Adding a Lottie animation

Link to internal project pages and elements or an external URL

Adding Link Buttons

Add preset shapes or custom SVGs to your project

Adding shapes and icons

Group your elements in a frame to keep them organized.

Adding frames to elements

Halit Kendigül

Elements

Stick an element to the users view and animate it.

Adding a Sticky Animation addon

Adding an Animation addon

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

Adding a Show/Hide Widgets addon

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

Adding a Sticky Position addon

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

Adding an Alignment addon

Adding a GTM Event on Click addon

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

Adding a Tab Ident addon

Add a 3d transformation to your elements.

Adding an Isometric View addon

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

Adding a Scroll Speed addon

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

Adding a Scroll Zoom addon

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

Adding a Snap To addon

Expands the clicked element to fill the screen.

Adding a Zoom addon

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

Adding a Tooltip addon

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

Adding a Hide Until addon

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

Adding a Hide Overflow addon

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

Adding Mouse Move Parallax addon

Adding a Link addon

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

Adding a Lazy Load Content addon

Adding GTM Event on Visible 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