Animated Heading element in Max Addons for Bricks Builder lets you create eye-catching headlines with dynamic animations. You can highlight specific words or rotate multiple phrases to make your headings more engaging and visually appealing.
Getting Started#
Before using the Animated Heading element, make sure the following tools are installed and activated on your WordPress website:
Once both tools are active, you’re ready to start using the Animated Heading element on your page.
How to Add the Animated Heading Element#
Follow these steps to add the Animated Heading element to your page:
- Open an existing page in Bricks Builder or create a new page.
- Click Edit With Bricks to launch the builder.
- Inside the editor, click the element search bar.
- Type "animated heading" in the search field.
- Add the Animated Heading element to your page.
- Make sure you see the MAX label in the top-left corner of the element.
Once added, you’ll see two main tabs:
- Content Tab
- Style Tab
Content Tab#
Content tab includes the following sections:
- Heading
- Heading Style
- Shape
- Settings
Let’s explore each section in detail.
Heading#
This is the main section where you define how your animated heading will behave.
Choose Heading Style#
From the Style field, you can select: Highlighted or Rotating
Highlighted Style#
This style lets you highlight a specific word or phrase within your heading. Once selected, you’ll get the following options:
- Shape: Choose how the highlight appears. Available options include: Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, X, and more.
- Prefix: Add the text that appears before the highlighted word.
- Highlighted Text: Enter the text that will be highlighted.
- Suffix: Add the text that appears after the highlighted word.
Example:
Prefix: Build Faster
Highlighted: Websites
Suffix: With Bricks
Rotating Style#
This style allows you to display multiple words or phrases that rotate with animation. Once selected, the following options become available:
- Animation: Choose how the rotating text appears. Options include: Typing, Clip, Flip, Swirl, Blinds, Drop-in, Wave, Slide, Slide Down, and more.
- Prefix: Text that appears before the rotating words.
- Rotating Text: Add multiple words or phrases that will rotate one after another.
- After Text: Text that appears after the rotating text.
Example:
Prefix: We Build
Rotating Text: Websites, Stores, Landing Pages
After Text: for You
Additional Options
- HTML Tag: Choose the HTML tag for your heading: H1 to H6, Div, Span, or Paragraph.
- Link Type: Add a link to your heading. Options include: Internal post/page, Taxonomy, Dynamic data & Custom link
Heading Style#
This section controls the typography of your heading.
- Text Typography: Customize the font, size, weight, spacing, and more for the normal text.
- Animated Text Typography: Style the highlighted or rotating text separately for better visual impact
Shape#
This section is useful when using the Highlighted style.
- Color: Choose the highlight shape's color.
- Width: Adjust the thickness or width of the highlight effect.
Settings#
This section controls how the animation behaves.
- Infinite Loop
- Set to Yes to continuously repeat the animation.
- Set to No to play the animation only once.
- Duration: Define how long one animation cycle takes (in milliseconds).
- Delay: (Available when Infinite Loop is enabled and Highlighted style is selected) Set the time delay (in milliseconds) between each animation loop.
Wrapping Up!#
Animated Heading element in Max Addons for Bricks Builder gives you full control over how your headings look and behave. With options like highlighted text, rotating phrases, and multiple animation styles, you can create engaging headlines that capture attention and improve user experience.