The Logo Block allows you to add your website’s logo using either an image or text format. This block provides extensive customization options for creating a professional brand presence on your site.
Adding a Logo Block
Navigate to the post or page where you want to display logo. Click the block inserter (+) and search for “Logo” in the DigiBlocks Theme category. Click to insert the Logo block into your content.
Logo Type Options
Image Logo
When you select Image as your logo type:
- Click Select Logo Image to open the media library
- Choose an existing image or upload a new logo file
- Once selected, you can:
- Replace the image with a different one
- Remove the current image completely
Supported formats: JPG, PNG, SVG, WebP and other standard image formats
Text Logo
When you select Text as your logo type:
- Enter your logo text in the text field
- Optionally add an icon to accompany your text
- Choose the icon position relative to your text:
- Before – Icon appears to the left of text
- After – Icon appears to the right of text
- Above – Icon appears above the text
Dimensions Settings
Image Logo Dimensions
Logo Width
- Set the width of your logo image
- Available units: px, %, em, rem, vw
- Responsive controls for desktop, tablet, and mobile
Logo Height
- Set the height of your logo image
- Leave at 0 for automatic height based on aspect ratio
- Available units: px, %, em, rem, vh
Text Logo Dimensions
Icon Size
- Control the size of icons used with text logos
- Available units: px, em, rem
- Responsive settings available
Alignment Options
Control how your logo is positioned horizontally:
- Left – Aligns logo to the left
- Center – Centers the logo
- Right – Aligns logo to the right
All alignment options are responsive, allowing different alignments per device.
Link Settings
Enabling Logo Links
- Toggle Enable Link to make your logo clickable
- By default, the logo links to your site’s homepage
- You can specify a custom URL if needed
Link Options
Custom URL
- Enter any URL you want the logo to link to
- Can be internal pages or external websites
Open in New Tab
- Enable to open the link in a new browser tab
- Useful for external links
Add noopener noreferrer
- Adds security attributes to external links
- Recommended for links opening in new tabs
Style Customization
Colors
Text Colors (Text logos only)
- Normal State – Default text and icon color
- Hover State – Color when hovering over the logo
Background Colors
- Normal State – Background color behind the logo
- Hover State – Background color on hover
Typography (Text Logos)
Customize the appearance of text logos:
- Font Family – Choose from available fonts
- Font Size – Responsive size controls
- Font Weight – Bold, normal, light options
- Font Style – Normal or italic
- Text Transform – Uppercase, lowercase, capitalize
- Text Decoration – Underline, strikethrough options
- Line Height – Spacing between lines
- Letter Spacing – Space between characters
Border Styling
Border Style Options:
- None, Solid, Dotted, Dashed, Double, Groove, Inset, Outset, Ridge
Border Controls:
- Border Width – Set width for each side independently
- Border Radius – Create rounded corners
- Border Colors – Normal and hover state colors
Box Shadow
Add depth to your logo with shadow effects:
- Position – Outside or inset shadows
- Horizontal/Vertical Offset – Shadow positioning
- Blur Amount – Shadow softness
- Spread – Shadow size
- Color – Shadow color and opacity
- Separate controls for normal and hover states
Spacing
Padding
- Internal spacing within the logo container
- Set independently for top, right, bottom, left
Margin
- External spacing around the logo
- Set independently for all sides
Hover Effects
Add interactive animations:
- None – No hover effect
- Lift – Logo moves up slightly on hover
- Scale – Logo increases in size on hover
- Glow – Logo brightens on hover
Advanced Features
Animation Effects
Add entrance animations to make your logo appear dynamically:
- Choose from various animation types (fade, slide, bounce, etc.)
- Preview Animation button to test the effect
- Animations trigger when the logo enters the viewport
Visibility Controls
Hide the logo on specific devices:
- Hide on Desktop – Logo won’t show on desktop screens
- Hide on Tablet – Logo won’t show on tablet screens
- Hide on Mobile – Logo won’t show on mobile screens
Note: Hidden elements appear with reduced opacity in the editor for easy editing
HTML Anchor
Create a unique anchor ID for direct linking:
- Enter a word without spaces
- Allows linking directly to this logo section
- Useful for navigation and SEO
Additional CSS Classes
Add custom CSS classes for advanced styling:
- Enter class names separated by spaces
- Useful for theme integration or custom CSS
The Logo Block provides all the tools necessary to create a professional, branded header element that works seamlessly across all devices and integrates perfectly with your site’s design.