Skip to main content

Frame

Group your elements in a frame to keep them organized.

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated over 2 weeks ago

Frames help keep your design organized and responsive. Unlike sections that stretch full-width, and are pre-defined to work within the safe zone of the canvas (set at 1024 px width).

Adding frames to elements in Vev

Tip: Not sure what is a section vs. an element? Check out the lesson on the Anatomy of a project.

How to Add a Frame

  1. Select your elements.

  2. Right-click and choose “Group” or use the shortcut Command + G.

Your elements are now inside a frame!

Styling a Frame

In the Styles Panel, you can customize your frame:

  • Size – Set the width and height

  • Background – Add a color, gradient, or image

  • Padding – Space inside the frame

  • Border – Adjust color, thickness, and opacity

  • Border Radius – Round the corners

  • Effects – Add shadows or blur

You can use Shared Styles to apply the same look to multiple frames easily.

Making Frames Responsive

Frames can adjust based on screen size (desktop, tablet, mobile):

  • Design each frame for a specific screen size

  • Resize and reposition elements as needed

  • Use constraints to keep things aligned

  • Use pixels, percentages, or viewport sizing (like setting an image to 100% width) for flexible layouts

You can also take a look at the best practices articles that help you understand how the editor works and reacts.

Did this answer your question?