How To Create A Horizontal Inline Divi Email Optin Module With 1 2 Or 3 Fields Tutorial by Pee Aye Creative

How To Create A Horizontal Inline Divi Email Optin Module (With 1, 2, Or 3 Fields)

This tutorial will show you how to style and customize the Divi Email Optin module and make the layout horizontal on one line with any number of fi!
Categories: Divi CSS Tutorials

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Style & Customize The Divi Email Optin Module

The first step is to simply add the Divi Email Optin module to your layout and adjust the diesign settings however you want. You can go ahead and design the input fields and button using all the available Divi settings, becasue we won’t be affecting the styling with this tutorial, just the layout. There is no built-in way to change the Divi Email Optin module layout to one line without this tutorial, and that is the focus here today.

Toggle On The Email Optin Fields

There are only a few steps that are required to be adjusted in the modules settings, and the as mentioned, the design settings are optional. The first and obvious thing to do is to turn on the input fields that you want to use. Most likely you will want to turn on toggle for “Use Single Name” if you want just a name and email field for a total of two fields. 

horizontal inline Divi email optin module with single name field turned on

Or if you want the first and last name toggles turned on, this would create three fields total. Just toggle off the single name field and toggle on the first and last name fields.

horizontal inline Divi email optin module with first and last name fields turned on

NOTE: The email input field is always on (because this is an email optin module) so there is no toggle for that, only for for the name fields.

Set The Email Optin Layout

The second required step is to set the layout in the Design tab to “Body On Top, Form On Bottom” for this to work well. 

Divi email optin module layout for making horizontal single field

Once you have the fields and layout set, you can finish any other design adjustments and proceed to the CSS snippets 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. Note that we have three options below, and you will need to choose the code snippet based on what settings you set in for the fields in the previous steps.

Where To Paste The Code

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.

Email Optin With One Field

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

Email Optin With Two Fields

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

Email Optin With Three Fields

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

Things To Note And Learn

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

Button Width

The first part of the code snippets is setting the width of the button to 150px. You can change this number to anything else, but just make sure to also adjust the 165px value in the second snippet. The reason for the 15px difference is to allow space for the gap between the fields and the button. Then the snippet for two fields is 180px, again to create two different 15px gaps, and the same for the three fields snippet with 195px. But of course you can change this however you want!

Input Field Width

The second part of the code snippets control the width of the fields. You will notice this is different in each of the three snippets, and it is best to watch the video to understand this well. But basically we are using some CSS and math tricks to calculate and adjust the width based on how many fields we have included.

Pretty neat, huh? Let me know what you think in the comments!

 

30
Last updated Aug 31, 2021 @ 11:04 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

  1. Herman Karssen

    Great post and video! But I can’t see the CSS… Just 3 gray sections, see image. Using browser Vivaldi on WIndows10. I’ve turned off uBlock and cleared cache.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi there,
      I never heard of that browser and never heard of anyone not being able to see the code, so please try Chrome, Firefox, Safari, or Edge and it should work fine.

      Reply
      • shay

        i am using chrome and cannot see the code either, just 3 gray lines .

  2. IndoAge

    is there a way to align horizontally on mobile device also

    Reply
    • Hemant Gaba

      Please try removing that media query from the code and see if that helps. For example, if you are using one field only then the code after removing the media queries will become:

      /*set the width of the button*/
      .et_pb_newsletter_fields .et_pb_newsletter_button_wrap {
      flex-basis: 150px !important;
      }
      /*set the width of the input field minus the width of the button*/
      .et_pb_newsletter_form .et_pb_newsletter_field {
      flex-basis: calc(100% - 165px) !important;
      }

      This way you can remove the media queries and use the code for all the screens.
      Please let us know if this helps. 🙂

      Reply
  3. Talita Romão

    no longer useful! can you check? since Divi changed the CUSTOM CSS´ fields from the last update

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Talita,
      I’m not sure what you mean. This tutorial does not use any of the module custom css fields, it is just CSS that goes in Divi Theme Options.

      Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

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

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart