Widgets

Gradient Heading

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

Elevate your website’s design using the Gradient 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 Gradient Heading Widget:

Exploring the Features of Gradient Heading Widget

Step 1: Drag the widget

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

Step 2: Content tab

Gradient Heading Content:

  • Gradient 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.
  • Subtitle : Set main heading subtitle text.
  • Title HTML Tag : Set html tag of the heading.
  • Text Alignment : Set alignment of the texts.
  • Title & Subtitle order : Set the order of title & subtitle.
  • Set Gradient for title : Set gradient color of the title.
  • Class : Set a custom CSS class.

Step 3: Style tab

In the Style section, you can customize the Title Prefix, Title, Title Suffix and  Subtitle — 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.
  • For both Normal and Hover states:
    • Text Color : Set text color of the button.
    • Text Shadow : Add shadow effects to the text.
    • Box Shadow : Apply drop shadows.
  • Border Type : Customize border style, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Adjust internal spacing of the button.
  • Margin : Adjust external spacing of the button.

Title:

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 Alignment : Set the alignment of the title.
  • Z-Index : Control stacking order.

Title Suffix:

You’ll find the same customization options available for the Title Suffix as well, giving you full control to design it just like the Title Prefix.

Subtitle:

You’ll find the same design options for the Subtitle Section as in the Title. Only here added gradient part if you want to see your subtitle in color gradient mode — giving you full freedom to style it just the way you imagine.

  • Set Gradient for Subtitle : Set gradient colors with type, angle.
  • Subtitle Alignment : Set the subtitle alignment.

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 now!

Share: