Adding your Logo's
In Vivi we offer the possibility to add your own logos. Additional to this, we have added the option to upload separate logos for the slideshows, allowing you to display light and dark colored logo’s depending on the darkness of your image.
The options discussed in this tutorial will be available in Flothemes > Header Settings. If you want to know more about logo positioning, you can refer to the previous article here.
Adding Main Logo
Go to Flotheme – Header & Logo – Logo & Sizing
There are two types of Logos you can use: Text and Image Logo.
1. Text Logo
When selecting a Text Logo option, the Logo that will appear is your website title.
You can change the Website Title by clicking the link in the highlighted yellow area. Or you can manually go to Settings – General and adjust the Website Title there.
NOTE! This will also be the name that you see in the browser tab.
There are also a few other important settings to be aware of, such as:
Logo Width on Desktop and Mobile Devices
Font Color – please note that there is an option to have the Logo color change automatically based on the Slideshow image colors. This option is convenient if you have a mixture of dark and light images in the same slideshow and a single color Logo will not work for all images. You can set two different colors for light and dark images.
Font Types – where you can select the Font Family, Font Types, Font Size, Letter Spacing, etc.
2. Image Logo
This will be the most commonly used option. Here you can upload your own .png or .jpg file. It is recommended to use a .png file with a transparent background.
Here you can also set different Logo widths for Desktop and Mobile devices.
Adding Slideshow Logos
Vivi also allows the option to add separate logos for the slideshow, as well as offering the possibility to have 2 logos for dark and light images. This option is available for both Logo Types: Image and Text Logo.
1. Enable Text/Logo Color Change
If you wish to upload a separate logo and or want changing logo colors over slideshows, enable the option for “Text/Logo Color Change Based on the Slideshow Image Color”:
2. Threshold and Slideshow Logo Options
Now that you’ve enabled the options for slideshow logos, upload a dark logo for the light slides and a light logo for the dark slides. This means that the logos will change based per image.
To set the sensitivity you can select a threshold value. A higher the threshold value the more likely that the darker logo will be used on most images. The standard is set at 100.
NOTE! Always remember to save any changes when making updates to the settings.
Logo Sizing
Finally you can adjust the width of your logos. Again in Flothemes > Header Settings, and then you can set a pixel width for both the main (and slideshow logo) and the logo mobile. We suggest keeping the mobile logo under 200px and the main logo under 350px in width.
Set the sizing options and then make sure to save your changes.