How To Use The Advanced Heading Widget By Atomic Addons

The Advanced Heading widget by Atomic Addons builds a section heading in layers: a small sub heading on top, the main heading with an optional second part styled differently, and an oversized background word behind them. Lines and icons can decorate the sub heading and the main heading. This guide covers adding the widget and setting up each layer.

Enable the Advanced Heading Widget

Advanced Heading is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Advanced Heading. You can also open the Content category.

4. 4

   Turn the Advanced Heading widget on.

5. 5

   Click Save Settings.

Add the Advanced Heading Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Advanced Heading. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Heading

Open the widget and go to Content → Heading:

1. 1

   Sub Heading: The small line above the main heading, “SUB HEADING HERE” by default. Leave it empty to show none.

2. 2

   Main Heading: The heading itself, “I am Advanced Heading” by default.

3. 3

   Split Main Heading: Adds a second part right after the main heading, which you can style apart from it in Style → Split Text, for example in a brand color.

4. 4

   Split Text: With Split Main Heading on: the text of that second part, “Split Text” by default.

5. 5

   Link: Turns the main heading into a link.

6. 6

   HTML Tag: The heading's markup: H1 to H6, div, span or p. H2 by default.

7. 7

   Alignment: Left, center (the default) or right, per screen size.

8. 8

   Show Advanced Heading: Adds the large background word and opens the Advanced Heading section below.

The text fields accept dynamic tags. The widget prints nothing when the sub heading, main heading and background word are all empty.

Advanced Heading

With Show Advanced Heading on, Content → Advanced Heading sets up the background word:

1. 1

   Advanced Heading: The text of the background word, “Advanced Heading” by default.

2. 2

   Alignment: Left, center or right, per screen size.

3. 3

   X Offset: Moves the word sideways, from -800 to 800px, per screen size.

4. 4

   Y Offset: Moves the word up or down, from -800 to 800px, per screen size.

5. 5

   Rotate Origin: The point the word turns around when you rotate it: Top Left (the default), Top Center, Top Right, Center, Center Left, Center Right, Bottom Left, Bottom Center or Bottom Right.

6. 6

   Rotate: Turns the word from -180 to 180 degrees, per screen size. Turn it 90 degrees to run the word along the side of the heading.

7. 7

   Hide at: Hides the word on smaller screens: Tablet and Mobile (the default) hides it below 960px, Mobile below 640px, and Nothing always shows it.

8. 8

   Title Multi Color: Gives each word of the main heading its own random color, picked again on every page load.

Style the Advanced Heading

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Sub Heading — color, typography and text stroke, and a Style that decorates it: Line adds a short line After, Before, on both sides or at the Bottom, with its color, width, height and spacing; Icon adds an icon on the left, right or both sides. Advanced Style adds a background, border, radius and padding.
• Main Heading — color, background, radius, padding, margin, typography, shadow and text stroke, a Line style placed the same way as the sub heading's, a Text Gradient and the Link Hover Color.
• Split Text — with Split Main Heading on: its own color, background, radius, padding, typography, shadow and text stroke, and the Split Space between it and the main heading.
• Advanced Heading — with the background word on: its color, typography and opacity, and with Advanced Style a background, border, radius and padding.