---
title: Advanced Heading
description: "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.…"
url: "https://divianimator.com/docs/advanced-heading/"
updated: "2026-09-09"
category: Divi Modules
---

# Advanced Heading

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.