Adding a frame to elements

Styling a frame

Using frames for responsive design

Frames are a great way to keep your elements organized within a section. They are also a great way to implement responsive designs to your projects. While sections extend to the full width of the design, frames 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.

🖼 Adding a Frame to elements

  • Select your elements

  • Right-click them

  • Select Group

The elements are now wrapped in a frame.

Adding a Frame to elements

🎨 Styling a frame

Choose from a variety of options to style and customize a frame. You'll find these options in the styles panel as listed below.

  • Size: Set your desired dimensions for your frame, make sure to also set the size of the elements that live within the frame

  • Background: Choose a fill color, gradient color, or background image

  • Padding: add padding to your frame evenly on all sides or mix them

  • Border: Set a border color, opacity, and line weight

  • Border Radius: Curve the radius of the border, make sure to also set the border radius of elements

  • Effects: Add different types of shadows or blur effects. Learn more about effects

    Styling a frame

Note: You can go even further and use Shared Styles for one-click updates.

𝌮 Using Frames for responsive design

In order to design your frame to be responsive per breakpoint and device type, you will need to adapt the design of the frame and elements to desktop, tablet, and mobile.

Using Frames for responsive design

Believe it or not, it's easier to adapt the design of your frame per breakpoint before duplicating it since the frame will carry over the adaptive design.


To adapt your frame:

  • Design and reposition the elements within your frame and adjust them to the specific breakpoint or device type. For example, the desktop frame (shown above) is set at 330px width by 400px height. On a tablet, the frame is reduced to 280px by 350px

  • Use constraints to ensure the frames stay aligned within certain breakpoints

  • Pixels and percentages can be used effectively for frames and elements. For instance, the desktop frame (shown above) is set at 330px width by 400px height but the image and text element inside are set at 100% width and 50% height


Desktop

Using Frames for responsive design (Desktop)

Tablet

Using Frames for responsive design (Tablet)

Mobile

Using Frames for responsive design (Mobile)

FAQs

How can I make the elements inside my frame responsive? In this case, we recommend making the elements % based. They will adapt much better to each layout.

Did this answer your question?