A logo is a visual representation of your business. It reflects your company’s name, message and values. Over time, your logo should be immediately recognizable to your customers, which is why Jupiter offers a lot of options for logos.
There are several ways and places you can add and configure your logo. This article also covers the difference between the global and page specific logo.
Different Types of Logos
There are several logo types which are used in specific situations.
| Type | Description |
|---|---|
| Default & Dark Logo | This logo will be used as your default logo, and when your header skin is dark. |
| Light Logo | This logo will be used when the transparent header is enabled and your header skin is light. |
| Sticky Header Logo | This logo will be used when the header is in a sticky state. |
| Mobile Version Logo | This logo will be used on mobile devices. |
| Sub Footer Logo | This logo will appear in the sub footer section. |
SVG Logo
To upload and use a SVG logo:
Retina Logo
To have an appropriate none SVG logo for retina screens, you need to export/design your logo at 2x (2 times bigger than normal logo) then use the Width (beside each logo field) option to specify an appropriate value.
For example:
If you want to show your logo at 150×75 pixel in your site, you need to export/design a 300×150 pixel logo then set the width to 150.
It resizes your logo and helps to show it with good quality on retina screens.
Uploading a Logo Globally
The global logo will be used across your whole website.
To upload your global logo:
Overriding the Global Logo on a Page
Instead of using one logo for the whole website, there is an option to add a logo only to a specific page.
To upload your page specific logo:
Adding a Logo in the Footer
To add a logo in the footer:
<img src="Link-To-Your-Logo" alt="" />Increasing the size of the Logo
If you want to make a logo bigger in the header, you can do this increasing the header height. Once the header height is changed to bigger value, the logo size will be also increased proportionally.
To change header height:
After that check the site on frontend and you’ll see that not only the header height was increased, but also the logo itself has larger size.
