Change The Divi Email Optin Module To A Horizontal LayoutÂ
There are other tutorials out there that do this, I’ll just say that right away. But if you know me, you know I like to make things simpler and easier for you! So that is one of the reason I decided to do this tutorial. It is just two tiny snippets of CSS to make this work beautifully!
The second reason is because I get a lot of questions about this from my previous tutorial about How To Create A Single Field Email Option In Divi. Everyone loves that but some of you asked about using 2 or 3 fields, so here you go!
This tutorial will show you how to change the Divi Email Optin module orientation into an inline horizontal single line layout. This tutorial uses some really fun math with the CSS, so I hope you enjoy that as well!Â
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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.Â
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.
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.Â
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.
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!
I hope you have enjoyed learning How To Create A Horizontal Inline Divi Email Optin Module (With 1, 2, Or 3 Fields). 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!
Subscribe for more stuff like this.
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
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.
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.
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.
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. 🙂
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
Divi Tutorials On YouTube
Our videos have views! Join subscribers and enjoy over video tutorials!
In this tutorial, I will show you how to create a backup of your Divi website and explain why they are so helpful and important.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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.
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.
i am using chrome and cannot see the code either, just 3 gray lines .
Hi Shay,
Check now, not sure what is going on but now today it was missing for me and I had to rewrite it. So strange!
is there a way to align horizontally on mobile device also
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. 🙂
no longer useful! can you check? since Divi changed the CUSTOM CSS´ fields from the last update
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.