How to Make a Horizontal Email Opt-in in Divi

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.

VIEW LIVE DEMO

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.

Step 2
The section needs to have the following settings:

• Content
• Design
• Advanced

Background:
Background-color: #d38c3f

Step 3
The row needs to have the following settings:

• Content
• Design
• Advanced

Nothing needed

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

• Content
• Design
• Advanced

Text

Content
Ad a h3 title like this:

Subscribe to our newsletter

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

• Content
• Design
• Advanced

Email account
Add here your service provider and list

Fields
Enable: Use single name field

Background
Disable: use background color

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

@media (min-width: 981px) {
.custom_emailoptin .et_pb_newsletter_form .et_pb_contact_field_half {
    flex-basis: 30%;
 }

.custom_emailoptin .et_pb_newsletter_fields>* {
    flex-basis: 30%;
}

.custom_emailoptin.et_pb_newsletter_layout_bottom_top .et_pb_newsletter_form {
    padding-bottom: 0px;
}

.custom_emailoptin p.et_pb_newsletter_field {
    padding-bottom: 0px;
}

.custom_emailoptin .et_pb_newsletter_button_wrap {
	margin-top: 0px;
}

.custom_emailoptin .et_pb_newsletter_form .input,
.custom_emailoptin .et_pb_newsletter_form input[type=text], .custom_emailoptin .et_pb_newsletter_form p.et_pb_newsletter_field input[type=text] {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
}}

.custom_emailoptin .et_pb_newsletter_description,
.custom_emailoptin .et_pb_newsletter_footer {
    display: none;
}

@media (max-width: 980px) {
.horizontal_optin_column_1 {
	margin-bottom: 0px !important;
}}