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.

Site Logo Widget for Elementor Page Builder
Elementor Site Logo Widget

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.

Red Arrow Pointing to Elementor Site Logo widget in Elementor Panel
Elementor Site Logo widget

Elementor Site Logo Settings:

 Logo Section

Type: Select the logo type between Image, SVG, or Lottie animations.

Image

  • Image: Upload logo image from the site media library.
  • Retina Image: Upload a high-resolution version of the logo image.
  • Image Size: Set the logo image size.
Site Logo Image and Retina high quality image Settings
Site Logo – Image Settings

SVG

  • SVG Image: Upload logo SVG from the site media library.
  • SVG Code: If SVG code is added here then the SVG code will be rendered from this field, not from the media library.
  •  Draw SVG: Enable this option to apply drawing animation on SVGs shapes. Check this article to learn more about this feature.
  •  Path Thickness: Set SVG outer stroke thickness.
  •  Width: Set the width for the SVG shape.
  •  Height: Set the SVG shape height.
Site logo type SVG image or SVG code
Site Logo – SVG

Lottie Animation

  •  Animation JSON URL: Insert the Lottie JSON URL.
  • Loop: Make the Lottie animation run forever.
  • Reverse: Make the Lottie animation run backward.
  • Width: Set the width for the Lottie animation.
  •  Height: Set the height for the Lottie animation.
Site Logo type settings for Lottie animations
Site Logo – Lottie Animations
  • Linked Logo: Enable this option to add a link to the logo.
  • Heading: Enter the heading text that will be displayed beside the logo. By default, Heading field is pulled from your site identity.
  • Sub Heading: Enter subheading text.
Site Logo linked logo option, logo title, and tagline
Site Logo Settings

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 Widget Layout Settings
Logo layout settings in Premium Site Logo Widget for Elementor Page Builder

Elementor Site Logo Style:

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

Site Logo - Logo Image style
Premium Site Logo Widget for Elementor Page Builder Logo Image Style tab

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

Site Logo - Logo text style
Logo Text Style options in Site Logo Widget for Elementor Page Builder

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 YouTube channel to get updates about new features, improvements, and bug fixes.

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.