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 five main components: Sections, Frames, Elements, Add-ons, and Interactions. In this article, we will explain what each of these components is, and how they fit together to create a cohesive design.

Sections are the foundation of your design – You can't build in Vev without them. Simply put, sections are full-width components that extend the entire width of the browser. Sections are able to house additional components inside of them, such as elements or frames.

Within the layer panel on the left-hand side of the editor, you’ll see the contents of your page broken down into sections. You can use this to easily rearrange the content of your page.

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. Frames can house a group of elements (or other frames) inside of them.

Frames with components inside of them will show an indent within the layers panel, allowing you to open them out and view the contents inside.

Frames can also be used on their own to create rectangles, squares or lines in your design!

Elements are widgets that sit within your sections or frames and can be anything from a simple text box to an interactive chart. There is a large variety of different components within the add menu, separated into different categories to help you find the right tool for the job.

Finally, we have add-ons and interactions. These features can breathe life into your design with options like animations and scroll speeds. Addons are enhancements that you can apply to your elements for additional functionality.

Interactions are features like clicking, scrolling, or hovering to add interactivity and can significantly enhance the user experience and increase reader engagement.