Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

The Subscribe Module that comes with Divi is great as it is. But the current trend is to have the subscribe option as a call to action above the fold on the landing page and sometimes a horizontal subscribe section just fits best with your site.

So here are a few tweaks I came up with so that we would not need to install another plug-in for this.

The first thing I did was create the Section that I want to use this module in. If you are new to sections, you can check out this great tutorial by Elegant Themes right here.

I gave the section a unique CSS Class so that my customization would not affect the regular module in other places. In this case I used the following class.

 .demo-subscribe-section

demo-section

Now I simply add a new row with a single column and add the Subscribe Module. You will then need to configure your Subscribe module so that it connects to your newsletter account such as MailChimp, FeedBurner and Aweber.

If you are not sure how to configure the module, Elegant Themes put together a great introduction video along with some great documentation to go along with this right here.

 

subscribe

 

 

Next comes the CSS. Simply add the following code to your Custom CSS  box in your Divi ePanel or better yet, your child theme stylesheeet.

/*------------------------------------------------*/
/*---------------[Custom Subscribe]---------------*/
/*------------------------------------------------*/

.demo-subscribe-section .et_pb_newsletter{padding: 20px 10px; border-radius:10px;}
.demo-subscribe-section .et_pb_newsletter_description {padding: 0 0 20px 0; width: 100%;}
.demo-subscribe-section .et_pb_newsletter_form {width: 100%;}
.demo-subscribe-section .et_pb_newsletter_form p {display: inline-block; margin-right: 40px;}
.demo-subscribe-section .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 300px;}
.demo-subscribe-section .et_pb_newsletter_button {padding: 2px 6px;}
.demo-subscribe-section a.et_pb_newsletter_button:hover {padding: 2px 6px!important;}
.demo-subscribe-section a.et_pb_newsletter_button:after {display:none;}
.demo-subscribe-section .et_pb_newsletter_form p:nth-child(3) {display: none;}
.demo-subscribe-section .et_pb_column_4_4>.et_pb_newsletter {display: inherit; align-items: center;}

@media only screen and (max-width: 1100px) {
.demo-subscribe-section .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 275px;}
}

@media only screen and (max-width: 980px) {
.demo-subscribe-section .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 220px;}
.demo-subscribe-section .et_pb_newsletter_description { width: 100% !important;}
}

@media only screen and (max-width: 767px) {
.demo-subscribe-section .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 240px;}
}

@media only screen and (max-width: 479px) {
.demo-subscribe-section .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 180px;}
}

/*-------------[End Custom Subscribe]-------------*/
/*````````````````````````````````````````````````*/
/*````````````````````````````````````````````````*/

 

You will need to replace the “.demo-subscribe-section” with the CSS Class you named that section. If you are only using the form in one place or want all your Subscribe forms to look like this, then you can leave that class out all together.

Add a few more things like some blank dividers, some text and a background image and it should come out looking something like the image below.

 

customize the subscribe module

 


 

My Email Field Is Missing? *Side Note Added 4/10/2015

For some individuals using this code or the Divi Booster plugin by Dan Mossop, their email field went missing.  It turns out that for some reason the 3rd nth-child which is the Last Name Field for most users, turns out to be the Email Field for a few people. Although I am not sure what that is the case, we have a solution.

If you used my tutorial to make your subscribe module, then just remove this line of code.

 

.demo-subscribe-section .et_pb_newsletter_form p:nth-child(3) {display: none;}

 

If you are using Divi Booster for this feature you just need to update to the latest version of 1.4 as it has been resolved in this update.

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest