Heading

Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish
Layers Panel
Variables
Symbols
Pop-up Builder
Media Manager
Figma to Kirki
API Integrations
Review and Publish

Headings are titles and subtitles displayed on your webpage, defined by H1 through H6 tags. H1 represents the most important heading, while H6 represents the least.

Why Use Headings

Headings play a key role in both user experience and SEO. Search engines rely on them to understand the structure and content of your page, while visitors use them to skim and navigate through content. So, it’s important always to use headings in order – H1 for the main title, followed by H2, H3, and so on.

Adding a Heading

To add a Heading to your page, follow these simple steps:

  1. Open the Kirki editor and navigate to the Insert Panel
  2. Head over to the Elements block and find the Base Element
  3. Locate the Heading inside Base Elements, then drag and drop it onto your editor

How to Switch Header Tags

To assign a relevant tag to a Heading, follow these simple steps:

  1. Select the Heading
  2. Head over to Right Panel → Settings
  3. Locate Tags under Custom Properties
  4. Set the relevant tag from H1 to H6

To turn a Heading into a clickable link, simply head over to the top of the Right Panel and set your desired redirect.

Dynamic Headings

To pull Heading content directly from your collection, you can also make them Dynamic from the Right Panel.

Styling Headings

Kirki gives you plenty of ways to style your headings. For example, to apply a contrast typography style, follow these steps:

  1. Select the words you want to contrast
  2. Go to Right Panel → Design → Styles
  3. Apply the contrast color of your choice

After that, you can go even further – selecting the newly contrasted style unlocks additional options to adjust the font, size, weight, and more.

For more on reusing Heading styles or applying variable fonts across different headings, refer to the corresponding guides: Reusable Text Styles and Variable Fonts.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.