Divi UI Challenge #1

by | Sep 26, 2016 | Divi UI Challenge, Tutorial

A big part of what we do here is developing full Divi Child Themes and Layout Packs. But we’ve recently taken inspiration from a design challenge floating around simply called the “Daily UI Challenge”. In a nutshell, designers challenge themselves to create some simple, but beautiful, piece of UI design each day. It’s not for client work, but simply for the joy of getting to play around. Many even go full-tilt and commit to 100 days straight.

So we’ve joined the challenge. Not quite every day, but every week, we’re going to design a single UI component and use the Divi Builder to make it. We’ll then show you exactly how we did it. Especially because we’ll be really stretching what the Divi Builder can do. You’ll then get your hands on a Divi Library download so you can play and tinker yourselves. A part of the challenge will be to make each UI component Customizer independant. What this means is that the component and all its settings will be completely containable in a single Divi Library item. Nice!

So with the pre-amble out of the way, what are we making first?

A subscribe section! Well, 2 actually.

Check them out (as actual working Divi sections) below and then keep scrolling for the step-by-step tutorial on how we built them.

Divi Subscribe Section – Tile Version

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

About     FAQ     Contact

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

Divi Subscribe Section – Full Width Version

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

About     FAQ     Contact

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

Ok. So let’s get stuck into it.

Firstly, let’s take note of a few things that are not achievable by off-the-shelf Divi Builder settings but are instead handled through custom CSS. Don’t worry, we’ll cover how this works in each section.

  • The form fields have a line on the bottom, or a bottom border
  • The form fields have 0 padding to the left and right
  • The form button is not full-width
  • The menu at the bottom of the left column is aligned to sit at the bottom of the column
  • The tile version has a drop shadow on the row

Great. Let’s now go over the basic structure. The tutorial will work off the tile version and we’ll cover the full-width one at the end. Additionally, we’re going to use the Divi Builder on the Post Editor screen, but the Divi Front End editor follows the same basic steps.

Sections, Rows and Modules

First we launch the Divi Builder via the big ol’ Use The Divi Builder button.

We then add a Standard Section.

Add a 2 column layout.

Now in our first column we are going to add 2 x Text Modules.

And in our second column we are going to add 1 x Text Module and 1 x Email Optin Module

So with our Standard Section, 2 columns and 4 modules, our layout is looking like this.

Content and Divi Settings

With our layout done, let’s now look at content and settings.

For our section, we want to give it a colour background. We used #e73569, but you’ll obviously use a colour from your own brand palette.

So click the section settings button.

Click General Settings. It should default to this.

Scroll down to Background Color and select or paste in your desired background color.

Now we want to move on to the row settings. So close the section settings and then click on the row settings button.

Then toggle Use Custom Gutter Width to Yes and slide the Gutter Width slider to 1.

Now set the top and bottom padding to 0.

No over on Advanced Design Settings we want to Equalise Column Heights.

Give Column 1 a Background Image and set custom padding. For the background image, it’s important to use something that is going to contrast nicely with the text above it. In our demo, we grabbed an image from Unsplash and used an image editor to put a dark overlay on top of it.

Give Column 2 a background color and set custom padding.

For both columns set Keep Column Padding on Mobile to Yes. Also, it’s always a good idea to view the padding on tablet and mobile sizes and adjust for each of these sizes.

Now you can close the row settings.

For content, we’re just adding the following:

  • In the first Text Module in the left column, we are adding some text and setting it to H1 heading size.
  • In the second Text Module in the left column are adding 3 words, adding a few spaced in between and then turning them in to links.
  • In the Text Module in the right column we are just adding another sentence or 2 of text.
  • In the Email Optin Module we are selecting the mailing platform we have connected to the site (in our case this is Mailchimp) and then selecting the appropriate list.

Without any tweaks or settings, this is what things are looking like on the front end.

Not bad, but let’s take this to the next level.

For each of the modules, we’re going to play with the following settings until we get something we like the look of.

  • Font (We used Abel  for Headings, Buttons and Links and Open Sans for body)
  • Line heights
  • Font weights and letter spacing
  • Font colors

Next we opened the settings for the Email Optin Module and in General Settings toggled Use Background Color to Off and set Text Color to Dark.

In Advanced Design Settings, we do the following:

  • Set Form Field Background Color to transparent
  • Set Form Fields Focus Color to transparent
  • Toggle Use Custom Styles for Button to On

Simply play with button styles until you get something you are happy with. We used our bright pink color for the background and then played with the text settings until we had something we liked.

With all of these settings in place, we have this.

Looking good.

Now let’s look at the Custom CSS we need to add to get it looking like our Demo.

Custom CSS

There are 3 areas we are going to add Custom CSS to.

  1. The Row
  2. The second text module (the one with the links) in the first column
  3. The Email Optin Module

The Row Custom CSS

The CSS code for the row simply gives us that cool drop shadow we see in the demo. Writing drop shadow (or box-shadow) CSS can be a bit fiddly, especially when you want to make sure it’s cross-browser compatible. To make it easy, we always use this handy generator tool. This will save you heaps of time.

Once you’ve got the effect you want, simply copy the code from the generator and then go to the Custom CSS tab on the Row settings and paste it in to the Main Element field.

The Text Module Custom CSS

The CSS code for this Text Module allows us to position the links at the bottom of the column in a way that aligns them with the bottom of the Email Optin form in the second column. Because our column heights are responsive to the width of the screen and we’ve got Equalise Columns Heights set to one, playing with Margin or Padding isn’t going to give us a consistent look.

The answer is setting the Module to position: absolute;. Going in to CSS positioning is beyone the scope of this tutorial, but if you’re interested in growing your understanding of CSS, positioning is a big deal. W3schools have a great overview.

The bottom: 120px; line positions the text module 120px from the bottom of the column. The 120px is chosen to match the 120px padding we set earlier for the bottom padding of the 2 columns. Of course if you set different padding, you’d use the equivalent here.

The Email Optin Module Custom CSS

The CSS code for the Email Optin Module does the following:

  • Gives us the bottom line (bottom border) on each of the form fields
  • Removes the border radius (curve) from the corners of the form fields
  • Removes the left and right padding on the form fields
  • Changes the width (to 50%) of the form button
  • Adds 20px of margin above the form button

Note that we have had to use !important a bit here to make sure the CSS we are writing takes priority and is applied at the front end. To get your head around !important, you can read more here.

We are adding the CSS to the Newsletter Fields and Newsletter Button sections for this module.

And that’s it! We should now have something that looks just like our Demo.

If you’ve followed along all this way, give yourself a pat on the back (or even that Kit Kat you were saving for your 3pm low).

The Fullscreen Version

To make it go full-screen is super simple. Just do the following.

  • In the Row Settings, toggle Make This Row Fullwidth to Yes.
  • Remove the CSS from the row that gives us the drop shadow (box-shadow).
  • Remove the padding from the section.
  • Remove the background color from the section.

Some Final Things

There are a few things to consider or remember with this one:

  • You’ll obviously want to change colors and fonts to match your own site.
  • Using position: absolute; can sometimes cause layout issues on different screen sizes, so it’s important to test everything.

Download and Play

If you’d like to download the 2 sections so you can add them directly to your Divi Libray, just click the button below.

Download Now

I hope you liked this one and were able to learn something for your next Divi project. Also, don’t forget to subscribe below for our monthly Divi freebies.

Catch ya next week.

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