a

NEW & POPULAR DIVI CHILD THEMES

Molti

Multipurpose Business Child Theme for Divi.

Molti Ecommerce

Multipurpose Business/Ecommerce Child Theme for Divi.

Molti LMS

Multipurpose LMS/Business Child Theme for Divi & LearnDash.

Florence

A Delicate & Innocent Business Child Theme for Divi.

WANT MORE?

Join Our Membership

Get access to all our Divi Products by Joining Membership!

Membership Benefits

See the Benefits of Joining Membership before you Join!

Send us a Message

Need Help? Send us a Message and we'll be glad to help.

Visit Documentation

Instead of waiting for us, try to find your answer in our Documentation.

Our Blog

See the Latest News, Divi Tips & Tricks and a lot more.

Useful Tools

Some Useful Divi & Web Design Tools that we use and you'll love.

Customer Showcase

See cool websites made by our Customers using our Child Themes.

Affiliates

Earn Money while Promoting our Products today.

What's New?

See what we've been working on and what's new from us.

Easiest Way to Create Inline Email Optin Form in Divi

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 an 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 the 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 a 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!

Share The Love ❤️

Written by: Samar Jamil

I Love to make beautiful and creative Divi Child Themes, Layouts and Module Designs for everyone to help them create beautiful websites with ease using Divi. I also Enjoy making helpful Divi Tutorials, Freebies, and More!

NEW & POPULAR DIVI CHILD THEMES

Molti

Molti Ecommerce

Molti LMS

Florence

WANT MORE?

MEMBERSHIP

Join Membership

Membership Benefits

CONTACT US

Send us a Message

Visit Documentation

RESOURCES

Theme Customization

Customer Showcase

What's New?

Our Blog

Useful Tools

Affiliates