Frames are a powerful tool for grouping elements in Vev to keep your design organized and responsive. Unlike sections, which are full-width and work within a safe zone, frames are more flexible containers for your design elements.
Frames are a multi-functional tool used to group items together, define responsive containers, and even create basic shapes.
Adding a Frame
You can create a frame using two primary methods:
Top Bar Navigation: Select the Frame icon from the top bar navigation.
Keyboard Shortcut: Press the [F/R] key on your keyboard.
Once the frame tool is selected, you can click-and-drag directly onto the canvas to specify the desired size and position of the new frame.
To add a frame, you need to group existing elements together. Follow these steps:
Select your elements: Click on the elements you want to group together. You can hold down the Shift or Command/CTRL key to select multiple elements.
Group the elements: Right-click on the selected elements and choose "Group" from the context menu. Alternatively, you can use the keyboard shortcut: Command + G.
Your selected elements will now be contained within a new frame.
Styling a Frame
You can customize the appearance of a frame using the Styles Panel on the right side of the editor. The panel provides a variety of options for styling:
Size: Manually set the width and height of the frame to fit your design.
Background: Add a color fill, a gradient, or an image as the background.
Padding: Adjust the spacing inside the frame to create a buffer between the frame's edges and its content.
Border: Customize the border's color, thickness, and opacity.
Border Radius: Round the corners of your frame for a softer look.
Effects: Apply special effects like shadows or blur to the frame.
Tip: For a consistent look across multiple frames, you can use Shared Styles to easily apply the same styling.
Making Frames Responsive
Frames are an excellent tool for building responsive designs that adapt to different screen sizes, such as desktop, tablet, and mobile. To ensure your frames are responsive, follow these best practices:
Design for each screen size: Adjust the layout and element placement of each frame for a specific screen size.
Resize and reposition: Manually resize and reposition the elements within the frame as needed for different breakpoints.
Use constraints: Apply constraints to keep elements aligned and correctly positioned within the frame as its size changes.
Use flexible sizing: Utilize pixel, percentage, or viewport sizing (e.g., setting an image to 100% width) for elements to ensure they respond flexibly to changes in screen size.
For more information on how the editor works and reacts to responsiveness, refer to the best practices articles.
Managing Elements Within a Frame (Nesting)
Once a frame is on your canvas, you can nest other elements inside it to create groups and establish a hierarchical relationship. This process of placing elements inside a frame is called nesting.
Understanding Parent-Child Relationships
When an element is nested, the frame becomes the parent, and the element inside is the child.
Layers Panel: This relationship is visible in the Layers panel, where child elements are indented beneath their parent frame.
Methods for Adding Elements to a Frame
There are several ways to nest an element within a frame:
Draw Directly Into a Frame: Select your desired element tool from the top-bar navigation or the Add menu. Then, draw the new element directly inside the borders of the existing parent frame.
Move an Existing Element on Canvas: Select an element that's already on the canvas and click-and-drag it into the desired parent frame. You must hold the [⌘] key (Mac) or [CTRL] key (Windows) while dragging the element over the parent frame to ensure it nests.
Manage in the Layers Panel: In the Layers panel, click and drag any element's layer directly onto a frame layer. A white outline will appear on the frame to indicate the successful nesting location.
Selecting Nested Elements
To select a child element nested inside a frame:
Double-Click: A single click selects the parent frame. Double-click on the nested element to "drill down" and select the child element inside.
Direct Selection Shortcut: Hold [⌘] (Mac) or [CTRL] (Windows) and click on the element. This bypasses the parent and instantly selects the targeted child element.
Layers Panel: You can also select any element directly from the Layers panel.
Moving Elements Out of a Frame (Un-nesting)
By default, dragging a child element visually outside the frame's borders does not remove it from the group; it remains a child in the Layers panel. To un-nest (remove) the element, you must do one of the following:
On the Canvas: Hold [⌘] (Mac) or [CTRL] (Windows) while dragging the child element away from the parent frame.
In the Layers Panel: Click and drag the indented child layer out of its parent frame's layer group.
Grouping Existing Elements into a Frame
You can instantly create a frame by grouping existing elements on your canvas. This frame will be created with a transparent background.
Selecting Multiple Elements
First, select all the elements you want to group. This can include other frames. Use one of these methods:
Canvas (Shift-Click): Select one element, then hold [SHIFT] and click on any additional elements.
Canvas (Marquee Select): Click and drag your cursor to draw a selection box around the elements.
Layers Panel: Hold [⌘] (Mac) or [CTRL] (Windows) and click on each element's layer in the panel.
Creating the Group
Once your elements are selected, group them in one of two ways:
Keyboard Shortcut: Press [⌘G] (Mac) or [CTRL G] (Windows).
Right-Click Menu: Right-click on your selection and choose Group.
A new parent-child structure will be created, visible in the Layers panel, with the new frame acting as the parent.
Layer Stacking Order
Inside a frame, elements are stacked based on their order in the Layers panel:
Elements higher in the Layers panel are in the foreground (on top).
Elements lower in the Layers panel are in the background (behind).
Positioning and Sizing Constraints
A child element's position and size are relative to its parent frame, not the entire canvas or artboard. For instance, a child element set to 50% width will be 50% of the parent frame's width.
Styling and Customizing a Frame
When a frame is selected, its styling options appear in the Style panel on the right-hand side of the interface.
Style Properties: Like other elements, you can apply properties such as Background color, Border, Border-Radius, and other styling options.
Spacing: You can control internal and external spacing using Padding (space inside the frame) and Margin (space outside the frame).
Clipping Content (Overflow Management)
The Clipping feature manages element overflow by hiding any part of a child element that extends visually beyond the frame's defined borders.
How to Enable Clipping
Select the frame.
Navigate to the Style panel on the right-hand side, and under the Layout section, find the Clipping option.
Within the dropdown, select Clip Overflow to hide any content that extends outside the frame's boundaries.
You can also use this dropdown to clip the frame's content into various shapes.
Resizing Frames
You can adjust the size of a frame by dragging its handles on the canvas or by entering specific values in the Style panel.
Dynamic Scaling
Child elements within the frame that use percentage-based sizing will scale dynamically (proportionally) relative to the parent frame's changing dimensions.
Important Note: If you move an object outside of the frame, it will still show visually unless you have the Clipping Content option selected for that frame.
Resize to Fit Option
You can easily resize the frame to precisely contain all its child components by selecting the Resize to fit option in the Style panel. The frame's boundaries will automatically adjust to the furthest extent of its nested elements.