V4 Elements Advanced Heading Estimated reading: 6 minutes 7 views A heading you can style word by word. Make one word bold, colored, underlined or linked, all inside one heading. No code needed. WIDGET Advanced Heading FORMATS Bold, color, link and more PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons before you start. Note: In the screenshots, the orange boxes and numbers show you where to click or what to check. STEP 1 Enable the Widget The Advanced Heading is on by default. If it is off, turn it on from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under General Widgets, turn on Advanced Heading. Click Save Settings. The Advanced Heading widget in the dashboard (click to zoom) STEP 2 Add the Heading Add the widget to your page. Open your page with the Elementor Editor. Click the + button at the top to open the Elements panel. Under AAE General, find Advanced Heading. Drag it onto your page. The Advanced Heading in the Elements panel (click to zoom) Tip: Can not find it? Type Advanced Heading in the search box at the top of the panel. STEP 3 Write Your Heading Open the General tab. The Heading section has a tag picker and the Content box. Click inside the Content box. Type your heading. A new widget shows Build your Innovate Our Core Solution, so just replace it. Above the box, you see a toolbar for formatting. You use it in the next steps. The tag (1), the formatting toolbar (2) and the Content box (3) (click to zoom) STEP 4 Format Words Select the words you want to change, then click a button on the toolbar. The heading on your page changes right away. Select a word or a few words in the Content box. Click a button on the toolbar: B bold, I italic, U underline, S strikethrough, x² superscript or x₂ subscript. Click the same button again to turn the format off. To remove all formatting from the selected words, click the — button. Select the words (2), then click a button on the toolbar (1) (click to zoom) STEP 5 Color a Word Give one word its own color. The rest of the heading keeps its normal color. Select the words you want to color. Click the small color square on the toolbar and pick a color. Or click the ◑ button and type a color code, like #f05a35. Press Enter. The color square (1), the code button (2) and the color code box (3) (click to zoom) Tip: Use a solid color code like #f05a35. For the color of the whole heading, use the Style tab (see Step 8). STEP 6 Add a Link Turn any words into a link. Select the words. Click the link button on the toolbar. Type the address in the box that opens, for example https://animation-addons.com. Press Enter, or click the ✓ button. The link button (1) and the address box (2) (click to zoom) Tip: A new link is blue. To change it, select the link text and pick another color with the color square. STEP 7 Choose the HTML Tag Pick the tag that fits your page. Use H1 for the main title of a page, and H2 to H6 for smaller titles. In the General tab, open HTML Tag. Choose H1 to H6, div, p or span. The HTML tag list (click to zoom) Tip: The default is H2. STEP 8 Style the Heading Open the Style tab to change the whole heading. Open the Typography section. Change Font family, Font weight, Font size, Text align or Text color. Use Spacing, Size, Background and Border for the box around the heading. Click Update to save your page. Typography changes the whole heading (click to zoom) Tip: The heading has no outer space by default. Its margin is 0. SETTINGS Options HTML Tag Default: H2The tag of the heading. H1 to H6, div, p or span. Content Your heading text. Use the toolbar for bold, italic, underline, strikethrough, superscript, subscript, link and color. ID Optional CSS ID for the heading. RESULT Final Result Three headings on a live page. Each one mixes formats inside a single heading. Three Advanced Headings on the live page Build your Innovate Our Core Solution Build is a link. Innovate is bold. Core Solution is underlined and colored #f05a35. Water is H₂O and E = mc² Subscript for the 2 in H2O and superscript for the 2 in mc2. Make it green or loud green is colored #16a34a and loud is bold. GOOD TO KNOW More Details You can type HTML You can also type tags by hand in the Content box, like <b>, <span>, <mark> or <small>. They turn into formatted text. Block tags If your text has a block tag like <h3>, <p> or <div>, the widget switches to div by itself. A heading can not hold another heading. Safe by default Unsafe code, like scripts, is removed when you save. Extra spaces Many spaces in a row are turned into one space. HELP Troubleshooting I do not see the Advanced Heading in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Advanced Heading. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. A format button does nothing Select some words first. The buttons change only the selected words. My color does not show on the live page Use a solid color code like #f05a35. Colors with transparency may not show on the live page. I want to remove a format Select the words and click the same button again. To remove everything, click the — button. I want the whole heading in one color Select the heading, open the Style tab, then Typography. Change Text color. You Did It Your heading now has its own look, word by word. If you face any problem, please contact our support team. We are happy to help.
