V4 Elements Site Logo Estimated reading: 5 minutes 5 views Show your logo anywhere on your page and make it a link to your homepage. It picks up the logo you set in WordPress, so you change it once and it updates everywhere. No code needed. WIDGET Site Logo USES Your WordPress logo, or your own image PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: Set your logo in WordPress first: Appearance > Customize > Site Identity (on block themes, in the Site Editor). If no logo is set, the widget shows a grey picture placeholder. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Site Logo is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Site Logo under Header & Footer Widgets and switch it on. Click Save Settings. The Site Logo card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page or your header template in the Elementor Editor and drop the logo in. Click the + button at the top left to open the Elements panel. Look under AAE General for Site Logo. Drag it onto your page. The Site Logo in the Elements panel (click to zoom) Tip: Can not see it? Type Site Logo in the search box at the top of the panel. Note: Your WordPress logo shows up right away. It links to your homepage by default. STEP 3 Choose Where the Logo Goes The logo can click through to your homepage, to another page, or to nowhere. Open the Site Logo section in the General tab. Under Logo, keep Site Logo (WordPress). Under Link, choose Site URL (your homepage), Custom URL or None. If you chose Custom URL, type the address in the Custom URL box. Click Update to save your page. Logo (1), Link (2) and Custom URL (3) (click to zoom) Tip: The link choices are None, Site URL and Custom URL. STEP 4 Make It the Right Size A logo fills the width it is given, so set a size. Select the logo and open the Style tab. Open Size. Type a Width, for example 220 px. The height follows by itself, so the logo does not get squashed. Click Update to save your page. Type a Width (1) (click to zoom) Tip: On a live site, a width between 120 and 260 px usually works well in a header. STEP 5 Use a Different Image (Optional) Want a different logo only in this spot, like a white one on a dark footer? Use your own image. Select the Site Logo. Set Logo to Custom (Child Image). Open the Structure panel and open the Site Logo. You will see an Image part. Click the Image. In the General tab, choose your picture. Style the Site Logo as usual: a dark Background and some Spacing make a nice badge. Logo set to Custom (Child Image) (1) (click to zoom) The Site Logo (1) and its Image (2) (click to zoom) RESULT Final Result Two Site Logos on a live page. The first uses the WordPress logo at 260px wide. The second uses a white logo as a custom image on a dark background. Both link to the homepage. The WordPress logo and a custom light logo SETTINGS Options Logo Default: Site Logo (WordPress)Use your WordPress logo, or a custom image of your own. Link Default: Site URLNone, Site URL (your homepage) or Custom URL. Custom URL The address for Custom URL. Open In Default: Same WindowOpen the link in the same window or a new window. Add Nofollow Default: OffAdds nofollow to the link. ID Optional CSS ID for the logo. GOOD TO KNOW More Details Change once, update everywhere Every Site Logo using the WordPress logo changes when you pick a new logo in WordPress. Header and footer You can add the Site Logo to a header and to a footer. It loads its small bit of styling only once. Open in a new window The link then opens safely, with noopener added for you. HELP Troubleshooting I do not see the Site Logo in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Site Logo. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. I see a grey picture instead of my logo No logo is set in WordPress yet. Set one in Appearance > Customize > Site Identity, then reload the editor. My logo is cut off or too big Select the logo, open Style > Size and set a Width, for example 220. My custom image does not show Set Logo to Custom (Child Image), then open the Image part in the Structure panel and choose a picture. The logo does not link anywhere Check that Link is not set to None. You Did It Your logo now sits where you want it and takes visitors home. If you face any problem, please contact our support team. We are happy to help.
