Site Logo Widget

Dynamic & Retina-Ready Site Logo Widget

The Site Logo widget in Ultimate Addons for Elementor – Lite makes it easy to dynamically display your website’s logo directly from the WordPress settings. Whether you’re using the default logo from your customizer or uploading a custom image, this widget gives you complete flexibility and control all with retina-ready support for high-resolution screens!

Let’s explore how to use this widget and the available customization options.

How to Use the Site Logo Widget

1. Drag and Drop the Widget
   In the Elementor editor, search for the “Site Logo” widget under the UAE Lite section and drag it onto your page.
2. Logo Source Options
   Choose whether to:
   • Use Site Logo – Automatically pulls the logo set under Appearance > Customize > Site Identity.
   • Use Custom Image – Upload a different image if you want to override the default logo.

Key Features

• Dynamic Logo from WordPress: No need to re-upload simply pull the logo from your WordPress site settings.
• Custom Logo Option: Override the default site logo with any image of your choice.
• Retina Ready: Supports higher resolution logos to look crisp on all devices.
• Responsive Controls: Adjust size, alignment, and spacing for desktop, tablet, and mobile views.
• Link Options: Link your logo to the homepage (default), set it to None, open the media file in a lightbox, or link to any custom URL.
• Custom Caption: Add an optional caption below your logo image. This is useful for displaying brand taglines, brief descriptions, or accessibility-related text. You can style it separately to match your site’s branding.
• Styling Flexibility: Customize the logo size, padding, borders, background color and more using Elementor’s built-in styling controls.

Style Tab Options

Under the Style tab in Elementor, you’ll find several design settings:

• Image Width – Set a custom width for the logo.
• Alignment – Align left, center, or right.
• Background Color – Add a solid or gradient background behind your logo.
• Box Shadow – Apply a soft or sharp shadow around the logo for depth.
• Border & Radius – Add border styling and corner radius.
• Opacity – Adjust the transparency of the logo for subtle visual effects.
• CSS Filters – Apply effects like blur, brightness, contrast, grayscale, hue, etc., for advanced styling.

Advanced Settings

Leverage Elementor’s advanced settings to:

• Add entrance animations
• Adjust Z-index
• Control responsive visibility
• Set custom margins/padding

When to Use This Widget

• Creating a custom header layout without relying on the theme’s default logo placement
• Building landing pages with brand elements
• Showcasing retina-ready logos for modern devices

Need Help?

If you have any questions or face issues while using the widget, feel free to reach out to our support team or check out more UAE Documentation.