Site Logo (Header and Footer) – favethemes

The Site Logo widget allows you to display your website's logo within the header or footer. It ensures consistent branding across your site by pulling the logo set in the Theme Options, or by allowing you to upload a custom image directly. This widget is essential for maintaining brand recognition and improving navigation.

For more details on managing the logo from Theme Options, please see Logo and Favicon .

How to Add the "Site Logo" Widget

Open your page or template in Elementor.
From the Elementor sidebar, search for Site Logo.
Drag and drop the widget into your desired section (usually the header or footer area).

Configuration Options

Content Tab

Logo Source: Choose whether to display the logo from Theme Options (default) or upload a custom logo directly.
Image Size: Select the size of the logo image (Full, Medium, Thumbnail, or custom dimensions).
Alignment: Align the logo to the left, center, or right.

Style Tab

Vertical Padding: Add space above and below the logo.
Top: Adjust the top spacing for positioning.
Width / Max Width: Define the logo's width in pixels or percentages.
Opacity: Control the logo transparency for both Normal and Hover states.
CSS Filters: Apply filters such as brightness, contrast, or grayscale.
Border Type: Add a border around the logo (solid, dashed, etc.).
Border Radius: Round the edges of the logo.
Box Shadow: Apply shadow effects for styling.

Best Practices

Always use a high-resolution logo for crisp display on retina and high-DPI screens.
Set the logo source to Theme Options if you want to manage the logo centrally across the site. For more details on managing the logo from Theme Options, please see Logo and Favicon .
Optimize logo file size (preferably SVG or compressed PNG) for faster page loading.
Ensure proper alignment and padding for consistent header/footer layout across all devices.
Use Max Width (%) for better responsiveness on mobile devices.

Notes

If no logo is set in the Theme Options, the widget will display nothing until a logo is uploaded.
For best results, keep logo dimensions proportional to your header or footer height.
Avoid oversized logos that disrupt the layout or navigation.