Site Logo

Introduction

The Site Logo Widget in Elementor lets you upload and customize your logo’s size, alignment, and link, ensuring a professional brand appearance on your site.

Key Use Cases for the Site Logo Widget

The Site Logo Widget in Elementor is perfect for:

• Branding – Display your logo consistently across your website.
• Header/Footer Design – Easily integrate your logo in the header or footer sections.
• Clickable Logo – Link your logo to your homepage for seamless navigation.
• Responsive Design – Ensure your logo adapts perfectly to different screen sizes.
• Professional Appearance – Enhance your site’s overall design with a polished brand identity.

With the Site Logo Widget, you can showcase your brand’s logo with customization options for size, alignment, and link behavior.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate Site Logo Widget ?

To activate the Site Logo widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Site Logo widget in the list.
3. Toggle it on to enable the widget.

How to Add the Site Logo Widget in Elementor

1. Open the page where you want to add the Site Logo.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Site Logo.”
4. Drag the Site Logo widget to your desired section.
5. The Site Logo widget will now be available for customization.

You can upload your logo, adjust its size, alignment, and link it to the homepage as needed.

How to Configure the Site Logo Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface. 

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Site Logo Widget across various tabs. 

Configuring Site Logo Widget : A Step-by-Step Guide

Once the Site Logo Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

There is only one option available: Site Logo.

Site Logo

• In the Site Logo widget, there are two options for logo setup: Site Logo or Custom Logo. You can choose to upload your own custom logo if preferred, but I have selected the Site Logo option.

• For image resolution, ensure that any image uploaded by the user is properly adjusted to fit the desired size.
• Additionally, you need to set the Site Link URL and provide a caption for the logo.

Style Settings

I styled the Site Logo widget for my design, by following these below steps:

• Width: Set the width to 71px.
• Opacity: Adjust the opacity to 0.73 & 
• Border Radius: Set the border radius to 3px.

Customize the Site Logo widget with additional options to match your design. Real-time changes help refine and personalize your logo.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Site Logo Widget in Elementor to create dynamic and engaging event displays on your website.

For any further assistance or inquiries, feel free to contact our support team!