V4 Early Bird: up to 25% off Annual, up to 30% off Lifetime, and 2x site activations on every plan. Ends Oct 17.V4 Early Bird: up to 30% off + 2x sites · ends Oct 17. See plans →
Get Animation Addons Pro
Classic Elementor widget · Free

Site Logo for Elementor Your brand logo in every header and footer, free

Add your Elementor header logo with the free Site Logo widget, an Elementor logo widget that works in the footer too. It reads the logo from Site Identity, so a new brand logo shows everywhere at once, or it takes a custom logo for one spot, like a white version for a dark header. Link it home, size it per device and style the hover.

Try it free See the live demos
  • Free on WordPress.org
  • Reads Site Identity
  • Custom logo per widget
  • Hover opacity and filters

Classic widget · Elementor 3 and 4Updated

Live demos

Four site logo setups, live

Four headers and footers, each on a small site. Click a logo to see where its Link goes.

halden
ProductPricingCustomers
Team planning

Plan every launch in one place

Roadmaps, tasks and release notes that the whole team can see. Free for teams of up to five.

$8 per person, per month

The Halden app open on a tablet
halden

© 2026 Halden. Made for product teams.

Software header and footer

Elementor logo hover effect: grey until hover

The pricing page of a planning app. The logo sits pale and grey in the header and the footer, and takes its full colour when the pointer reaches it.

Hover the logo

In the Style tab, set the Opacity of Normal to 0.55 and the Saturation of CSS Filters to 0. Set Opacity of Hover to 1, then set Transition Duration to 0.4.

shally
shally
New inLookbookJournal
A model in a red pleated collar on a dark background
Autumn lookbook

Pieces cut in Porto, in runs of two hundred

Shop the lookbook

New this week

A model in a cream linen shirt

Linen shirt€ 120

A model in a white top by the sea

Cotton top€ 64

A model in a pink dress, mid turn

Day dress€ 140

A model in a purple sequin top

Evening top€ 96

Every piece is cut and sewn in our studio in Porto, then shipped in recycled paper.

Shop with a photo hero

Elementor transparent header logo swap

The lookbook page of a clothing label. The header is clear over the photo with a white logo, then turns white as you scroll and shows the dark logo.

Scroll the page

Two Site Logo widgets sit in the header. One has Logo set to Custom Logo with the white file, the other stays on Site Logo. A short CSS rule shows one at a time, and the sticky header itself comes from Elementor Pro or your theme.

Features

Key features of the Site Logo

Every feature below is a real setting in the widget panel. Nothing needs custom code.

Logo from Site Identity

Set Logo to Site Logo and the widget shows the logo from Appearance › Customize › Site Identity. Change it there once and every header and footer follows, including your Elementor footer logo.

Custom Logo per widget

Switch Logo to Custom Logo and pick an image in Choose Logo, such as a white version for a dark header or a compact mark.

Link it home or anywhere

Set Link to Site URL, a Custom URL with new window and nofollow options, a Media File with Lightbox, or None.

Image Resolution

Choose a WordPress image size in Image Resolution, from Thumbnail to Full, so the logo file is no larger than it needs to be.

Elementor logo size per device

Set Width, Max Width and Height for desktop, tablet and mobile, with Object Fit and Object Position when the height is fixed.

Alignment

Place the logo left, centre or right with Alignment, on every breakpoint.

Hover styles

For an Elementor logo hover effect, set Opacity and CSS Filters for Normal and Hover, with a Transition Duration, for grey-until-hover logos and soft fades.

Caption and frame

Show the logo's Attachment Caption under it, with its own colour, background, typography and Spacing. Add a Border, Border Radius or Box Shadow to the image.

Step by step

How to add a logo in Elementor

Five steps, no code. The bold names are the labels in the Elementor panel.

  1. Add your logo in Appearance › Customize › Site Identity, and give it alt text in the Media Library.

  2. Install Animation Addons for Elementor from WordPress.org and turn on Site Logo in Animation Addons › Elements.

  3. Open your header in Elementor, for example a Header template in Animation Addons › Theme Builder, search for Site Logo and drag it in.

  4. Keep Logo on Site Logo, or choose Custom Logo and an image, then set Link to Site URL.

  5. In the Style tab set Alignment and Width per device, add hover styles if you like, and publish.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Site Logo

How do I add a site logo in Elementor without Pro?

Install the free Animation Addons plugin, turn on Site Logo and drag the widget into your header. Build that header as a Header template in Animation Addons › Theme Builder, which is free too.

Is the Site Logo widget free?

Yes. It is part of the free Animation Addons for Elementor plugin on WordPress.org and works with Elementor Free and Elementor Pro.

Site logo not showing in Elementor: what to check?

With Logo set to Site Logo, the widget shows the logo from Appearance › Customize › Site Identity. If none is set there, it shows Elementor's placeholder image until you add one. To change logo in Elementor on every page, replace it there once.

Can I put a white logo on a dark header?

Yes, this is a white logo on dark header in Elementor setup. Set Logo to Custom Logo in that widget and choose the white file. Other Site Logo widgets keep showing the Site Identity logo.

How do I make the logo smaller on mobile?

Select the widget, switch Elementor to the mobile view and lower Width or Max Width in the Style tab. Each device keeps its own value.

Can the logo link to another page?

Yes. To link logo to homepage in Elementor, leave Link on Site URL, the default. Choose Custom URL for any address, Media File to open the logo file in a lightbox, or None for no link.

How do I do an Elementor sticky header logo change?

The widget has no sticky setting, so put two Site Logo widgets in a sticky header, a Custom Logo for the top of the page and the Site Logo for the scrolled state, and swap them with CSS.

Can I use a different logo on mobile in Elementor?

Yes. Add two Site Logo widgets, give each its own logo, and use Elementor's Hide On setting in the Advanced tab to show one on desktop and the other on mobile.

Should I use this or the atomic Site Logo?

Use this classic widget in Elementor 3 layouts, or when you need a caption, a Media File link or hover filters. Use the free atomic Site Logo in headers built with the Elementor 4 Atomic Editor.

Animation Addons Pro · Elementor 4

Your logo, in every header

The Site Logo widget: your Site Identity logo or a custom one, linked and styled in Elementor, free.

Get Animation Addons Pro Try it free
  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license