Divi UI Challenge #2

by | Oct 6, 2016 | Divi UI Challenge, Tutorial

Welcome back and welcome to our second Divi UI Challenge! To check out past and future Challenges, you can go here.

If this is your first time here, Divi UI Challenges are a weekly challenge we’ve set ourselves where we design, build, show-you-how and then share the download of a single design component built exclusively with Divi. It’s basically a chance for us (and you) to play, unrestricted, with design. Good times! ūüôā

If you missed it, last week we released a tutorial on building a Custom Subscription Section, which you can catch up on here.

This week we’ve pulled together a simple but nice looking 3 Column Pricing Table.

This beauty has been built with the standard Divi Builder settings plus some minor CSS tweaks. Super simple.

This week we’re excited to share this tutorial in 2 different ways! You can follow along either through the written guide below, or through our first video tutorial.¬†Yay for options… or heck, use both.

So without any delay, here’s this week’s tutorial….

FYI, we are working using the Divi backend builder, but all of these steps apply to the front end builder as well if you’d prefer that.

Here we go…

Video Tutorial

Subscribe to our YouTube Channel for future video tutorials.

Sections, Rows & Modules

From your dashboard, add a new page from the top navigator bar

Add new page

Click Use The Divi Builder 

screen-shot-2016-10-04-at-9-16-36-pm

On the right side of your page builder, under ‚ÄėTemplate‚Äô, change from ‚ÄėDefault‚Äô to ‚ÄėBlank Page‚Äô.

screen-shot-2016-10-04-at-9-17-09-pm

This, for the sake of previewing the page, removes the menu and the footer. You can turn them back on later, but it’s nice to have a blank canvas.

Back to the Divi Builder, Click on Insert Column/s and select a One Column Row (the top left option).

screen-shot-2016-10-05-at-9-30-00-pm

Content and Divi Settings

Click on Insert Module/s and scroll down to select the Pricing Tables option.

screen-shot-2016-10-05-at-10-27-07-pm

This will bring you to the Pricing Tables Module Settings.

Keep in mind when doing pricing tables…. We’re going to add all of our design tweaks at this stage before duplicating the tables (or columns) into 3. That way we’re ensuring consistency across all three tables. We’ll add the different prices/headings/colours/etc afterwards.

So from¬†Pricing Tables Module¬†Settings¬†click on¬†Add New Pricing Table. FWIW, we think this should be changed to “Add New Pricing Option” or something of the sorts. ūüôā

add new pricing table

Fill in as follows…

Make this Table Featured: NO

Title: Option 1

Subtitle: This is a subtitle

Currency: $

Per: wk

Price: 29

Button URL: Insert your URL (the link/page you want the click directed to when clicking ‘Order Now’)

Button Text: Order Now

Content: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

We’ve grabbed our¬†‘Lorem Ipsum’ from¬†lorem2.com

Click Save and Save & Exit

Let’s Preview. It¬†should look something like this. The only difference for you will be it will have your site colours and button settings.

Preview Option 1

Ok, back in the editor, click on the Settings Button for the Pricing Tables module.

settings

This takes us to get back to¬†Pricing Table Module Settings.¬†We’re going to move through the Advanced Design Settings now. As mentioned earlier, these will all be automatically prescribed to all 3 pricing tables when duplicated later.

Advanced Settings

Complete as follows.

Table Header Background Colour: We‚Äôre setting to transparent.¬†To do this we set the colour to white then toggle (on the far right slider) straight down to zero. The ‚Äėcode‚Äô for this should read; rgba (255,255,255,0)

Show Bullet: Off

Centre List Items: Yes

Header Font: We’ve chosen Abel and selected all caps (TT)

Header Font Size: 22

Header Text Colour: White (to suit the dark background Рwe’ll get to that)

Header Letter Spacing: Abel is quite a tall narrow font so we’re going to give it 2 pixel letter spacing.

Header Line Height: leave as is (1em)

Subheader Font: Abel

Subheader Font Size:  16

Subheader Text Colour: White

Subheader Letter Spacing: leave as is (0px)

Subheader Line Height: leave as is (1em)

Currency & Frequency Font: Abel

Currency & Frequency Font Size: 16px

Currency & Frequency Text Color: White

Currency & Frequency Letter Spacing: leave as is (0px)

Currency & Frequency Line Height: leave as is (1.7em)

Price Font: Abel

Price Font Size: 80

Price Text Color: White

Price Letter Spacing: leave as is (0px)

Price Line Height: leave as is (82px)

Body Font: Abel

Body Font Size: 14

Body Text Color: White

Body Letter Spacing: leave as is (0px)

Body Line Height: leave as is (24px)

Background Colour:¬†We’ve¬†chosen a nice dark colour (we‚Äôve gone with #262626)

Use Border: Yes

For some reason when you select ‚ÄėNo‚Äô to Use Border¬†it defaults to a light 1 pixel border. But if we turn it to ‚ÄėYes‚Äô then we have the controls over the border. Which we‚Äôll complete as follows.

Border Color: leave unselected

Border Width: set to ‚Äė0‚Äô – This effectively removes¬†the border

Border Style: leave as is (Solid)

….. continuing on…. still with us?

Use Custom Styles for Button: YES

Button Text Size: 14

Button Text Color: White (for yellow buttons)

Button Background Color: We’ve chosen a mustard/yellow (#eab619)

now here‚Äôs a little Divi Hack (trick) for you. We actually want a ‚Äėlarger‚Äô Button with more¬†padding, but this is not available in Divi button settings. Of course you could create it in Custom CSS‚Ķ or you could use this little trick.

Button Border Width: set to a larger number like 10

Button Border Color: set as same color as Button, in this case the mustard/yellow (#eab619)

These two steps together create that extra space around your Button text. Keep in mind it only works when your button background colour and border colour are the same.

…moving on‚Ķ

Button Border Radius: 2

Button Letter Spacing: 2

Button Font: Abel. And All Caps (TT)

Button Icon: NO

Button Hover Text Color: White

Button Hover Background Color: We copied in our mustard/yellow colour again but then transitioned it to a slightly richer yellow. Just so we have a slight change when hovering.

Button Hover Border Color: Make sure you copy the exact color as the step above

Button Hover Border Radius: 2

Button Hover Letter Spacing: 2

Custom CSS

Ok all of this so far we’ve achieved in the Advanced Design Settings but there’s a couple of things we’d like to achieve using a bit of Custom CSS

  1. Add a drop shadow to the button
  2. Add more padding to the outside of the tables
  3. Increase button size (not dependant on content)

Jump over to Custom CSS by clicking on the Pricing Module settings.

settings

This will again take you back into Pricing Tables Module Settings. Custom CSS is the third tab option along the top menu.

Custom CSS

Firstly let’s work on adding a drop shadow to the buttons.

On the Custom CSS page you‚Äôll need to scroll near to¬†the very end of the form for the ‚ÄėPricing Button‚Äô section.

Drop Shadow CSS can be a bit tricky because you need to work with something called vender prefixes. Which basically means that if you’re viewing in multiple browsers that you can ensure consistency across them. Now the CSS is super fiddly and can take a painfully long time so we recommend using a CSS generator. You can just google CSS box shadow, in this case we’ve used ccsmatic.com/box-shadow. You input your settings and it generates the code needed. Have a play around with the settings if you have time and take note of the difference it makes to the code.

We set our settings (in the cssmatic.com form) to…

Horizontal Length: 0

Vertical Length: 20

Blur Radius: 30

Spread Radius: 0

Shadow Color: Black

Background Color: White

Box Color: the mustard/yellow #e7a61a

Opacity: 1

and Toggle towards Outline 

Copy the text from the generator on the right and paste it back in the Pricing Button field of the Custom CSS page of the Pricing Tables Module Settings.

Save & Exit

and click on¬†Preview… should be looking like this now.

box shadow preview

Perfect!

Our second Custom CSS task is to work with the padding a bit.

So jump back into the Pricing Table Module Settings and over to Custom CSS.

Scroll down to Main Element and insert

padding: 40px;

Save and Save & Exit

Now let’s duplicate our tables (or columns).

In¬†Pricing Table Module Settings¬†you want to click on the¬†duplicate icon that’s to the left of¬†Option 1. Looks like this…

duplicate

Click that twice and you’ve now got 3! Looks like this in the Module Settings

3 tables

Save & Exit and Preview and this is how it looks in preview.

three tables in preview

Now our third task in Custom CSS is to increase the width of the Buttons.

As it stands, the button width is determined by the text content. It automatically pads around the content, so if there is less content the buttons are automatically smaller; if more content then the buttons are wider. But here we’d¬†like to increase the size of the buttons, regardless of the quantity of words of content within.

Back into Pricing Tables Module Settings and over to Custom CSS

Scroll back down to the Pricing Button¬†field. Under the drop shadow text insert the following…

min-width: 80%;

Save & Exit

Preview. It’s always important to check how it looks across different screen sizes. Play with your screen width in the preview tab and check you’re happy with the 80%.

almost there!

Finishing Touches

Now let’s¬†add in the details unique to each of the tables. i.e. prices, headings etc.

Back into¬†Pricing Tables Module Settings, you’ll see the 3 table columns¬†listed.

Click on settings (individually for each Table that needs changes made)

settings

In this case we just need to update the following…

Title: Option 2 (or 3)

Price: 59 (or 119)

Button URL: you will need to update with the correct URL for this table’s option

Now, we would also like to change the background color of the 2nd and 3rd tables so they slightly increase in darkness.

This is done easily (for each individual table) in Advanced Settings of the Pricing Tables Module Settings

advanced design settings

and scroll right down to¬†Background Color. If you remember our Table 1 was set to #262626 (a dark grey) so we’re going to change¬†this background to a¬†slightly darker (#212121) option, and the 3rd table’s background darker again (#1e1e1e).

Last Step!!!

Lastly we just need to add a background image to the whole section.

So back on the main Divi¬†Builder page click on the Settings icon (3 lines) of the¬†Section Module. That’s the top icon on the far left¬†blue¬†bit.

Main Section Module

In Section Module Settings click on Upload an Image. Grab from your media library or upload from files.

We grabbed ours from unsplash.com. This site has some great stock images that are shared and open sourced, so anyone can use them for anything. A lot of the images can be quite large file sizes so will need resizing (ours was resized to 1920x1280 and compressed).

Save & Exit

Preview, should be looking just as amazing as this below!

final-image

Done! And we’ve achieved this with standard Divi Builder¬†settings and a tiny bit of Custom CSS.

Well done! Shoot any questions you might have in the comments below and feel free to share it around.

Download the Layout for your Divi Library

Want to download the section? Here you go. ūüôā

Download Now

Get 1 Free Divi Layout Pack, Child Theme or Plugin

In your Inbox. Once a month. Every month.

Are you ready for Gutenberg?

We've built a plugin that makes it super easy to create Custom Gutenberg Blocks.

Check it out

You have Successfully Subscribed!

Pin It on Pinterest