How to add multiple versions of logo to my website
If you want to add different versions of the logo to your website, follow the steps below:
1. From the WordPress left menu, go to Appearance > Customize or Jupiter X > Theme Styles.
2. From the Customizer left dashboard click on Logos.
3. To add a logo, click on the upload image icon or the Change button in the appropriate section (Primary Logo, Secondary Logo, etc.) and then select the logo image from the media library or upload it from your computer. The best size of the logo depends on your website design. In case you have a short header, it’s better to use the landscape dimension logo size. If you have a long header, it’s better to use a square size image as your logo. Regarding the quality, the best practice is to use an SVG logo to make sure it has the best quality in different devices and screen sizes. If you are using an SVG image as your logo, make sure to set a width for your logo either in the Default header settings or Custom header > Site Logo element otherwise it may disappear.
4. Click on the Publish button to save the changes.
Meaning of the Logos:
- Primary logo – The main logo that can be used on the site, if you have a default header this logo will appear,
- Secondary logo – if you have another version of the logo on different places of your site you can set it here, it can be displayed by Logo element
- Retina Primary, Retina Secondary, and Retina Mobile logos – are Retina versions of the all mentioned logos
- Sticky Logo – Is used for sticky header
- Mobile Logo – is used for mobile version
After you added logos, you can use them from the Site Logo Jupiter X Element in Elementor.
You can learn more from it in this article.
Use Growmatik to personalize your logo based on your visitor’s behavior and without touching the Jupiter X settings.
How to assign a different logo to mobile screens?
Using the Site Logo element you can easily assign a different version of the logo to your mobile and tablet screens. In order to do that, you would need:
1 – Add a different version of the logo from Customizer > Logos.
2 – Save the customizer settings. Then in the Site Logo element look for the Choose Logo option and click on the responsive option icon.
3 – Simply chose a different version of your logo for different devices and save the template or page.
