Skip to content

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.

Divi Supreme Button Module

Text

Button #1 Text

Input your desired button #1 text.

Button #2 Text

Input your desired button #2 text.

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.

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 URL for 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.

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.

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.

Sizing

Separator Gap

The gap spacing between both buttons.

Animation

Divi Supreme Button Module

Button Hover #1 Animation

Here you can select one hover animation from the dropdown list for Button #1.

Button Hover #2 Animation

Here you can select one hover animation from the dropdown list for Button #2.

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 visiblity on certain devices.