Divi UI Challenge #10 – Subscribe Section
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
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
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
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
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
And the following code under After
To ensure our ‘X’ is centered, under the Main Element input
Save & Exit
That’s us done! Should be looking pretty amazing!
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.
Get 1 Free Divi Layout Pack, Child Theme or Plugin
In your Inbox. Once a month. Every month.