Horizontal pricing tables are a great way to promote products with many features. And, with the new five-column layout of Divi, it's surprisingly easy to do. However, as with any layout that has five or more columns, the challenge is to make the layout responsive so that it also looks good on mobile devices. In this tutorial, I'll show you how to create horizontal price tables that look good on all devices. And I'll even show you how easy it is to duplicate horizontal price tables and use new design features like "find and replace" to quickly change the color scheme of each of your tables in just a few clicks.
Let's begin.
peek
To start
For this tutorial, all you need is Divi. And we will use the Visual Builder. Because we will create tables from scratch, you will need to create a new page, deploy the visual builder, and then select the "Create layout from scratch" option.
Then you are ready to start. Let's do it!
Set the five-column row for horizontal price tables
For beginners, we give a five-column layout to the section that is already waiting for us in the visual builder.
Before starting to add modules, we update the section settings to have a custom width without any top or bottom fill.
Width: 1200 px
Section alignment: center
Custom filling: 0px at the top, 0px at the bottom
Then go to the row settings to quickly give a background color to your row and also to the three central columns as follows:
Background color: # 00cbc9
Column background color 2: # 00cbc9
Column 3 Background color: #eeeeee
Column 4 Background color: #eeeeee
Then update the sizing as follows:
Make this line full width: YES
Gutter width: 1
Equalize column height: YES
We'll need to go back to the line settings a bit to update the spacing, but for now let's start adding the blurbs to each of our columns for the content.
Filling the columns with content modules
The title of the product
In the first column, add a text form with the following header in the content box (below the text tab):
Starter
This will serve as a point for the title of your plan or product you are viewing. In this example, this would be a "Starter" plan of some sort.
Then update the following configuration settings:
Header character style 2: TT
Header 2 Text color: #ffffff
Header text size 2: 38 px
Custom fill (desktop): 90% higher, 90% lower, 10% remaining
Custom padding (tablet): 30% up, 30% down
Add Blurb for the function category headers
In the second column, add a blurb form. It then deletes the fill text in the content box and leaves the title text alone. So choose to use an icon instead of an image and update the icon with one of your choice.
Switch to the design tab and update the rest of the settings as follows:
Icon color: # 00cbc9
Positioning of images / icons: on the left
Title text size: 16px
Custom padding: 2vw Bottom
Width of the lower row border: 4 px
Bottom border color: #cccccc
Since this blurb drawing will be used as the title of the feature category in columns 2, 3 and 4, it is possible to copy the blurb form and paste it into the second and third columns.
I realize that the spacing does not seem really exceptional right now. And you might be tempted to add some form-level spacing, but for this design, I find it easier to make spacing adjustments at the column level (under the row settings). We'll get there later.
Add text modules for a list of feature descriptions
Next Add a text form below the description in the second column. Then add the html code of the following table in the content box:
- the description of the function goes here.
- the description of the function goes here.
- the description of the function goes here.
- the description of the function goes here.
Unsorted list style type: square
Re-entry of unordered list item: 4 px
Personalized padding: 20px on the top, 20px on the bottom, 5% on the left, 5% on the right
Now, as we did for the blurbs, go ahead and copy the text form and paste it under each of the blurb modules in columns 3 and 4.
Adding the price and button for the last column
In the last column (column five), I will use a form of the price table to get the design of the price text with the dollar sign. That's all we really need from the price table module, so I'll delete the rest of the content and design elements, leaving the price text and the dollar sign. I could use the button that is included in the price table form, but this was a bit harder to do a little bit. of reactive magic on tablets (you'll see what I mean later). So I will also use a button module.
Go ahead and add the Price table form to the fifth column. Delete one of the two tables included by default by clicking on the trash icon to the right of one of them.
Then delete the background color by adding a completely transparent color code.
Background color: rgba (255,255,255,0)
Then update the following:
Table header color background: rgba (255,255,255,0)
Currency and frequency text color: #ffffff
Currency text size and frequency: 30px
Price text color: #ffffff
Border width: 0 px
Custom margin (tablet): -100% to the right
Custom margin (smartphone): 0% right
Custom fill: 0 px higher, 10 px lower, 0 px left, 0 px right
Now go to the individual table settings by clicking on the gear icon on the left of the individual table display menu.
Now deletes the default content for Title, Subtitle and Content. This will leave only the currency and the text of the price.
Now I know what you're thinking about at this point. What to do on that border line under the price text? Well, there's a little bit of custom css for this. Go to the Advanced tab and add the following CSS to the Pricing Top entry box:
Prices above:
border: none;
This is the way you can empty the price table only for the text symbol and the price currency!
For the button, add a button form below the price table form and update the following:
Button alignment: center
Text color: light
Custom margin (tablet): -100% to the right
Custom margin (smartphone): 0% right
The custom margin will match the margin we added to the price table module in order to get a full-width form on the tablet. Since the five-column layout on the tablet places the fifth column on the left side of a two-column layout, dragging the -100% module to the right, the form will be forced to the full width of the row.
Adding arrow design and reactive column spacing
Add the arrow by layering the shades
To create the arrow design effect in the first column, two blurred backgrounds will be superimposed. The first gradient background will be added at the column level. We'll add the next at a later time at the module level.
To add the gradient background, go to the row settings and add the following:
Column 1 Gradient background Left color: rgba (255,255,255,0)
Column 1 Gradient background Right color: #eeeeee (this must match the background color of column 2)
Gradient direction: -245 degrees
Initial position: 75%
Final position: 0%
Save the settings and switch to the text module settings in the first column. This is where we will add the second level of the background gradient to complete the arrow. Update the following:
Column 1 Gradient background Left color: #eeeeee
Column 1 Gradient background Right color: rgba (255,255,255,0)
Gradient direction: 245 degrees
Starting position: 25%
Final position: 0%
Notice that the values are equally opposite one at the other. For example, the order of colors has changed, the 245deg has gone from negative to positive and 75% is now 25% (the difference). This is the way in which the sides of the arrow point become perfectly symmetrical.
Spacing of the row and columns
Return to the row settings and adjust the row and column spacing by updating the following:
Custom fill: 0 px higher, 0 px lower, 0 px left, 0 px right
Custom filling 2: 5% higher, 5% lower, 2% left, 2% right
Custom Filling 3: 5% higher, 5% lower, 2% left, 2% right
Custom filling 4: 5% higher, 5% lower, 2% left, 2% right
Custom padding 5: 10% higher, 10% lower
Maybe you're wondering why I did not use only a width of eave 2 and I ended up with it. Well, it's because I wanted to maximize the space inside the columns that contained the text as much as possible to improve readability on all devices. Every little space we can save things. This is the reason why the margins between the columns are created with percentages of left and right padding.
Duplication of the table for new tables and color combinations
Obviously, you will want to have multiple horizontal price tables for users to compare. To create the second price table, duplicate the entire section containing the first table you created.
Then open the Row settings and hover over the background color and click Find and Replace.
Under "Within" choose "This section".
Under "Replace Width", add the color: # f84f51
Then select the Replace all the values found in the section box (not just the background color).
Then click on Replace and watch the magic happen. This is a quick and easy way to change all instances of the previous color with a new color.
Do not forget to save the line settings before exiting to save the changes.
Now you have a new table with a new color scheme.
Repeat this procedure again to add another table with the color: # bdc958
Make a table in the foreground
To make one of your tables appear in the foreground and stand out a little, you can add a box shadow to the section that contains the table and change the gray color used for the backgrounds and shades of columns in a beautiful white color.
To do this, go to the section settings for the second section (the middle section) and update the following:
Box Shadow: see screenshots
Vertical position shadow box: 0 px
Strength of the shadow of the box: 80 px
To replace the gray background color, go to the row settings and find the background color of column 2 (#eeeeee). Right click on it and click "find and replace". The update is as follows:
Under "Within" choose "This section".
Under "Replace Width", add the color: #ffffff
Then select the Replace all the values found in the section box (not just the background color).
Then click on "Replace".
Using Find and Replace to test the characters
If you want to use a different font inside the table, you can test different ones using the "Find and Replace" function. I intentionally left the default font for all modules to make this process smooth. To change the font for the entire page of tables, all you need to do is open the text module settings in the first column of any table section (actually it can be any form that uses the default font on your page ). Then right-click on the current Heading 2 font and select "Find and Replace". Then update the following:
Under "Within", keep "This page".
Under "Replace Width", select a character (I'm using Condensed Robotic).
Then select the Replace all values found in the section box (or you can not check it to replace all the h2 fonts).
Then click on "Replace".
Now all the fonts have been modified in the whole page.
That's all! Now the horizontal price tables are complete.
Let's have a look at the result.
The five-column adjustment on tablets and smartphones works well.
Final thoughts
The five-column layout of Divi, along with the powerful design features available in Visual Builder, allow you to create beautiful horizontal price tables. In addition, adjusting colors and fonts using Find and Replace saves time, further enhancing the design process. I hope you find the tutorial both informative and inspirational.
I can not wait to hear from you in the comments.
Greetings!
Source link
