Row Element

About the Row Element

The Row element is one of the most essential components when creating a page.

Typically, you’ll start with the Row element to lay the foundation of your layout. You can freely arrange multiple Rows to structure your page as desired.

For more advanced grid layouts, which help ensure your content is organized and responsive across various screen sizes, you can nest up to 12 Columns within a single Row. 

Once your framework is set, you can easily drag and drop elements like text, images, videos, and buttons into the Row. 

How to Add a Row Element to GemPages V7?

Step 1: In the GemPages Dashboard, access the Pages section, open an existing page, or create a new one. You’ll be directed to the GemPages Editor.

Step 2: Check the left sidebar to find the Row element. Choose a row layout, then drag and drop it onto the design area.

Step 3: Click on the element to open its settings.

Configure the Settings Tab

Layout 

This setting lets you select a layout from six options, with 1 to 6 columns available. The 1 to 4-column layouts are the most commonly used presets.

You can set the column width in two ways:

• Fit to Content: The column width automatically adjusts to fit the content inside.
• By Ratio: The columns are evenly distributed, and you can adjust their width ratio by dragging the slider.

Additionally, you can rearrange the columns as needed.

Alignment

To position your content precisely, you can adjust the row alignment vertically by selecting from Align Top, Vertical Center, Align Bottom, or Distribute Vertical Spacing.

Size

• Full-Width: Enable this switch to make the row span the entire width of your page. Rows are set to full width by default, but you can turn this off to customize the width as needed.
• Width: Adjust the row’s width in pixels or percentages. You can also switch between different views using the Desktop icon and set the width for each view. 

By default, GemPages sets the Row width to 1280px to ensure content is consistently aligned and fits within a grid layout that looks good across various screen sizes, including smaller laptops. If the device’s screen width is smaller than 1280px, the Row width will automatically adjust to match the screen size. This means the 1280px width acts as the maximum width for the Row, and it will shrink accordingly on smaller screens.

• Column Gap: Modify the spacing between columns to create a balanced and visually appealing layout.

Background

In the “Background” section, you can customize the background by selecting a color from the palette or uploading an image.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

Best Practices for the Row Element

Utilize Columns Effectively

The Row element is ideal for creating multi-column layouts. You can also nest additional rows within columns to create more complex grid designs.

Design Content Boxes

Rows are especially effective for creating testimonial sections or similar content areas. You can use the Row element to craft content boxes by adding backgrounds and padding. For full-width content, consider using background images like those in Hero Banners. 

Ensure Consistent Spacing

Within a row, organize your content with a maximum width of 1200px to ensure a uniform appearance across all screen sizes, from small devices to large monitors.

Enhance Responsiveness

Take advantage of the flexibility to adjust column positions, order, and widths for different screen sizes. This ensures your design adapts seamlessly and stays visually appealing on all devices. For step-by-step instructions on making your design responsive across various devices using GemPages, refer to the detailed guidelines in this article.

FAQs about the Row Element

1. How can I set a background color for a column?

Currently, this feature isn’t available. To work around this, you can add custom CSS. Click on the element, go to the Advanced tab, and enter your CSS code in the CSS Class box. Or, you can contact our GemPages Support team for further assistance. 

2. How do I create a 5-column Row?

You can create a 5-column row by selecting the 5-column layout in the Row settings. Alternatively, you can use the Carousel element for a similar effect.