Rows are useful for structuring your content and creating visually appealing layouts. By dividing your page into rows, you can organise elements into columns for a clean, professional design. Whether you're building a simple page or a complex layout, rows give you the flexibility to customise your content to suit your needs. Here's how to add and customise rows to improve your page's structure and appearance.
Adding a Row
To add a row to your page, click the "+" button located at the top left of your editor. Select "Rows" from the menu.
Choose the column layout you want from the available options. The row will appear in your workspace, outlined with a blue border to show its boundaries.
From here, you can start adding elements and customising your layout. Rows are highly versatile; you can create multiple rows within a section or add various elements to a single row. This flexibility lets you design pages that are both functional and visually engaging.
General Settings
Element Name
Each row can be assigned a unique name for easier navigation and organisation. The default name is displayed at the top of the editor, but you can rename it to better reflect its purpose or content.
Width
Control the size of your row by adjusting its width, which can range from 30% to 100%. A width of 100% means the row will span the entire section, while smaller widths allow for more creative layouts.
Align
If your row's width is less than 100%, you can adjust its alignment within the section. Choose to position it to the left, right, or centre to ensure your content is balanced and visually appealing.
Background Color
Customise the background colour of your row by selecting a colour from the palette or entering a custom colour code. This lets you create a cohesive design that aligns with your brand or page theme.
BG Media Type
The BG Media Type setting lets you choose between an Image or a Video background for your row. Image backgrounds work well for static designs, while video backgrounds add dynamic movement. This helps you create the right visual tone for your content.
BG Media
The BG Media setting is where you upload or select your background image or video. You can adjust its positioning, size, and repeat settings to fit your row perfectly. A well-chosen background enhances your row's visual appeal and engagement.
Style Settings
Margin and Padding
Adjust the spacing around and within your row using the margin and padding settings. Margin controls the space outside the row, while padding adjusts the space between the row's border and its content. These settings help you fine-tune the layout for optimal readability and design.
###
Border
Select a border type to highlight your row. Once you select any of the border types, the settings for the border pop up.
The configure:
- Border Style: The border style defines the line around your row, offering three options: solid, dashed, or dotted.
- Border Width: The border width controls the thickness of the border.
- Border Color: The border colour lets you choose a hue that complements your design. You can use custom colour codes for precise customisation.
- Border Radius: The border radius curves the edges of your row, softening its appearance. The larger the radius, the rounder your border will be
- Radius Edge: The radius edge lets you choose which corners to curve.
Box Shadow
This adds depth by applying a shadow around the Row.
Visibility
Control how your row appears on different devices. You can choose to make it visible on desktop, mobile, or both, ensuring your content is optimised for every platform.
Custom Class
Enhance your row's functionality and appearance by adding a custom class. This lets you apply unique styling or behaviour using custom CSS code. Simply enter your desired class name in the designated field.
CSS Selector
Easily copy the CSS Selector for your row to apply custom styles or modifications. Locate the copy icon next to the element's reference number and click to copy the code to your clipboard.
By making the most of the customisation options, from alignment and spacing to borders and shadows, you can design layouts that are both functional and visually polished. Whether you're organising content into columns or experimenting with advanced settings, rows give you the flexibility and control to bring your creative vision to life.