Widgets

Image Heading

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

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

Exploring the Features of Image Heading Widget

Step 1: Drag the widget

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

Step 2: Content tab

Image Heading Content:

  • Image heading Style : You can choose a predefined style from here.
  • Title Text : Set the main heading text.
  • Set Image for Title Text : Set an image with title text for creative styling.
  • Image : Upload or choose the main image.
    • Image Resolution : Define the resolution quality of the selected image.
    • Position : Control the background image position.
    • Attachment : Set background attachment as scroll or fixed.
    • Repeat : Enable or disable background image repetition.
    • Display Size : Choose cover, contain, or auto for image scaling.
  • Title HTML Tag : Set html tag of the heading.
  • Title Suffix : Set suffix of the title text.
  • Subtitle : Add supporting subtitle text.
  • Subtitle Position : Adjust subtitle placement.
  • Subtitle HTML Tag : Set html tag of the subheading.
  • Enable Overlay Image : Toggle an overlay image on the heading.
  • Class : Set a custom CSS class.

Step 3: Style tab

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

Title Text:

  • 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.
  • Text Alignment : Set the alignment of the text.
  • For both normal and hover states:
    • Text Color : Choose color of the text.
    • 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 element.
  • Border Type : Define border style, width and color.
  • Border Radius : Control corner roundness.
  • Padding : Adjust spacing inside the title text.
  • Margin : Adjust spacing outside the title text.
  • Z-Index : Control stacking order.

Title Suffix:

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

Subtitle:

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

Overlay Image:

  • Width : Set the overlay image width.
  • Height : Set the overlay image height.
  • Position : Choose the overlay image placement.
  • Horizontal Orientation:
    • Offset : Adjust the horizontal offset (left/right positioning).
  • Vertical Orientation:
    • Offset : Adjust the vertical offset (top/bottom positioning).
  • Z-Index : Set layering order to control whether the overlay image appears above or below other elements.

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 fully set up!

Share: