The Blockify theme preview uses a regular image block for the logo. This can be replaced with the Site Logo block during setup and will work the same.
Follow the steps below to change the site logo to your own:
- Navigate to Appearance > Editor
- Click on the logo (image block)
- Click Replace then click Open Media Library
- Upload or choose your logo image and click Select
- Add a link by clicking on the link 🔗 icon in the block toolbar
- Enter the URL (e.g https://blockifywp.com/) and click the ⏎ button to apply
- Save your site changes
The above steps can be seen in the screen recording below:
SVG Logo (and dark mode)
The Blockify theme preview uses an SVG image for the logo for better display resolution, performance and dark mode / style variation color support.
To enable SVG uploads for your site, you will need to install the Safe SVG plugin since WordPress doesn’t support this by default. Once the plugin has been activated, you will be able to upload SVG images. Upload your logo to the Media Library and then deactivate the plugin if no longer required.
Blockify automatically renders SVG images inline instead of loading the file. This allows for further customization and theming of logos (and other images).
For example, in the Blockify theme preview, the logo icon uses the primary color and the logo text uses the current text color for the path fill. Since these values are using CSS custom properties, they inherit the current theme styles and also support dark mode/style switching.
Below is an example SVG logo using a theme color custom property for the fill color. (you will need to edit your SVG before uploading to the Media Library):
Copied
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 69.3 19.8">
<path fill="var(--wp--preset--color--primary,currentColor)" d="M27.5 3.9v11.6h-1.8V3.9h1.8zm1.9 7.7c0-.8.2-1.5.5-2.2.3-.6.8-1.1 1.4-1.5s1.3-.5 2-.5c1 0 1.9.3 2.5.8.7.5 1.1 1.3 1.2 2.2h-1.7c-.1-.5-.3-.8-.7-1.1-.3-.2-.8-.3-1.2-.3-.4 0-.8.1-1.2.3-.3.2-.6.5-.8.9-.2.4-.3.8-.3 1.4 0 .5.1 1 .3 1.4.2.4.4.7.8.9.3.2.7.3 1.2.3s.9-.1 1.3-.4c.4-.2.6-.6.7-1H37c-.1.6-.3 1.1-.6 1.5-.3.4-.8.8-1.3 1-.5.3-1.1.4-1.8.4-.8 0-1.5-.2-2.1-.5s-1-.8-1.4-1.4c-.2-.7-.4-1.4-.4-2.2zm8.7 0c0-.8.2-1.5.5-2.2.4-.6.9-1.1 1.5-1.4.6-.4 1.3-.5 2.1-.5s1.5.2 2.1.5c.6.4 1.1.8 1.5 1.5.4.6.5 1.3.5 2.2 0 .8-.2 1.5-.5 2.1-.4.6-.9 1.1-1.5 1.5-.6.4-1.3.5-2.1.5s-1.5-.2-2.1-.5c-.6-.4-1.1-.8-1.5-1.5-.3-.7-.5-1.4-.5-2.2zm1.7 0c0 .5.1 1 .3 1.4.2.4.5.7.9.9.4.2.8.3 1.3.3s.9-.1 1.2-.3.6-.5.8-.9c.2-.4.3-.8.3-1.4s-.1-1-.3-1.3c-.2-.4-.5-.7-.8-.9-.4-.3-.8-.4-1.3-.4s-.9.1-1.3.3c-.4.2-.6.5-.9.9-.1.4-.2.8-.2 1.4zm9.9 3.9H48V7.6h1.6l.2 1.1c.3-.4.6-.8 1.1-1 .5-.2 1-.4 1.5-.4 1 0 1.8.3 2.2.9.5.6.7 1.4.7 2.4v4.8h-1.7V11c0-.7-.2-1.2-.5-1.6-.3-.3-.8-.4-1.3-.4-.7 0-1.2.2-1.5.6s-.6 1-.6 1.7v4.2zm8.4-9.6c-.3 0-.6-.1-.8-.3-.2-.2-.3-.5-.3-.8s.1-.6.3-.8c.2-.2.5-.3.8-.3.3 0 .6.1.8.3s.3.5.3.8-.1.6-.3.8-.5.3-.8.3zm-.8 9.6V7.6H59v7.9h-1.7zm3.3-3.9c0-.8.2-1.5.5-2.2.3-.6.8-1.1 1.4-1.5s1.3-.5 2-.5c1 0 1.9.3 2.5.8.7.5 1.1 1.3 1.2 2.2h-1.7c-.1-.5-.3-.8-.7-1.1-.3-.2-.7-.3-1.2-.3-.4 0-.8.1-1.2.3-.3.2-.6.5-.8.9-.2.4-.3.8-.3 1.4 0 .5.1 1 .3 1.4.2.4.4.7.8.9.3.2.7.3 1.2.3s.9-.1 1.3-.4c.4-.2.6-.6.7-1h1.7c-.1.6-.3 1.1-.6 1.5-.3.4-.8.8-1.3 1-.5.3-1.1.4-1.8.4-.8 0-1.5-.2-2.1-.5-.6-.3-1-.8-1.4-1.4-.3-.7-.5-1.4-.5-2.2zM9.8.7c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 1.5c4.1 0 7.5 3.4 7.5 7.5v.1C15.9 9 14 8.1 13.9 8c-.2-.1-.5-.1-.8.1l-2.9 2.1L6.8 9c-.2-.1-.4 0-.6.1l-3.7 2.2c-.1-.5-.2-1-.2-1.5.1-4.2 3.4-7.6 7.5-7.6zm0 15c-3.1 0-5.7-1.9-6.9-4.5l3.7-2.2 3.5 1.2c.2.1.5 0 .7-.1l2.9-2.1c.8.4 2.5 1.2 3.5 1.9-.8 3.3-3.8 5.8-7.4 5.8z"/>
</svg>Code language: HTML, XML (xml)