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 over a month ago

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.

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: Set a specific color for the closed title text using your site’s color palette or the color picker.

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

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

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

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

    • Italicized

    • Capitalized

    • Small Capitals

    • Underlined

    • Strike-through

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

  7. Closed Title Text Size: Use the slider or type a value to adjust the font size of the closed title text.

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

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

  10. Closed Title Text Shadow: Add a drop shadow to 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?