Overview
The Heading element renders semantic HTML heading tags from <h1> to <h6> based on the level setting. Use headings to create a clear content hierarchy that helps users scan your page and improves SEO.
Headings inherit their typography styles from the Global Styles typography presets configured in Settings. This means you don't need to manually set font sizes for each heading - they automatically follow your site's design system. You can override individual headings by adding explicit classes through the Inspector.
Click any heading on the canvas to edit its text inline. Headings can also contain inline children such as icons or PHP code elements when working in template mode.
Use heading levels hierarchically (H1 → H2 → H3) for accessibility and SEO. Each page should have exactly one H1 as the main title, with H2s for major sections and H3s for subsections.
Settings
Configure the Heading element using these Inspector options:
| Setting | Description | Default |
|---|---|---|
| Level | Heading level from H1 (largest, most important) to H6 (smallest). Use H1 once per page for the main title. | H2 |
| Content | The heading text content. Click the heading on canvas to edit inline. | "Heading Text" |
| Typography | Font family, size, weight, and color via the Inspector Typography section. By default, headings inherit from Global Styles presets. | Inherits from Global Styles |
Heading Levels Explained
Each heading level has a specific semantic meaning:
- H1 – Page title. Use exactly once per page.
- H2 – Major section headings. Most commonly used.
- H3 – Subsections within an H2 section.
- H4-H6 – Further subdivisions when needed for complex content.
Examples
H1 Page Title
Use H1 for your main page title. This is typically the largest heading and should appear once per page.
<h1 class="text-4xl font-bold">Welcome to Our Site</h1>H2 Section Heading with Custom Font Size
H2 headings divide your page into major sections. You can add custom classes to override the default sizing.
<h2 class="text-3xl font-semibold text-primary">Our Services</h2>H3 with Icon Child
Headings can contain inline child elements like icons. Drag an Icon element into the heading to create this effect.
<h3 class="flex items-center gap-2">
<span class="text-primary">
<i class="fas fa-star"></i>
</span>
Featured Product
</h3>Configure heading styles site-wide in Settings → Global Styles → Typography. Changes there automatically apply to all headings that don't have explicit overrides.
Next Steps
- Text – Learn about paragraph text elements
- Inspector – Typography controls for styling text
- Global Styles – Configure site-wide heading typography