The Site Logo widget dynamically displays your logo and lets you adjust the logo's size, position, and other design elements.
Adding Site Logo widget
- Open the page where you want to add the widget.
- Find the widget in the widget panel and drag it onto the canvas.
- Configure the widget settings as described below.
Content tab
- Choose Image: The logo image should be set from Appearance > Customize > Site Identity section of your WordPress Dashboard.
- Generate with AI: Generate your logo using AI. Click the button and in the popup window, describe the image you want the AI to create. Include details about the style, aspect ratio, and the number of images you'd like generated for selection. You can find more information here.
- Image Resolution: Set the size of your image. You can set it from the dropdown menu prefilled options or add a custom size.
- Link: Configure the logo’s link by choosing from None, Media File, or Custom Link.
If Media File is selected, you can set the Lightbox option to Default, Yes, or No.
If Custom Link is selected, the URL will be automatically retrieved for you.
Style tab
- Alignment: Position the logo to the left, right, or center.
- Width: Modify the logo's width.
- Max Width: Define the maximum width of the logo.
- Height: Choose the logo's height using the slider. After selecting the height, choose Object fit:
Default: Leave the setting to default if you like the default fit.
Fill: Ensures the logo covers the space entirely, potentially altering its shape.
Cover: Stretches the logo to fit the width, which may crop parts of it.
Contain: Ensures the entire logo is visible, possibly leaving blank areas around it.
The following options apply to both Normal and Hover modes:
- Opacity: Customize the opacity of your logo.
- CSS Filters: Option to apply CSS filters to your logo.
- Border Type: Option to apply a border to your logo.
- Border Radius: Set radius of border for curved border edges.
- Box Shadow: Option to add shadow to logo box.
The following options apply to Hover mode:
- Transition Duration: Set the time it takes for the hover effect to show.
- Hover Animation: Set an animation effect upon hover.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.