Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Create A Single Field Divi Email Optin Module

Nelson Miller Profile Orange
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!

▶️ Please watch the video above to get all the exciting details! 👆

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. You can copy and paste the snippet below to your website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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 example
Divi Photographer Child theme single field email optin example
Divi Mowing Child theme single field email optin example
Divi Storefront Child theme single field email optin example
Categories: Divi CSS Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

18 Comments

Comments By Others

  1. pauly whitehead

    How do I change the name of the field boxes alt text from ’email’ to whatever I want? Thanks

    Reply
  2. Tim Williams

    Hey Nelson. Thank you for the tutorial.

    Question:

    Is there a way to tell Divi to only apply this layout for one specific email opt in form? I’m trying to create another without the layout effects.

    Thank you

    Reply
  3. Phil Simon

    This. Is. Awesome. Thanks, Nelson. You freakin’ rock.

    Reply
  4. Kathryn Kohm

    Hello, works beautifully by itself….but when I add custom fields, the alignment is thrown off (see screenshot). Any suggestions?

    Reply
  5. Ali

    Thanks Alot Sir

    Reply
  6. Philipp

    Hi Nelson,

    do you know how to have a name field which is optional?
    Divi only offers a name field which is required, but that is in direct conflict with GDPR.

    Would love to see your take on this.

    At the moment we solve it using gravity forms / contact form 7 , but for small project it would be amazing to use the divi optin module.

    Cheers from Germany,
    Philipp

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Philipp,
      That’s an interesting question that I never considered. You are right, they don’t have any way to set it as required or optional like they do with the Contact Form module. I’m not sure, but that may be a good thing to ask Elegant Themes to consider!

      Reply
  7. Rufayl

    Hey Nelson, I have a problem with this, it is showing this at the backend but not on the front end dont know why?
    https://vipsolutions.org/

    Reply
      • Kay

        Hi, Nelson, great tutorial! Wondering about adding a name field for the horizontal layout. Love this and have started using it.

      • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

        Hi Kay,
        Yes just adjust the width in the CSS, you can try this:

        @media (min-width: 980px) {

        /*set the width of the input fields*/
        .et_pb_newsletter_field {
        flex-basis: 39% !important;

        }

        /*set the width of the button*/
        .et_pb_newsletter_button_wrap {
        flex-basis: 20%!important;
        }
        }

  8. zafar

    realy help full thank you

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart