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
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
If you found this tutorial helpful, why not buy me a Coffee which really gives me more energy to make more Tutorials Like this.
Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder
You would also like one from these
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.
In today’s’ tutorial, we’ll see how to create a very modern and next level Stretchy navigation in Divi. It works like a charm on any Screen Size with beautiful Animations and more.
Google has a really nice looking Dropdown on every of their site. So why not we also have it on our Divi site. You’ll get a free Layout to easily add it to your site with many functionalities included.