The Heading Block is a versatile and powerful component designed to create stunning, customizable headings for your WordPress content. This block goes far beyond basic text formatting, offering comprehensive styling options, interactive effects, decorative separators, and advanced features that help you create visually striking headings that enhance your content’s hierarchy and visual appeal.
Key Features
The Heading Block includes an extensive set of features to meet all your heading design needs:
Content Management: Rich text editing with bold and italic formatting support
HTML Tags: Choose from H1 through H6 tags for proper semantic structure
Typography Controls: Complete font family, size, weight, and spacing customization
Color States: Normal and hover colors for text and background
Text Highlighting: Highlight specific words with background, color, or underline styles
Decorative Separators: Nine different separator styles with position and color controls
Link Functionality: Convert headings into clickable links with customizable behavior
Text Shadow Effects: Add depth with adjustable shadow controls
Animation Effects: Choose from various entrance animations with preview functionality
Responsive Design: Device-specific controls for optimal display across all screen sizes
Visibility Controls: Hide blocks on specific devices when needed
Advanced Options: HTML anchors and custom CSS classes for enhanced functionality
Adding the Heading Block
To add a Heading Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Heading” or navigate to the “DigiBlocks” category
- Click on the “Heading” block to add it to your page
- The block will appear with default placeholder text that you can immediately edit
Basic Configuration
Heading Content
Click on the placeholder text “Add Your Heading” to start typing your heading content. The block supports:
Rich Text Editing: Use the formatting toolbar that appears when text is selected to apply bold or italic formatting
Inline Editing: Edit content directly within the block without needing separate input fields
Placeholder Guidance: Clear placeholder text helps you understand what content to add
HTML Tag Selection
Choose the appropriate HTML tag for your heading to maintain proper document structure and accessibility:
H1: Typically used for page titles or main headings (use sparingly, usually one per page)
H2: Major section headings
H3: Subsection headings under H2 elements
H4-H6: Progressive sub-headings for detailed content hierarchy
Proper heading hierarchy improves both SEO and accessibility for screen readers.
Text Alignment
Control how your heading aligns within its container using responsive alignment controls:
Left: Align text to the left edge (default for most layouts)
Center: Center text within the container
Right: Align text to the right edge
Each alignment setting can be configured independently for desktop, tablet, and mobile devices, ensuring optimal display across all screen sizes.
Link Functionality
Transform your headings into interactive clickable elements:
Adding Links
- Click the “Add Link” button in the block inspector
- Enter the destination URL in the link control field
- Configure additional link settings as needed
Link Options
URL Target: Enter any valid URL, internal page, or external website
Open in New Tab: Choose whether links open in the same window or a new tab
Rel Attributes: Add rel=”noopener noreferrer” for external links or custom rel attributes
Link Removal: Easily remove links using the link control interface
Link Styling
When links are enabled, the heading automatically gains hover effects:
- Smooth color transitions between normal and hover states
- Cursor changes to pointer on hover
- Maintains all other styling while adding interactive functionality
Typography Controls
The Heading Block provides comprehensive typography customization options:
Font Properties
Font Family: Choose from available system fonts or Google Fonts integrated with your theme
Font Size: Set responsive sizes with pixel, em, rem, or percentage units
Font Weight: Control text weight from light (300) to bold (900)
Font Style: Apply normal or italic styling
Text Transform: Use uppercase, lowercase, capitalize, or normal casing
Text Decoration: Add underlines, overlines, or other text decorations
Spacing Controls
Line Height: Adjust vertical spacing between lines of text for better readability
Letter Spacing: Control spacing between individual characters for design effects
Responsive Typography
All typography settings include device-specific controls:
- Desktop: Full-size displays (992px and up)
- Tablet: Medium displays (768px to 991px)
- Mobile: Small displays (767px and below)
Set different font sizes and line heights for each device to ensure optimal readability across all screen sizes.
Color Customization
Create visually appealing headings with comprehensive color controls:
Normal State Colors
Text Color: Set the default color for your heading text
Background Color: Define background colors for the entire heading block
Hover State Colors
Text Hover Color: Color that appears when users hover over the heading
Background Hover Color: Background color that appears on hover
All color controls support full opacity settings, allowing for semi-transparent effects and layered designs.
Color Best Practices
- Ensure sufficient contrast between text and background colors for accessibility
- Use hover effects to provide visual feedback for interactive elements
- Consider your overall site color scheme when choosing heading colors
- Test colors in different lighting conditions and on various devices
Text Highlighting
Draw attention to specific words or phrases within your headings:
Setting Up Highlights
- Enter the exact text you want to highlight in the “Text to Highlight” field
- Choose your highlight type from the available options
- Select your highlight color
- The specified text will automatically be highlighted throughout your heading
Highlight Types
Background: Adds a colored background behind the highlighted text with subtle padding and rounded corners
Text Color: Changes the color of the highlighted text while keeping the background unchanged
Underline: Adds a colored underline with customizable thickness and offset
Highlight Behavior
- Highlighting is case-sensitive and matches exact text strings
- Multiple instances of the same text within a heading will all be highlighted
- Highlights maintain their appearance across different devices and screen sizes
- Color customization applies to all highlighted instances
Decorative Separators
Add visual elements above or below your headings to enhance their presentation:
Separator Styles
The Heading Block offers nine distinct separator styles:
Solid Line: A clean, straightforward line separator
Gradient Line: Fades from your primary color to secondary color and back
Double Line: Two parallel lines with independent color control
Dashed Line: Evenly spaced dashes across the separator width
Dotted Line: Small dots arranged in a line pattern
Wave Pattern: Diagonal pattern creating a wave-like effect
Dot Pattern: Circular dots arranged in a decorative pattern
Glow Effect: Adds a glowing shadow around the separator
Faded Edges: Gradient that fades to transparent at both ends
Separator Configuration
Position Control: Place separators above or below your heading text
Width Settings: Control separator width from 10px to 300px with responsive controls
Height Settings: Adjust separator thickness from 1px to 20px
Spacing Control: Set distance between separator and heading text (0-50px)
Color Options: Primary color for all styles, secondary color for gradient and double line styles
Border Radius: Round separator corners for applicable styles (solid, gradient, double, dashed, dotted, glow, faded)
Separator Positioning
Separators automatically align based on your heading’s text alignment:
- Left-aligned headings: Separators start from the left edge
- Center-aligned headings: Separators center under/above the text
- Right-aligned headings: Separators align to the right edge
Text Shadow Effects
Add depth and visual interest to your headings with customizable text shadows:
Shadow Controls
Enable/Disable: Toggle text shadow effects on or off
Shadow Color: Choose any color with full opacity control for the shadow
Horizontal Offset: Move shadow left or right (-20px to +20px)
Vertical Offset: Move shadow up or down (-20px to +20px)
Blur Radius: Control shadow softness (0-20px)
Shadow Applications
- Subtle Enhancement: Light shadows with minimal offset for slight depth
- Dramatic Effects: High contrast shadows with significant offset for bold statements
- Glow Effects: Large blur radius with minimal offset for glowing text
- Contrast Improvement: Dark shadows behind light text on light backgrounds for better readability
Animation Effects
Bring your headings to life with entrance animations:
Available Animations
Fade Animations: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
Slide Animations: slideInUp, slideInDown, slideInLeft, slideInRight
Zoom Animations: zoomIn, zoomInUp, zoomInDown
Bounce Animations: bounceIn, bounceInUp, bounceInDown
Rotation Animations: rotateIn, rotateInDownLeft, rotateInDownRight
Animation Features
Live Preview: Use the “Preview Animation” button to test animations in the editor
Automatic Triggering: Animations activate when the heading enters the viewport
Performance Optimized: Animations only load when blocks with animations are present on the page
Responsive Behavior: Animations work consistently across all device sizes
Animation Best Practices
- Use animations sparingly to avoid overwhelming users
- Choose animations that match your content’s tone and purpose
- Test animations on different devices to ensure smooth performance
- Consider users who prefer reduced motion and may have disabled animations
Spacing Controls
Fine-tune the positioning and spacing of your headings:
Padding Controls
Add internal spacing within the heading block:
- Top/Bottom Padding: Vertical space inside the heading
- Left/Right Padding: Horizontal space inside the heading
- Linked Values: Option to set all sides simultaneously or independently
- Unit Support: Pixels, ems, rems, and percentages
Margin Controls
Control external spacing around the heading block:
- Top/Bottom Margins: Vertical space outside the heading
- Left/Right Margins: Horizontal space outside the heading
- Responsive Settings: Different spacing for desktop, tablet, and mobile
- Negative Values: Supported for advanced layout adjustments
Responsive Spacing
All spacing controls include device-specific settings, allowing you to:
- Reduce padding on mobile devices for better space utilization
- Increase margins on desktop for improved visual hierarchy
- Adjust spacing based on different screen real estate availability
Advanced Features
Visibility Controls
Control when and where your headings appear:
Hide on Desktop: Hide headings on screens 992px and wider
Hide on Tablet: Hide headings on screens between 768px and 991px
Hide on Mobile: Hide headings on screens 767px and smaller
Editor Behavior: Hidden elements appear with reduced opacity in the editor for easy editing while being completely invisible on the frontend.
Use Cases:
- Mobile-specific headings that don’t fit desktop layouts
- Desktop-only headings that would be too large for mobile
- Tablet-specific headings for unique medium-screen layouts
HTML Anchors
Create direct links to specific headings on your page:
- Enter a unique anchor name in the “HTML anchor” field
- Use words without spaces (hyphens and underscores are acceptable)
- The anchor creates a direct URL to that heading
- Users can link directly to that section using #anchor-name
Example: An anchor “pricing-section” creates a link yoursite.com/page#pricing-section
Custom CSS Classes
Add custom CSS classes for advanced styling or theme integration:
- Enter class names in the “Additional CSS class(es)” field
- Separate multiple classes with spaces
- Use these classes in your theme’s CSS or additional CSS sections
- Maintain consistency across multiple headings with shared classes
Performance Optimization
The Heading Block is designed for optimal performance:
Asset Loading
Conditional Loading: CSS and JavaScript only load when heading blocks are present on a page
Minification: All generated CSS is automatically minified for faster loading
Animation Optimization: Animation libraries only load when animations are used
SEO Benefits
Semantic HTML: Proper heading tags improve content structure for search engines
Schema Compatibility: Heading hierarchy supports structured data markup
Performance Metrics: Lightweight implementation doesn’t negatively impact page speed scores
Best Practices
Content Strategy
Heading Hierarchy: Use heading tags in logical order (H1 → H2 → H3) without skipping levels
Content Length: Keep headings concise while being descriptive enough for context
Consistency: Maintain similar styling across headings of the same level throughout your site
Accessibility: Ensure headings accurately describe the content that follows
Design Consistency
Color Harmony: Choose colors that complement your overall site design
Typography Scaling: Use relative units (em, rem) for better responsive behavior
Animation Moderation: Limit animations to key headings to avoid visual overload
Performance Testing: Monitor page load times when using multiple animated headings
Responsive Design
Device Testing: Preview headings on different screen sizes during design
Touch Targets: Ensure linked headings have adequate touch targets on mobile devices
Readability: Adjust font sizes appropriately for different viewing distances
Loading Performance: Optimize images and effects for mobile data connections
Accessibility Considerations
Color Contrast: Maintain WCAG-compliant contrast ratios between text and backgrounds
Motion Sensitivity: Consider users who prefer reduced motion
Screen Readers: Ensure heading text is descriptive and meaningful when read aloud
Keyboard Navigation: Verify linked headings are accessible via keyboard navigation
The Heading Block provides a comprehensive solution for creating professional, accessible, and visually appealing headings that enhance your content’s structure while maintaining excellent performance and user experience across all devices and user needs.