How To Create A Slim Email Optin Form In Divi
Please note: This post may contain affiliate links. However, I highly recommend and personally use all of these products, and there is no additional cost to you. Thank you so much for supporting me!
With Divi’s built-in Email Optin module, there are so many creative ways to display your form on your site. One of the most popular ways is a slim horizontal banner just below the header on your homepage. Inspired by Geno Quiroz (The OG of Divi Designers) Super Slim Sign Up Module post, I’m going to share with you just how I achieve my own slim optin form.
Here is a preview of the Before and After with my own custom styles.
Before we get started…
Please note: At this time, the Divi Email Optin Module is only compatible with Mailchimp, Aweber and Feedburner. If you are using a different service provider, I recommend setting up your email optin form via the Bloom Plugin by Elegant Themes.
If you are using Bloom, check out this awesome tutorial by Michelle Nunan over at Divi Soup: Super Slim Optin Form
Now let’s get started…
- Insert a 1/3 2/3 Column Layout
- Go into the Section Settings
- Change Your Background Color
- Set the Top and Bottom Padding to 0px, Click Save & Exit
- Insert Text Module to the Left 1/3 column.
- Set The Text Color and Text Orientation
- Add Your Email Optin Text (Optional: Apply your own custom styling in Advanced Design Settings)
- Next, go to the Custom CSS tab and add the following CSS to the Main Content area: padding-top: 5%;
padding-bottom: 5%; (This will vertically align the text in the middle.) Then click Save & Exit
- Insert an Email Optin Module to the Right 2/3 Column
- Connect your Service Provider + List (I am using Mailchimp)
- Switch the Background Color to Off and set the Text Color
- Within the Custom CSS tab, apply the CSS Class: slim-email-optin, then click Save & Exit
- Apply Custom CSS in your Divi Theme Options, and modify the settings to fit your brand.
And that’s it! Again, there are many ways to achieve a slim email optin form using Divi, but this is just how I do it. I hope you found this tutorial helpful. If so, please share with your Divi friends!