#

How To Create A Slim Email Optin Form In Divi

Divi, Web Design

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


 

After

 

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…

 

  1. Insert a 1/3 2/3 Column Layout
  2.  

     

  3. Go into the Section Settings
  4.  

     

  5. Change Your Background Color
  6.  

     

  7. Set the Top and Bottom Padding to 0px, Click Save & Exit
  8.  

     

  9. Insert Text Module to the Left 1/3 column.
  10.  

     

     

  11. Set The Text Color and Text Orientation
  12.  

     

  13. Add Your Email Optin Text (Optional: Apply your own custom styling in Advanced Design Settings)
  14.  

     

  15. 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
  16.  

     

  17. Insert an Email Optin Module to the Right 2/3 Column
  18.  

     

     

  19. Connect your Service Provider + List (I am using Mailchimp)
  20.  

     

  21. Switch the Background Color to Off and set the Text Color
  22.  

     

  23. Within the Custom CSS tab, apply the CSS Class: slim-email-optin, then click Save & Exit
  24.  

     

  25. Apply Custom CSS in your Divi Theme Options, and modify the settings to fit your brand.
  26.  

 
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!

Download Your Free Divi Layout Below



Hey! I'm Brittney.

I'm a branding + web designer for creative entrepreneurs and bloggers. I'm also an obsessed dog mom, chai tea lover, and #DiviEnthusiast Stick around to learn more about branding, web design, blogging and business tips.

Subscribe



Divi WordPress Theme
Bloom Email Optin Plugin
Monarch Social Sharing Plugin
Start Your Business

Pin It on Pinterest

Share This