Theme Builder

Site Tagline

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

Think of your site tagline as the heartbeat of your brand identity—it tells visitors what your website stands for at a glance. The Site Tagline widget gives you complete control over how that identity is presented. From adjusting typography to refining padding and alignment, this tutorial will help you design a tagline that not only looks stunning but also strengthens your brand recognition.

Learn How To Use Site Tagline Widget:

Exploring the Features of Site Tagline Widget

Step 1: Drag the widget

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

Step 2: Content tab

Site Tagline Content:

  • Site Tagline Style : Currently, only one style is available.
  • Before Tagline Text : Add custom text before the main tagline.
  • Before Text Spacing : Control spacing between the before text and the main tagline.
  • After Tagline Text : Add custom text after the main tagline.
  • After Text Spacing : Adjust spacing between the main tagline and the after text.
  • Icon : Add an icon (including SVG) alongside the tagline.
  • Icon Position : Choose where the icon is placed (before/after the tagline).
  • Icon Spacing : Adjust spacing between the icon and text.
  • HTML Tag : Select the HTML tag for the site tagline.
  • Alignment : Set horizontal alignment (left, center, right).

Step 3: Style tab

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

Before Tagline:

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

Tagline:

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

After Tagline:

You’ll find the same design options for the After Tagline Section as in the Before Tagline 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.

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

All done and ready to go!

Share: