or
FAQ icon (info)

Divi Supreme Button Module

Allow you to have two buttons with a separator text in between. 10 types of hover animation to choose from, image/video lightbox that supports: YouTube, Vimeo and Dailymotion! Not only that, we added URL link type that supports: URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp and Telegram!

Content Options

Within the content tab, you will find all of the module’s content elements, such as text, images and icons. Anything that controls what appears in your module will always be found within this tab. dsm-button-618x1024.png

Text

Button #1 Text

Input your desired button #1 text.

Button #2 Text

Input your desired button #2 text.

Links

Link Type for Button #1

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #1.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #1.

BCC

Enter the blind carbon copy email address for Button #1.

SUBJECT

Enter the default subject of the email for Button #1.

MESSAGE

Enter the default body message of the email for Button #1.

Phone Number

Enter the phone number to call for Button #1 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #1 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #1.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #1.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #1.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #1.

Button #1 URL

Input the destination URLfor your button #1.

Open as Image Lightbox

Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored.

Open as Video Lightbox

Put the Video link on the Button #1 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #1

TOOLTIP CONTENT

Input your desired tooltip content for button #1.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Link Type for Button #2

Choose the type of URL (URL, Email, Phone, SMS, Facebook Messenger, Skype, WhatsApp or Telegram)

Email

This option will show up only when using Email Type. Enter the Email Address for Button #2.

Download File

Using this Option you can easily add a Click to download feature to the Button, Simply upload any file or Choose from Media Library.

CC

Enter the carbon copy email address for Button #2.

BCC

Enter the blind carbon copy email address for Button #2.

SUBJECT

Enter the default subject of the email for Button #2.

MESSAGE

Enter the default body message of the email for Button #2.

Phone Number

Enter the phone number to call for Button #2 (This will usually work on mobile phones)

SMS

Enter the phone number to SMS for Button #2 (This will usually work on mobile phones)

Facebook Messenger

---USERNAME

This option will show up only when using Facebook Messenger. Enter a person, page, or bot username.

Skype

---USERNAME

This option will show up only when using Skype. Enter the Skype username for Button #2.

ACTION TYPE

Choose the action type for Skype. You can choose to chat or call.

WhatsApp

---NUMBER

This option will show up only when using WhatsApp. Enter the phone number to message directly via WhatsApp message for Button #2.

ACTION TYPE

Enter the default body message of the WhatsApp for Button #2.

Telegram

---TELEGRAM USERNAME

This option will show up only when using Telegram. Enter the Telegram Username.

MESSAGE

Enter the default body message of the Telegram for Button #2.

Button #2 URL

Input the destination URL for your button #2.

Open as Image Lightbox

Here you can choose whether or not the button should open in Lightbox. Note: if you select to open the button in Lightbox, URL options below will be ignored.

Open as Video Lightbox

Put the Video link on the Button #2 URL. Copy the video URL link and paste it here. Support: YouTube, Vimeo and Dailymotion.

Use Tooltip

This will show a tooltip on your Button #2

TOOLTIP CONTENT

Input your desired tooltip content for button #2.

SHOW ARROW

If enabled, then an arrow will be added to the tooltip.

SIZE

The size of the tooltip from Small to Large.

PLACEMENT

Here you can choose the placement of the tooltip. Top, Right, Bottom and Left.

ANIMATION

Here you can choose different types of animation for your tooltip.

URL Opens

Here you can choose whether or not your link opens in a new window.

Separator

Separator Text

Input your desired separator text, or leave blank for no separator text in between the both buttons.

Make Separator Text Fullwidth On Mobile

This will make the Separator Text as fullwidth instead of inline-block on mobile devices.

Remove Separator Text On Mobile

This will remove the Separator Text on mobile devices.

Admin Label

This will change the label of the module in the builder for easy identification. When using WireFrame view in the Visual Builder, these labels will appear within the module block in the Divi Builder interface.

Design Options

Within the design tab you will find all of the module’s styling options, such as fonts, colors, sizing and spacing. This is the tab you will use to change how your module looks. Every Divi module has a long list of design settings that you can use to change just about anything.

Alignment

Here you can choose to have your Button Wrapper aligned to the left, right or center.

Lightbox

If you've added an Image/Video Overlay to the button, then here you can change the settings of the Overlay.

Overlay color

Choose any color for the Overlay

Max Width

Here you can choose the Maximum width of the Overlay.

Separator Text

Here you can style the Spearator text's font, size, color and more.

Tooltip Text

If you've added Tooltip to the buttons you can easily style it here. You can have different styling for each button by going to each tab. You can style the Tooltip text's font size, color, and much more.

Sizing

Separator Gap Text

The gap spacing between both buttons.

Button One

This is where you can style your Button #1 the same way you style other button in Divi.

Button Two

This is where you can style your Button #2 the same way you style other button in Divi.

Animation

dsm-button-hover-611x1024.png

Button Hover #1 Animation

Here you can select one hover animation from the dropdown list for Button #1. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them.

Button Hover #2 Animation

Here you can select one hover animation from the dropdown list for Button #2. You can select any from over 29 Animations. The Lite version of Divi Supreme will have only few of them.

Button Icon Hover #1 Animation

If you've added Icon to the Button #1 and disable the switch called "Only Show Icon on Hover for Button One" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon Hover #2 Animation

If you've added Icon to the Button #2 and disable the switch called "Only Show Icon on Hover for Button Two" then you'll see this Option in the Animation Panel, So you can add a Hover animation to Button's Icon as well from Over 15 Animations.

Button Icon hover animation - Divi Supreme.png

Advanced Options

Use the advanced options to give your text module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module’s visibility on certain devices.

Divi Supreme

We support Divi’s mission through the development of Divi custom modules and Divi child themes that focus on beauty, subtle animations and visitor engagement.

Learn More

Need Help?

Still have a question? Contact Divi Supreme's support. We will try our best to answer your question as soon as possible.

Contact