How to Create an inline Divi Opt In Form with the Divi Builder
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
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to Create Divi Social Share Buttons without having to install a Plugin
Today I’m going to show you how simple it is to create social share buttons for the Divi Wordpress Theme, without having to install “yet another” plugin.
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.
How to Fix the Divi Header on Mobile
As flexible as the Divi WordPress theme is, I do occasionally run into a few drawbacks now and again when it comes to the styling of certain parts of the theme.
0 Comments