One important aspect of creating a successful website is having a well-designed logo that represents your brand and sets you apart from competitors.
With the Site Logo block from Nexter Blocks, you can add your site logo to any WordPress header, footer, or page template. The block supports normal and dual logo modes, sticky header logo switching, custom URLs, schema markup, and ARIA accessibility labels, all configured in the WordPress block editor.
Best Used For:
- Business and agency websites that display a different logo when the header becomes sticky on scroll
- Portfolio and personal brand sites that show a secondary logo on hover for a stronger visual identity
- E-commerce and content sites that need a schema-marked logo for better brand appearance in search results
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Site Logo block is activated, to verify this visit Nexter → Blocks → and Search for Site Logo and activate.
Learn via Video Tutorial
How to activate the Site Logo Block?
Go to
- Nexter → Blocks
- Search the block name and turn on the toggle then click Save Settings.
Key Features
- Change Logo on Hover – The block lets you display a different logo image when a visitor hovers over it. This is useful when you want to reveal a full-colour version of an icon-only logo or show a secondary brand mark on hover. See how to change the site logo on hover.
- Change Logo on Sticky Header – The block supports a dedicated sticky logo image that replaces your standard logo when the header scrolls into a sticky state. This is useful when your main logo is dark-coloured and your sticky header uses a white or light background. See how to change the logo on a sticky header.
- Custom URL – In the Logo Url Type section, set the logo link to a custom destination instead of the default home page. Use this when a logo on a landing page or microsite should point to a specific product or campaign page rather than the homepage.
- Accessibility – The block includes an ARIA label field so screen readers can identify your logo correctly. Add an ARIA label when your logo is an image without visible text and your site needs to meet WCAG accessibility standards.
- Schema – Enable schema markup on the logo to add structured data that helps search engines associate your logo image with your brand in search results and knowledge panels.
How to Use the Site Logo Block in WordPress?
Typically, you add the Site Logo block in the site header and sometimes in the footer. Add the block to the header or footer template of your website to display your logo site-wide. To build a custom header or footer template in the WordPress block editor, use the Nexter Builder.
Note: To create the template, you can use the free Nexter Builder.
Site Logo
From the Logo Normal/Dual section, select the logo display mode. You will find two options:
- Normal – Displays a single static logo image. Use this for most standard header layouts.
- Double – Enables two logo images so you can change the logo on hover. Use this when you want to show a full-colour version of your logo when a visitor hovers over the header.
Select the option that matches your layout. Available settings will change based on your selection.
For this example, select Normal.
From the Logo Type section, select whether to use an image file or an SVG as your logo. SVG logos scale without quality loss at any size, which makes them a good choice for retina displays and responsive layouts.
When Image is selected, set the image dimensions from the Image Size dropdown.
Set the maximum display width of the logo for desktop, tablet, and mobile screens from the Logo Max Width section. This prevents your logo from appearing too large on smaller screens.
Align the logo to the left, centre, or right from the Alignment section for each device breakpoint.
From the Logo Url Type section, set where the logo links when a visitor clicks it. You will find two options:
- Home URL – Links the logo to your site’s home page. This is the standard setting for most websites.
- Custom Link – Set any URL as the logo destination. Use this when a logo on a landing page or microsite should link to a specific campaign page rather than the main homepage.
From the Sticky Logo toggle, enable a separate logo image for when the header is in sticky mode. This is useful when your normal logo is light-coloured and becomes hard to read against a white sticky header background. For full setup instructions, see how to change the logo in a sticky header on scroll.
SEO Option
From the Enable Schema Markup toggle, add structured data to your logo so search engines can associate it with your brand. Enable this to improve your chances of having the logo appear in Google knowledge panels and brand search results.
Accessibility
In the Aria Label field, add a text label that screen readers announce when they reach the logo. This is important for WCAG compliance when your logo is an image without visible text, so assistive technology can identify it correctly.
You will find additional styling options for the logo container in the Style tab.
Advanced options are common across all Nexter Blocks and let you control animations, visibility conditions, custom CSS, and more.
