Rows

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.

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.

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.

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.

BG Media Type #

The BG Media Type setting lets you choose between an Image or 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.

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.

Advanced Settings #

Shadow #

• Box Shadow: This adds depth by applying a shadow around the Row.

Border Options #

• Border: You can choose the type of border you want. Once you select any of the border types, the settings for the border pop up.

• Border Style: The border style defines the line around your row, offering three options: solid, dashed, or dotted. A solid border creates a clean, unbroken line, ideal for a professional look. A dashed border uses short dashes for a playful touch, while a dotted border features small dots for a subtle, decorative effect.

• Border Width: The border width controls the thickness of the border. A thin border works for minimalist designs, while a thicker border makes the row stand out. Adjust the width to balance visibility and subtlety, ensuring your row fits seamlessly into your layout.

• Border Color: The border color lets you choose a hue that complements your design. Match it to your brand palette for consistency, use a contrasting color to make the row pop, or opt for neutral tones like gray or white for a subtle look. Custom color codes allow for precise customization.

• Border Radius: The border radius curves the edges of your row, softening its appearance. A small radius (5px) creates slightly rounded corners, while a larger radius (20px+) adds a dynamic, playful feel. This feature is perfect for modern, card-like designs.

• Radius Edge: The radius edge setting lets you choose which corners to curve—top, bottom, or all edges. You can also customize specific corners (e.g., top-left and bottom-right) for unique, asymmetrical desigs. This level of control ensures your row aligns perfectly with your creative vision.

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.

What's your Reaction?

You have reacted on"Rows"


A few seconds ago