All Collections
The Design Editor
Building blocks
Structure of the building blocks
Structure of the building blocks

Sections, Elements, Add-ons, and Frames

Nina avatar
Written by Nina
Updated over a week ago

When building in Vev, it's important to maintain a consistent structure in your designs. This structure, or "anatomy" as we like to call it, is made up of four main components: Sections, Elements, Add-ons, and Frames. In this article, we will explain what each of these components is, and how they fit together to create a cohesive design.

Sections

Sections are fundamental to your design – You can't build in Vev without them. Put simply, sections are full-width components that can extend the entire browser window as opposed to frames and elements which are only contained within the safe zone.

<a href="https://downloads.intercomcdn.com/i/o/521618424/ee420ae3203c572b85d9d709/image.png" target="_blank" rel="nofollow noopener noreferrer">https://downloads.intercomcdn.com/i/o/521618424/ee420ae3203c572b85d9d709/image.png</a>

Elements

Elements are the building blocks of your canvas such as text, images, buttons, and more. They are essentially widgets that sit within your sections and can be anything from a simple text box to an interactive chart.

<a href="https://downloads.intercomcdn.com/i/o/521622196/d5fe03f384af0e948a5eff06/image.png" target="_blank" rel="nofollow noopener noreferrer">https://downloads.intercomcdn.com/i/o/521622196/d5fe03f384af0e948a5eff06/image.png</a>

Add-ons

Breathe life into your design and content with options like animations and scroll speeds. Add-ons are enhancements that you can apply to your elements for additional functionality.

<a href="https://downloads.intercomcdn.com/i/o/521624500/c37c04830dda4c9003ea1692/image.png" target="_blank" rel="nofollow noopener noreferrer">https://downloads.intercomcdn.com/i/o/521624500/c37c04830dda4c9003ea1692/image.png</a>

Frames

Frames are meant to organize and contain elements in order to make responsive design easier; they essentially segment your designs into smaller groups and can also function as a design tool to create more immersive and interactive behavior.

<a href="https://downloads.intercomcdn.com/i/o/521620865/5447c4b5a8b5a334bab7eb7a/image.png" target="_blank" rel="nofollow noopener noreferrer">https://downloads.intercomcdn.com/i/o/521620865/5447c4b5a8b5a334bab7eb7a/image.png</a>

Did this answer your question?