Logo

The Site Logo widget allows you to display your website’s logo dynamically. Whether you want to show the default WordPress logo or a custom uploaded image, this widget gives you full flexibility with multiple layouts and styling options.

⚙️ How to Enable the Widget

1. Go to Topper Pack → Widgets in your WordPress dashboard.
2. Locate the Site Logo widget from the list.
3. Toggle the switch to Enable.

Step 1: Add the Widget

• Go to the Elementor editor.
• Search for “Site Logo” in the widget panel.
• Drag and drop the Site Logo widget anywhere on your page.

Step 2: Choose Logo Style

• Under the Content → Logo panel, select your preferred Logo Style (e.g., Style One, Style Two).
• Each style represents a different layout/design format for how the logo is displayed.

Step 3: Select the Logo Type

• Default WordPress Logo – Automatically pulls the logo from your WordPress theme settings (set under Appearance → Customize → Site Identity).
• Custom Logo – Manually upload a different logo specific to this section of the page.

✅ Tip: Use a transparent PNG or SVG logo for best results on different backgrounds.

Step 4: Upload or Select Logo

• Click the Choose Logo field to upload a new image or select an existing one from the Media Library.
• This step is only required if you selected Custom Logo.

🎨 Styling the Logo

Navigate to the Style tab for full control over the appearance.

Logo Settings:

• Alignment – Left, center, or right-align the logo.
• Width / Height – Manually set the logo dimensions using sliders or pixel input.
• Object Fit – Choose how the image fits into its container:
  • None
  • Contain
  • Cover
  • Fill
  • Scale-Down

Spacing & Layout:

• Margin & Padding – Add spacing around the logo element.
• Box Shadow (via Advanced tab) – Add a soft shadow behind the logo for a subtle 3D effect.