Pricing tables are incessantly the principle CTA of a web page. That’s why it is very important taste them correctly. With Divi, you’ll take many turns and create pricing tables precisely the way in which you believe them. To provide you with some meals for idea, we’ve created a surprising pricing desk that you’ll use for any more or less web page you’re operating on. We’ll information you thru growing the result from A to Z the use of Divi’s integrated choices best.
Let’s get to it!
Preview
Ahead of we dive into the educational, let’s take a handy guide a rough have a look at the result on other display sizes.
Desktop
Cellular
Obtain The Photographs for FREE
To put your fingers at the pictures which might be used inside of this instructional, you are going to first want to obtain it the use of the button beneath. To realize get admission to to the obtain it is important to subscribe to our Divi Day by day electronic mail listing through the use of the shape beneath. As a brand new subscriber, you are going to obtain much more Divi goodness and a loose Divi Format pack each and every Monday! Should you’re already at the listing, merely input your electronic mail deal with beneath and click on obtain. You’ll no longer be “resubscribed” or obtain further emails.
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:sooner than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:sooner than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:sooner than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Obtain For Unfastened
Sign up for the Divi Newlsetter and we will be able to electronic mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of alternative superb and loose Divi assets, pointers and tips. Observe alongside and you are going to be a Divi grasp very quickly. In case you are already subscribed merely kind on your electronic mail deal with beneath and click on obtain to get admission to the format pack.
You might have effectively subscribed. Please test your electronic mail deal with to verify your subscription and get get admission to to loose weekly Divi format packs!
Let’s Get started Growing!
Upload New Phase
Gradient Background
Create a brand new web page and upload a typical segment the use of the next gradient background:
- Colour 1: #ffffff
- Colour 2: #353272
- Get started Place: 50%
- Finish Place: 50%
Spacing
Then, cross to the spacing settings of the segment and alter the customized margin and padding values.
- Backside Margin: 50px (Desktop), 20px (Pill & Telephone)
- Left Margin: 50px (Desktop), 20px (Pill & Telephone)
- Proper Margin: 50px (Desktop), 20px (Pill & Telephone)
- Best Padding: 0px
- Backside Padding: 0px
Upload New Row
Column Construction
Whenever you’re carried out enhancing the segment settings you’ll cross forward and upload a brand new row the use of the next column construction:
Sizing
With out including any modules but, open the row settings and alter the sizing settings within the design tab.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Then, cross to the spacing settings and upload some customized padding values.
- Best Padding: 94px
- Backside Padding: 177px
- Left Padding: 150px (Desktop), 30px (Pill & Telephone)
- Proper Padding: 150px (Desktop), 30px (Pill & Telephone)
- Column 1, 2 & 3 Left Padding: 10px
- Column 1, 2 & 3 Proper Padding: 10px
Upload Textual content Module #1 to Column 1
Upload Content material
Time to start out including modules! We’re customizing the pricing desk we wish to create through the use of quite a lot of modules. The primary module we’ll want is a Textual content Module. Upload the identify of the primary club kind within the content material field.
Background Colour
Whenever you’ve added the content material, cross to the background settings and upload a white background colour.
- Background Colour: #ffffff
Background Symbol
Transfer over to the background symbol tab and add the ‘divi-beautiful-pricing-table-background-pattern-1.png‘ record which you’ll to find within the obtain folder that was once shared originally of this publish.
- Background Symbol Measurement: Duvet
- Background Symbol Place: Best Middle
- Background Symbol Repeat: No Repeat
Textual content Settings
Regulate the textual content settings subsequent.
- Textual content Font Weight: Extremely Daring
- Textual content Colour: #ffffff
- Textual content Measurement: 80px
- Textual content Letter Spacing: -3px
- Textual content Line Peak: 1em
Spacing
And upload some customized margin and padding values.
- Best Margin: 5vw (Desktop), 0vw (Pill & Telephone)
- Best Padding: 20px
- Backside Padding: 200px
Border
Proceed through including ’20px’ to the highest left and proper corners.
Field Shadow
To peak it off, give the Textual content Module a delicate field shadow.
- Field Shadow Vertical Place: -20px
- Field Shadow Blur Energy: 80px
- Field Shadow Unfold Energy: -10px
- Shadow Colour: rgba(0,0,0,0.15)
Upload Button Module to Column 1
Upload Replica
The second one module we’ll want in column 1 is a Button Module. Upload some reproduction of selection.
Button Alignment
Then, cross to the alignment settings and alter the alignment to heart.
- Button Alignment: Middle
Button Settings
We’ll proceed through making some adjustments to the illusion of the button within the button settings.
- Use Customized Kinds for Button: Sure
- Button Textual content Colour: #ffffff
- Colour 1: #6932ff
- Colour 2: #30acf4
- Gradient Route: 100deg
- Button Border Width: 0px
- Button Letter Spacing: -2px
- Font Weight: Extremely Daring
Spacing
Subsequent, upload some padding to the button to make it glance great and observe detrimental peak margin to create an overlap with the former module within the column.
- Best Margin: -54px
- Best Padding: 10px
- Backside Padding: 10px
- Left Padding: 30px
- Proper Padding: 30px
Field Shadow
Ultimate however no longer least, upload a delicate field shadow.
- Field Shadow Blur Energy: 80px
- Field Shadow Unfold Energy: -14px
- Shadow Colour: rgba(0,0,0,0.3)
Upload Textual content Module #2 to Column 1
Upload Content material
The following module we’ll want is some other Textual content Module with the cost of the club kind.
Background Colour
Whenever you’ve added the fee, cross to the background settings and observe a white background colour.
- Background Colour: #ffffff
Textual content Settings
Alternate the textual content settings subsequent.
- Textual content Font Weight: Extremely Daring
- Textual content Colour: rgba(0,0,0,0.05)
- Textual content Measurement: 120px
- Textual content Line Peak: 1em
Spacing
And observe some customized padding values within the spacing settings.
- Best Padding: 100px
- Backside Padding: 100px
- Left Padding: 80px
Border
Then, cross to the border settings and upload ’30px’ to the ground left and proper corners.
Field Shadow
Ultimate however no longer least, give the module a field shadow.
- Field Shadow Horizontal Place: 0px
- Field Shadow Vertical Place: 2px
- Field Shadow Blur Energy: 80px
- Field Shadow Unfold Energy: 0px
- Shadow Colour: rgba(0,0,0,0.21)
Upload Textual content Module #3 to Column 1
Upload Content material
The following and closing module we want in column 1 is some other Textual content Module. Upload the cost of the club kind to the content material field.
Textual content Settings
Alternate the textual content settings subsequent.
- Textual content Font Weight: Extremely Daring
- Textual content Colour: #000000
- Textual content Measurement: 50px
- Textual content Line Peak: 1em
Spacing
And create an overlap between this module and the former one through enjoying round with the customized spacing values.
- Best Margin: -180px
- Backside Margin: 180px (Pill & Telephone)
- Left Padding: 100px
Clone All Modules in Column 1 Two times & Position Duplicates in Final Columns
Whenever you’re completed enhancing the modules in column 1, you’ll cross forward and clone every probably the most modules two times and position the duplicates within the two ultimate columns.
Alternate Content material of Modules in Column
Alternate the content material of the duplicates consistent with the 2 different club sorts you’re sharing in your web page.
Alternate Pricing Desk in Column 2
Alternate Background Symbol of Textual content Module #1
We’re additionally highlighting the center pricing desk. Open the primary Textual content Module in column 2 and alter the background symbol into the ‘divi-beautiful-pricing-table-background-pattern-2.png‘ record you’ll to find within the obtain folder.
Take away Best Margin of Textual content Module #1
To emphasise this club kind, we’re going to take away the highest margin of the primary Textual content Module within the spacing settings.
Alternate Button Gradient Background
We’ll additionally fit the brand new background symbol the use of some other gradient background for the Button Module.
- Colour 1: #fb32ff
- Colour 2: #ff304f
- Gradient Route: 100deg
Preview
Now that we’ve long past thru all steps, let’s take a last have a look at the result on other display sizes.
Desktop
Cellular
Ultimate Ideas
On this publish, we’ve proven you the best way to taste a phenomenal pricing desk to your subsequent Divi venture. We’ve guided you step-by-step throughout the instructional and accomplished a surprising end result the use of Divi’s integrated choices best! You probably have any questions or tips, make sure to go away a remark within the remark segment beneath.
The publish How to Style a Beautiful Pricing Table in Divi seemed first on Elegant Themes Blog.
WordPress Web Design