Reference guide for creating flexible heading text in Divi.
Overview #
Advanced Heading Module creates flexible heading text with customizable prefix, suffix, and infix elements. The module supports animations, transparency effects, links, and full styling control through the three-tab interface.
Unlike standard headings, this module allows breaking text into parts (prefix/title/infix/suffix) for independent styling and animation, making it suitable for creative heading designs.
Content Tab #
Controls the text content and basic structure of the heading.
Title Text #
The main heading text. This is the primary content displayed.
Enter the heading text you want to display. Supports plain text only (no HTML formatting in this field).
Prefix Text #
Optional text that appears before the title text. Use for decorative elements or introductory words.
Example: "The" in "The Main Title". Leave blank if not needed.
Infix Text #
Optional text that appears in the middle or around the title text. Useful for breaking up titles visually.
Example: "Beautiful" in "Beautiful | Main Title | Design". Leave blank if not needed.
Suffix Text #
Optional text that appears after the title text. Use for tags, descriptions, or decorative endings.
Example: "Now" in "Main Title Now". Leave blank if not needed.
Transparent Title Text #
Creates a semi-transparent or ghost effect on the title text. Useful for layering text effects.
- Enable: Toggle transparent text on/off
- Opacity: Transparency level (0 = invisible, 1 = fully opaque)
- Color: Color of the transparent text
Link #
Optional URL for the entire heading to link to. Leave blank for no link.
Enter full URL including http:// or https://. Add target="_blank" in Advanced tab to open in new tab.
Text Animations #
Entrance animation for the heading text. Expandable section for animation settings.
- Animation: Fade, Slide, Scale, or None
- Duration: How long animation plays (seconds)
- Delay: Wait before animation starts (seconds)
Background #
Background settings for the heading container. Supports color, image, or gradient.
Element Label #
Internal label for identifying this module in the builder. Does not appear on front-end.
Useful for organizing multiple headings. Example: "Hero Section Title" or "Section Divider".
Design Tab #
Controls the visual appearance and styling of the heading.
Title Text #
Styling specifically for the main title text.
- Font Family: Typeface to use
- Font Size: Text size in pixels
- Font Weight: Boldness (300=light, 400=normal, 700=bold)
- Color: Text color
- Letter Spacing: Space between characters
- Line Height: Vertical space between lines
Prefix Text #
Styling for the prefix text element. Can differ from main title.
- Font Size: Prefix text size
- Font Weight: Prefix boldness
- Color: Prefix text color
Infix Text #
Styling for the infix text element. Can differ from main title.
- Font Size: Infix text size
- Font Weight: Infix boldness
- Color: Infix text color
Suffix Text #
Styling for the suffix text element. Can differ from main title.
- Font Size: Suffix text size
- Font Weight: Suffix boldness
- Color: Suffix text color
Sizing #
Overall dimensions of the heading module.
- Width: Module width (pixels, %, vw)
- Height: Module height (pixels, %, vh)
- Max Width: Maximum allowed width
Spacing #
Padding and margins around the heading.
- Padding: Space inside the module
- Margin: Space outside the module
Border #
Border styling around the heading container.
- Style: Solid, dashed, dotted, double
- Width: Border thickness in pixels
- Color: Border color
- Radius: Corner rounding in pixels
Box Shadow #
Shadow effect around the heading.
- Horizontal Offset: Shadow left/right distance
- Vertical Offset: Shadow up/down distance
- Blur: Softness of shadow
- Spread: Size of shadow
- Color: Shadow color and opacity
Filters #
Visual effects applied to the heading.
| Filter | Effect |
| Brightness | Lightens or darkens (0-200%) |
| Contrast | Increases or decreases contrast (0-200%) |
| Saturation | Adjusts color intensity (0-200%) |
| Grayscale | Removes color (0-100%) |
| Blur | Blurs the heading (0-20px) |
Transform #
2D and 3D transformations.
- Scale: Resize the heading (1.0 = normal, 1.5 = 150%)
- Rotate: Rotation in degrees (0-360)
- Translate X/Y: Move the heading
- Skew: Distort the heading
Animation #
Additional animation effects for the heading. Separate from entrance animations.
Advanced Tab #
Controls CSS, attributes, positioning, and scroll effects.
CSS ID & Classes #
Assign CSS targeting to the module.
- CSS ID: Unique identifier (prefix with # in CSS)
- CSS Classes: Space-separated class names (prefix with . in CSS)
Example: ID = "main-title", Classes = "heading-primary dark-theme"
Attributes #
HTML attributes applied to the heading element.
- Data Attributes: Custom data attributes for JavaScript
- ARIA Labels: Accessibility labels for screen readers
Example: data-section="hero" for identifying sections with JavaScript.
CSS #
Custom CSS code applied directly to the module. Write any valid CSS.
opacity: 0.95; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
Visibility #
Controls when the module displays on different device types.
| Option | Device Type |
| Show on Desktop | Screens 1200px and wider |
| Show on Tablet | Screens 768-1199px |
| Show on Phone | Screens below 768px |
Uncheck to hide module on specific device types.
Transitions #
Smooth transitions when module properties change.
- Enable: Toggle transitions on/off
- Duration: How long transition takes (milliseconds)
- Delay: Wait before transition starts
- Timing Function: Ease curve for transition
Example: 300ms duration for smooth hover effects.
Position #
Controls how the module is positioned in the layout.
- Position Type: Static (normal), Relative, Absolute, Fixed
- Top/Bottom: Vertical position offset
- Left/Right: Horizontal position offset
- Z-Index: Stacking order relative to other elements
Scroll Effects #
Effects that trigger based on scroll position.
- Enable Scroll Effect: Toggle on/off
- Effect Type: Fade, Slide, Scale, Rotate, or Blur
- Start Position: Where scroll effect begins
- End Position: Where scroll effect ends
Common Configurations #
Simple Heading #
Basic heading with title only, no prefix or suffix.
| Tab | Setting | Value |
| Content | Title Text | Your Heading Here |
| Content | Prefix Text | (Leave blank) |
| Design | Font Size | 48px |
| Design | Font Weight | Bold |
| Advanced | Visibility | Show all devices |
Multi-Part Heading #
Heading with prefix, main text, and suffix for visual interest.
| Tab | Setting | Value |
| Content | Prefix Text | The |
| Content | Title Text | Best Solution |
| Content | Suffix Text | Today |
| Design | Prefix Text Color | #999 (lighter) |
| Design | Title Font Size | 56px |
| Design | Suffix Text Size | 32px |
Animated Entrance Heading #
Heading that animates when page loads or scrolls into view.
| Tab | Setting | Value |
| Content | Text Animations | Fade Animation |
| Content | Animation Duration | 0.8s |
| Content | Delay | 0.2s |
| Advanced | Scroll Effects | Enabled, Fade Effect |
Troubleshooting #
Text not appearing #
Verify Title Text field is not empty. Check Visibility settings for device breakpoint. Ensure Color is not the same as background. Check Opacity is not set to 0.
Prefix/Infix/Suffix not showing #
Verify those text fields are filled with text. Check color is visible against background. Verify font size is not 0. Check if custom CSS is hiding them.
Text appears stretched or distorted #
Check Transform Scale value. Verify letter spacing is reasonable. Check line height settings. Remove any skew transforms if not intended.
Link not clickable #
Verify Link field contains valid URL (include http:// or https://). Check if another element is overlapping and blocking clicks. Test in different browser.
Font not applying #
Verify Font Family is selected and available. Check if custom CSS is overriding font settings. Clear browser cache. Test in incognito window.
Animation not playing #
Verify Animation is not set to None. Check if animation trigger matches setup (On Load, On Scroll, etc). Verify Duration is greater than 0. Clear browser cache.
Transparency effect not working #
Verify Transparent Title Text is enabled. Check Opacity is between 0 and 1 (not 0 or 1 for visible effect). Ensure Color is set to desired color.
Heading misaligned on mobile #
Check responsive breakpoint settings. Adjust font sizes for mobile. Check Sizing Width for mobile. Test on actual mobile device.
Border or shadow not showing #
Verify Border/Box Shadow Enable toggle is on. Check Width/Blur values are greater than 0. Verify Color is not transparent. Check for conflicting CSS.
Scroll effects not triggering #
Verify Scroll Effects is enabled. Check that module is visible on page. Scroll the page to trigger effects. Test in fresh browser session.
Support #
For issues or questions about the Advanced Heading Module, contact support@diviexpand.com or check the Divi documentation.
© 2026 DiviAnimator. All rights reserved.
