Logo Block
Overview
The Logo Block is a specialized component in the Phenix Design System that allows you to easily add and customize your website's logo. It provides options for responsive sizing, favicon management, and automatic homepage linking. The Logo Block is typically used in headers, footers, and other branding areas of your website.
Key Features
- Display your site logo with customizable size options
- Responsive logo with mobile variant options
- Integrated favicon management
- Automatic linking to the homepage
- Automatic alt text using site title
- Option to use favicon as mobile logo
- Advanced styling options including size, padding, and margins
How to Use
- In the WordPress editor, click the "+" button to add a new block
- Search for "Logo" or find it in the "Phenix Blocks" category
- Add the Logo Block to your page
- Select your logo image(s) from the media library
- Customize the logo settings in the block sidebar
Block Settings
Logo Options
Option | Description |
---|---|
Logo Image | Select the main logo image from the media library |
Logo Size (Height) | Set the height of the logo |
Logo Width | Optional custom width for the logo |
Favicon | Upload and set the site favicon |
Responsive Logo | Enable responsive logo options |
Mobile Logo | Upload a separate logo for mobile devices (when responsive is enabled) |
Use Favicon for Mobile | Option to use the favicon as mobile logo (when responsive is enabled) |
Link Options
Option | Description |
---|---|
Link to Homepage | Enable/disable linking the logo to the site homepage |
Custom URL | Set a custom URL for the logo to link to (if not linking to homepage) |
Open in New Tab | Whether the link opens in a new browser tab |
Examples
Basic Logo Setup
- Add the Logo block to your page or template
- Click 'Upload Logo' to select your logo from the Media Library
- Set the desired logo height in the 'Size (Height)' field
- Optionally set a custom width
- Click 'Update Site Logo' to save it as your site's official logo
Setting up Favicon
- In the Logo block settings
- Click 'Upload Favicon' to select an image
- The image should be square and at least 512x512 pixels
- Click 'Update Site Logo' to save changes
- The favicon will be used in browser tabs and bookmarks
Centered Logo with Padding
To create a centered logo with padding:
- Add the Logo block and select your image
- Under the "Spacing" section, add padding as needed
Responsive Logo Setup
- Enable 'Responsive Logo' in the block settings
- Choose one of two options:
- Upload a separate mobile logo
- Enable 'Use Favicon for Mobile' to use the favicon as mobile logo
- The mobile variant will automatically show on smaller screens
- The main logo will display on desktop and tablet views
Common Use Cases
Header Logo
To place a logo in your site header:
- Edit your header template part in the Site Editor
- Add a Container block
- Add a Grid Column block (e.g., with size "3")
- Inside this column, add your Logo block
- Add another Grid Column block (e.g., with size "9") for navigation
Footer Logo
To place a smaller logo in your site footer:
- Edit your footer template part in the Site Editor
- Add the Logo block
- Set a smaller width (e.g., "120px")
- Add bottom margin for spacing
- Add a Paragraph block below for copyright information
Best Practices
Image Quality: Use high-quality logo images that remain crisp at different sizes
File Format: Use SVG or PNG formats for logos to maintain quality
Favicon Size: Use a square image (512x512px recommended) for the favicon
Mobile Optimization: Consider using a simpler version of your logo for mobile devices
Responsive Testing: Test the logo display across different device sizes
Height Control: Use the Size (Height) setting to maintain consistent logo height across the site
Related Blocks
- Container Block - For positioning the logo within layouts
- Grid Row Block - For creating header layouts with logos
- Media Element Block - For more advanced image handling