Skip to main content

Understanding the Body Text Option Group in Divi 5

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

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

Note: The Body Text Design options are shared across different text-based modules such as the Blog, and many more.

Divi 5 - Body Text Design Options

Where to Find the 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 Body Text option group.

Text Customization Settings

The Body Text option group is split into five tabs:

  • Paragraphs - It lets you choose the styles for paragraph text

  • Links - It lets you choose the text styles for links.

  • Unordered List - It lets you choose the text styles for unordered lists

  • Ordered List - It lets you choose the text styles for the ordered lists.

  • Blockquote - It lets you choose the text styles for blockquotes.

  • Drop Cap - It lets you choose the dropcap styles for the text.

  1. Body Font: Choose a font from the dropdown or upload a custom font for unique styling.

  2. Body Font Weight: Adjust the boldness of your body text with options like light, bold, or extra-bold.

  3. Variable Font Options: those options will only be available if you are using a Google variable font such as Robo, Google Sans Flex, or Bitcount):

    • Variable Font Weight: Use the slider or type in a numeric value for the font weight.

    • Optical Sizing: Enable automatic optical size handling.

    • Variable Font Width: Fine-tune variable font width using variable font interpolation.

    • Variable Font Slant: Fine-tune variable font slant using variable font interpolation.

    • Variable Font Crsv: Fine-tune variable font crsv using variable font interpolation.

    • Variable Font Element Shape: Fine-tune variable font element shape using variable font interpolation.

    • Variable Font Element Expansion: Fine-tune variable font element expansion using variable font interpolation.

    • Variable Font Rond: Fine-tune variable font rond using variable font interpolation.

    • Variable Font Grade: Fine-tune variable font grade using variable font interpolation.

    • Variable Font Width: Fine-tune variable font width using variable font interpolation.

  4. Body Text Size: You can adjust the font size of your Body text using the slider or by entering a specific value. It also accepts Global Variables.

  5. Body Text Color: Choose a color to be used for the Body text. It also accepts Global Variables.

  6. Body Line Height: Set the space between the lines of the Body text, helping to improve readability. It also accepts Global Variables.

  7. Body Letter Spacing: Control the space between letters by adjusting the slider or entering a value. It also accepts Global Variables.

  8. Body Text Alignment: Set the alignment for the Body text: left, center, right, or justified.

  9. Body Capitalization: Choose the Body text's capitalization:

    1. Uppercase - All letters are in uppercase format

    2. Capitalize - Makes the first letter of each word uppercase.

    3. Lowercase - All letters are in lowercase format.

    4. Smallcaps - Lowercase letters display as smaller uppercase letters.

    5. All Small Caps - all letters display as small caps, including letters that were already uppercase.

  10. Body 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

  11. Paragraph Spacing: Adjust the space between paragraphs by setting the bottom margin for each paragraph in this text area.

  12. Body 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

  13. Body Text Direction: Choose text flow direction. Standard Horizontal reads left-to-right across lines, while vertical modes stack glyphs top-to-bottom.

    1. Standard Horizontal

    2. Vertical (right to left): The text is displayed from top to bottom, and each new line starts to the left of the previous one.

    3. Vertical (left to right): The text is displayed from bottom to top, and each new line starts to the left of the previous one.

  14. Body 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.

  15. Body Fill Type: Choose the title's text fill options:

    • None - No Body text fill.

    • Gradient - Fill the Body text with a Gradient

    • Image - Fill the Body text with an Image

    • Transparent - Fill the Body text with a transparent fill.

  16. Body Stroke Width - Choose the thickness of the stroke.

    • Body Stroke Color - Choose the Body text's stroke color.

  17. Body Columns: Set how many columns the text should flow through.

  18. Body 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 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?