How to Create an inline Divi Opt In Form with the Divi Builder

Post By : Jim Monkhouse
Posted in : Divi Tutorials
Want to learn how to create a neat inline email optin for your Divi Website? All it takes is copying and pasting a few lines of CSS code. Read below to learn how,

The Divi Email Optin is an awesome module for helping you to easily grow your email list, but one thing that’s always frustrated me is the way that it doesn’t display inline. 

We don’t always want our email optin taking up half of our screen, we might want to fit it in our top header or footer, or integrate it neatly into our content. 

You can see an example of this slimline email optin across this website located in the footer

This tutorial will show you how to quickly and easily convert the standard Divi module into a slimline module.

Create the Module

First thing to do is “Enable the Divi Builder” Create a row and single column and then add the “Email Optin” module. 

In the Content Tab

Text “Remove the title text”

Text “Remove the body text”

Email Account -> connect your email account 

Fields : “Use Single Name Field”, toggle “Yes” 

In the Design Tab

Style however you want

In the Advanced tab

CSS ID & Classes > add the class “inline-optin”

The next step is to copy and paste a few lines of CSS to handle the mobile, tablet and desktop view of the email optin

Add the CSS

/*SLIMLINE EMAIL OPTIN*/

.inline-optin .et_pb_newsletter_field,

.inline-optin .et_pb_newsletter_button_wrap {

/* flex-basis:24.5%;*/

flex-basis:32%;

}

.inline-optin .et_pb_newsletter_footer {

margin-top:0;

}

.et_pb_column_4_4 .inline-optin {

display:block;

}

.inline-optin .et_pb_newsletter_description,

.inline-optin .et_pb_newsletter_form {

width: 100%;

padding: 0;

}

@media (max-width:800px) {

.inline-optin .et_pb_newsletter_field,

.inline-optin .et_pb_newsletter_button_wrap {

flex-basis:49%;

}

.et_pb_column_4_4 .inline-optin .et_pb_newsletter_description {

margin-bottom:10px;

}

}

@media (max-width:479px) {

.inline-optin .et_pb_newsletter_field,

.inline-optin .et_pb_newsletter_button_wrap {

flex-basis:100%;

}

}

 

There are two ways to add the CSS

Method One – Add to the WordPress Stylesheet

Login to the WordPress dashboard and navigate to  “Appearance” > “Theme Editor” > “Style.css” and then you can add the code to the bottom of the “style.css”

Method Two – Add to the CSS in the Divi Theme Options

Login to the WordPress dashboard and navigate to,  “Divi” > “Theme Options” > “General” > “Scroll to the bottom of the page” > add the css code block within the “Custom CSS” field 

And that’s it

All done, if the changes haven’t pulled through yet, just clear your browser cache and refresh your browser window

Jim Monkhouse
Jim is a web designer & developer with over seven years experience building websites for small business using the wordpress theme

Did you find this post valuable? If so, please consider sharing to help me, help more people

More Posts

Five Stunning Feminine Divi Layouts

Five Stunning Feminine Divi Layouts

We all know that Divi can create amazing small business websites, but clean, magazine style feminine layouts are usually the preserve of Squarespace. Here’s a list of five stunning feminine wordpress Divi Layouts that gives squarespace a run for its money.

0 Comments

Submit a Comment

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