Site Logo

Before setting up the Site Logo Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Site Logo Widget—at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Site Logo Widget lets you upload, resize, align, and link your logo for a professional brand appearance.

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 the Site Logo Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Site Logo Widget in the list.
• Toggle it on to enable the widget.
• Now, the Site Logo Widget is ready to use!

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.

• In the Elementor panel, search for the “Site Logo Widget.”
• Drag and drop the widget into your desired section.
• Upload your logo and customize its size, alignment, and link using the available options.

Your Site Logo Widget is now ready to showcase your brand professionally across your site!

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

• The Site Logo widget allows you to display your brand’s logo with flexible customization options, making it easier to maintain consistent branding across your website. Within the Content section, you’ll find several configurable settings:

Logo – Customization Options

Within the Logo section of the Site Logo widget, you are provided with two options to control how your site’s logo is displayed:

1. Site Logo

• This option automatically pulls the logo that is set in your WordPress site settings (Appearance → Customize → Site Identity).
  
• Ideal for maintaining consistency across multiple pages or templates.
  
• Any updates made to the default site logo in WordPress will be reflected automatically wherever this widget is used with the Site Logo option.

2. Custom Logo

• Allows you to upload and use a different logo specifically for this instance of the widget.
  
• This is useful when you want to display a variation of your logo (e.g., a white version for dark backgrounds, or a compact version for mobile layouts) without changing the global site logo.
  
• The custom logo overrides the default site logo only in the selected widget area.

When to Use Which

• Use Site Logo for consistency and centralized control.
  
• Use Custom Logo for flexibility and design variations on different sections of the site.

This dual option ensures you have both control and customization capabilities while maintaining a coherent brand identity.

Image Resolution

The Image Resolution option in the Site Logo widget controls the logo’s size and clarity, ensuring it appears sharp across all devices.

Key Functionalities:

• Default Setting (Full)
  By default, the logo displays in its original resolution as uploaded to the WordPress media library. This preserves image quality, especially for high-resolution displays like Retina screens.
  
• Custom Image Size
  You can also manually choose from predefined WordPress image sizes (thumbnail, medium, large) or enter a custom size in pixels (width × height). This allows precise control over the logo’s appearance without manually editing the image file.

Best Practices:

• Use high-resolution images (2x or SVG) to ensure clarity on all screen types.
  
• Choose image sizes that align with your layout and device responsiveness.

Link

The Link section allows you to control where users are directed when they click on the site logo. It includes three linking options:

1. Site URL – Automatically links the logo to your website’s homepage.
   
2. Custom URL – Lets you define a specific link manually, such as a landing page, external site, or any custom destination.
   
3. Media File – Opens the original uploaded logo image in full size when clicked, ideal for viewing or downloading.

Caption

The Caption option in the Site Logo widget allows you to control the visibility of image captions associated with your logo. It offers two settings:

1. None – Disables the caption entirely. No text will appear below or near the logo image.
   
2. Attachment Caption – Displays the caption text that was added to the logo image in the WordPress Media Library.

Caption

The Caption option in the Site Logo widget allows you to control the visibility of image captions associated with your logo. It offers two settings:

1. None – Disables the caption entirely. No text will appear below or near the logo image.
   
2. Attachment Caption – Displays the caption text that was added to the logo image in the WordPress Media Library.

This feature is helpful when you want to add a descriptive note or branding message below the logo, enhancing clarity or context for your visitors.

Style Settings

The Style section of the Site Logo widget offers visual customization options to adjust your logo’s appearance for a clean and responsive design.

Alignment

• Align your logo to the Left, Center, or Right of the section or column it’s placed in. This ensures it fits perfectly within your layout design.

Dimensions

• Width, Max Width, Height: Adjust these settings to define how large or small your logo should appear across different devices, helping maintain proportion and responsiveness.

Animation Effects

You can style the logo under two animation states: Normal & Hover.

Normal State

Customize how the logo appears by default using the following options:

• Opacity: Control the transparency of the logo.
  
• CSS Filter: Apply visual effects like blur, brightness, contrast, saturation and hue.
  
• Border Type: Allows you to define how the border around your logo appears. You can choose from several styles: Default, None, Solid, Double, Dotted, Dashed, and Groove to outline your logo.
  
• Border Radius: Round the corners of your logo for a softer appearance.
  
• Box Shadow: Add depth with shadow effects to make your logo stand out.

Hover State

Define how the logo behaves when users hover over it:

• Opacity: Adjust the transparency when hovered.
  
• CSS Filters: Apply hover-specific visual effects for a dynamic look.
  
• Transition Duration: Set how quickly the hover effects animate.
  
• Hover Animation: Choose from a variety of hover animation styles for added interactivity.
  
• Border Type: Same options as Normal—style the border when hovered.
  
• Border Radius: Smoothly round logo corners on hover.
  
• Box Shadow: Apply shadow effects to enhance visual feedback.

The Style section of the Site Logo widget offers visual customization options to adjust your logo’s appearance for a clean and responsive design.

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!