Pee-Aye Creative How To Create A Single Field Divi Email Optin Module Tutorial by Pee Aye Creative.jpg

This tutorial will show you how to style and customize the Divi Email Optin module and make a horizontal single field optin layout for your email signups!

Make The Divi Email Optin Module Horizontal With Only One Field

I’m a huge fan of the single field email optin. I suppose this is because it is simple and minimalist, but also people hate subscribing so the less fields they have to fill out the better. I use this a lot in our Divi child themes, so if you have seen that and wanted to replicate you have come to right place. This tutorial will show you how to change the Divi Email Optin module into a single field horizontal layout. I really like this and hope you enjoy it!

Style & Customize The Divi Email Optin Module

To begin, style the Divi Email Optin module however you want using the design settings. You can design the input fields and button using all the available Divi settings. The main benefit to this tutorial is not how to do that, since those are all standard Divi Builder features, but rather it is the CSS that makes this all work together beautifully which will be added in the next step.

Toggle Off The Email Optin Fields

There are only a few steps that are required, and they are very easy. First, go in the module settings and turn off all the toggles for the name fields. The screenshot below shows how this will look when you are done with that.

Turn off all the field settings in the Divi Email Option module

Set The Email Optin Layout

Next, be sure to set the layout to “Body On Top, Form On Bottom” for this to work well. This is the last required step, so go ahead and any other design adjustments and proceed to the CSS snippet below.

Divi email optin module layout for making horizontal single field

Add CSS To Make The Divi Email Optin Inline Horizontal

Now that we have the module set up, it’s time to add the CSS that does the tricks we need it to do. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

@media (min-width: 767px) { /*set the width of the input fields minus the width of the button*/ .et_pb_newsletter_fields .et_pb_newsletter_field { flex-basis: calc(100% – 225px) !important; } /*set the width of the button*/ .et_pb_newsletter_fields .et_pb_newsletter_button_wrap { flex-basis: 210px !important; } }

Media Query

You’ll notice a couple of things are happening here. First of all, the entire snippet of code is wrapped in a media query. The purpose of that is to allow the optin module to change to a stacked layout on screens smaller than 767px.

Learn More About Media Queries

Input Field Width

The first part of the code makes the input field area 100% wide, but we are using a CSS trick to calculate 100% minus the width of the button.

Button Width

The next part of the code is setting the width of the button. Notice how there is a difference in the pixel value. The reason for that is to allow space for the gap between the email field and the button.

Single Field Horizontal Divi Email Optin Module Examples

Like I said at the beginning, I like to use these on our child themes and on client sites. So I thought I would inspire you by showing you some of the designs I have used.

Divi LMS Child theme single field email optin exampleDivi Photographer Child theme single field email optin exampleDivi Mowing Child theme single field email optin exampleDivi Storefront Child theme single field email optin example2

That’s it!

I hope you have enjoyed learning How To Create A Single Field Divi Email Optin Module. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

We have more cool stuff coming for our subscribers!

Please share this post!

Go To Group

Recent Posts

Where Are The Missing Divi Customizer Settings?

Where are the missing Divi theme Customizer settings? Divi is slowing depreciating these, and for good reason! I’ll explain this all in the video and post.

What Is The Best Hosting Provider For Divi Websites

Learn how to choose the best hosting service provider for your Divi website to keep it running fast and avoid issues with the Divi Builder.

How To Style And Customize The Divi Blog Pagination

Learn how to add some beautiful and functional pagination to the Divi Blog module as well as customize and style it with CSS!

Leave A Response!

become partners with Pee Aye Creative

We send out a roundup email once or twice a month with tutorials and new products, so that’s what you will get!

Subscribe to our helpful Divi videos!

Visit Our Channel



Source