Saturday , December 14 2019
Home / Uncategorized / How to create horizontal price tables with Divi

How to create horizontal price tables with Divi



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

divi horizontal price tables

divi horizontal price tables

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.

divi horizontal price tables

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.

divi horizontal price tables

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

divi horizontal price tables

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

divi horizontal price tables

Then update the sizing as follows:

Make this line full width: YES
Gutter width: 1
Equalize column height: YES

divi horizontal price tables

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

divi horizontal price tables

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

divi horizontal price tables

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.

divi horizontal price tables

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

divi horizontal price tables

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.

divi horizontal price tables

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

divi horizontal price tables

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.

divi horizontal price tables

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

divi horizontal price tables

Now go to the individual table settings by clicking on the gear icon on the left of the individual table display menu.

divi horizontal price tables

Now deletes the default content for Title, Subtitle and Content. This will leave only the currency and the text of the price.

divi horizontal price tables

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

divi horizontal price tables

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.

divi horizontal price tables

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%

divi horizontal price tables

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.

divi horizontal price tables

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

divi horizontal price tables

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.

divi horizontal price tables

Then open the Row settings and hover over the background color and click Find and Replace.

divi horizontal price tables

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).

divi horizontal price tables

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.

divi horizontal price tables

Repeat this procedure again to add another table with the color: # bdc958

divi horizontal price tables

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

divi horizontal price tables

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".

divi horizontal price tables

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.

divi horizontal price tables

The five-column adjustment on tablets and smartphones works well.

divi horizontal price tables

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

Leave a Reply

Your email address will not be published.