Widgets

Dual Color Heading

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

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

Exploring the Features of Dual Color Heading Widget

Step 1: Drag the widget

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

Step 2: Content tab

Dual Color Content:

  • Dual Color heading Style : You can choose a predefined style from here
  • Title Text : Set main heading text.
  • Title Prefix : Set prefix of the title text.
  • Title Suffix : Set suffix of the title text.
  • Title HTML Tag : Set html tag of the heading.
  • Text Alignment : Set alignment of the texts.
  • Class : Set a custom CSS class.

Step 3: Style tab

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

General:

  • 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.

Title Text:

  • For both normal and hover states:
    • Text Color : Choose text color.
    • Background type : Set classic or gradient background (linear or radial). Explore full background settings here.
    • Text Shadow : Add shadow effects to the text.
    • Box Shadow : Apply drop shadow to the text.
  • Border : Set border type, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Adjust spacing inside the text.
  • Margin : Adjust spacing outside the text.
  • Z-Index : Control stacking order.

Title Prefix:

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

Title Suffix:

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

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 Header come to life on your webpage!

Share: