Written By Samar Jamil
Hey Everyone, what’s up?
The Newsletter is the best way to communicate with your audience and give them special content that other users may miss but did you ever think that without a beautiful looking Newsletter form you’ll not get more Audience and you’ll also miss many sales.
That’s why In this quick tutorial, I’ll show you the easiest way to create Inline Optin/Newsletter Form in Divi that looks beautiful and attracts people. So I’ll only show you how to create a single line Email Optin Design for now.
Single Field Email Optin Form
Here’s the best way to create a Single Field Email Optin Form, we’ll only use a few lines of CSS and some default Divi design options to create it.
Add Email Optin Module and in the Content Tab -> Fields disable all the fields.
Now in the Text Panel remove the Title and Body Content.
And now Finally Remove the Background
So we’re done with some basic settings to do first, now move to the Advanced tab -> Custom CSS -> in the Opt-in Form Fields field paste the below CSS
width:70% !Important;
Now in the below field Subscribe Button add the below CSS
width:30% !Important;
float:right;
border-radius:0px 100px 100px 0px !important;
Okay, now we can move to some Design Settings. For this, go to Design tab -> Fields and make your desired changes. Below is what I did
- Fields Padding – 18px 18px 20px 20px
- Fields Font – Karla
- Fields Font weight – Bold
- Fields Rounded Corners – 100px 0px 100px 0px
You can also make your desired changes if you want. So now let’s move to the Button Design settings and make changes to the Button. Below are the changes I made
- Button Text Color – #fff
- Button Background Color – #19c684
- Button Border Width – 0px
- Button Border Radius – 0px
- Button Font Weight – Bold
- Show Button Icon – No
- Button Margin Top – (-69px) – important
- Button Padding Top/Bottom – 10px 10px – important
And there you go Inline Email Optin Module Design without going into much hassle of CSS we do use few lines which are necessary for this. Here’s how it looks
Here’s another quick technique to make it look more interactive. Go to Advanced tab -> Custom CSS Opt-in Form Fields and remove the CSS from there. And then in the Subscribe button remove the CSS you added before and add this
width:30% !Important;
float:right;
transform:scale(0.9);
Now go to Design tab -> Fields -> Corner Radius and add 5px to each corner and add 170px Right Padding to the Field.
Now move to the Button Panel and add 5px Border Radius for the button and in the Margin Right Field add -4px value add your own If it doesn’t look good.
And look the Button is now inside of the Email Field looks pretty cool right?
So that’s it for today’s Tutorial, Hope you guys find it useful. Please let me know what you think about this easy way to create inline Optin Design in the Comment Section below I’d love to hear from you.
Have a great day!
Download 4 Beautiful Looking Email Optin Designs
For Free
Feeling Generous
If you found this tutorial helpful, why not buy me a Coffee which really gives me more energy to make more Tutorials Like this.
By Samar Jamil
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
You would also like one from these
Lock/Reveal a Divi Library Layout in Bloom Locked Content Form
Looking for a way to Lock/Reveal a Divi Library Layout after the user subscribes to your Newsletter in Bloom’s Locked Content Form. Try this!
How to create a Fly-In Popup like Elegant Themes in Divi
There’s a Fly-In Popup being used on the Elegant Themes website for more than 2 years and How about we duplicate it for our Divi site as well. If you want to add something more interesting to your site Follow this.
How to create Image Switcher on Custom Tabs click in Divi
In this tutorial, I’ll show you how to make an Image Switcher on Custom Tabs Click. This is a very interesting article and you’re not gonna miss it.
Great tutorial, again. Thanks!
Thank you so much Karel, I’m glad It was helpful to you!
That’s really impressive, I will definitely try this.
Thanks Samar
Hi Samar, thanks for the tutorial but unfortunately I think the negative margin of the button doesn’t work works in Firefox, any suggestion? many thanks
Hi Federico,
You can use this CSS to change the button negative margin for Firefox only:
/*Fixing the Button Position for Firefox for Newsletter*/@-moz-document url-prefix() {
.et_pb_newsletter .et_pb_button {
margin-top: -69px !Important; /*Change margin value here*/
}
Hope that helps!