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 are building a simple page or a complex layout, rows provide the flexibility to customize your content to suit your needs. Let us 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. You can configure:

• Border Style: Defines the line around your row, offering three options: solid, dashed, or dotted.
• Border Width: Controls the thickness of the border.
• Border Color: Lets you choose a hue that complements your design. You can use custom color codes for precise customization.
• Border Radius: Curves the edges of your row, softening its appearance. The larger the radius, the rounder your border will be.
• 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 are organizing content into columns or experimenting with advanced settings, rows provide the flexibility and control needed to bring your creative vision to life.

Frequently Asked Questions #

How do I add a row to my page? #

Click the “+” button at the top left of the editor, select “Rows,” and choose a column layout. The row appears in your workspace with a blue border.

What width can a row have? #

A row’s width can range from 30% to 100%. At 100% it spans the entire section, while smaller widths enable more creative layouts.

Can I use an image or video as a row background? #

Yes. The BG Media Type setting lets you choose an Image or Video background, and BG Media is where you upload or select the media.

How do I align a row that is narrower than the section? #

If the row’s width is less than 100%, use the Align option to position it left, right, or center within the section.

Can I hide a row on certain devices? #

Yes. The Visibility setting lets you make a row visible on desktop, mobile, or both.

How do I apply custom styling to a row? #

Add a custom class in the Custom Class field for CSS targeting, or copy the row’s CSS Selector to apply specific styles.