If you are editing a post or a page on your website, you can give it a more structured appearance by using headings.
If you are not familiar with how to apply headings to a “Text” element, you can read this article that goes through everything you need to know about adding and customizing a heading.
This article will explain how to use the “Style” option when customizing a heading.
After you’ve chosen a heading for your text, go to the “Panel Options” and click on the section with the heading:
This will open a drop-down with the options for the heading. These are divided into two tabs: the “Default” and the “Custom” tabs:
Default Tab
Firstly, we have the “Default” tab, with a list of all the available headings. The heading you are currently customizing will be highlighted, will have a darker grey background color:
This is where you can change the heading types of a text (for example, if you want to change it from Heading 3 to Heading 4, etc.), or edit the “Heading Styles”. If you hover over any of the headings, a sub-menu will open:
Apply Heading
This first option from the sub-menu can be used to apply the respective heading type to the text. All you have to do is to click on the “Apply Heading” option from the sub-menu:
This way the text you have previously selected will be transformed into the heading type you applied here.
You can apply any of the heading types this way, just make sure you hover over the heading type that you want to apply first.
Update Heading to Match
In the same sub-menu, the second option is the “Update Heading to match” one:
If you modify the font, size, color, etc. of a certain heading, you can click on the modified one, and choose “Update Heading to match”. This will modify all the other headings of the same type site-wide to look like the one you customized.
For example, if I go to one of the “Text” elements that I have applied a “Heading 3” to, and then I modify its text color and font, I will end up with something like this:
I have modified the color, font, and size of the “Heading 3” text. If I click on the “Update Heading 3 to match” option, from the sub-menu for this heading text, all of the “Heading 3” “Text” elements will inherit the modifications. Therefore, the headings will look like this:
Note: Please keep in mind that, since the “Update Heading to match” option works on a website level, not only the headings of that type from the respective page will be updated, but also every heading of the same type from the other simple pages, as well as from the posts of your website.
However, this does not include Landing Pages, because they work separately. If you use the “Update Heading to match” option on a simple page, the headings from the Landing Pages will not be updated.
Also, the “Update Heading to match” option, used on a Landing Page will only work on a page level. Landing Pages have their own typography settings, suitable for their design, so they do not use the default typography settings. This is why when you use the “Update Heading to match” option, the changes/updates will only be applied on the headings of the same type from the respective Landing Page.
Reset Style
The last option from the sub-menu is the “Reset Style” one:
If you click on this option, the heading will go back to its initial appearance. In my example, if I were to click on “Reset Style” for the “Heading 3”, my text will look like this:
When resetting the style of a heading type, all the other headings of the same type will regain their initial appearance, inherited from the theme.
This “Reset Style” option works, not only when you have previously used the “Update Heading to match” option, but also if you have changed any of the default settings for headings (font, size, color, etc.):
-
from the “Typography Settings” (if you are using a Thrive Theme Builder Theme),
-
or from the “Appearance” → “Customize” → “Fonts” section of your WordPress admin dashboard (if you are using a different theme).
Note: Used on a simple page or on a post, the “Reset Style” option will be applied on a website level. This means that it will reset the style of all the headings of the same type, from every simple page and every post on your website automatically (except the ones found on Landing Pages).
When used on the headings of a Landing Page, the “Reset Style” option will only be applied on a page level, therefore the reset will happen only for the headings of the same type from the respective Landing Page.
Custom Tab
The other tab with the heading options is the “Custom” tab. With the help of this tab, you can save the style of your heading and use it later, for other headings as well. Naturally, first, you should customize the heading, to have the style that you want to save.
After you have customized the “Heading” text as you wish, go to the “Panel” options, click on the section with the heading and select the “Custom” tab, from the drop-down that opens:
Then, name the style in the “Enter style name” field and once you have done that, click on the blue “Save” button:
Your new custom style will appear in the “Custom” list, and you will be able to use it whenever you wish:
If you hover over the new heading style, you will see a similar sub-menu, the first two options being the ones described above (Apply / Update heading style):
However, instead of the “Reset Style” option, there is a “Delete Style” one. If you click on it, a small pop-up will open, where you have to confirm that you indeed want to delete the style:
If you decide to delete a style, all the headings that had that style will be reset to default. Therefore, deleting a style does not only affect one heading but every heading that the style was applied to.
This is how you can use the heading style options when editing a page or post. If you need to find out more information about various Thrive Architect elements, make sure to check out our knowledge base.
I hope this article was useful for you. If that’s the case, make sure to reward our efforts with a smile below 🙂