How to create a comparison table using the Row element

 

Using the Row element, you can easily create a multi-column comparison table for your products in under 10 minutes with absolutely no coding required. This article will guide you through the steps.

 

 

Create your table


Step 1: Go to the GemPages Dashboard, select a page and enter the Editor via the “Edit” button.


Step 2: Search for the Row element on the left sidebar. Drag & drop this element onto your page. 


This Row will act as an outer container for all the elements forming the table and for you to adjust the size easily.

 


Step 3: Drag out another Row element and nest it inside the first Row.

This inner Row element will represent your table’s first horizontal row.



Step 4: Determine how many vertical columns your table will have. Then, select the corresponding layout for the inner Row element under the Settings tab on the left sidebar.

In the example below, the adequate number of rows is 4.



Step 5: Determine how many rows your table will have, and duplicate the inner Row to achieve the number.

To do so, click on the inner Row and select the arrow to expand more options, then click on the "Copy" icon.



Once completed, the result should look like this:


 

In many cases, the table content can be similar from row to row. If that is the case, consider filling up one or a few of your horizontal rows first before duplicating them to save some editing time.

 

Input table content


Once you've set up the table, it's time to fill it up. 

Freely drag & drop elements such as Heading, Text Block, Icon, and so on to showcase your content.

 


 

Design final touches


After you have finished with the table content, use the Design tab to make small adjustments as you see fit and achieve the perfect look.

 

To distinguish the rows, it's best to set different background colors as shown in this example.

 

When you are happy with the table, hit “Save” and “Publish” to make the changes go live on your front store.

 


Check out our example page of how the final result should look like.


If you encounter a problem, this article covers all frequently asked questions about the Row element. Should you need any further assistance, please contact our GemPages Support Team via email or live chat.


Was this helpful?