Skip to main content
All CollectionsDivi 5Options Groups
Understanding the Accordion's Closed Title Text Design Options in Divi 5
Understanding the Accordion's Closed Title Text Design Options in Divi 5

Learn how to customize the Closed Title Text giving you control over toggle aesthetics and usability, ensuring a polished design.

Updated this week

The Closed Title Text design options allow you to style the title text of a toggle, specifically when it is in the closed state. If these options are not customized, the Closed Title Text will inherit styles from the Title Text settings.

Divi 5 - Accordion module's Close Title Text Option Group

Where to Find the Closed Title Text Options

  1. Open the Module Settings: Click the gear icon or the module itself to access its settings.

  2. Navigate to the Design Tab: Locate the Closed Title Text options within the Design tab.

Closed Title Text Customization Settings

  1. Closed Title Text Color: Choose a specific color for the closed title text using your site’s color palette or the color picker.

  2. Closed Text Heading Level: Choose an HTML heading level (H1–H6) for the closed title text. This affects the text’s hierarchy and style.

  3. Closed Title Font: Choose a font for the closed title text. You can choose from the default options or upload a custom font.

  4. Closed Title Font Weight: Choose the boldness of the font with options like light, bold, or extra-bold.

  5. Closed Title Font Style: Choose additional font styles, such as:

    • Italicized

    • Capitalized

    • Small Capitals

    • Underlined

    • Strike-through

  6. Closed Title Text Alignment: Choose the text alignment for the closed title text to the left, center, or right, or justify it.

  7. Closed Title Text Size: Choose the font size for the closed title text.

  8. Closed Title Letter Spacing: Choose the letters by dragging the slider or entering a value. Larger values increase the spacing.

  9. Closed Title Line Height: Choose the space between lines of text for the closed title. This helps with readability and visual balance.

  10. Closed Title Text Shadow: Choose the text shadow for the closed title text. Configure its:

    • Direction: Adjust horizontal and vertical placement.

    • Blur: Control how soft or sharp the shadow appears.

    • Color: Set a shadow color to complement the text.

Tips for Styling Closed Title Text

  • Create Visual Cues: Use distinct styles for closed titles to signal their state to users clearly.

  • Keep It Subtle: Avoid making the closed title text too bold or distracting, as it should encourage users to interact with the toggle.

  • Match Design: Ensure closed title styles harmonize with your site’s typography and branding.

Customizing the Closed Title Text gives you control over toggle aesthetics and usability, ensuring a polished, user-friendly design.

Did this answer your question?