We can change the layout of the Optin Module to a horizontal "one liner" (all fields show inline) by following these steps:
Edit the Optin Module and choose Body On Top, Form On Bottom option in Design > Layout tab:
Disable all additional fields in Content > Fields:
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.
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:
