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

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