Responsive Comparison Chart Documentation

Please read and refer to this documentation when you are installing and customizing the Responsive Comparison Chart.

To upload

You should receive a .zip file with a .json file for the 2 sections and the section containing a code module. 

Unzip this file on your desktop. Inside is the .json file that contains 3 sections. One for the simple comparison chart layout, one for a complex comparison chart, and a final section containing a Code module.

Go to your dashboard>Divi>Divi Library
and Import the downloaded .json file. 

When the import is complete, you should have 3 sections added into your Divi Library. One section with the simple comparison chart, another for the more complex comparison chart, and a final section that contains a code module.

Once these sections are in your library, go to the page you need your chart.

Click the blue + button to add a new section onto the page.

The Insert Section comes up and click the Add From Library tab. Here you can select the chart style you want to use, either one or both.

*Make sure you repeat the process and add the Code module Section onto the page.

Looking at the structure of the grids

Go to the wireframe mode to get a better understanding.

At first glance you’ll see the blue section with a single column row containing a series of modules. It can be confusing at first but once you understand how CSS Grid works, it’ll make sense.

The CSS Grid declaration is set in the Row Column. Click the gear icon of the row. Then click the gear icon of the column. Click the Advanced tab and open the Custom CSS. In the Main Element you will see the css code that sets up the grid into 3 columns and declaring them 33.33% each. Commented out is the same css setting the width of the columns but here you can set the width of each column to whatever you want. Such as 40% 30% 30%. Or any variation you desire. Just make sure that your math adds up to 100% to make sure to fill the available width space of the row for your content.

Naming and Admin Labels

I’ve set up some admin labels to make things easier to find. The columns go from 1-3 left to right. And the rows I’ve numbered from 1 down to however many criteria that is on the charts.

Each module has an admin label for the Row # and Column # it’s located within the grid.

The top row contains a main header text (blue) and 2 image modules. Column 2 is set for product 1 and Column 3 is set for product 2. The next rows down, Column 1 would be the text modules for the criteria you are comparing the 2 products. This is named Comparison Text. Then the product 1 and product 2 is listed as detail.

You can delete or add more rows to the chart as you wish. Just understand how the grid works. It starts in Column 1 and then goes to column 2, then column 3. Adding another module after that, it goes down to the next row and fits in Column 1 once more. Just keep in mind the flow of how the grid adds content. Col 1 to col 2 then to col 3 back to a new row and col 1 and so on. Col1 will always be either a blue subhead text or a criteria text.

For the complex chart

There is a row that just has the blue text…this is still part of the overall structure of the grid…but it has a span added to the module.

To set up another row with a span like this one…just duplicate the text module labeled Row8 Col1-Col3 and add it to the chart.

If you take a look at the module, Advanced> Main Element you will see the css grid being declared once more but the grid-columns are set to span across grid lines 1-4 (so that the text module spreads across the entirety of the chart width.

But if you want to make the text to fit within the Column 1 width like the other criteria or blue subtitles. Open up the Design tab and go to the Spacing area…admin 66.66% padding-right. And this will force the text content you add here to be squished into the column1 width like the other modules.

You don’t need to have this in here though. You can have your content flow across the entire width of the chart columns. It’s up to you on the look you are seeking for your chart.

The image modules

This will be a bit finicky as images you’re using will most likely be different sizes than what is in the example here. The important thing to remember is to set an equal height to both images so that they match up height-wise. Each of the image modules have a css class on them called .cym-chart-product1 and .cym-chart-product2

These classes are used in the Code module. The css declared in the code module helps keep the images centered within the columns and adds a padding to the bottom. The padding left and right in the code module you can adjust to fit your images. This also includes media queries so that you can adjust the padding left and right on both images from tablet to phones. Again, the padding left and right you’ll need to play with. In this example here, you’ll see that the product1 for tablet has 10% while product 2 needs 9%. Again, it’s because of the sizing of the images.

For this, I preset the height of the images externally to 250px using

Adding borders around the image modules

If you use the Design>Border settings…the borders will run along the outer edges of the actual image…not the grid column/row container. To fix this…in the image module, leave the border settings blank in the design tab, go to the Advanced tab and into the Custom CSS and to the main element. Here add your border-right: 1px solid black; border-bottom: 1px solid black; even can add border-top and border-left, too. If adding border-top, you’ll want to go back to the code module and add in padding-top 1em to create some white space on top of the image to the border line.

Using the Advanced Custom CSS creates the grid lines around the image.

Font family and colors

Are all set within the text modules. Font families are set to default so as soon as you add these sections to your page, it should pick up the font family you’ve set in the Customizer.

The blue subtitle chart text module is set to H3. The rest of the text modules are just paragraph text.

I’ve set up desktop/tablet/phone font sizing within the text modules, too. You can adjust those to fit your design needs.

Using the Advanced Custom CSS creates the grid lines around the image.

Again, you don’t have to use both comparison charts…you can just use the one that fits your needs. But the Section with the code module is required in either case.

That’s it. The chart is set up and you can just copy over your content into the modules. Save it. And it’s set to be responsive for all device sizing. Because the CSS Grid declaration in the row forces the column structure to remain 3 across no matter what.