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 more columns. You can change the number of columns for each screen mode 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). You can change the type of unit by clicking on the unit on the right side.

  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.

Some common sections

Here are some common sections you can create by incorporating a Row element with other elements.

  • A section of image and text

  • Product details

  • Bundles: How to create product bundles. Click here.

  • Social proof:
  • Trust badge:
  • Row in Row:

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.

 

How can I resize the video image?

If you want your video to not occupy the whole page, let's put it inside a Row element and adjust the spacing of the Row in Design tab

The resolution of the video is unchanged, so when you reduce the width, the height also decreases accordingly.

Some common issues can be fixed with a Row element

  • I divide a Row element into 3 columns. It looks good on the editor page but the middle element is not centered on the live page
    • Tip for you: Drag and drop Separator elements into the first column and the third column and make them transparent with no-color and zero height.

  • I create a section of image and text as 2 columns. It looks good on the Desktop but the text is not aligned with the above image on Mobile. 
    • As columns "stack" for mobile, you will have a bunch of stacked images, followed by a bunch of stacked text. Therefore, in this case, you can adjust the Column gap to keep the text aligned with the corresponding image above it.
    • You may also choose to disable stacking on mobile devices. This will ensure that your Column element continues to remain horizontal.
  • I create multiple rows of the image-text section. Everything looks good on the Desktop but the order of images and text blocks is disordered in Mobile. The solution is adding extra code to that Row element. Click here for the video instruction or follow the steps below:
    • Step 1: On desktop mode, right-click on the Row element need to be changed the image-text position. (normally it is the second row)
    • Step 2: Choose Edit CSS and paste the following code:
      float: right; ​

    • Step 3: After adding the code, you may need to reorder the image and text block as your expected position.
    • Step 4: Check on the Mobile version by clicking on the screen mode switcher on the top toolbar. 

If you're interested in learning more about the powerful and user-friendly GemPages, please feel free to read out more articles here or reach out to our Support Team. We'd be happy to answer any questions you have.


Was this helpful?