All Collections
FAQ's and Troubleshooting
How To Make A One Field Horizontal Divi Email Optin Module
How To Make A One Field Horizontal Divi Email Optin Module

Change the Optin Module layout to horizontal inline with CSS

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

We can change the layout of the Optin Module to a horizontal "one liner" (all fields show inline) by following these steps:

  1. Edit the Optin Module and choose Body On Top, Form On Bottom option in Design > Layout tab:

  2. Disable all additional fields in Content > Fields:

  3. Go to the E-mail Optin Module module -> Advanced tab -> CSS Class and add a new CSS class. In our example we will use et_optin_horizontal CSS class.

    For more details on how to add a custom CSS class, you can also visit this article: How To Add Additional CSS Classes To Divi Modules.

  4. Insert this CSS code into Divi > Theme Options > Custom CSS box and click the green "Save Changes" button to save changes:

/* Start Optin Module horizontal */
@media (min-width: 767px) {
.et_optin_horizontal .et_pb_newsletter_fields .et_pb_newsletter_field {
flex-basis: calc(100% - 235px) !important;
.et_optin_horizontal .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: 210px !important;
/* End Divi Optin Module horizontal */

The result will be that Optin Module fields will show under the title and the description, while keeping inline with each other, as seen in the screenshot below:

Did this answer your question?