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
Open the Module Settings: Click the gear icon or the module itself to access its settings.
Navigate to the Design Tab: Locate the Closed Title Text options within the Design tab.
Closed Title Text Customization Settings
Closed Title Text Color: Choose a color to be used for the Title text. It also accepts Global Variables.
Closed Title Font: Choose a font from the dropdown or upload a custom font for unique styling.
Closed Title Font Weight: Adjust the boldness of your title with options like light, bold, or extra-bold.
Variable Font Weight (⚠️ only applicable for Google Variable Fonts): Use the slider or type in a numeric value for the font weight.
Variable Font Width (⚠️ only applicable for Google Variable Fonts): Fine-tune variable font width using variable font interpolation.
Closed Title Text Size: You can adjust the font size of your title text using the slider or by entering a specific value. It also accepts Global Variables.
Closed Title Line Height: Set the space between the lines of the title text, helping to improve readability. It also accepts Global Variables.
Closed Title Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.
Closed Title Text Alignment: Set the alignment for the title text—left, center, right, or justified.
Closed Title Capitalization: Choose the title text's capitalization:
Uppercase - All letters are in uppercase format
Capitalize - Makes the first letter of each word uppercase.
Lowercase - All letters are in lowercase format.
Smallcaps - Lowercase letters display as smaller uppercase letters.
All Small Caps - all letters display as small caps, including letters that were already uppercase.
Closed Title Font Style: Select additional font styles, including:
Italic: Makes the text lean to the right.
Underline: Adds a line under the text.
Overline: adds a line above the text.
Strikethrough: draws a line through the middle of the text.
⚠️ Note: When Underline, Overline, and/or Strikethrough are enabled, you can also choose:Line Color: Choose the line's color. It also accepts Global Variables.
Line Thickness: Choose how thick or slim the line is.
Line Type: Choose the Line's type:
Solid
Double
Dotted
Dashed
Wavy
Closed Title Line Warp Style: Choose how text should wrap. Default keeps native browser wrapping, Balanced evens heading lines, and Pretty helps avoid single-word endings.
Default: Text can move onto a new line when it runs out of space.
Balanced: Short text breaks into lines with more even lengths
Pretty: Text wrap in a cleaner, more visually pleasing way
Closed Title Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.
Standard Horizontal
Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.
Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.
Closed Title Hyphenation: When enabled, if a word is too long to fit nicely on one line, the browser can break it into parts and add a hyphen at the break.
Closed Title Fill Type: Choose the title's text fill options:
None - No title text fill.
Gradient - Fill the title text with a Gradient
Image - Fill the title text with an Image
Transparent - Fill the title text with a transparent fill.
Closed Title Stroke Width - Choose the thickness of the stroke.
Closed Title Stroke Color - Choose the title text's stroke color.
Closed Title Columns: Set how many columns the text should flow through.
Closed Title Text Shadow: Add a text shadow effect and customize its direction, blur, and color to add depth or emphasis to the title:
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.