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.

Column width

You can set the column width in two ways:

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

Column management

Under this, you can rearrange the columns. By hovering over each column item, you can copy or delete a column as needed.

Column spacing

Adjust the spacing between columns by entering an exact number, or you can drag the blue slider.

Size

Under the Size section, you can configure the Width, Height, and Padding for the Row element.

Background

GemPages allows you to set color, image, or video to be the Row element’s background, in detail:

• Color background: Enter the color code (HEX), choose from the color swatcher, or just randomly pick from your page to choose the best fit color for the background

• Image background: You can upload a new image or select one from your media.

• Video background: GemPages allows you to select a video from YouTube or Shopify Video hosting to use as a background.

Shape

Modify the shape of the element: Border, Corner, and Shadow.

Align column

To position your content precisely, you can adjust the row alignment vertically by selecting from:

• Align Top
• Vertical Center
• Align Bottom
• Distribute Vertical Spacing

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

#1. 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.

#2. 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. 

#3. 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.

#4. 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

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.

3. How do I delete a column from a row?

• Step 1: Choose the row that contains the column you want to delete.
• Step 2: In the left sidebar, find the column section.
• Step 3: Click the trash can icon next to the column you want to remove.

4. How do I duplicate a row?

You can duplicate a row by right-clicking the row and selecting Duplicate, or by using keyboard shortcuts:

• On Windows: press Ctrl + C to copy and Ctrl + V to paste.
• On macOS: press Cmd + C to copy and Cmd + V to paste.