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
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.
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.
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.
Great tut GQ.
I published a post on the Subscribe / Newsletter Module last week so I’ll add a section about CSS modifications with a link to this article.
That would be great. Thanks Keith!
Thank you so much for this tutorial! It is just what I needed!
Awesome. Hope it comes in handy for you!
Great Job Geno. This is something that I think many people wanted from divi and could not achieve until now.
Thanks Adam!
So good Geno, How did you get the radius edges on your subscribe form?
Thanks Andrew. This little tidbit decreases the padding to make it leaner and it also changes the border radius.
.et_pb_newsletter{padding: 20px 10px; border-radius:10px;}
Great job brother!
Thanks bro!!
Awesome bit of customization, Geno, and a great write-up. Thanks!
Thanks Dan! Appreciate the feedback!
This is an awesome post, Geno! Do you know how someone could make this work with an Infusionsoft form?
Thanks for stopping by the blog. Sorry for the delay in response but I have been battling the flu since last week and finally getting caught up. I have not used Infusionsoft forms but I’m sure you can come pretty close if not exactly. I will try and play around with that when I get a chance.
How do you remove the name field, so as to just have the email address field?
Hi Domininck. Thanks for checking this out. Try adding this bit of code…
.demo-subscribe-section .et_pb_newsletter_form p:nth-child(2) {display: none;}Hi Geno. I’ve tried this and when I add this code, the name field disappears and I am just left with the subscribe button. When I use the original code you suggest, I am seeing the “Name” field and the Subscribe button only; no “Email” field.
Never mind. I’m totally confused now. I removed all of the custom css code and I am getting the Name field and the Subscribe button. Don’t know if Divi updated this since this post originated or what, but I’m still not getting a Email field. Can only enter a name and press the Subscribe button.
Hi Anthony. I am not sure why you are having that issue. It must be something with your subscribe settings. I updated Divi this morning and all my subscribe modules are still working the same as you can see here. https://quiroz.co/demos/customize-subscribe-module-demo/
Run through all your Module settings again and your MailChimp account settings to make sure everything is wet up correctly.
Hi Geno..someone from the Facebook DIVI group sent me to your page and i’ve followed your directions, to the letter (I swear) and the input boxes are still stacking up vertically. Not sure what might be causing this issue!
Thanks Genevieve. Based on our correspondence in the Divi Users Facebook group, I see that you entered “.demo-subscribe-section” instead of “demo-subscribe-section” in the Class field of the Subscribe Module. Glad to see you have worked it out. Looks great!
Hi Geno. I have implemented this code (thanks very much) however my email box disappears.
Hi Mark,
Try replacing this…
.et_pb_newsletter_form p:nth-child(3) {display: none;}With this…
#et_pb_signup_firstname {display: none;}Let me know how it works!
Hi. I use other autoresponder. How to make this work since divi only allow mailchimp and aweber?
Thanks in advance
I think you will have to use the other autoresponder’s applicable plug-in and modify it to look like this.
Thanks a lot for this. I was looking for a way to remove the name field from the module and you post helped me alot. But all I seems to be able to do is remove the firstname field like you responded above. Can you suggest the code to remove the last name field also ?
Gogito, I’m trying to do the same thing… (remove the name fields so the only thing that shows is the email field) …did you ever figure out how to do this?
This tutorial shows you how to remove the last name only. The first name is required by default by Divi. To remove the first name, you will have to modify the custom.js and funtions.php files so that Divi does not require it. Unfortunately I do not have the instructions for that.
Im looking but still no luck. As Geno suggest its in those files but Im not as good as he is so its gonna take a while.
Hey, I created a thread here to ask for help, you can check it out if you want http://www.webdesignerforum.co.uk/topic/81549-remove-first-name-field-in-elegant-theme-divi-theme-subscribe-module/
I was able to find a solution:
#et_pb_signup_lastname {display: none;}
#et_pb_signup_firstname {display: none;}
.et_pb_newsletter_form p:nth-child(3) {display: none;}
This allows you to do only the email address.
Actually, I’ve already posted that above but as you can see, it only hide the field and that cause the module to stop functioning as Divi require the First name to work.
And like Quiroz said, we need to find a way for the theme to stop needing the First name itself for it to work.
I succesfully removed the first and last name field from the module but now it doesn’t work anymore. After enter an email, clicking th button doesn’t work. It appeared that it’s because the last name and first name field didn’t get fill in. I’m currently using the default module not the custom one and all I did was adding these 2 lines to custom css to hide the 2 field:
.et_pb_newsletter_form p:nth-child(2) {display: none;}
.et_pb_newsletter_form p:nth-child(3) {display: none;}
Can you suggest what css to add to make it work again ?
This tutorial shows you how to remove the last name only. The first name is required by default by Divi. To remove the first name, you will have to modify the custom.js and funtions.php files so that Divi does not require it. Unfortunately I do not have the instructions for that. You can see on my demo page that removing the last name and leaving the first name works just fine.
https://quiroz.co/demos/customize-subscribe-module-demo/
Thanks a lot. That was quick. Do you mind if I include your website in some of the post in mine ?
Sure. That would be great. 🙂
This is so perfect! It’s exactly what I needed for a landing page I’ve been working on. Thank you!!
Glad it worked for you Sonia 🙂
Geno,
I am following all the tips you have provided on your blog and I should say …just fantastic !
I am idiot for css but with your tips and info ,I am doing good.
one thing that I am trying to find out is how you have put the background picture into the form?
I mean from section choosing background image or from css?
Many thanks!!
Just add the following and replace my image url with your own.
.et_pb_newsletter { background-image: url(https://quiroz.co/2015/wp-content/uploads/2014/11/bottom-of-posts-optin-1.jpg); }Thanks Geno ,You are the man …I did your tips and It worked like a charm.Great!!
🙂
Geno,I have now my form on the image but it is only showing half part the image as my image is almost 400px in height .any possibility to show the full size?
also you are mentioning that :
“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.”
But how this would be possible to add divider as you have mentioned when working only one section to get the form to the almost bottom and get rid of that white space between image and manu?
please see how it looks at here:
http://www.japanmlm.com/
Much Appreciated!!
This should do it. Dont forget, if you find this useful, please share it via social media 🙂
/* Change Form Height */ .et_pb_newsletter { background-image: url(http://www.japanmlm.com/wp-content/uploads/2015/01/jpg.jpg); height: 310px; } /* Move the Form Down */ .demo-subscribe-section .et_pb_newsletter_description { padding: 200px 0 20px 0; width: 100%; } /* Remove Table Borders */ .entry-content table {border: 0px} .entry-content tr td {border-top: 0px;}Geno,That was a Golden and it is perfect.now I can modified the form easily.Thanks!
I shared your page on my facebook divi users page.
Thank you for this Geno! Can this be done somehow in a fullwidth section? Is it possible as the Subscribe module is not one of the available options – what do you think? Either way, I’m so excited to have found this!!!
Hi Sherri. Thanks for visiting the blog. Yes you can give this an appearance of a full width module. Just add this subscribe module in it’s very own regular section. Give that section the same background as the subscribe module and remove all the padding in the section and any margins in the subscribe module to keep it slim.
Thank you Geno – right under my nose lol
🙂
Hi, this was a great article. Ive tried it on my site- but the code is not mobile friendly- text and boxes were you enter name/ email looks stretched and text in main box is not centered. Is this something you have looked at? Love the fix on desktop – but so much of my traffic is from mobile :/
Hi David. I am sorry its not working on your particular mobile devices. The code has only been optimized for the ipad (portrait & landscape) and for the iphone 5 (portrait & landscape) as it was released prior to the release of the iphone 6 & 6+. But as you can see if you copied and pasted my code correctly, it works great in these devices…
Yeah..it’s not displaying properly on nexus, kindle or samsung galexy.
Hi there! This is an awesome article. However, I’ve noticed when I view the form in Internet Explorer, the text boxes run together and the subscribe button overlaps with the email text box. Have you noticed this at all? It works fine in all other browsers. It’s just IE that’s causing a problem. Thank you!
Hi Alana. Which version of IE are you using? Everything seems to work fine on IE9. Here is a screen shot.
Hi there! We’re using IE11
HI. I just checked my demo on IE11 and could not replicate the issue you described. Perhaps its doing this on a particular screen resolution I do not have. It would really be helpful to me if you can take a screen shot of what my demo page looks like on your device. That way I can try and correct any issues with the code. Thanks for all your help!
How about adding link to the subscribe button?
I don’t think you can add a custom link to the subscribe button. You are better off using a call to action module if you are trying to direct people to another page.
Just added this to my new site (www.sixgillfishing.com ) and nothing seems to be changing. I put it in to ePanel, and followed your instructions exactly. Still exactly the same as it was before. Anything I’m missing?
Hi Evan. Go into your section settings and remove the period before the CSS Class – demo-subscribe-section
Wow, talk about a rookie mistake. Thanks so much for the help.
Anytime 🙂
Hi Geno Im actually trying to add a part to the subscribe feature and add company name. How can that be done?
Thanks
Not with the Divi subscribe module. You might have to use something like Gravity forms to add the fields. It what we used on my latest project here…
How do I get the background of subscribe module to be semitransparent?
Just use RGB properties instead of the hex code. for example this is the RGB version of a standard blue. The last number represents the transparency. 0 being fully transparent and 1.0 being solid.
.et_pb_newsletter {background-color: rgba(30, 115, 190, 0.45)!important;}Love your blog. I’m a Divi lover and always seek help from your site.
I followed your instruction but it’s not centered like yours. Any suggestions?
Additionally, the arrow for the button goes away, like in the CTA buttons above. Here’s my URL: http://bearflagbranding.com/.
Any help would be appreciated!
I dont know why your site is making this happen. first make sure your subscribe module is set to center and not left
Then if that does not work you can add this left padding value to your existing css rule
.subscribe-section .et_pb_newsletter_form { width: 100%; padding-left: 60px; }You may have to modify the mobile queries as well in case it messes up the padding on smaller devices. If it does, just add that property and value to the mobile queries and reduce the padding.
It wasn’t centered… ugh… rookie mistake. Thanks for your help! 🙂
No prob. Thanks for letting me know. It helps me to know common mistakes and how they were solved so that I can help troubleshoot faster 🙂 Nice work on your site!!!
Thanks amigo… it’s always a work in progress. Thanks for the feedback!
Hello, thanks for such a kick-ass customization!
I am using two subscriber modules on the same page. In the first module, I added your code in one of the comments to make its background transparent. However, in the second module at the bottom of the page, I just want to use the background color of the section and not the RGB one. How I do that? Here’s my website where I am trying to use it: http://www.eyelifeworld.com
Thanks again! 🙂
You will have to give the second one a different name and add a second set of rules based on the new name. In the second set of rules you can leave this out.
.et_pb_newsletter {background-color: rgba(71, 71, 71, 0.65)!important;}Thanks for replying, Geno.
I gave the second subscribe module (the one at the bottom) this class ID: “subscribe-two-section” and used the same code as that of the first module with class ID “demo-subsribe-section”. I changed the “.demo-subscribe-section” to “subscribe-two-section”. I also left out the “.et_pb_newsletter {background-color: rgba(71, 71, 71, 0.65)!important;}” for the second module. It still doesn’t work. 🙁
Ok. Try adding the css class to the first one and the second one and change the color on the second one.
.subscribe-section .et_pb_newsletter {background-color: rgba(71, 71, 71, 0.65)!important;} .subscribe-two-section .et_pb_newsletter {background-color: ##19adde!important;}Geno, it’s already end of March and ET has released their Bloom email opt-in plugin. I’d have to say that your subscribe customization tip still stands the test of time as it’s still leaner and way more versatile with the texts and background images. So i`m still using your subscribe module on my home page and it still looks way sexier than Bloom`s.
Nonetheless when i used it again on another page, for some reason the Subscribe button border and text colors became stuck on a green color and I don`t know how to change it. See http://ahealthyjourney.ca/pntr1
Appreciate your help. Thanks very much for this customization so far.
Thanks for the compliment. Try clearing your browser cache. I don’t see the green on my browser. Your site looks great man! https://quiroz.co/2015/wp-content/uploads/2015/03/screenshot_05.jpg
And… I’m back. Another issue. I don’t even know what happened.
http://bearflagbranding.com/
Thanks!
What do you want to achieve?
OOps, sorry… The subscription is not horizontal like in the example. I don’t know why it stacked vertically like it has. :-/
Its horizontal on my browser.
Not on mine… did you clear cache? Both Firefox and Chrome:
https://drive.google.com/a/bearflagbranding.com/file/d/0B_hreaWKMd97NnoyNHVfRzFxQW8/view?usp=sharing
https://drive.google.com/a/bearflagbranding.com/file/d/0B_hreaWKMd97WmJZdGJJT2NQdVE/view?usp=sharing
Hi Brian. Yes I cleared cache and its showing up horizontal on Chrome, Firefox, IE and Safari.
Thank you for this awesome customization to the subscribe form! I have a quick question. How to I make the boxes where people enter their name and email move more to the left? I already have it set to Left justified, but I want to remove the padding that seems to be there so it’s even farther left.
Thank you!
Hello again,
I removed the .demo-subscribe-section coding because I wanted to make this site wide, however, now I’m getting rounded corners on the right side of the form. Here’s a link to show what I’m talking about. Can you please help me fix this?
http://coachjessiemay.com
I think I’m all set with my previous question.
Thanks so much!
Hi again,
Any idea why the name and email fields and button would move from the bottom to the top of the form?
I thought if I took out the CSS Class from both the epanel and the web page that this CSS coding would work site wide. However, the input fields appear at the bottom of the form on my home page and at the top on my Meet Me page. I’d like the fields to always be at the bottom.
Do you happen to know why this would be happening?
Thank you!
I’m not sure Jessie. Theoretically that’s how it should work. I just went to take a look at the page and I see you removed the horizontal features all together so I was unable to do any trouble shooting. Sorry.
Hi Geno. I am brand new to building my site in word press and can’t figure out how you got the subscribe module over the top of your picture…when I follow this tutorial, it stacks my modules. First I have my picture, then a white gap, then my subscribe bar…
And although I am following the tutorial to the best of my knowledge, my subscribe bar remains full size and is not narrowing like yours. Any advice?
Are you assigning the correct CSS Class in the Divi Page Builder section settings?
demo-subscribe-section
Yes, I believe so. Just to clarify, I would enter that in the subscribe module/section correct? And then when I copy the code and put it into the e-panel, do I remove the . from the code you provide? The css code is .demo-subscribe-section. Do I leave that with the dot or remove the dot…
Thanks. I have tried both so I am not sure what I am doing wrong.
Should I be placing demo-subscribe-section in the section settings and module settings both? Sorry, just tried this multiple times and your tutorial is the only one I can find to make this change in divi…
Ok Geno, sorry for the multiple messages. Learning as I go. So I was able to get my box to become narrow and added a blank divider to move it to the bottom of my image. Yay! However, my test is stacking even though I have centered it in the module and all my boxes for subscribing are gone. I am reading through your previous comments to try and fix…
I saw on another post that you purchased Divi Booster. Fortunately for you the creator of Divi Booster used my code in his plugin to give you the same options without you having to tamper with the code yourself. So hopefully this issue is now resolved. Let me know.
Hey bro, Alex again here… I’m wondering if you know of any issues that happen when you use CSS Hero and a child theme?
Whenever I use your tips and add a CSS class to an element and then try to modify that element with CSS Hero, CSS Hero doesn’t see the class… it’s strange, it happened with this tutorial and also with the contact menu link tutorial, CSS Hero won’t see the elements CSS class and hence, it doesn’t do modifications for that element alone…
Which sucks specially in the case of the menu link, since it changes all menu links…
Also… I know this might be a lot to ask… but I’m trying to modify the suscribe module so that it’s a lot thinner… like the one I have on this page http://alexkong.mx/servicios/headhunting/
So…I need to put the text to the left and compress the buttons, and center the entire thing… do you think you can hack this one? I can’t do it even with CSS Hero :/
Big hug bro!
Hi Alex. Yes CSS Hero does not always target the element you would like it to target. Unfortunately there is not much to do about that. Yes the subscribe module can be slimmed down even further with a little more customization. Unfortunately I have not tried to get it slimmed down any further therefore i do not have an alternative tutorial for you at this time.
Any idea just for putting the text to the left? i can deal with the rest 😛
I mean to the left of the boxes of course
Not off the top of my head unfortunately.
Thank you man, I guess I´ll have to switch it to the old one 🙂
Oh, by the way… the one I’m modifying is on my home page alexkong.mx
Hi Geno, Do you know if you can use Divi Subscribe with someone other than MailChimp, Aweber or Feedburner? If yes do you know how? Thanks in Advance
Not that I know of.
Hello! You have awesome tutorials and thank you very much for everything…I have a problem! If you check my website you will see that the 3 fields are not centered! Can you help me fix that?
I see you got this resolved. Looks great!
Hi. Are you able to do something similar with the Divi Contact Form – and remove the ‘message’ field too?! (without using Booster)
Sure. I dont have a tutorial to style it up yet but here is the code to remove the message box.
textarea.et_pb_contact_message.input { display: none; }First of all awesome site and information!
I tried the code but for some reason my submit button sits ‘above’ the line of the email address input.
I am using Divi 2.4 so that could be the issue.
http://biggertoolbox.com/daikinconcept3/
(I’m playing around in there so it probably looks quite jacked up)
This has not been revised for 2.4 yet 🙂
Ok, I figured as much. Thanks for the reply!
Awesome stuff by the way!
I’m having problems with the subscribe module in Divi 2.4 the buttons are not aligning correctly
http://biggertoolbox.com/daikinconcept3/
Hi Zenon. This has not been revised for 2.4 yet 🙂
Yep thanks sorry for the duplication.
I absolutely love this tutorial as it helps me avoid using yet another plugin just for the subscribe forms. Just wondering, do you know of a way to customize the subscribe button? I know you can change the background color and text but can you use a specific button (in this case I want to use a heart shaped button) instead? Thanks!
Hey Geno. Thanks so much! It worked for me on 2.4. The question I have is how do I reduce the space between the text and the input boxes. It’s like there is padding above the input boxes right below the text. Your example doesn’t seem to have as much space between your subscribe text and the boxes. http://demo2.coachincredibly.com
THANK YOU, THANK YOU, THANK YOU! It was becoming a pain and almost started to regret choosing the Divi theme. I have a lovely simple signup now. You are great for sharing this.
Is it at all possible that we could control which slides the subscribe section displayed on? thanks!
Im sure its possible but its not something I have tried yet.
I am trying to add this code to my website on a new homepage. If I include the labeling in the CSS that states it is custom subscribe coding, the text appears as is on the website and is not read as code. If I remove that labeling, nothing changes on my form. It remains stacked.
My page: http://introvertmominhiding.com/my-story/
A few confusions:
1. Do I place the code in the section, structure, or module custom CSS field?
2. Which CSS field do I use, as they all have at least Before, Main Element, and After boxes?
3. Are those CSS labels necessary?
Thank you for your attention to this. I would really like to get this to work.
1 & 2. Add the css to the Custom CSS box in the ePanel. Go to Divi > Theme Options then scroll all the way to the bottom.
3. Be sure to add the CSS Class in the section module settings as shown in the tutorial: demo-subscribe-section
Hi Geno,
Thank you so much for this tutorial. I really learned a lot from this and I also tried it with my website. But the problem is that when I integrated it with Aweber, the email address field went missing. Do you have any idea why it turned out like that? It was fine with Mailchimp. The 2 fields are showing but when I tried it with Aweber, the email address field is gone.
I would really appreciate it so much if you could help me on this.
Thank you very much in advance. 🙂
Not sure. I would have to take a closer look.
In your example the test in on the same line and to the left the input fields. I am not able to replicate that. What part of the CSS does that?
Hey Geno,
Great tutorial and great feedback in the comments. Some of the users are having issues manipulating the fields that can be seen/used in the module (as you’ve stated some of the fields are required. To circumvent this, is it possible to change the temporary text in the form fields? For example, instead of having ‘Last Name’ auto filling the Last Name form field, can you have ‘Phone Number’ so the user would potentially type that instead? It seems as though Mailchimp/Divi require the First Name, but accept numerals in the Last Name field. Let me know if this makes sense. Keep it up.
Thanks Cole. Something to explore for sure 🙂
Hi Geno,
Thank you so much for the great job. I am using your code via the Divi Booster.
Quick question…Is it possible to call the “First Name” as “NAME” in the custom CSS? And also is it possible to have a 1px border around the Email address field?
Best,
Amit
Hello Amit! I don’t think the name or placeholder text “First Name” can be changed in CSS. You can add the 1px border to the email address field using the following CSS…
input#et_pb_signup_email { border: solid 1px !important; }You can add that line to the Divi -> Options -> Custom CSS, or your style.css file.
Thanks for the response Jerry! This somehow does not seem to work. Can you please double check the syntax?
That line is working for me. If you give me the link to your site I can see if I can find the problem.
Hey Geno, this tutorial is awesome. I’m just wondering, I’m adding this to the bottom of my blog posts and it seems because of the width of the page that the email field and subscribe button get pushed down to the next line. I’d love it if the name, email and button were stacked so it looked a little tidier. I played around with this, removing the the display: inline-block css which did stack the email field under the name field. But now I’m having trouble with getting the subscribe button to sit aligned underneath.
Here’s the page and the code I’m using:
http://alanahelbig.com/podcast-001-alana-helbig/
.subscribe-post .et_pb_newsletter{padding: 20px 10px; border-radius:10px;}
.subscribe-post .et_pb_newsletter_description {padding: 0 0 20px 0; width: 100%;}
.subscribe-post .et_pb_newsletter_form {width: 100%;}
.subscribe-post .et_pb_newsletter_form p {display: margin-right: 10px;}
.subscribe-post .et_pb_newsletter_form p input { padding: 8px 4% !important; width: 300px;}
.subscribe-post .et_pb_newsletter_button {padding: 8px 4% !important; width: 200px; display: margin-right: 10px;}
.subscribe-post a.et_pb_newsletter_button:hover {padding: 2px 6px!important;}
.subscribe-post a.et_pb_newsletter_button:after {display:none;}
.subscribe-post .et_pb_newsletter_form p:nth-child(3) {display: none;}
Would love any suggestions!
thank you.
Hello Alana! Great job on that subscribe form, it looks really good. Here is a line of CSS to add that should get that button centered for you…
.et_pb_newsletter_button { margin: auto; }Thanks Jerry! Works perfectly.
Great Job Geno !
hope you find some more interesting stuff ..
Thanks Luis!
My Pleasure ! 🙂
Hi, thanks a lot for this snippet. On desktop it looks great. but on ma phone (Samsung Galaxy A3) it´s not centred.
The page is http://www.hestysocks.sk/first-line
Try adding this.
@media only screen and ( max-width: 767px ) { .demo-subscribe-section .et_pb_newsletter_form p { margin-right: 0px; }}Hi Geno,
Thank you for your great tutorials! 🙂
It’s possible to change the label of the optin input fields?
Ex: “First Name” to “Name” and “Email Address” to “Email”.
Thank you again! 🙂
Miguel
If I recall, you have to modify the php template to change that.
Hi Miguel and Geno… I’m also working on the same issue. Would you share the solution once you found the trick. I’ll be watching this post. Thank you. 🙂
I don’t believe this is relevant any more as it work these days because there is no Subscribe Module in Divi 3.0.
Yes there is, it’s called ’email optin’
Mmmm, this custom CSS doesn’t work correctly anymore with the lastest Divi 3.0.76. It pushes the optin fields to the right instead of under the description. See here (almost at the bottom): http://deloods.xenonis.nl/ Can’t figure out how to fix this, help is much appreciated!
It’s solved by adding this
.et_pb_column_4_4>.et_pb_newsletter {
display: inherit;
align-items: center;
}
Thanks for sharing the solution. I will update the code.
hi,
I have a problem with this form, in mobile and tablet can see the three fields (Name, Surname and email) how3ver in desktop only show surname and email, How can I make this visible in desktop. Thanks a lot
Divi may have changed something in a recent update. Try this post which is more recent. https://quiroz.co/super-slim-divi-signup-module/
This CSS is broken again with Divi 3.4.1. :'(
They keep changing their classes in that module for some reason. I will have a look and update the tutorial.
Did the code ever get updated for 3.4?
No, but an update to this tutorial is way past due 😉
Adding it to my list for 2020.
Thank you for brilliant info, This is the reason why Divi is my first my choice for WordPress website.
You are welcome 🙂
Thanks for the kind Support