The Text Block is a powerful and versatile content creation tool that extends WordPress’s native text capabilities with advanced styling options, responsive controls, and professional design features. This block serves as an enhanced alternative to the core Paragraph block, offering comprehensive typography controls, color management, spacing options, and animation effects to create visually appealing text content.
Key Features
The Text Block provides a comprehensive set of features for creating styled text content:
Rich Text Editing: Full rich text editing with support for bold, italic, links, strikethrough, underline, text color, code, superscript, and subscript formatting
HTML Tag Selection: Choose from paragraph, span, or div tags for semantic flexibility
Advanced Typography: Complete font family, size, weight, style, and spacing controls
Color Management: Separate normal and hover state colors for text, background, and borders
Responsive Design: Device-specific controls for all styling options
Border Controls: Comprehensive border styling with multiple border types and hover effects
Box Shadows: Normal and hover shadow effects for depth and visual interest
Animation Effects: Choose from various entrance animations to enhance user engagement
Hover Effects: Interactive hover effects including lift, scale, glow, and bounce
Spacing Controls: Precise padding and margin controls with responsive settings
Visibility Controls: Show or hide content on specific devices
Adding the Text Block
To add a Text Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Text” or navigate to the “DigiBlocks” category
- Click on the “Text” block to add it to your page
- The block will appear with a placeholder text that you can immediately start editing
The block provides a familiar rich text editing experience while offering extensive customization options through the Inspector Controls.
Content Management
Basic Text Editing
The Text Block provides a rich text editing interface that supports:
Text Formatting: Use the toolbar or keyboard shortcuts for bold, italic, strikethrough, and underline formatting
Links: Add and edit links to external URLs, internal pages, or media files
Special Characters: Insert superscript and subscript text for mathematical expressions or footnotes
Code Formatting: Mark inline code with monospace formatting
Color Highlighting: Apply custom colors to specific text portions
HTML Tag Selection
Choose the appropriate HTML tag for your content to maintain proper semantic structure:
Paragraph (p): Default option for regular text content and body copy
Span: Inline element for styling specific text portions without creating block-level structure
Div: Block-level container for more complex styling scenarios or when nesting other elements
The HTML tag selection affects both the semantic meaning and styling behavior of your text content.
Layout Options
Text Alignment
Control text alignment with responsive settings for optimal display across devices:
Left Alignment: Standard left-aligned text for most content types
Center Alignment: Centered text for headings, callouts, or featured content
Right Alignment: Right-aligned text for specific design requirements
Justify Alignment: Justified text with even spacing for formal document layouts
Each alignment option includes responsive controls, allowing different alignments for desktop, tablet, and mobile devices.
Style Configuration
Color Settings
The Text Block offers comprehensive color management with separate controls for normal and hover states:
Normal State Colors
Text Color: Set the default color for your text content
Background Color: Define a background color for the text container
Hover State Colors
Text Color: Color that appears when users hover over the text
Background Color: Background color change on hover
Border Color: Border color change on hover for enhanced interactivity
All color controls support alpha transparency for subtle overlays and sophisticated color schemes.
Typography Controls
Achieve precise typography control with comprehensive font management:
Font Settings
Font Family: Choose from available system fonts, Google Fonts, or custom fonts
Font Size: Set responsive font sizes for desktop, tablet, and mobile devices
Font Weight: Control text weight from light (300) to black (900)
Font Style: Apply normal or italic styling
Text Formatting
Text Transform: Apply uppercase, lowercase, capitalize, or normal text transformation
Text Decoration: Add underlines, strikethrough, or remove default decorations
Line Height: Control vertical spacing between text lines with responsive settings
Letter Spacing: Adjust horizontal spacing between characters for refined typography
All typography settings include responsive controls for optimal readability across devices.
Border and Visual Effects
Border Configuration
Create distinctive visual boundaries with comprehensive border controls:
Border Style: Choose from none, solid, dotted, dashed, double, groove, inset, outset, or ridge styles
Border Width: Set individual border widths for top, right, bottom, and left sides with responsive controls
Border Color: Define border colors with alpha transparency support
Border Radius: Create rounded corners with individual corner control and responsive settings
Box Shadow Effects
Add depth and visual interest with shadow controls:
Normal Shadows: Set shadows for the default state with position (inset/outset), horizontal/vertical offsets, blur radius, spread radius, and color options
Hover Shadows: Create different shadow effects on hover for interactive feedback
Shadow Positioning: Choose between outer (default) and inner (inset) shadow effects
Hover Effects
Enhance interactivity with built-in hover effects:
None: No additional hover effects beyond color changes
Lift: Subtle upward movement on hover for elevated appearance
Scale: Slight enlargement effect for emphasis
Glow: Brightness increase for luminous effect
Bounce: Animated bounce effect with spring-like motion
All hover effects work in combination with color and shadow changes for comprehensive interaction design.
Spacing Controls
Padding Settings
Control internal spacing within the text container:
Uniform Padding: Set equal padding on all sides
Individual Sides: Set different padding values for top, right, bottom, and left
Responsive Controls: Adjust padding for desktop, tablet, and mobile devices
Units: Choose between pixels (px), em, rem, or percentage units
Margin Settings
Manage external spacing around the text block:
Uniform Margins: Set equal margins on all sides
Individual Sides: Set different margin values for each side
Responsive Controls: Device-specific margin settings
Negative Margins: Use negative values for overlapping effects
Advanced Features
Animation Effects
Add entrance animations to make your text content more engaging:
Available Animations
Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight for subtle entrances
Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight for directional movement
Zoom Effects: zoomIn, zoomInUp, zoomInDown for scaling entrances
Bounce Effects: bounceIn, bounceInUp, bounceInDown for playful movement
Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight for spinning entrances
Animation Preview
Use the preview button in the editor to test animations before publishing. Animations trigger when the element enters the viewport during page scrolling.
Visibility Controls
Control text block visibility across different devices:
Hide on Desktop: Hide the block on screen sizes 992px and above
Hide on Tablet: Hide the block on screen sizes between 768px and 991px
Hide on Mobile: Hide the block on screen sizes 767px and below
Hidden elements appear with reduced opacity in the editor while being completely hidden on the frontend.
HTML and CSS Customization
HTML Anchor
Create unique anchor links for direct section linking:
Anchor Creation: Enter a unique identifier (without spaces) to create a linkable anchor
Direct Linking: Use the anchor to link directly to this text section from other pages or within the same page
URL Structure: Anchors appear in URLs as #your-anchor-name
Additional CSS Classes
Extend styling capabilities with custom CSS classes:
Multiple Classes: Add multiple classes separated by spaces
Theme Integration: Use theme-specific classes for consistent styling
Custom Styling: Apply custom CSS rules through your theme’s stylesheet
Best Practices
Content Strategy
Semantic HTML: Choose appropriate HTML tags (p, span, div) based on content structure and meaning
Readable Typography: Ensure sufficient font sizes and line heights for easy reading
Color Contrast: Maintain adequate contrast ratios between text and background colors for accessibility
Responsive Text: Test text appearance across different screen sizes and adjust accordingly
Design Considerations
Hierarchy: Use typography variations to create clear content hierarchy
Consistency: Maintain consistent styling patterns throughout your site
Performance: Limit animation use to avoid overwhelming users or impacting performance
Loading Speed: Optimize custom fonts and avoid excessive style combinations
Accessibility Guidelines
Color Independence: Don’t rely solely on color to convey information
Focus States: Ensure hover effects don’t interfere with keyboard navigation
Screen Readers: Use appropriate HTML tags for proper screen reader interpretation
Font Legibility: Maintain readable font sizes, especially on mobile devices
Responsive Design
Device-Specific Controls
All styling options include responsive controls for optimal display:
Desktop Settings: Default styling for screens 992px and above
Tablet Settings: Specific adjustments for screens between 768px and 991px
Mobile Settings: Mobile-optimized styling for screens 767px and below
Responsive Typography
Font Scaling: Set appropriate font sizes for each device type
Line Height Adjustment: Optimize line spacing for different screen sizes
Letter Spacing: Fine-tune character spacing for various devices
Responsive Spacing
Padding Optimization: Adjust internal spacing for different screen sizes
Margin Control: Manage external spacing based on device capabilities
Border Adaptation: Modify border widths and radii for optimal mobile display
Integration and Compatibility
Theme Compatibility
The Text Block works seamlessly with most WordPress themes:
Style Inheritance: Respects theme typography while allowing customization
Color Scheme Integration: Works with theme color palettes
Responsive Framework: Adapts to theme responsive breakpoints
Performance Optimization
Efficient CSS: Generates optimized CSS for fast loading
Font Loading: Handles Google Fonts loading efficiently
Animation Performance: Uses hardware-accelerated animations where possible
The Text Block provides a comprehensive solution for creating professionally styled text content with extensive customization options, responsive design capabilities, and advanced features that enhance both visual appeal and user experience while maintaining performance and accessibility standards.