Elementor Site Logo Widget Tutorial

A logo is the first thing people notice when they visit your site. A good logo is memorable and unique. It also reflects the personality of your brand.

Using Premium Addons for Elementor, you can make your logo stand out to showcase the brand and attract attention using Premium Site Logo widget for Elementor Page Builder. You can animate your logo using the Elementor SVG Draw feature or Lottiefiles, and keep your logo in a high resolution using the retina image option or SVG logo without losing the logo quality.

Check Elementor Site Logo Widget demo page from here.

---

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

---

Elementor Site Logo Widget Settings

Start by dragging & drop the Site Logo widget into Elementor editor preview area.

---

Elementor Site Logo Settings:

 Logo Section

1. Type: Select the logo type between:
   1. Image:
      1. Image: Upload logo image from the site media library.
      2. Retina Image: Upload a high-resolution version of the logo image.
      3. Image Size: Set the logo image size.
   2. SVG:
      1.  SVG Image: Upload logo SVG from the site media library.
      2.  Draw SVG: Enable this option to apply drawing animation on SVGs shapes. Check this article to learn more about this feature.
      3.  Path Thickness: Set SVG outer stroke thickness.
      4.  Width: Set the width for the SVG shape.
      5.  Height: Set the SVG shape height.
   3. Lottie Animation:
      1.  Animation JSON URL: Insert the Lottie JSON URL.
      2. Loop: Make the Lottie animation run forever.
      3. Reverse: Make the Lottie animation run backward.
      4. Width: Set the width for the Lottie animation.
      5.  Height: Set the height for the Lottie animation.
2. Linked Logo: Enable this option to add a link to the logo.
3. Heading: Enter the heading text that will be displayed beside the logo. By default, Heading field is pulled from your site identity.
4. Sub Heading: Enter subheading text.

Layout Section

1. Display: Select the logo and text layout. Inline to align horizontally, or block to align vertically. 
2. Alignment: Align the logo and text horizontally to the left, center, or right.
3. Text Vertical Alignment: Align text vertically to the top, middle, or bottom when the display is set to inline.
4. Spacing: Set the Space between the logo and text.
5. Logo Position: Set the logo position to before or after the text.

---

Elementor Site Logo Style:

Use Logo Image section to set colors, change background, edit borders, and more styling options depending on logo type option.

Use the Logo Text section to change heading and subheading color and typography, add text shadow, set text background color, and style text border.

---

Conclusion

By using Elementor Site Logo widget in Premium Addons, you can create a stunning logo for your WordPress website using an image, SVG, or Lottie Animation with just a few clicks. Check our demo page from here to get some amazing ideas on how to use Premium Site Logo widget.

---

---

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YoutTube channel to get updates about new features, improvements, and bug fixes.