Comparison Table
The comparison table component provides you with an efficient way to show customers a comparison of the products on your platform.
Go to Platform - Manage platform in the dashboard
Select the subpage you would like to add the comparison table component to and click to add new section. It is likely that you will want to add this to your /subscribe page, but you might want to add it somewhere on your homepage or elsewhere on your platform. You will find the comparison table component in the information tab.
The new component will be listed at the bottom left and you can click and drag to change its placement amongst the other components on the page.
The comparison table is managed by adding columns, and then adding rows - which is explained further below.
To start with (and by default), the comparison table will have a single row and a single column.
You can edit the text that appears in the top left cell of your table by using the text box under the First column header. In the example above we have left this cell empty.
To add more columns, click Manage columns and then click Add a new column (as many as you want to have).
You'll now see the text boxes where you can edit the text in the top row of each column.
We suggest you add the names of the products (subscriptions/packages etc.) that you want want to compare as the texts in the top row of each column. In the next step you can add the various types of content/competitions as the texts in the left-most column of each row.
In the example above we added 3 columns - 1 for each of the 3 subscriptions available - Bronze, Silver and Gold.
To add more rows, click Manage table rows and then click Add a new row (as many as you want to have).
You'll now see the text boxes where you can edit the text in the left-most column of each row.
For each row, you'll also see dropdown lists corresponding to the columns that you have created, where you can choose between Free Text, a check mark, an X or an empty cell to fill in the cells of your comparison table.
In the example above, we added 4 rows - 1 for each of the different types of content. In the "International Competitions" row we selected an X for the Bronze column, an X for the Silver column and a check mark for the Gold column, to indicate that the International Competitions content is only included in the Gold subscription.
Under the Styling header, there are various sections of the comparison table that you can style.
In the example above we have made the background colour of the table transparent, we have made the row and columns headers bold, and we have centred the text of the "Bronze", "Silver" and "Gold" columns.
To read more about how you can style everything you can read these guides:
CMS Styling - Text and buttons
CMS Styling - Sizing
CMS Styling - Padding and Margins
Click on Save section at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes, click on Publish to make them live on the platform. You can also click on Discard to delete all your changes since the last time you published.
Creating a Comparison Table component
Go to Platform - Manage platform in the dashboard
Select the subpage you would like to add the comparison table component to and click to add new section. It is likely that you will want to add this to your /subscribe page, but you might want to add it somewhere on your homepage or elsewhere on your platform. You will find the comparison table component in the information tab.
The new component will be listed at the bottom left and you can click and drag to change its placement amongst the other components on the page.
The comparison table is managed by adding columns, and then adding rows - which is explained further below.
Adding and managing the columns
To start with (and by default), the comparison table will have a single row and a single column.
You can edit the text that appears in the top left cell of your table by using the text box under the First column header. In the example above we have left this cell empty.
To add more columns, click Manage columns and then click Add a new column (as many as you want to have).
You'll now see the text boxes where you can edit the text in the top row of each column.
We suggest you add the names of the products (subscriptions/packages etc.) that you want want to compare as the texts in the top row of each column. In the next step you can add the various types of content/competitions as the texts in the left-most column of each row.
In the example above we added 3 columns - 1 for each of the 3 subscriptions available - Bronze, Silver and Gold.
Adding and managing the rows
To add more rows, click Manage table rows and then click Add a new row (as many as you want to have).
You'll now see the text boxes where you can edit the text in the left-most column of each row.
For each row, you'll also see dropdown lists corresponding to the columns that you have created, where you can choose between Free Text, a check mark, an X or an empty cell to fill in the cells of your comparison table.
In the example above, we added 4 rows - 1 for each of the different types of content. In the "International Competitions" row we selected an X for the Bronze column, an X for the Silver column and a check mark for the Gold column, to indicate that the International Competitions content is only included in the Gold subscription.
Styling the comparison table
Under the Styling header, there are various sections of the comparison table that you can style.
In the example above we have made the background colour of the table transparent, we have made the row and columns headers bold, and we have centred the text of the "Bronze", "Silver" and "Gold" columns.
General styling
To read more about how you can style everything you can read these guides:
CMS Styling - Text and buttons
CMS Styling - Sizing
CMS Styling - Padding and Margins
Save and publish
Click on Save section at the bottom left to save your changes and get a preview to the right.
If you are happy with your changes, click on Publish to make them live on the platform. You can also click on Discard to delete all your changes since the last time you published.
Updated on: 26/11/2024
Thank you!