Skip to main content
All CollectionsDivi 5Options Groups
Understanding the Percentage Text Design Option in Divi 5
Understanding the Percentage Text Design Option in Divi 5

Learn how to utilize the Percentage Text design options to create visually engaging and readable percentage displays.

Updated over a month ago

The Percentage Text design options enable you to customize the appearance of percentage text to match your site’s style. These settings control font, alignment, spacing, and effects.

Divi 5 - Percentage Option Group

Where to Find the Percentage Text Options

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

  2. Navigate to the Design Tab: Locate the Percentage Text option group within the Design tab.

Percentage Text Customization Settings

  1. Percentage Font: Select a font from the dropdown or upload a custom font to define the percentage text style.

  2. Percentage Font Weight: Adjust the text's boldness with options ranging from light to extra-bold.

  3. Percentage Font Style: Add stylistic enhancements, such as:

    • Italicized

    • Capitalized

    • Small Capitals

    • Underlined

    • Strike-through

  4. Percentage Text Alignment: Align the text to the left, center, right, or justify it.

  5. Text Color Percentage: Select a color for the text from your site’s palette or utilize the color picker.

  6. Percentage Text Size: Adjust the font size using the slider or enter a specific value.

  7. Percentage Letter Spacing: Control the spacing between letters for a tighter or more open look.

  8. Percentage Line Height: Define the vertical spacing between lines for better readability.

  9. Percentage Text Shadow: Apply a shadow to the text for added depth. Customize:

    • Horizontal and Vertical Position: Adjust the shadow’s placement.

    • Blur Strength: Soften or sharpen the shadow.

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

Tips for Customizing Percentage Text

  • Make It Stand Out: Use bold weights, larger sizes, or vibrant colors to emphasize percentage values.

  • Prioritize Readability: Ensure proper contrast between the text and its background and maintain a clear line height.

  • Subtle Effects: Add a light text shadow to enhance the text without overpowering it.

  • Consistency Is Key: Match the percentage text style with your site's typography for a cohesive design.

Did this answer your question?