How to Display Your Site Logo in Elementor Headers

How to Configure and Style Site Logo #

Site Logo is used to display logo in a site. This element lets you create beautiful, attractive buttons with which you can redirect your visitors to any page on your site. There are many customization options available with this widget, and you can alter it almost any way you want.

How to Activate Site Logo #

To use this Spexo Addons element, find the ‘Site Logo‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Site Logo’ into the ‘Drag widget here‘ or the ‘+’ section.

After you are successfully done with step 1, this is how the element is going to look like.

Note : Display your theme logo by default.

How to Configure the Content Settings #

To configure the content of your Site Logo, simply click on the ‘Content’ tab.

Site logo #

From this section, Use the toggle to enable/disable the ‘Custom image’ option. You can change image size, alignment and add custom caption.

Optimise your logo file before uploading #

Your site logo loads on every page. A 200 KB logo file that could be 20 KB adds unnecessary weight to every page view across your entire site. Getting the logo file right once pays dividends across every load.
Size the file to match the display dimensions. If your header renders the logo at 240 × 80 pixels, upload a file at that size rather than a larger original. An oversized logo file scaled down by CSS still transfers the full file size to every visitor. Use the free image resizer to export the logo at the exact pixel dimensions your header uses.
Use WebP for logos with transparent backgrounds. WebP supports transparency the same way PNG does but at a smaller file size. If your logo uses a transparent background, convert it to WebP using the WebP converter and upload the WebP version. Modern browsers all support WebP including Chrome, Firefox and Safari.
For PNG and JPG logos, compress before upload. The image compressor reduces logo file size without softening edges or affecting the sharpness of text in the mark. Set quality to 85–90% for logos to keep fine details clean.

You can change link options add your own link so that users will be redirected to that certain page.

How to Style Site Logo #

To customize Site Logo, click on the ‘Style’ tab, and you will find many different options here.

Site logo #

Here in this section, you can set logo max with, change width, background color, css filter and shadow. You can change opacity with hovered and normal options.

Moreover, you can add Border & add styling with radius to it as well.

Caption #

From the  ‘Caption’ section under the Style tab, You have the freedom to modify the ‘Color, Background color, Typography, Shadow, padding and Spacing’.

Final Outcome #

By following the basic steps and a bit more modifying, you can style your Site Logo as per your preference.

Getting stuck? Feel to Contact Our Support for further assistance.