Widgets

Page Title

Step-by-Step Tutorial on Using the Page Title Widget of Zyre Addon

Your website’s identity begins with its title. With the Page Title Widget of Zyre Addon for Elementor, you can showcase your brand name in a visually striking way. From typography to styling options, this widget makes it easy to design a title that stands out and leaves a lasting impression.

Learn How To Use Page Title Widget:

Exploring the Features of Page Title Widget

Step 1: Drag the widget

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

Step 2: Content tab

Page Title Content:

  • Page Title Style : Currently, only one style is available.
  • Before Title Text : Add text/ separator/ icon before the main title.
    • Text : Add text to display before the main title.
    • Separator : Add separator to display before the main title.
    • Icon : Add icon to display before the main title.
  • Before Text Spacing : Control spacing between the before element and the main title.
  • After Title Text : Add text/ separator/ icon after the main title.
    • Text : Add text to display before the main title.
    • Separator : Add separator to display before the main title.
    • Icon : Add icon to display before the main title.
  • After Text Spacing : Adjust spacing between the main title and the after element.
  • Link : Add a clickable link to the page title.
  • HTML Tag : Select the HTML tag for the page title.
  • Alignment : Set horizontal alignment (left, center, right).

Step 3: Style tab

Before 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 Color : Choose colors of the text content.
  • Text Shadow : Apply text shadow effect.


Before Separator: (make sure you selected separator from Before Title Text)

  • Width : Adjust the width of the separator.
  • Border type : Select the border style, width and color.

Title:

  • 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 Color : Choose colors of the text content for both normal and hover state.
  • Text Shadow : Apply text shadow effect for both normal and hover state.

After Icon:

  • Icon Size : Adjust the size of the icon.
  • Color : Set color of the icon.

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

All done and ready to go!

Share: