The Site Logo widget provides a flexible way to place and style your website’s logo anywhere on a page built with Elementor, independent of the header. It offers full control over the logo’s link, appearance, and dimensions.
Content Tab: Logo Settings #
The Site Logo widget provides two primary methods for displaying your brand’s identity, allowing for either global consistency or specific page customization.
- Logo Source: A dropdown menu that determines where the widget fetches the image from.
- Option 1: Theme Option Logo: Automatically pulls the primary logo defined in your global theme settings, ensuring brand consistency across the entire site.
- Option 2: Custom Logo: Allows you to upload a unique image specifically for this widget instance via the Choose Logo media uploader.
- Link: Define the destination URL (typically the homepage) that users are directed to when clicking the logo.
- Alt Text: Input descriptive text for the image to improve search engine optimization (SEO) and ensure the site is accessible to screen readers.
Style Tab: Logo Style #
This section allows you to precisely control the appearance and behavior of the brand logo for both Normal and Hover states.
- Width: Use the pixel-based slider to set a specific width for the logo.
- Height: Manually adjust the height of the logo to fit your header or section requirements.
- Background Type: Choose between a Classic solid color or a Gradient background to sit behind the logo file.
- CSS Filters: Access advanced settings to adjust the logo’s brightness, contrast, saturation, or apply a blur effect.
- Padding: Control the internal spacing around the logo for better positioning within its container.
- Border Radius: Round the corners of the logo container by defining values for Top, Right, Bottom, and Left.
- Border Type: Select from various styles (e.g., Solid, Double, Dashed) or keep it as Default.
- Box Shadow: Add depth to the logo by configuring a custom shadow effect.
