Hey Octynauts!

Welcome to our first UI Challenge Build for 2017! And she’s a beauty! A Galaxy themed Subscribe Section or Landing Page featuring the Email Optin module.

Like always, we’re building with the standard Divi builder settings with a few additional CSS tweaks.

Here’s a screen grab of what we’ll be building today.

Ok, Let’s go! Firstly from your Dashboard homepage in the top function bar select +New and Page

Give your page a title (Subscribe Section) and in the far right function column under Template select Blank Page (this removes the footer and menu from the page which makes it a bit easier to design when previewing back and forth).

Now click on Use the Divi Builder. 

Today we’re going to be working with the Visual Builder again, so click on the Visual Builder Icon.

This will bring up an ’empty’ section that looks something like this.

Firstly we’re going to add our background image (the galaxy) in, so click on the Section Settings Icon in the top left corner.

Click on the Upload Button to select your image. Our chosen image is from unsplash.com, which is an amazing images resource. We did resize our image down to 1920x1280 and compressed it to 250kb. Save & Exit

Now click on the Green + Icon in the centre to Add a Row, and we’re going to choose a two column row.

This will bring up a pop up box for the left-hand module. Select Text module from the options menu.

This will bring up the Text Module Settings and insert the following Text Color: Light Text Orientation: Centre Content:

It’s Time To

Find Your Place

In The Universe

Then pop on over to the Design Settings tab.

And insert the following (leave the other design options as is) Header Font: Abel and ALL CAPS Font Size: 70px Text Font: Abel ALL CAPS and Bold Text Font Size: Size 16px Save & Exit

We should be looking something like this.

Now we’re going to add in the Subscribe Module.

Click on the Grey Cross Icon in the right hand side of the section.

And select the Email Optin option.

And fill in as follows (leave the rest of the design options as is)

Service Provider: MailChimp

Now even if you haven’t yet connected your service provider (i.e. MailChimp) the Divi Builder will still allow you to build the form and connect the service later.

MailChimp Lists: Octygon

Title: Begin Your Journey

Button Text: Launch

Use Background Color: Toggle to YES

Background Color: White (#ffffff)

Text Color: Dark

Text Orientation: Left

Now over in Design settings.

Fill in the following.

Form Field Background Color: Light Grey (#f7f7f7)

Form Field Text Color: Dark Grey (#333)

Focus Background Color: Light Grey (#f7f7f7)

Focus Text Color: Pink (#DF5AFF)

Use Focus Border Color: Toggle to YES

Focus Border Color: Pink (#DF5AFF)

Header Font: Abel, ALL CAPS and Bold

Header Font Size: 16

Header Text Color: Blue

Header Letter Spacing: Leave as is (0px)

Header Line Height: Leave as is (1.7em)

Body Font: Abel

Body Font Size: 14

Body Text Color: Leave as is

Body Letter Spacing: Leave as is (0px)

Body Line Height: 0px

Use Border: Toggle to NO

Custom Margin: Leave as is

Custom Padding:

Use Custom Styles for Button: Toggle to YES

Button Text Size: 20px

Button Text Color: White (#ffffff)

Button Background Color: Blue (#06d6ee)

Button Border Width: 2px

Button Border Color: Blue (#06d6ee)

Button Border Radius: 6px

Button Letter Spacing: 6px

Button Font: Abel, ALL CAPS and Bold

Add Button Icon: Yes

Button Icon:

Everything else can be left to the default

note: In one trial we noticed the Button Hover Border and Background Colors didn’t default to the blue but rather a different shade. So you may need to manually change this under the Design settings.

Save & Exit

This is where we should be at

Looking good!

Now for a little bit of CSS and Design Tweaks.

We’re going to jump into the Row Settings by clicking on the top left settings icon.

And jump on over to Design first

Scroll down to Column 1 Custom Padding and input 100px under Top.

Save & Exit

Using the Visual Builder increase the Section Padding at the top and bottom to 130px. Do this by hovering over the Padded area and click-dragging to increase the padding.

Now let’s do some CSS for the Email Optin module. Click on the Module Settings Icon

Under CSS Settings

Scroll down to Main Element and input the following

border-radius: 6px;

Now we’re going to use a CSS Generator to create a box shadow around our Email Optin Module. So jump on over to cssmatic.com and input the following to create your code.

Copy your code and paste it back in the Email Optin CSS Main Element section, under the previous code.

Now while we’re using the generator we’re going to create another code. Input the following

Copy the code and paste it back in the Email Optin CSS Newsletter Button

Save & Exit

So that’s all our CSS for the Email Optin module, now let’s jump on over to the Text Module

Click on the Text Module Settings Icon.

Under Design Settings

Under Header Font select Italic and Bold (as well as the previously selected ALL CAPS)

Now over in CSS

We’re going to create the ‘X’ effect that sits behind our text.

For some further explanation on the finer details in how this was built, pop on over to our YouTube Channel and listen to the tutorial for this Challenge (from approx 11.00 for the code explanation)

Input the following code under Before

content: “”;
display: block;
position: absolute;
width: 300px;
height: 2px;
background-color: rgba(244,244,244,0.5);
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -1px;
transform: rotate(45deg);

And the following code under After

content: “”;
display: block;
position: absolute;
width: 300px;
height: 2px;
background-color: rgba(244,244,244,0.5);
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -1px;
transform: rotate(135deg);

To ensure our ‘X’ is centered, under the Main Element input

position: relative;

Save & Exit

That’s us done! Should be looking pretty amazing!

How’d you go? As always, leave any feedback, questions or Challenge requests below! Another challenge down, well down everyone, hope you all picked up something new.

The Download

Want to add this to your Divi Library? Here’s the download for the section. Remember you’ll need to unzip the file to get the uploadable .json file.

Divi UI Challenge #10 - Subscribe Section (145 downloads)