Animated Heading
The Animated Heading widget in JupiterX can help draw attention and add a dynamic touch to your website. Follow these detailed steps to use it effectively.
Content Tab
Heading
- Style: Choose an animation style for your heading. You will have options like "Highlighted" or "Rotating."
- Shape: This option appears if you select "Highlighted." You can pick a shape that best fits the design such as "Circle" or "Underline."
- Animation: If "Rotating" is your chosen style, select an animation effect like “Typing” or “Swirl” from the dropdown menu.
- Before Text: Enter any text that should appear before the animated portion.
- Highlighted Text: Add the text you wish to be highlighted when the "Highlighted" style is picked.
- Rotating Text: When "Rotating" is chosen, insert the text that should rotate. If you have multiple rotating texts, separate them with commas.
- After Text: Write any text that will follow the animated part.
- Infinite Loop: Toggle on if you desire the animation to repeatedly loop.
- Duration (ms): Input the time each animation cycle should take, in milliseconds.
- Delay (ms): Set a starting delay for each animation cycle, again in milliseconds.
Link
- URL: Add the destination URL to make the heading clickable.
- Open in new window: Select this if the linked page should open in a new tab.
- Add nofollow: Useful for external links, this option adds "nofollow" to your heading’s HTML link.
- Custom Attributes: Insert any specific attributes for the link, formatted as key and value pairs.
Alignment
- Align your animated heading to the left, center, or right.
- HTML Tag: Choose a tag like H1 or H2 that fits your SEO strategy.
Style Tab
Shape
- Select the color and adjust the width if the chosen style includes a shape.
- Use the toggle for "Bring to Front" and "Rounded Edges" for additional styling options.
Heading
- Text Color: Pick a color for your non-animated heading text.
- Typography: Customize font settings, including size and style, for your heading.
- Text Stroke: Customize a stroke effect if desired.
- Animated Text:
- Repeat the typography and stroke settings for just the animated text for consistency or contrast, depending on your design.