Overview #
The Dual Button Module allows you to display two buttons side by side or stacked vertically, with an optional separator between them. Each button can be styled independently, making this module ideal for comparison actions, primary/secondary calls to action, or navigation choices.
Dual Button Module Content Settings #
Button One #
These settings control the content and behavior of the first button.
Available options include:
- Button Text
- Enable Button Link
- Button Link URL
- Button Link Target
(Same Window or New Window) - Enable Button Icon
- Button Icon
- Icon Color
- Icon Placement (Left / Right)
- Icon Size
- Gap Between Text and Icon
- Enable Icon Effect
- Icon Effect Style:
- Icon Forward
- Icon Backward
- Icon Up
- Icon Down
- Icon Grow
- Icon Shrink
- Icon Rotate
- Icon Bounce
- Icon Drop
- Icon Float Away
- Icon Pulse
- Icon Pulse Grow
- Icon Pulse Shrink
- Icon Push
- Icon Pop
- Icon Circle Progress
- Icon Slide
Button Two #
These settings control the content and behavior of the second button.
Available options include:
- Enable Button Two
- Button Text
- Enable Button Link
- Button Link URL
- Button Link Target
(Same Window or New Window) - Enable Button Icon
- Button Icon
- Icon Color
- Icon Placement (Left / Right)
- Icon Size
- Gap Between Text and Icon
- Enable Icon Effect
- Icon Effect Style
(Same options as Button One)
Button Separator #
The separator appears between Button One and Button Two.
Available options include:
- Separator Type
(Text, Icon, Image, or None) - Separator Background
Background #
Set the background for the module wrapper.
Admin Label #
Assign an admin label to help identify the module inside the Divi Builder.
Dual Button Module Design Settings #
Buttons Wrapper #
These options control the layout and spacing of both buttons.
Available options include:
- Vertical Buttons (On / Off)
- Main Button Alignment
- Button Spacing
Button One Text #
Control the typography of Button One.
Available options include:
- Font
- Font Weight
- Font Style
- Text Color
- Text Size
- Letter Spacing
- Line Height
Button One Style #
Control the visual appearance of Button One.
Available options include:
- Button Background
- Enable Button Animation
- Animation Effect
(Grow, Shrink, Pulse, Bounce, Rotate, etc.) - Enable Hover Effect
- Hover Color
- Hover Effect Style
- Rounded Corners
- Border Styles
- Border Width
- Border Color
- Border Style
- Box Shadow
Button Two Text #
Control the typography of Button Two.
Available options include:
- Font
- Font Weight
- Font Style
- Text Color
- Text Size
- Letter Spacing
- Line Height
Button Two Style #
Control the visual appearance of Button Two.
Available options include:
- Button Background
- Enable Button Animation
- Animation Effect
- Enable Hover Effect
- Hover Color
- Hover Effect Style
- Rounded Corners
- Border Styles
- Border Width
- Border Color
- Border Style
- Box Shadow
Separator Text #
These options apply when using a text-based separator.
Available options include:
- Separator Font
- Font Weight
- Font Style
- Text Color
- Text Size
- Letter Spacing
- Line Height
Separator Style #
Control the visual styling of the separator.
Available options include:
- Separator Background
- Enable Separator Animation
- Enable Separator Effect
- Rounded Corners
- Border Styles
- Border Width
- Border Color
- Border Style
- Box Shadow
Spacing #
Control spacing for individual elements.
Available options include:
- Button One Margin
- Button One Padding
- Button One Icon Margin
- Button One Icon Padding
- Button Two Margin
- Button Two Padding
- Button Two Icon Margin
- Button Two Icon Padding
- Separator Margin
- Separator Padding
Sizing #
Control the size and alignment of the module.
Available options include:
- Width
- Max Width
- Module Alignment
- Min Height
- Height
- Max Height
Filters #
Apply visual filters to the module.
Available options include:
- Hue
- Saturation
- Brightness
- Contrast
- Invert
- Sepia
- Opacity
- Blur
- Blend Mode
Transform #
Scale, rotate, translate, or skew the module using transform controls. Values can be adjusted visually or entered manually and linked together if needed.
Animation #
Apply entrance animations to the module.
Available options include:
- Animation Style
- Animation Duration
- Animation Delay
- Animation Opacity
- Animation Speed Curve
- Repeat Animation
Dual Button Module Advanced Settings #
CSS ID & Classes #
Assign custom CSS IDs or classes for advanced styling or scripting.
Custom CSS #
Apply custom CSS to specific elements within the module using the available fields.
Attributes #
Button Relationship (rel)
Defines the relationship between the linking page and the destination page.
Conditions #
Control when the module is displayed based on conditions such as:
- User behavior
- Time and date
- Browser or operating system
- Purchase history.
Multiple conditions can be combined.
Visibility #
Control where and how the module is visible.
Available options include:
- Hide on Phone, Tablet, or Desktop
- Overflow behavior (Visible, Hidden, Scroll, Auto)
Transitions #
Adjust hover transition timing and easing.
Available options include:
- Transition Duration
- Transition Delay
- Speed Curve
Position #
Control how the module is positioned within the layout.
Available options include:
- Position Type (Default, Relative, Absolute, Fixed)
- Vertical and Horizontal Offset
- Offset Origin
- Z-Index
Scroll Effects #
Define how the module behaves on scroll.
Available options include:
- Sticky Position (Top, Bottom, or Both)
- Scroll Transform Effects
- Vertical Motion
- Motion Trigger Point
- (Top, Middle, or Bottom)
Summary #
The Dual Button Module provides flexible control over two independent buttons with advanced styling, animation, and interaction options. It is ideal for creating balanced calls to action while maintaining full compatibility with Divi’s native module system.
