Set your page layout with the Row element

In this article, you will learn about Row elements and how to use them to create stunning pages.


What is a Row element?

The Row element is one of the fundamental elements that allow you to optimize and enjoy unlimited freedom when building the layout of your page. Doing so improves your users’ experience and generates more conversions.


This element also helps you keep the page layout responsive to all devices. It is ideal to have each Row divided into columns and to have other elements placed inside this column. As a result, your page will definitely look nice on mobile devices. 


Settings tab's parameters

  1. Layout: A row contains one or several columns. You can change the number of columns for each version in this parameter.
    • Firstly, it should be done in the Desktop version. You can divide a Row element into a maximum of 4 columns.

If you want a custom Row with more than 4 columns, you may try to use Carousel elements.
    • If you want a custom row size for each screen version, click on More settings at the bottom. Grid columns are divided into twelve for a row so that columns will stack no matter what the viewport is. It is very simple to do, you just need to move the yellow bar from left to right or vice versa. 

  1. Full Width: Toggle this feature on to define the maximum width of the Row element The value of the full-width property overrides the width property, so the inside content will not run off the screen. 

  2. Dimension (Width): Adjust the row width using two types of units (pixel or percentage).

  3. Column Gap: Slide the adjustment bar to set up the spacing between two columns.

  4. Height & Vertical Align: If you enable this feature, you can align the content in a column to the corresponding content in the other column vertically. The property values include Top, Middle, and Bottom

  5. Extra Class Name: If you wish to customize one element particularly, please use this field to add a class name and then refer to it in the CSS file.


Set a colored background for a Row element

You can modify the background of a Row under the Design tab > Background. GemPages offers two options to change the background element which are background color or background image.





Please check out Useful Tips For Row Element and 5 gorgeous sections we can create with the row element to know more about what else we can do with the row element or get in touch with our delicate customer support via email or Live Chat.

Was this helpful?