How to Make a Horizontal Email Opt-in in Divi

by | Apr 18, 2019 | Divi tutorials | 1 comment

How to make a horizontal opt-in in Div

With the email opt-in module, you can let your visitors signup for your email list. You can choose 2 layouts for this module title and description on the left and a stacked form on the right or title and description on the top and a stacked form on the bottom. Both of these layouts require some space for your opt-in.

In this tutorial, we will be going to create a horizontal opt-in with a title on the left and a horizontal form on the right.

This is what we will be building.

Horizontal opt-in

Scroll to the bottom

Step 1
Create a section with a row and use a 1/3 – 2/3  column structure. Place a text module in the 1/3 column and an email opt-in module in the 2/3 column.

Section layout

Step 2
The section needs to have the following settings:

Background:
Background-color: #d38c3f

Spacing

Custom Padding
Top: 0px
Bottom: 0px
Left: 0px
Right: 0px

Nothing needed

Step 3
The row needs to have the following settings:

Nothing needed

Spacing

Custom Padding
Top: 10px
Bottom: 9px
Left: 0px
Right: 0px

CSS ID & Classes

Column 1 CSS Class
horizontal_optin_column_1

Step 4
The text module in the 1/3 column needs to have the following settings:

Text

Content
Ad a h3 title like this:

Subscribe to our newsletter

Heading text

H3

Heading 3 font weight:
Bold

Heading 3 text color:
#ffffff

Spacing

Custom Margin
Top: 5px

Nothing needed

Step 5
The email opt-in module in the 2/3 column needs to have the following settings:

Email account
Add here your service provider and list

Fields
Enable: Use single name field

Background
Disable: use background color

Layout
Body on bottom form on top

Name full width
Disable

First name fullwidth
Disable

Last name fullwidth
Disable

Email full width
Disable

Button
Use custom style for button:
Enable

Button text size:
16px

Button text color:
#ffffff

Button background color:
#061f5c

Button border width:
0px

Button border radius:
0px

Font-style:
Uppercase

Show button icon:
No

Spacing

Custom padding
Top: 0px
Bottom: 0px
Left: 0px
Right: 0px

CSS ID & Classes

CSS Class
custom_emailoptin

Step 6
Place the following CSS in Divi > Theme Options > CSS, or in your Divi child theme.

1 Comment

  1. Nosunelanube

    Thanks Marks Iris going to be very usefull in my web

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

96 Shares
Share96
Tweet
+1
Pin
Buffer