Rows are great features for structuring your content and creating visually appealing layouts. By dividing your page into rows, you can easily organize elements into columns, ensuring a clean and professional design. Whether you're building a simple page or a complex layout, rows provide the flexibility to customize your content to suit your needs. Let’s explore how to add and customize rows to enhance your page’s structure and aesthetics.
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 desired column layout from the available options. The selected row will appear in your workspace, outlined with a blue border to indicate its boundaries.
From here, you can start adding elements and customizing your layout. Rows are highly versatile—you can create multiple rows within a section or add various elements to a single row. This flexibility allows you to 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 organization. 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 center to ensure your content is balanced and visually appealing.
Background Color
Customize the background color of your row by selecting a color from the palette or entering a custom color code. This feature allows you to 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 are great for static designs, while video backgrounds add dynamic movement. This feature 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 color lets you choose a hue that complements your design. You can use custom color codes for precise customization.
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 optimized for every platform.
Custom Class
Enhance your row’s functionality and appearance by adding a custom class. This feature allows you to apply unique styling or behavior 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 leveraging their customization options—from alignment and spacing to borders and shadows—you can design layouts that are both functional and aesthetically pleasing. Whether you’re organizing content into columns or experimenting with advanced settings, rows provide the flexibility and control needed to bring your creative vision to life.
11/7/25 Ext