Heading

With this element you can add headings to your page content, make different format & style settings and activate heading animation effects. You can find this element here

Content Tab

Heading Source

Here you can specify the source for your headings’s content. By selecting “Custom text” you can enter your heading’s content (text) in the repeater below. By selecting “Post or Page Title” your heading’s content will be dynamically populated by the title content of the current page.

Heading Content

To add headings content (text) use repeater control

Repeater is useful to create combined headings with different colors and font weights. For example, to create a heading consisting of some bold text and some thin text, use the first repeater, enter the text which should be in bold and leave the default font weight. Then click on “+” to add new repeater item, enter the text which should be thin and select “Thin” in font weight select box.

In the same way you can use different colors for different text fragments of your heading.

Rotating Text

Rotating heading text effect can be seen on this demo page:https://codex-themes.com/thegem/features/animations/ . Check the very first heading “Animated Headings” -> the word “Headings” is replaced by another word and so on. To activate this effect, click on “Rotating text effect” checkbox to get another repeater

Here you can add additional words, which will be rotated on the frontend.

URL (Link)

With this setting you can link your heading.

HTML Tag

Using this settings you can define the HTML formatting for the heading. It is very useful for SEO as this settings separate the appearance and the HTML tag. You can add for example H5 tag which will look like H1 heading and vice versa.

Inline element

Specify if your heading should be added as inline element.

Max width

With this setting you can control the width of your heading.

Style Tab

Use custom font size?

By activating this checkbox you can specify custom settings for the font used for heading. 

Animations Tab

You can choose between default animation effects of the page builder and advanced animations delivered with TheGem. We would strongly recommend to use “Advanced” animations as this animations are in pure CSS, are very lightweight and visually very appealing. So in this way you will get better page performance and excellent visual effects. Additionally, “Advanced” animations have more settings to control the animation: speed, interval, delay and easings.

Interactions Tab

In this tab you can activate interaction effects (on scroll, mouse) for your heading.

Responsive Options

Use the settings in this tab to control responsive appearance of your heading on tablets and mobiles.