How To Create A Single Field Divi Email Optin Module

Описание: 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!

Blog Post + Snippet: https://www.peeayecreative.com/how-to...

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.

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.

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.

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.

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.

Become a member of our Divi Adventure Club!
https://www.peeayecreative.com/produc...

Join The Divi Teacher Facebook group:   / thediviteacher  

Visit our Divi child themes, plugins, tutorials, and courses here: https://www.peeayecreative.com/

Thanks for watching!