Site Logo
The Site Logo widget in JupiterX allows you to easily upload, customize, and align your website’s logo within Elementor. Whether you want to use a custom logo image or pull the logo dynamically from WordPress settings, this guide will walk you through the setup process.
With this widget, you can ensure that your brand identity is well-integrated into your website’s design while maintaining responsiveness across different devices.
Where to Find the Site Logo Widget
To use the Site Logo widget, follow these steps:
- Go to WordPress Dashboard and navigate to Pages.
- Edit a page with Elementor where you want to place the logo.
- In the Elementor panel, search for “Site Logo”.
- Drag and drop the Site Logo widget into your desired section.
Once added, you can customize the logo’s appearance, size, alignment, and link settings.
Using Custom and Dynamic Logo Options
Uploading a Custom Logo
If you want to upload your own logo:
- From the Content tab click on the ‘Choose Image’ button.
- Select your logo file from the media library or upload a new one from your computer.
- Adjust the size and alignment as needed in the Style tab.
Using a Dynamic Logo from WordPress Settings
If you prefer to automatically pull the logo from your WordPress settings:
- From the Content tab click on the Dynamic Tags when hovering over the ‘Choose Image’ section.
- Select ‘Site Logo’ from the list of dynamic options.
- The widget will now use the logo set in WordPress > Appearance > Customize > Site Identity.
📌 Why use Dynamic Tags? Using a dynamic logo ensures that if you change your logo in WordPress settings, it updates automatically across your entire website.
Setting the Logo Link
By default, logos usually link to the homepage, but you can customize this from the Content tab:
Custom URL: Paste a custom link in the ‘Link to’ field.
Dynamic Site URL: Use WordPress’s dynamic Site URL so that the logo always directs to the homepage.
- Click on the Dynamic Tags icon next to the ‘Link to’ field.
- Select ‘Site URL’.
- The widget will now automatically pull your WordPress site’s home URL.
Styling Your Logo
Width & Max Width
- Width: Adjust the width of your logo to fit your design.
- Max Width: Set a maximum width to ensure the logo scales properly across all devices.
Alignment
- Align the logo Left, Center, or Right within its container.
- Adjust the margin and padding for better positioning.
📌 Tip: Use responsive settings to adjust logo width for different screen sizes.
Best Practices for Logos
- Use SVG format for a crisp, high-quality logo that scales without losing resolution.
- Recommended dimensions: At least 250x100px for desktop, with a smaller version for mobile.
- Optimize PNG/JPG images using tools like TinyPNG to prevent slow loading.
- Check mobile responsiveness by switching between device previews in Elementor.
Final Thoughts
The Site Logo widget in JupiterX makes it easy to add and customize your website’s branding. Whether using a static image or dynamic WordPress logo, this guide ensures you have full control over its styling and responsiveness.
🚀 Need Help? Visit JupiterX Support for further assistance!