Components > Typography
Heading
Overview
Headings are titles for the main sections of a page. They help users understand what a page or section is about at a glance.
Dos and Don’ts
How to use
How to use the component to your design/builder
Turning On the Builder
- 1. First add or edit a post/page.
- 2. If you are using WordPress 5+ with Gutenberg enabled (default),you should see a Builder Block like the screenshot below.
- 3. If Gutenberg is disabled, you will find the “Themify Builder” tab below the WordPress classic editor.
Copy/Paste Module
- 1. Hover over the ‘3 dots’ icon and select copy
Typography Variations
SIZE
extraLarge (heading tag – h1)
The Ultimate
Selling machine
large (h2)
The Ultimate
Selling machine
medium (h3)
The Ultimate
Selling machine
small (h4)
The Ultimate
Selling machine
tiny (h5)
The Ultimate
Selling machine
extraTiny (h6)
The Ultimate
Selling machine
LIGHT
extraLarge (heading tag – h1)
The Ultimate
Selling machine
large (h2)
The Ultimate
Selling machine
medium (h3)
The Ultimate
Selling machine
small (h4)
The Ultimate
Selling machine
tiny (h5)
The Ultimate
Selling machine
extraTiny (h6)
The Ultimate
Selling machine
Demo
Content hierarchy
Use headings to emphasize main sections of a page and group related content together.
Hero Banner
Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Overview Section
Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
Accessibility Considerations
Heading structure
All pages must have a logical, descending heading structure that doesn’t skip levels.
- Each page should have an
<h1>
as the main page title, and the first page heading. It should describe what the page is about. - Use only one
<h1>
per page. - Use
<h2>
for sections of content and for modal headings. - Use
<h3>
for subsections. - Don’t skip heading levels.
Heading 1 here
Your heading 2 here
Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
This is your heading 3
Paragraph copy here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam