Theme Builder

Site Title

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

Your website’s identity begins with its title. With the Site 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 Site Title Widget:

Exploring the Features of Site Title Widget

Step 1: Drag the widget

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

Step 2: Content tab

Site Title Content:

  • Site Title Style : Currently, two styles are available.
  • Before Title Text : Add custom text before the main title.
  • Before Text Spacing : Control spacing between the before text and the main title.
  • After Title Text : Add custom text after the main title.
  • After Text Spacing : Adjust spacing between the main title and the after text.
  • Icon : Add an icon (including SVG) alongside the title.
  • Icon Position : Choose where the icon is placed (before/after the title).
  • Icon Spacing : Adjust spacing between the icon and text.
  • Link : Add a clickable link to the site title.
  • HTML Tag : Select the HTML tag for the site title.
  • Alignment : Set horizontal alignment (left, center, right).

Step 3: Style tab

In the Style section, you can customize the Before Title, Title, After Title, Icon — but make sure you have added them first.

Before 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.
  • Padding : Adjust inner spacing around the text.
  • Background Color : Set background color of the title for both hover and normal state. Explore full background settings here.
  • 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.

Title:

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

After Title:

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

Icon:

  • Icon Size : Adjust the size of the icon.
  • Color : Set color of the icon for both normal and hover state.

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

You’re all set!

Share: