How to create inline buttons in Divi

Inline buttons are really useful especially when you want your user to either watch a Video or Continue to Signup but this is something not possible in Divi. But Divi Supreme made it possible and not only we made it possible to create Inline buttons we’ve also added many other options(Discussed below) that will really help you when setting up button.

Let’s see how to achieve it.

First, open up Visual Builder and choose a place where you want to put two inline buttons. For today we’ve added the Insurance Agency Home page Layout on our site. So now we’ll need to delete the existing Button Module to add our two Inline buttons.

Now Insert a new Module at that same place as Supreme Button

Now you can start, you’ll have to set up your button Text and Link. When you’ll enter any text, only then that button will become active. So, first of all, you’ll have to enter your text in the Button Text Fields.

Now Setup the links for the buttons which are very important under the Link tab. You’ll see two tabs Button #1 and Button#2 and it’s very straight forward just go into the first tab(Button #1) to enter a link for the Button #1 and same goes for the Button #2.

Now It’s time to add some design changes to the buttons under the Design Options. You’ll see two panels for it (Button One and Button Two) and there you can easily design your buttons the same way you design other Divi buttons.

We’ve made these changes to both buttons:

  • Button Text Color: #0c71c3
  • Button Background Color: #fff
  • Button Border width: 0px
  • Button Border Radius: 3px
  • Button Font: Montserrat
  • Button Padding: 8px 8px 30px 30px

And there we go, now we’ve two Inline buttons and it was so easy to make them.

Alright so Let’s see how to get creative with those buttons, you have so many other options available for Supreme Button Module. Some of them are:

  • Tooltip
  • Video Overlay
  • Image Overlay
  • Click to Phone call
  • Separator text
  • And more…

Add a Tooltip on Hover

Ok let’s see how to add tooltip to the button, for this go to Content Options > Link and you’ll see there a Tooltip option just enable it you’ll see other settings pops up.

  • Tooltip Content: Here you should enter any text you want to show to the user when they hover on the button.
  • Show Arrow: If you want a small arrow for the tooltip then have it enabled.
  • Size: Here you can change the size of the Tooltip.
  • Placement: This is where you can change the placement of the tooltip to Top, Bottom, Left or Right side of the Button.
  • Animations: Change the Animation of the Tooltip when it appears, it can be a Fade animation or Fade in Direction which detects the placement of the tooltip and then comes out from that direction.

Live Demo

Adding Image Overlay on button click

So now we’re gonna add an Image overlay, which means when a user will click on the button an Image will be shown as an overlay.

For this, enable the use of Image Overlay under the Link tab and add your desired image in the image box.

Here’s what we just created

Live Demo

Adding Video Overlay on Button Click

To add a video overlay, Enable the use of Video Overlay and make sure that you’ve entered the URL of the Video in the Button URL Field

And that’s it again, It’s that easy. You’ve just created a video overlay. Hers’s a quick look

Live Demo

Other Options

There are so many other Options in Link tab such as Phone call, SMS, Messenger, Skype and many others you can also use them for your users to chat or contact with you on Phone or Facebook Messenger or any other that you chose. Make sure to use them as well on your site.

Do you like to add Hover Animation?

You can also add some really cool Hover Animations to both buttons easily, for this go to Animation Panel and choose any animation for the Button 1 and Button 2, It’s that easy and small example below

 

 Live Demo

How about adding Hover animation to Icons?

Adding Animation to Icons isn’t possible in Divi’s standard Button Module but Divi Supreme’s Button Module made it possible, you just have to make sure that you have the Icon set in the Button Design settings and then you can head over to Animation Panel and you’ll see an option to set the animation for both buttons Icons

Live Demo

That’s it for today’s tutorial, we hope that you found this article helpful and If you found it helpful then don’t forget to leave your thoughts about this article in the comment section below, we’ll appreciate, or if you have any problem then make sure to comment about that as well so we would able to help you out. Have a great day!

How to get Divi Supreme Button Module with all the features mentioned above?

To have this you need to purchase the Pro version of our plugin at the cost of $40 for one website and $79 for unlimited sites. Both plans come with a 30% discount on renewals while we also offer you premium support and free updates during the licensing period. Want a more lasting plan? We also offer a Lifetime plan which goes for only $199. With it, you can install Divi Supreme Pro on unlimited websites while you also enjoy premium support and free updates forever.

The Supreme Button is easily one of the most popular modules among our users. This comes as no surprise given the numerous features it comes with. For starters, the module is accessible by both the free and paid users but the latter get to enjoy a significantly enhanced button with added features as you’ll see below.

The Divi Supreme Button module packs premium features like 29 types of button hover animations as well as 15 types of icon hovers to choose from. Additionally, it comes with a customizable image/video lightbox that allows you to create native-looking buttons for popular services such as YouTube, Tooltip, DailyMotion, and Vimeo. As if that’s not enough, you can use this module to create unique buttons for general URLs, SMS, Skype, Telegram, Facebook Messenger, and WhatsApp services. Finally and what is perhaps the best part about this module is that it allows you to create two buttons that are separated by a separator line. This way, you can create multiple calls to actions (CTAs), for example, when you want to give your visitors options on how to reach you like Facebook and WhatsApp.

Our goal is to assist you to create beautiful and effective business websites without impacting negatively on user experience.

Or try out the Divi Supreme Lite

Divi Supreme Lite Offers 20 Modules and 3 Beautiful Extensions and using them you can easily extend your site’s functionality.

Get Access To All Divi & Divi Supreme Tips

Get access to all our Divi and Divi Supreme’s tips, articles and cutting-edge helpful tutorials that are easy to understand for small businesses, bloggers, and non-techy Divi website owners, direct to your inbox.

0 Comments

Submit a Comment

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

four × one =