Site Logo
Your site logo, linked to the home page, for headers and footers.
On this page
The Site Logo widget shows your logo, linked to the home page. It uses the logo set for your whole site, so when you change the logo there, every header and footer updates. When no logo is set, it shows the site title instead.
Where the logo comes from
With Logo set to Site logo (Site Identity), the widget uses the logo you set for your site in WordPress: in Appearance → Customize → Site Identity, or with the Site Logo block in the Site Editor if your theme is a block theme. The image's alternative text comes from the media library, or the site title when it has none.
Set Logo to Custom image to use another picture in this spot, for example a white version of your logo on a dark footer.
Add a Site Logo
Open your header or footer template in the Theme Builder. Then open Insert in the left panel, find Site Logo in the Site & theme group (or type "logo" in the search box) and drag it into place. See Add elements.
Control its size in Design → Logo: typical header logos are 120–200px wide. Max height keeps a tall logo from making a compact header taller.
Content tab settings
| Setting | What it does |
|---|---|
| Logo | Site logo (Site Identity) or Custom image. Default: Site logo. |
| Image | The image to use. Shown for Custom image. Supports dynamic data. |
| Resolution | Thumbnail, Medium, Large or Full. Default: Full. |
| Alt text | The text screen readers announce. Defaults to the image's alt text, then the site title. |
| Link | Home page, Custom URL or None. Default: Home page. |
| URL | The link address. Shown for Custom URL. Supports dynamic data. |
| When there is no logo | Show the site title or Show nothing. Default: Show the site title. |
| Alignment | Left, Center or Right. Can differ per device. |
Design tab settings
| Section | Settings |
|---|---|
| Logo | Width, Max width, Max height, Opacity and CSS filters (with Normal and Hover tabs), Border, Border radius, Shadow. |
| Site title fallback | Typography, Color, Hover color of the site title shown when there is no logo. Shown for Show the site title. |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares. To show a light logo in dark mode, add two logos and use Hide in dark mode and Hide in light mode in Behaviour → Visibility. See Visibility.
Tips
- Upload your logo as a PNG at least twice as large as it is shown, so it stays sharp on high-resolution screens.
- For a transparent header over a dark hero image, the header settings can swap in a different logo. See Headers & footers.