Title Element
The Title Element adds headings to your pages. You choose the HTML tag (H1 to H6, DIV or P), the alignment, the typography and an optional separator line, so headings look the same across the site while keeping a correct structure for search engines and screen readers.
Titles can also be animated. Besides plain text, the element offers rotating words, highlighted words with hand-drawn shapes, a scrolling marquee and a scroll reveal effect that uncovers the heading as the visitor scrolls.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Title Element
Add the Title Element to any column and pick a Title Type. For a normal heading keep it on Text and enter your text in the Title field.
For an animated heading choose Rotating or Highlight and fill in the Before Text, the rotating or highlighted words and the After Text. Marquee scrolls the title continuously, and Scroll Reveal uncovers it character by character or word by word while the page scrolls.
On the Design tab set the HTML Heading Tag first; typography and color fall back to the global settings of that heading size when you leave them empty. Add a separator line, a text stroke or custom link colors if the design needs them.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Title. Change them there to style every Title at once.
Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.
General
| Heading | Description |
|---|---|
| Title Type | Choose the title type. |
| Scroll Reveal Effect | Select the style for the scroll reveal animation. |
| Scroll Reveal Basis | Select the basis for the reveal effect. |
| Scroll Reveal Behavior | Select how the scroll reveal effects behave on scroll. |
| Scroll Reveal Duration | Controls the duration of the scroll animation effect. In milliseconds. |
| Scroll Reveal Stagger | Controls how the start times of the individual animations within a scroll reveal effect are staggered. In milliseconds. |
| Scroll Reveal Delay | Controls the delay for the start of the scroll effect. In milliseconds. |
| Enable Scroll Reveal Above The Fold | Set to “yes” to enable the scroll reveal effect even if the title is above the fold. This can lead to a flash of unstyled content. |
| Marquee Direction | Select the marquee direction. |
| Mask Edges | Choose if the edges of the marquee should be masked with a fade out effect. |
| Marquee Speed | Controls the speed of the marquee effect. In milliseconds, 1000 = 1 second. |
| Rotation Effect | Select the style for rotation text. |
| Display Time | Controls the animation delay between each text in a set. In milliseconds. |
| Highlight Effect | Select the highlight effect. |
| Animation Mode | Controls if and how the text should be animated. Rotating text will either run once or loop. |
| Highlight Animation Duration | Controls the duration of the highlight animation. In milliseconds. |
| Highlight Shape Thickness | Controls the thickness of highlight shape. |
| Highlight Smudge Effect | Choose if the highlight shape should have a slightly smudged gradient effect. |
| Highlight Top Margin | Controls the top margin of highlight shape. |
| Before Text | Enter before text. |
| Rotation Text | Enter text for rotation. |
| Highlighted Text | Enter text which should be highlighted. |
| After Text | Enter after text. |
| Title | Insert the title text. |
| Title Link | Choose if title text should have a link. |
| Link URL | Add an URL for the link. For example https://example.com. |
| Link Target | Controls how the link will open. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| Element Sticky Visibility | Choose to show or hide the element, based on the current mode (normal or sticky) of its parent container. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
| Attributes | Add custom HTML attributes to the element. |
Design
| Heading | Description |
|---|---|
| Alignment | Choose to align the heading left, right or center. |
| HTML Heading Tag | Choose HTML tag of the heading, either div, p or the heading tag, h1-h6. |
| Animated Text Font Size | Controls the font size of the animated text. Enter value including any valid CSS unit, for example 20px. Leave empty if the global font size for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings. |
| Typography | Controls the title text typography. Leave empty if the global typography for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings. |
| Font Color | Controls the color of the title, for example #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings. |
| Animated Text Font Color | Controls the color of the animated title, for example #000. Leave empty if the global color for the corresponding heading size (h1-h6) should be used: Global Options Heading Settings. |
| Highlight Shape Color | Controls the color of the highlight shape, for example #000. |
| Text Shadow | Set to “Yes” to enable text shadows. |
| Text Shadow Position | Set the vertical and horizontal position of the text shadow. Positive values put the shadow below and right of the text, negative values put it above and left of the text. In pixels, ex. 5px. |
| Text Shadow Blur Radius | Set the blur radius of the text shadow. In pixels. |
| Text Shadow Color | Controls the color of the text shadow. |
| Text Stroke | Set to “Yes” to enable text stroke. |
| Text Stroke Size | Set text stroke size. In pixels. |
| Text Stroke Color | Controls the color of the text stroke. |
| Text Overflow | Controls the text overflow for longer texts. |
| Margin | Enter values including any valid CSS unit, for example 4%. |
| Mobile Margin | Spacing above and below the title on mobiles. In px, em or %, e.g. 10px. |
| Gradient Font Color | Set to “Yes” to enable gradient font color. |
| Gradient Start Color | Select start color for gradient. |
| Gradient End Color | Select end color for gradient. |
| Gradient Start Position | Select start position for gradient. |
| Gradient End Position | Select end position for gradient. |
| Gradient Type | Controls gradient type. |
| Radial Direction | Select direction for radial gradient. |
| Gradient Angle | Controls the gradient angle. In degrees. |
| Separator | Choose the kind of the title separator you want to use. |
| Separator Color | Controls the separator color. |
| Link Color | Controls the link color. |
| Link Hover Color | Controls the link hover color. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
| Conditional Logic | Add conditional logic when the element is used within a form. |
Tips
- Use one H1 per page, normally the main page title, and follow the heading order (H2, then H3) for sections. The visual size can still be changed with the Typography option.
- Pick the HTML Heading Tag by meaning, not by size. Search engines and screen readers read the tag; visitors see the typography.
- Animated titles draw attention. Use them for one key message per page rather than for every heading.
- Enable Scroll Reveal Above The Fold can make a heading at the top of the page appear empty until the visitor scrolls. Keep it off for titles in the first screen.
- Mobile Margin sets the space above and below the title on phones separately from larger screens.