Adding Multiple versions of logo to website

Updated on September 8, 2021

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.

2. From the Customizer left dashboard, click on Site Identity.

3. To add a logo, select Logo in the Site Logo section and insert your Primary Logo or any other logos you want to add to your website. 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 Close and Publish or Update the changes.

Meaning of the Logos:

  1. Primary logo – The main logo that can be used on the site, if you have a default header this logo will appear,
  2. 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
  3. Retina Primary, Retina Secondary, and Retina Mobile logos – are Retina versions of the all mentioned logos
  4. Sticky Logo – Is used for sticky header
  5. Mobile Logo – is used for mobile version

After you added logos, you can use them from 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 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 -> Site Identity.

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.

Did this answer your question?