The Logo element represents your website’s identity inside the header. It can display an image logo, your Site Title and Site Tagline, or a combination of these, with responsive controls and support for different header states.
The Logo element is always available in Blocksy’s Header Builder. To configure it, open the Customiser → Header and select the Logo element from the header layout.
Granular Controls
Logo
Select the image used as your website’s primary logo. Separate logo images can be configured for desktop and mobile layouts, allowing you to adapt your branding to the available space on different devices.
Additional logo selections become available when supported header features are active. For example, you can provide dedicated images for the Transparent Header and Sticky Header states.
If the Color Mode Switch extension is active, you can also provide a dedicated logo for the alternate Color mode.
Logo Height
Use Logo Height to control the displayed dimensions of the image logo. Responsive controls let you adapt its size to the available header space on different devices.
Sticky State Shrink
When the Sticky Header is active, enable Sticky State Shrink to reduce the logo’s size when the header enters its sticky state. This can be combined with the corresponding header-row controls to create a more compact sticky header.
Site Title
Enable the Site Title to display your WordPress site name alongside or instead of an image logo. Its visibility can be controlled independently across the available responsive device views.
The Site Title Link option determines whether the title links back to the website’s homepage.
Site Tagline
Enable the Site Tagline to display the tagline configured for your WordPress website. Like the Site Title, it includes responsive visibility controls so it can be shown only on the devices where it fits your header layout.
Logo Image Link
Use Logo Image Link to control whether the image logo links back to the website’s homepage. Disable it when the logo should be displayed without functioning as a navigation link.
Logo Inline SVG File
When an SVG file is used as the logo, the Logo Inline SVG File option lets Blocksy output the SVG markup directly in the page instead of loading it as a regular image file.
Experimental feature
Inline SVG output is experimental. For the most reliable results, make sure the SVG file is properly prepared and flattened before uploading it as your logo.
Positioning & Alignment
Additional positioning and alignment controls become available when the Site Title or Site Tagline is enabled. Use them to control how the image logo and text content are arranged and aligned within the element.
CSS Class
Add a custom CSS class to the Logo element when you need an additional selector for custom styling or integrations.
Custom ARIA Label
Provide a custom ARIA label for the Logo element when its purpose is not sufficiently clear to users of assistive technologies. This can be used to give the logo link a more descriptive accessible name.