The Button design options let you customize button styles directly within the module. By toggling custom styles, you can control button text, colors, borders, icons, and shadows to align with your design needs while maintaining flexibility over global and individual settings.
Where to Find the Button Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Button option group.
Button Customization Settings
Use Custom Styles For Button: Toggle this option to On to apply unique styling to the button. Once enabled, additional customization options appear.
Button Background
Each background type in the Background Options Group offers unique styling choices to make your designs stand out:
Background Color: Add solid color fills using a color picker. You can adjust opacity, set gradients, or layer colors with images and patterns.
Background Gradient: Create custom gradients by selecting colors and configuring gradient directions, start/end points, and radial or linear styles. Gradients can be used alone or layered with other backgrounds.
Background Image: Upload or select images for your background. You can adjust the position, size, and repeat settings to control how the image appears across devices. Options include fixed or parallax scrolling.
Background Video: Embed video backgrounds by uploading a video file or adding a URL. Video backgrounds work well for capturing attention but are optimized to avoid loading issues on mobile.
Background Pattern: Choose from built-in pattern options to add texture and depth. Patterns can be adjusted for opacity and size to fit your design style and combined with other backgrounds.
Background Mask: Masks add custom shapes and overlays to backgrounds. Choose from a variety of shapes like circles, diagonal lines, and geometric patterns to create focus areas or visually separate sections. Masks are highly customizable with options for color, size, and orientation, making them ideal for layered effects when combined with other backgrounds.
How to Add and Layer Backgrounds
To layer backgrounds, you can combine different options, such as setting a background color and overlaying it with a pattern or gradient. Here's how to layer backgrounds in Divi 5:
In the Background Options Group, apply the primary background type first (such as color or image).
Select a secondary background type (e.g., a gradient or pattern) and adjust its opacity to allow the layers beneath it to show through.
For more complex effects, experiment with the blending modes available for images and patterns. These modes allow unique color and visual interactions between layers.
Button Border
Button Border Radius: Adjust the corner radius for rounded edges. A higher value results in rounder corners.
Button Border Styles: Adjust the border styles, including the border's width, color, and style.
Button Text
Adjust the button's typography and text styling.
Button Font: Choose a font from the dropdown or upload a custom font.
Button Font Weight: Choose the boldness of the button font (e.g., light, regular, bold).
Button Font Style: Choose stylistic effects, such as italicized, capitalized, small capitals, underlined, or strike-through.
Button Text Color: You can use the color picker or choose a font color from your site's palette for the button.
Button Text Size: You can choose the font size of the button text using the slider or by typing a numerical value.
Button Letter Spacing: Choose the spacing between letters by dragging the slider or entering a value.
Button Line Height: Choose the button's text line height.
Button Text Shadow: Add a shadow effect to the button text. Customize using the following options:
Horizontal Length: Adjust the horizontal position of the shadow.
Vertical Length: Adjust the vertical position of the shadow.
Blur Strength: Soften or sharpen the shadow edges.
Shadow Color: Choose a shadow color to complement the button text.
Button Icon
Show Button Icon: Toggle to display or hide an icon in the button.
Button Icon: Select an icon to appear in the button if the previous option is enabled.
Button Icon Color: Choose a color for the icon.
Button Icon Placement: Set the icon placement to the left or right of the button text.
Only Show Icon On Hover For Button: Toggle to control when the icon is displayed:
Yes: The icon appears only on hover (default).
No: The icon is always visible.
Tips for Using Button Options
Enhance Visibility: Use contrasting Button Background and Button Text Color for clear, clickable buttons.
Match Your Style: Align button Font and Letter Spacing with your site's typography.
Add Depth: Apply subtle Text Shadows to make buttons stand out.
Encourage Interaction: Use Hover Effects, like displaying icons or changing colors, to signal interactivity.
Test Responsiveness: Preview button styles across devices to ensure readability and usability.