Slim Divi Optin Form Module Layout

Divi Freebies, Quick Divi Tips | 5 comments

Divi 3.4 Slim Optin Module

In version 3.4 Divi introduced a new html markup for its Optin Module. With the new structure the previously custom-styled forms may not look as you’d like. In this quick tutorial I’d like to show you what CSS you can use to change the default Optin Form into thinner and cooler version.

Please note:
I’m not a lawyer so this is not a legal advice, BUT you don’t need any checkboxes to make your signup form GDPR compliant. You need the subscriber’s explicit consent to send them emails, but a checkbox is not the only way to get this consent. Use your header and a phrase like “Subscribe to” to make sure it’s clear that the user is consenting to a newsletter by signing up.

1. Slim signup form with single input field

If you are going to use single e-mail field in your optin form, add a custom CSS class of dl-slim-optin1 and use this CSS code:

.dl-slim-optin1 .et_pb_newsletter_footer {
	flex-basis: 100%;
	margin-top: 0;
	font-size: 80%;
}	
.dl-slim-optin1 .et_pb_newsletter_field,
.dl-slim-optin1 .et_pb_newsletter_button_wrap {
	flex-basis:49%;
}
@media (max-width:980px) {
	.et_pb_column_4_4 .dl-slim-optin1 {
		display:block;
	}
	.dl-slim-optin1 .et_pb_newsletter_description,
	.dl-slim-optin1 .et_pb_newsletter_form {
		width: 100%;
		padding: 0;
	}
	.et_pb_column_4_4 .dl-slim-optin1 .et_pb_newsletter_description {
		margin-bottom: 10px;
		text-align:center;
	}
	.dl-slim-optin1 .et_pb_newsletter_footer {
		text-align:center;
	}
}
@media (max-width:479px) {
	.dl-slim-optin1 .et_pb_newsletter_field,
	.dl-slim-optin1 .et_pb_newsletter_button_wrap {
		flex-basis:100%;
	}
}

2. Slim signup form with two input fields

If you are going to use both e-mail and name field in your optin form, add a custom CSS class of dl-slim-optin2 and use this CSS code:

@media (min-width:981px) {
	.dl-slim-optin2 .et_pb_newsletter_description {
		width: 30%;
	}
	.dl-slim-optin2 .et_pb_newsletter_form {
		width:70%;
	}
}
.dl-slim-optin2 .et_pb_newsletter_field,
.dl-slim-optin2 .et_pb_newsletter_button_wrap {
	flex-basis:32.5%;
}
.dl-slim-optin2 .et_pb_newsletter_footer {
	margin-top:0;
}
.dl-slim-optin2 .et_pb_module_header {
	padding-bottom:0; 
}
@media (max-width:980px) {
	.et_pb_column_4_4 .dl-slim-optin2 {
		display:block;
	}
	.dl-slim-optin2 .et_pb_newsletter_description,
	.dl-slim-optin2 .et_pb_newsletter_form {
		width: 100%;
		padding: 0;
	}
	.et_pb_column_4_4 .dl-slim-optin2 .et_pb_newsletter_description {
		text-align:center;
		margin-bottom:10px;
	}
	.dl-slim-optin2 .et_pb_newsletter_footer {
		text-align:center;
	}
}
@media (max-width:600px) {
	.dl-slim-optin2 .et_pb_newsletter_field {
		flex-basis:49%;
	}
	.dl-slim-optin2 .et_pb_newsletter_button_wrap {
		flex-basis:100%;
	}
}
@media (max-width:479px) {
	.dl-slim-optin2 .et_pb_newsletter_field{
		flex-basis:100%;
	}
}

3. Slim signup form with three input fields

If you are going to use all of the default Divi Optin Module fields: first name, last name and e-mail field in your optin form, add a custom CSS class of dl-slim-optin3 and use this CSS code:

.dl-slim-optin3 .et_pb_newsletter_field,
.dl-slim-optin3 .et_pb_newsletter_button_wrap {
  flex-basis:24.5%;
}
.dl-slim-optin3 .et_pb_newsletter_footer {
  margin-top:0;
}
.et_pb_column_4_4 .dl-slim-optin3 {
  display:block;
}
.dl-slim-optin3 .et_pb_newsletter_description,
.dl-slim-optin3 .et_pb_newsletter_form {
  width: 100%;
  padding: 0;
}
@media (max-width:800px) {
  .dl-slim-optin3 .et_pb_newsletter_field,
  .dl-slim-optin3 .et_pb_newsletter_button_wrap {
    flex-basis:49%;
  }
  .et_pb_column_4_4 .dl-slim-optin3 .et_pb_newsletter_description {
    margin-bottom:10px;
  }
}
@media (max-width:479px) {
  .dl-slim-optin3 .et_pb_newsletter_field,
  .dl-slim-optin3 .et_pb_newsletter_button_wrap {
    flex-basis:100%;
  }
}

What’s inside

Divi_Lover_Slim_Optin.json – the Divi Builder layout with Slim Optin forms.

How to use it?

After the JSON file is downloaded, you can add it to your Divi website by following these steps:

1. Create a new page and activate the Divi Builder.
2. Use the import function to import the Happily page layout onto the page.

3. Move the CSS from the Code Module to your page options or stylesheet (optional).

Feeling generous?

If you like my tutorials and want to see more free resources like this, please consider making a donation.

Personal Info

Donation Total: €5.00

Have you seen our Divi Child Themes?

We offer a great selection of high-quality designs to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

5 Comments

  1. Caelan Huntress

    Good stuff! I’ve been looking for an alternative to Bloom, and this is just the ticket.

    Reply
    • Rafa

      I agree, with this wonderfull CSS and the Divi optin option don´t need to add another plugin

      Reply
      • Rafa

        The email optin error message is not translated…
        Any idea?

  2. David

    Just looked at one of my older client sites today and realised my original slim optin css was broken. This saved me, and it looks better than it ever did.

    Thank a lot!

    Reply
  3. Sheila

    This is brilliant! I spent quite some time trying to help someone get their divi theme to do this. And then they spent time with Divi support and your email came out several days later. I just implemented it on another site and it’s brilliant! Thank You!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Shares

Pin It on Pinterest