Site Logo (Header and Footer)

Content #

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.

Logo Settings: #

Configure the source and basic properties of the logo.

• Logo Source: Choose where to pull the logo image from.
  • Theme Option Logo: (Default) Uses the logo set in the Digishift Customizer (Appearance > Customize > Logo & Favicon). This ensures consistency across your site.
  • Custom Logo: Allows you to upload a different logo specifically for this instance of the widget.
• Link: Define the URL where the logo should link to. By default, this is typically your homepage URL (e.g., https://yoursite.com).
• Alt Text: Set the HTML alt attribute for the logo image. This is important for accessibility and SEO (e.g., Digishift - Premium WordPress Theme).

Style Tab #

The Style tab allows you to visually design the logo’s container, giving you creative freedom beyond the standard header logo.

You can style the following parts:

• Logo Style: Control the basic dimensions of the logo image itself.
  • Width: Set a custom width for the logo (e.g., 150px). The height will adjust proportionally to maintain the image’s aspect ratio.
  • Height: Alternatively, you can set a fixed height, and the width will adjust.
• Normal / Hover States: Style the container that holds the logo.
  • Background Type: Add a solid color, gradient, or even an image background to the area behind the logo. This is useful for creating a logo badge or placing it on a colored background.
  • CSS Filters: Apply visual effects like blur, brightness, contrast, and saturation to the logo image.
  • Padding: Adjust the internal spacing between the logo image and the edge of its container. Increasing padding creates a larger background area.
• Border & Shadow: Add advanced design elements to the logo’s container.
  • Border Type: Choose a border style (solid, dashed, etc.), set its width, and choose a color.
  • Border Radius: Round the corners of the logo’s container. Use equal values for a pill shape or different values for a unique look.
  • Box Shadow: Apply a shadow effect to the entire logo container to make it “float” off the page.

Common Use Cases #

• Custom Header Building: When using Elementor Pro’s Theme Builder to create a custom header, this widget is essential for placing the logo.
• Footer Logo: Place a differently styled or sized logo in your website’s footer.
• Promotional Sections: Use a large, prominently styled logo in a hero section or a promotional landing page.
• Mobile-Specific Logo: Create a separate Elementor template for your mobile header that uses a simplified or stacked version of your logo.