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 create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.
How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!
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
Get the Divi Theme
Did you find this post valuable? If so, please consider sharing to help me, help more people
More Posts
How to create a floating call to action (CTA) bar on mobile using the WordPress Divi theme
Here’s a quick tutorial showing you how to make a floating call to action (CTA) bar on mobile using the Wordpress Divi theme.
Fixed CTA bars are commonly used on mobile viewports and can be used at the top or bottom of the viewport and use scroll or fade in animations in order to draw attention.
They can be effective tools for increasing user conversion on mobile devices where attention spans are shorter than your typical desktop user.
How to create cool custom buttons for the Divi wordpress theme
Are you bored by divi themes existing button modules? In this post I’m going to show you a quick and simple method on how to create custom divi buttons with incredible animated hover effects to engage your website visitors. Let’s ditch the boring default buttons and create something truly unique for your divi website … your website deserves it!
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.
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!