A product comparability chart will also be an especially efficient solution to advertise new merchandise along side their upgraded options. The visible side of a chart is extra interesting to customers than easy textual content. And the construction of a side-by-side comparability lets in customers to peer the variation between each and every product function very easily.
On this educational, I’m going to turn you methods to design an inventive product comparability chart with Divi. And this design format can be utilized for evaluating absolutely anything. As an example, I will see this being an ideal format for case research as smartly.
Let’s get began.
Sneak Peek
Here’s a sneak peek of the comparability chart I can construct on this educational.
What You Want for This Educational
For this educational, you wish to have the next:
- Divi Theme (Put in and Energetic)
- Two Pictures (about 800px via 450px) to function your product photographs within the comparability chart.
Developing your Heading and Product Pictures
For starters, create a brand new web page, deploy the Visible Builder, then make a choice to construct your web page from scratch.
Subsequent upload a one column format for your row of your phase.
Ahead of we upload a module, let’s cross to the phase atmosphere and replace the next:
Background Colour: #222222
Background Gradient Colour Left: rgba(242,90,71,0.14)
Background Gradient Colour Proper: rgba(255,255,255,0)
Gradient Kind: Radial
Position Gradient Above Background Symbol: YES
Save settings. Now open up your row settings and provides your row a customized width of 100%.
Then upload a textual content module for your one column row with the next settings:
For the content material, input this html:
<h2>Examine</h2> VS
Textual content Font: Montserrat
Textual content Font Weight: Extremely Daring
Textual content Font Taste: TT (Uppercase)
Textual content Textual content Colour: rgba(255,255,255,0.3)
Textual content Textual content Dimension: 3vw
Textual content Line Peak: 1.8em
Textual content Orientation: Heart
Subsequent replace the h2 heading design choices and provides your module a customized backside margin to create the overlapping impact.
Heading 2 Font: Montserrat
Heading 2 Textual content Colour: rgba(255,255,255,0.3)
Heading 2 Textual content Dimension: 13vw
Heading 2 Letter Spacing: 1vw
Customized Margin: -13vw Backside
A part of your textual content will likely be hidden for now, however it’s going to display up after we upload the opposite content material.
Two create our 2d row replica the primary row after which delete the textual content module within the duplicated row. Then replace the column construction to a two-column row.
Pass forward and replace your row settings as follows:
Customized Gutter Width: 1
Column 1 Customized Padding: 2vw Proper
Column 2 Customized Padding: 2vw Left
That is the place we’re going to put the pictures of our two merchandise we need to evaluate. Within the left column of our row, upload your symbol the use of the picture module. For this case, I’m the use of an png symbol this is 800px via 459px. Then replace the picture module settings as follows:
Width: 70%
Module Alignment: Proper
Customized Padding: 40px Backside
Then reproduction the module and paste it into the precise column. Trade the picture after which regulate the module alignment to left.
Below the picture module within the left column, upload a textual content module with the next textual content content material: “Previous Product”.
Then cross into the textual content module within the first row above and replica the textual content kinds.
Then hover over the brand new textual content module with the textual content “Previous Product” and paste the textual content kinds to the module the use of correct click on.
This may increasingly fit the textual content kinds we’d like so much faster. Now all we wish to do is
replace the textual content measurement and alignment:
Textual content Textual content Dimension: 16px
Textual content Orientation: Proper
Now cross to the complex tab and put the next customized CSS into the Primary Component enter field:
text-align:correct !necessary;
That is important as a result of Divi will regulate the textual content alignment to left on smartphones via default. This CSS snippet will override this and ensure it remains correct aligned on smartphone as smartly.
Save settings. Then reproduction the textual content module and paste it beneath the picture in the precise column. Trade the textual content content material to “New Product” and replace the textual content orientation to “Left”.
Here’s what we’ve got thus far.
Developing the Product Comparability Chart
To create our comparability chart we’re going to use a series of 2 column rows each and every separated via a one column row. The 2 column rows will cling our coloured bars. And the only column row will show the title of the function related to the bar values.
Create a brand new two column row and replace the row settings as follows:
Customized Width: 100%
Gutter Width: 1
Customized Padding: 0px Backside
Column 1 Customized Padding: 2vw Proper
Column 2 Customized Padding: 2vw Left
The column 1 and a pair of customized padding creates the gap we’d like in the midst of our bar charts we will be able to be including.
Within the left column upload a divider module and replace the settings as follows:
Background Gradient Colour Left: rgba(81,91,214,0.25)
Background Gradient Colour Proper: rgba(255,255,255,0.15)
Gradient Route: 90deg
Get started Place: 35%
Colour: #515bd6
Divider Weight: 23px (this price must equivalent the Divider Peak price which is 23px via default in order that the divider is identical width because the background of the module)
Customized Padding: 70% Left (This pushes the divider to the precise 75% leading to a bar graph price of 25% from the precise)
Save Settings.
Now reproduction the Divider Module over to the precise column of the similar row. Then replace the next settings:
Background Gradient Colour Left: rgba(255,255,255,0.15)
Background Gradient Colour Proper: rgba(242,90,71,0.25)
Get started Place: 70%
Colour: #f25a47
Customized Padding: 30% Proper (This pushes the divider to the left 30% leading to a bar graph price of 70% from the left.)
Now that your first row of bars are in position, we wish to upload a one column row under it to place our product function label.
Create a one column row with a customized padding of 0px at the best. Then upload a brand new blurb module and replace the blurb module settings as follows:
Content material: “function”
Use Icon: YES
Icon: see screenshot
Icon Colour: rgba(255,255,255,0.3)
Use Icon Font Dimension: YES
Icon Font Dimension: 30px
Textual content Orientation: middle
Frame Font: Montserrat
Frame Font Weight: Extremely Daring
Frame Textual content Colour: rgba(255,255,255,0.3)
Frame Letter Spacing: 2px
Customized Margin: -20px
Below the complex tab, you’ll take out the default margin underneath the blurb icon via including the next customized CSS within the Blurb Symbol CSS field:
margin-bottom: 0px;
Now that you’ve your first living proof of product comparability function, all you wish to have to do is replica the 2 rows that make up the comparability function (the row with the 2 bars/dividers and the row with the blurb module). I in finding that it’s perfect to make use of ctrl + c (or command + c) to duplicate each and every row after which ctrl + v (or command + v) to stick them under one some other. Then simply replace the customized padding for the duplicated dividers to turn other bar chart values.
You’ll additionally regulate the beginning and finish place of the gradient relying at the customized padding price you select. As an example, in the event you come up with left column divider a padding of 60% Left, you’ll regulate the beginning place of your gradient to 30% (precisely part the gap of the padding).
For a crowning glory, it’s possible you’ll wish to upload a divider background for your phase. For this case, I’m going so as to add the next:
Most sensible Divider: See screenshot
Divider Colour: rgba(255,255,255,0.05)
Divider Peak: 19vw
Here’s the general consequence.
I additionally just like the glance of the design after I alternate the phase background colour to #000314.
Making the Design Responsive
In Divi, any two-column row will routinely stack on best of one another on cellular gadgets. This may increasingly after all destroy the design on cellular. To mend this we will be able to wish to do two issues. First, we wish to upload a small snippet of customized CSS throughout the theme customizer.
@media (max-width: 980px){
.disable-break .et_pb_column {
width: 50%!necessary;
margin-bottom: 30px;
}
}
This code will regulate the column width of any row with the CSS magnificence “disable-break” to 50%. This may increasingly ensure that we stay our two column construction on cellular gadgets in order that the design is not going to destroy. Don’t put out of your mind to submit your adjustments.
As soon as the CSS is in position, we wish to upload the CSS magnificence to any row that has a two column construction.
For starters, let’s upload the CSS magnificence to the 2 column row preserving our two product photographs. Open the row settings and cross to the complex tab. Then input “disable-break” into the CSS Magnificence enter field.
Then right-click at the CSS Magnificence choice and click on “Reproduction CSS Magnificence”.
Now all you wish to have to do is correct click on on each and every row that has a two column construction (the entire rows with the dividers/bars) and click on “Paste CSS Magnificence”.
Now your columns will stay the 2 column construction on cellular gadgets and stay the design constant..
Ultimate Ideas
Making a product comparability chart in Divi is unassuming when you be told a couple of design ways. The trick is to arrange your two-column rows with a 100% width and gutter width of one. After that, you’ll use the divider module to construct some distinctive bar chart designs. And if you wish to stay your two-column format on cellular, all you wish to have is a small snippet of customized CSS. I’d be expecting that this comparability chart format can be utilized in many various techniques. Be at liberty to percentage some concepts with the Divi Country.
I sit up for listening to from you within the feedback.
Cheers!
The publish How to Design a Creative Product Comparison Chart with Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design