Slim Divi Optin Form Module Layout

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.

 

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!


Can’t see the form? Click here
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%;
  }
}

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen