Site Logo Element

Last Updated on

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 X offers a Site Logo element. The Site Logo element allows you to add a logo anywhere on your website. This element comes really handy when you are building a custom header or footer using Elementor.

Common Uses:

  • Header
  • Footer
  • Sidebar
Beware! This element is a part of the Raven elements. Raven is an exclusive plugin developed by Artbees which represents new useful elements to Elementor.

In this article

Displaying a Site Logo Element

To add a Site Logo element to a page:

Add a new page or edit an existing one.
Click on Edit with Elementor button.

From the left dashboard, search for a “Site Logo”.
Drag and drop the Site Logo element to your page.
A new dashboard on the left will open with the element’s settings. These are explained below.


LogoPlease select or upload your Logo in Appearance > Customize > Site Identity.
LinkAdd a custom link for your logo.

Different Types of Logos

There are several logo types which are used in specific situations.

Type Description
Default LogoThis logo will be used as your default logo.
Light LogoThis logo will be used when the transparent header is enabled and your header skin is light.
Sticky LogoThis logo will be used when the header is in a sticky state.
Mobile LogoThis logo will be used on mobile devices.
Sub Footer LogoThis logo will appear in the sub footer section.

In order to be able to use this element, you need to set up your logo at first in the Jupiter X options.

Open the Customizer from Appearance > Customize.

From the left menu, open Site Identity > Site Logo.

Add the logos here and then publish the settings.

Adding a Site Logo Inside Header

To add a Site Logo to the header:

From the WordPress left menu, click on Elementor.

Next to My Templates title, click on the Add New button.

For the template type select Header and give your header a name.

Click on the Create Template button.
Follow the “Displaying a Site Logo Element” section in this article to simply add the Site Logo to your newly created header.
Assign the header to your page by following this article.

Simply follow the section above called “Adding a Site Logo Inside Header“, but on step 3, for the template type select Footer.

Responsive Options

You can choose to have different settings on different screen sizes for some of the Button element options. Whenever you see this icon, it means that you can choose different screen size and freely change that options for your specific resolution.

At first you’ll see the icon for desktop layout only

But when you click that icon, you’ll get two more layouts: for tablet and phone.

To learn more about it, please check this article.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket