Site Logo Widget

🎯 Purpose

The Site Logo widget dynamically displays your site’s logo (as defined in Site Identity or WordPress customizer) and allows precise styling and layout control—making it perfect for headers, branding sections, or footers.

➕ Adding and Configuring

1. Add the Widget

   • Drag the Site Logo widget into a section or column in your Elementor layout.

2. Logo Source

   • Automatically pulls the logo set in Elementor Site Identity or WordPress customizer.

   • To change the logo image, update it in those settings.

3. Logo Settings

   • Image Resolution: Choose preset sizes or set custom dimensions.

   • Caption (optional): Show or hide the image’s attached caption metadata.

   • Link Behavior: Choose from no link, link to media file (with optional lightbox), custom URL, or site homepage.

🎨 Style Tab – Appearance Controls

• Alignment: Place the logo left, center, right, or full-width.

• Size Adjustments: Use units like px, %, em, rem, vw, vh for width and height.

• Object Fit: Choose how the image scales: fill, cover, or contain.

• Image Effects:

  • Opacity and CSS Filters (blur, brightness, contrast, saturation)

  • Hover Effects: Apply separate opacity and filters on hover, configure hover animations and transition times.

• Border & Shadow:

  • Choose border type, width, color, and radius.

  • Add box-shadow to enhance depth.

🛠️ Advanced Tab – Layout & Behavior Tools

• Spacing Controls: Set margin, padding, and responsive visibility.

• Positioning: Manage z-index and custom placement options.

• Interactive Effects: Add entrance animations, motion effects, or HTML anchors.

• Dynamic Attributes: Assign ID, classes, or custom attributes under link settings for advanced control.

✅ Best Practices

• Use responsive units (%, em, vw, etc.) for flexible layouts across devices.

• Apply subtle hover styles or opacity shifts for interactive feedback.

• Use lightbox link if you want users to view a larger version of the logo.

• Ensure alignment fits within header layouts and branding hierarchy.

• Manage spacing carefully with margin and padding to maintain structural balance.

📌 Common Use Cases

• Header Logos on various pages, styled per design theme.

• Branded footers or marketing sections adding credibility.

• Lightbox-enabled logos for detailed viewing (e.g., sponsors or partners).

• Custom header layouts without relying on theme defaults.

The Site Logo widget streamlines logo placement and customization—giving you dynamic linking, styling flexibility, and responsive behavior in one clean tool.