When building in Vev, it’s important to maintain a consistent structure in your designs.
This structure—often referred to as the “anatomy” of a Vev project—is made up of six key building blocks:
Projects
Pages
Sections
Frames
Elements
Interactions and Animations
Together, these components form the foundation of every design in Vev. This article gives you an overview of how they work and connect. Each section below links to a more detailed guide for deeper understanding.
Projects
A Project represents the final experience you want to publish—whether it’s a website, landing page, or interactive story.
It serves as a container for all content, pages, and assets related to that experience.
Key Features of a Project
Holds all pages, assets, and settings
Supports global configurations, such as fonts, colors, hosting, and integrations
Enables collaboration among multiple users
Can include shared components and styles across all pages
Pages
Pages represent the individual screens or views within a project.
Each page can have its own unique design while maintaining consistent branding and behavior through shared project settings.
Key Features of Pages
Contains multiple Sections
Inherit global styles and settings from the Project
Can be given unique configurations (like metadata or URL paths)
Help structure the overall navigation and flow of your website
Sections
A Section divides a page into horizontal or vertical content areas.
Sections help organize your layout and improve usability by grouping related content together.
Key Features of Sections
Act as layout containers for Frames and Elements
Control scrolling behavior and background properties
Support parallax effects, fixed backgrounds, and animation triggers
Make it easier to manage large or long-scrolling pages
Frames
Frames are flexible containers within Sections that help you arrange and align content responsively.
They are one of the most powerful tools in Vev for creating structured layouts.
Key Features of Frames
Contain Elements such as text, images, or videos
Support nesting, allowing complex, layered designs
Adapt to different screen sizes for responsive design
Help you manage alignment, positioning, and spacing
Elements
Elements are the fundamental components that make up your design—everything visible or interactive on your page.
These include text, images, videos, and shapes, among others.
Key Features of Elements
Can be styled, resized, and positioned freely within Frames or Sections
Form the visual and interactive content of your design
Organized in the Add Menu, where they are grouped into categories
Interactions & Animations
Interactions and Animations bring your design to life by making elements move, react, and engage users.
They help create a sense of flow and interactivity throughout your project.
Key Features of Interactions & Animations
Define how elements respond to user actions (like clicks, hovers, or scrolls)
Add motion and visual transitions such as fades, slides, or transforms
Enhance user experience and engagement
Can be applied to individual elements or entire sections
Design Tools
In addition to structural components, Vev offers essential design tools that help you create visually compelling and cohesive projects. These tools include Text, Images, Videos, and Shapes.
Text
Text is used to convey information and enhance the visual hierarchy of your project.
Customize fonts, sizes, colors, and spacing
Combine different typography styles for clarity and design impact
Position text freely within Frames and Sections
Images
Images are key to storytelling and visual engagement.
Upload, position, and resize images with precision
Use cropping and layering for dynamic layouts
Integrate images seamlessly with Sections and Frames
Videos
Videos create immersive and interactive experiences.
Embed videos directly into your design
Control autoplay, looping, and playback settings
Use videos as backgrounds or content elements
Shapes
Shapes add structure, decoration, and emphasis to your layouts.
Choose from rectangles, circles, or custom vectors
Adjust colors, opacity, and size to fit your design
Use shapes as dividers, highlights, or background accents
Every Vev project is built from these six core components—Projects, Pages, Sections, Frames, Elements, and Interactions & Animations—supported by Vev’s powerful Design Tools. Understanding how these parts fit together will help you design cleaner, more scalable, and visually engaging experiences.