The Divi Theme's "email optin" module (formally called the "subscribe" module) allows you to add a form to your pages which users can use to join your mailing lists. A tutorial by Geno showed how to use CSS to change the layout of the module's signup form into a horizontal format. Unfortunately changes in Divi's implementation of the module have stopped that code (and the Divi Booster feature based on it) from working. I recently revisited this implementation and came up with a new, simplified, way to make the email optin module's form horizontal via CSS.
Here's the CSS code:
@media only screen and (min-width: 981px) {
.et_pb_subscribe .et_pb_newsletter_fields > p {
flex: auto !important;
}
.et_pb_subscribe .et_pb_newsletter_fields p.et_pb_newsletter_field {
margin-right: 2%;
}
}Related Post: Adding CSS to the Divi Theme
I've added this as a new option in Divi Booster (v2.8.8 onwards), which can be activated for individual modules. With Divi Booster activated, you'll find the setting in the module options at "Email Optin Module Settings > Advanced > Layout > Inline Form".
It looks like a recent Divi update may have broken this again, as the inline form button isn't working, and neither is this code. I can't get the submit button to sit in line with the fields. 😫
Always the way… ignore my last post, it works fine IF you have the form set to text above, form below. D'oh. Sorry!
Hey Jo, thanks for bringing this to my attention. I hadn't noticed that the layout options Divi had added were affecting it – I'm glad you were able to find one that worked :) Next chance I get I'll have a play around and see if I can make it compatible with all the layout options. Thanks!
Thank you so much for this. I have been looking for a very long time for a CSS code like this. Much appreciated.
You're welcome, CC!
Just wanted to thank you for all the help you post for us new to Divi and CSS. Much appreciated. I am purchasing your booster.
You're very welcome, Steven! Enjoy Divi Booster and give me a shout if there's ever anything I can help with. Cheers!