The fields in the Email Optin module are placed side by side and one after another. To show fields in a single line follow these steps:
Step 1: Apply a Custom CSS Class to the E-mail Optin module.
Go to the Email Optin module settings.
Navigate to Advanced Settings> CSS ID & Class.
Add the class "et_custom_optin"
Step 2: Add Custom CSS Code for the E-mail Optin module
Add this code to Divi > Theme Options > Custom CSS box:
@media (min-width: 767px) {
.et_custom_optin .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: auto !important;
}
.et_custom_optin .et_pb_newsletter_form .et_pb_newsletter_field {
flex-basis: calc((100% - 180px) / 3) !important;
}
}This code will work for desktop and tablet devices. To make it work on all devices, including mobile, the below code can be used instead:
.et_custom_optin .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
flex-basis: auto !important;
}
.et_custom_optin .et_pb_newsletter_form .et_pb_newsletter_field {
flex-basis: calc((100% - 180px) / 3) !important;
}
Note: If your Email Optin module has a different number of fields, you can adjust the "3" in the code snippet to match the actual number of fields you have:
flex-basis: calc((100% - 180px) / 3) !important;
If you want to display the Email Optin text above the form, change the layout in the Design settings to "Body on Top, Form on Bottom." This should give you the desired inline Email Optin form layout.
