Widgets

Advanced Heading

Step-by-Step Tutorial on Using the Advanced Heading Widget of Zyre Addon

Elevate your website’s design using the Advanced Heading Widget of Zyre Addon for Elementor. With stylish headings and dynamic effects, you can transform your webpage into a visually engaging experience.

Learn How To Use Advance Heading Widget:

Exploring the Features of Advanced Heading Widget

Step 1: Drag the widget

From the left panel, search or choose the Advanced Heading Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Advance Heading Content:

  • Advance heading Style : You can choose a predefined style from here
  • Title Prefix : Set prefix of the title text.
  • Title Text : Set main heading text.
  • Title Suffix : Set suffix of the title text.
  • Title HTML Tag : Set html tag of the heading.
  • Layout : Can chooseinline or block.
  • Gap : Adjust spacing between elements.
  • Class : Set a custom CSS class.

Step 3: Style tab

In the Style section, you can customize the Title Prefix, Title Suffix, and the main Title Text — but make sure you have added the contents first.

Title Prefix:

  • Typography: here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Alignment : Set the alignment of the text.
  • Horizontal Align : Adjust the element position horizontally.
  • Color : Choose colors for both normal and hover states.
  • Background : Set classic or gradient background (linear or radial). Explore full background settings here.
  • Background Clip : Control how the background is applied to text.
  • Text Shadow : Add shadow effects to the text.
  • Box Shadow : Apply shadow to the element.
  • Border : Set border type and radius.
  • Padding & Margin : Adjust spacing inside and outside the element.
  • Horizontal/Vertical Offset : Fine-tune positioning of the text.
  • Z-Index : Control stacking order.


Separators style :

  • Show/Hide Separator : Toggle the separator visibility
  • Direction : Set separator direction as inline or block
  • Gap : Adjust spacing between separator and text.
  • Left/Right Separator : Show/hide and customize each side individually
    • Border Style : Customize border type, width, and color.
    • Vertical Align : Adjust separator alignment vertically.
    • Width : Set the width of the separator.
    • Margin : Control spacing around the separator.
    • Border Radius : Round the edges of the separator.

Title Text:

You’ll find the same design options for the Title Text as in the Title Prefix — giving you full freedom to style it just the way you imagine.

Title Suffix:

The same customization options are available for the Suffix Text as well, giving you full control to design it just like the Title Prefix.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Heading come to life on your webpage!

You’re all set!

Share: