Enhancing the layout of your email opt-in forms can improve their visual appeal and user experience. By displaying the Email Opt-in Module's fields inline, you can create a sleek design that encourages more sign-ups.
This article will guide you through the steps to customize the Email Opt-in Module in Divi so that its fields are displayed inline, making your forms more attractive and effective.
Out of the box, the Email Opt-in module layout is as shown in the image below:
Customize the Email Opt-in module to display the fields inline (side-by-side)
Open the Email Opt-in module settings and delete the Title text and the Body Text
Go to Advanced Tab → Custom CSS → Free Form CSS
Copy/paste the following CSS snippet:
@media (min-width: 768px) {
selector .et_pb_newsletter_fields {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
selector .et_pb_newsletter_form p.et_pb_newsletter_field {
padding-bottom: 0;
}
}The above CSS Code uses CSS Grid.
The result can be seen in the screenshot below:
Note: Adding the above CSS snippet to the Email Opt-in module → Advanced Tab → Custom CSS → Free Form CSS might mark it as having syntax errors.
Please ignore those since they are false positives. They appear as errors because the WordPress syntax checker has to be updated to recognize valid CSS units and properties.