In this comprehensive guide, you'll learn everything about the Frame in Grigora. Frames are the building blocks of flexible section layouts, allowing you to organize content into structured areas and control alignment, spacing, sizing, styling, and responsive behavior for professional-looking websites.
Adding a Frame
To add a new Frame, use the + Add section button available at the top or bottom of an existing section in the Grigora editor.
Clicking + Add section opens the section layout selection window, where you can choose from a variety of predefined column layouts.
You can choose from a variety of predefined layouts, including:
Single-column layouts
Equal-width multi-column layouts
Unequal column layouts
Custom-width layouts
Each selected layout automatically creates the required Frames within the section.
For example, selecting a two-column layout creates two Frames that can be independently customized and used to organize your content.
Each Frame acts as an individual content area within the section. You can add elements to each Frame and customize its layout, size, spacing, styling, and other properties independently.
Accessing Frame Settings
Select a Frame in the editor to open its settings panel. The settings panel provides comprehensive controls for customizing the Frame's layout, dimensions, appearance, links, animations, and positioning.
General Settings Configuration
Layout Control
The Layout settings allow you to control how content inside the Frame is arranged and aligned.
Direction
Choose the direction in which elements inside the Frame are arranged:
Row: Arranges elements horizontally.
Column: Arranges elements vertically.
This allows you to create either horizontal or vertical content layouts within the Frame.
Align
Control the horizontal alignment of elements inside the Frame.
You can align content to the:
Start
Center
End
Space Between
Space Around
These alignment options help you create consistent and balanced layouts within each Frame.
Vertical Align
Control the vertical positioning of content inside the Frame.
You can position content at different vertical positions within the available Frame space, making it easier to create properly aligned layouts.
Wrap
Control whether elements inside the Frame should remain on a single line or wrap onto additional lines when there is not enough available space.
No Wrap: Keeps elements on a single line.
Wrap: Allows elements to move onto additional lines.
This is particularly useful for creating responsive layouts that adapt to different screen sizes.
Size & Space
The Size & Space settings provide precise control over the Frame's dimensions and spacing.
Gap Between Columns
Control the spacing between Frames within the section.
You can specify the gap using different units to create consistent spacing between columns while maintaining control over responsive layouts.
Width
Set the width of the Frame using a specific value and supported units.
You can also drag the resize handle between Frames to adjust their widths directly within the editor. As you drag the handle, the width of the adjacent Frames is updated, allowing you to quickly create custom column proportions without manually entering values.
For example, you can resize Frames to create layouts such as:
25% / 75%
33% / 67%
40% / 60%
50% / 50%
This makes it easy to visually adjust the proportions of your Frames and create layouts that match your design requirements.
Margin
Apply external spacing around the Frame.
You can link the margin values to apply the same spacing to all sides or unlink them to control each side independently.
Padding
Apply internal spacing between the Frame's boundary and the content inside it.
Padding values can also be linked or unlinked, allowing you to create precise spacing on individual sides.
Style Settings
The Style settings allow you to customize the visual appearance of each Frame independently.
Background Options
Customize the background of the Frame to create visually distinct content areas.
Color
Apply a solid background color to the Frame for clean and simple designs.
Image
Use an image as the Frame's background to create visually rich layouts.
Background Overlay
Apply a global overlay to the Frame background to improve contrast and enhance the appearance of background images.
Border and Visual Enhancement
Border
Add a border around the Frame to visually separate it from surrounding content.
Border Radius
Adjust the border radius to create rounded corners on the Frame. You can use the slider or enter a specific value for precise control.
Box Shadow
Add a box shadow to the Frame to create depth and visual separation from surrounding content.
These styling options can be combined to create cards, content panels, highlighted areas, and other visually distinct layouts.
Link Functionality
Frames can also be made clickable using the Link settings.
URL
Enter the destination URL for the Frame. You can also use the Dynamic option to connect the link to dynamic content.
Open in New Tab
Enable this option to open the linked destination in a new browser tab.
Remove Link Decoration
Remove the default link decoration when the Frame is used as a link.
This allows the entire Frame to function as a clickable area without applying traditional link styling to its content.
Animation and Effects
The Animations settings allow you to add dynamic visual effects to Frames and control how they appear or respond to user interactions.
Trigger
Choose when the animation should be activated:
None: Disables animation.
Entrance: Plays the animation when the Frame enters the page.
On Scroll: Triggers the animation as the Frame comes into view while scrolling.
On Hover: Triggers the animation when a visitor hovers over the Frame.
Infinite: Continuously repeats the selected animation.
Effect
Choose the visual effect applied to the Frame when the animation is triggered.
Available effects include:
Fade In
Slide In
Bounce In
Rotate In
Roll In
Zoom In
Flip In
Flash
Direction
For supported animation effects, choose the direction from which the animation occurs.
Available directions include:
In Place
From right
From left
From bottom
From top
Duration
Control how long the animation takes to complete. Adjust the duration to create faster or slower animation effects.
Delay
Set a delay before the animation begins. This allows you to control when the animation starts after its selected trigger is activated.
Preview
Use the Preview button to preview the selected animation before applying it to your design.
Advanced Settings
Positioning
The Position settings allow you to control the placement of the Frame within the surrounding layout.
Use positioning controls when you need more precise control over where a Frame appears within its parent section.
Sticky Behavior
The Sticky settings allow you to keep a Frame fixed within the viewport while the visitor scrolls.
Sticky behavior can be useful when you want specific content to remain visible while the user scrolls through the page.