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
How to add a custom shopping cart icon to divi with a product counter
In this post I’m going to run you through how to switch out the default Divi Woocommerce shopping basket icon for a custom shopping cart icon which allows you to not only use a completely custom icon, but also has a product counter which lets your users know what’s in your shopping cart.
How to add custom Icons to Divi’s social media module
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module
How to Add Custom Fonts to Divi
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
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.
Need the Best Wordpress Hosting?
Get the Divi Theme
In Need of a New Website?
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to add a custom shopping cart icon to divi with a product counter
In this post I’m going to run you through how to switch out the default Divi Woocommerce shopping basket icon for a custom shopping cart icon which allows you to not only use a completely custom icon, but also has a product counter which lets your users know what’s in your shopping cart.
How to add custom Icons to Divi’s social media module
We all know the divi social media module is an amazing tool to help you effortlessly display your social media networks, but with that convenience comes a lack of ability to customise the social media icons. If you’ve wondered how to solve this problem and customise social media icons or add new social media networks in the easiest way possible, you’re in the right place. Let’s learn how to How to add custom Icons to Divi’s social media module
How to Add Custom Fonts to Divi
Adding custom fonts to websites can be a pain. Learn how easy it can be to install custom fonts to the Divi wordpress theme with my step by step tutorial.
1 Comment
Submit a Comment
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Great tutorial. Code worked perfectly. Thank you!