Skip to main content

Understanding the Separator Text Option Group in Divi 5

Learn how to use the Separator Text design options to create text that’s visually appealing and functional.

The Separator Text design options in Divi let you customize the appearance of a Countdown Timer module’s separator text. These settings control font, alignment, spacing, and more, ensuring your Text is styled to fit your design.

Divi 5 - Separator Text Option Group

Where to Find the Separator Text Options

  1. Open the Countdown Timer's Module Settings: Click the gear icon or the module itself to access the settings.

  2. Navigate to the Design Tab: Locate the Separator Text option group.

Separator Text Customization Settings

  1. Separator Font: Choose a font for the Separator Text from the dropdown menu or upload a custom font. By default, the site’s primary font is used.

  2. Separator Font Weight: Choose the boldness of the font, with options ranging from light to extra-bold.

  3. Separator Font Style: Choose stylistic enhancements to the Separator Text, such as:

    • Italicized

    • Capitalized

    • Small Capitals

    • Underlined

    • Strike-through

  4. Separator Text Alignment: Choose the Separator Text alignment: left, center, right, or justify alignment.

  5. Separator Text Color: Choose a color for the Separator Text using your site’s palette or the color picker.

  6. Separator Text Size: Choose the font size of the Separator Text using the range slider or by entering a specific value.

  7. Separator Letter Spacing: Control the space between letters by dragging the slider or inputting a value. Larger values create more separation between characters.

  8. Separator Line Height: Choose the vertical spacing between lines of Separator Text for better readability. Increase the value for more space between lines.

  9. Separator Text Shadow: Choose a shadow of the Separator Text and customize its:

    • Direction: Set horizontal and vertical positioning.

    • Blur Strength: Adjust how soft or sharp the shadow appears.

    • Shadow Color: Choose a shadow color that complements the text.

  10. Separator Fill Type: Choose the Separator Text fill options:

    • None - No Separator Text fill.

    • Gradient - Fill the Separator Text with a Gradient

    • Image - Fill the Separator Text with an Image

    • Transparent - Fill the Separator Text with a transparent fill.

  11. Separator Stroke Width - Choose the Separator Text stroke thickness.

    • Text Stroke Color - Choose the Separator Text stroke color.

Tips for Styling Separator Text

  • Focus on Readability: Use font sizes and line heights that are easy to read, especially on mobile devices.

  • Complement Your Design: Match the text color and style to your site’s overall design for a cohesive look.

  • Use Shadows Sparingly: Subtle shadows can enhance readability, but overly strong effects can distract.

These options make it easy to create Text that’s visually appealing and functional, ensuring your content looks polished and professional.

Did this answer your question?