Icon Box Block

The Icon Box Block is a versatile and highly customizable component designed to showcase features, services, or key information points with compelling visual appeal. This block combines icons, text content, and optional call-to-action elements to create engaging content sections that enhance user experience and improve content presentation.

Key Features

The Icon Box Block includes an extensive set of features to meet diverse design and functionality requirements:

Icon Management: Choose from thousands of Font Awesome icons or upload custom SVG graphics with full styling control
Flexible Layouts: Multiple icon positioning options with responsive gap controls and alignment settings
Rich Content Support: Customizable titles and descriptions with independent typography controls
Interactive Elements: Optional linking capabilities for entire boxes or dedicated button elements
Advanced Styling: Comprehensive color options with normal and hover states for all elements
Border and Shadow Controls: Full border styling with custom radius and professional box shadow effects
Responsive Design: Device-specific controls for all styling and layout options
Animation Effects: Built-in entrance animations to enhance visual engagement
Visibility Controls: Show or hide blocks on specific devices for optimized responsive design
Performance Optimized: Efficient rendering with CSS generation for optimal page speed

Adding the Icon Box Block

To add an Icon Box Block to your content:

Click the “+” icon to open the block inserter
Search for “Icon Box” or navigate to the “DigiBlocks” category
Click on the “Icon Box” block to add it to your page
The block will appear with default content that you can immediately customize

The block initializes with a sample icon, placeholder title, and description text, providing a foundation for your customization.

Icon Configuration

Icon Source Selection

The Icon Box Block offers two primary methods for adding icons:

Library Icons

Access thousands of professional Font Awesome icons through an intuitive selection interface:

Browse icons by category or search by name
Preview icons before selection
View icon details including style and categories
Icons automatically scale and maintain crisp appearance

Custom SVG

Upload and use your own SVG graphics for unique branding:

Paste SVG code directly into the provided textarea
Real-time preview of custom SVG graphics
Automatic security filtering removes potentially harmful code
Full control over custom icon styling and appearance

Icon Size and Positioning

Icon Size Control

Set icon dimensions using responsive controls:

Independent sizing for desktop, tablet, and mobile devices
Range from 16px to 500px for maximum flexibility
Icons maintain aspect ratio and crisp rendering at all sizes

Icon Layout Options

Position icons relative to content using three layout modes:

Before: Icon appears to the left of content (default)
Above: Icon positioned above the content vertically
After: Icon appears to the right of content

Gap Control

Adjust spacing between icons and content:

Responsive controls for each device type
Multiple units supported (px, %, em, rem)
Precise control over visual hierarchy and spacing

Content Management

Title and Description Controls

Show/Hide Elements

Toggle visibility of title and description independently:

Show Title: Control whether the title appears
Show Description: Control whether the description text appears
Maintain consistent layouts across multiple icon boxes

Content Editing

Both title and description support rich text editing:

Title: Single-line heading with formatting options
Description: Multi-paragraph text with full rich text capabilities
Real-time editing with live preview
Placeholder text guides content creation

Typography Settings

Title Typography

Comprehensive typography controls for headings:

Font family selection from available fonts
Responsive font sizes with multiple units
Font weight options (light, normal, bold, etc.)
Font style controls (normal, italic)
Text transform options (uppercase, lowercase, capitalize)
Text decoration settings (underline, none)
Line height with responsive controls
Letter spacing for fine typography control

Content Typography

Independent typography settings for description text:

All typography options available for titles
Separate responsive controls
Default values optimized for readability
Consistent styling across different screen sizes

Link Configuration

Link Options

Enable Linking

Add interactive functionality to icon boxes:

Simple toggle to enable/disable linking
Full WordPress LinkControl integration
Support for internal and external links
SEO-friendly link attributes

Link Types

Choose between two link interaction methods:

Box Link

Make the entire icon box clickable:

Transforms entire block into a clickable area
Maintains accessibility standards
Provides larger target area for user interaction
Ideal for navigation and feature highlighting

Button Link

Add a dedicated call-to-action button:

Separate button element with custom text
Independent styling controls
Professional button appearance
Clear call-to-action functionality

Link Settings

URL Configuration

Internal page/post selection through WordPress interface
External URL support with validation
Relative and absolute URL handling
Live link preview in editor

Link Attributes

Open in new tab option for external links
Automatic noopener noreferrer for security
Custom rel attribute support
Accessibility-compliant link structure

Button Customization

When using button link type, extensive customization options are available:

Button Text

Rich text editing for button labels
Inline editing with live preview
Placeholder text for guidance
Support for special characters and formatting

Button Styling

Comprehensive visual controls for button appearance covered in the styling section below.

Styling Options

Color Management

The Icon Box Block provides sophisticated color controls with normal and hover states for all elements.

Normal State Colors

Primary color settings for default appearance:

Title Color: Text color for the heading element
Text Color: Color for description content
Background Color: Block background with alpha transparency support
Icon Color: SVG fill color for icons
Icon Background Color: Background behind icon with transparency

Hover State Colors

Interactive color changes when users hover over the block:

Title Hover Color: Title color change on hover
Text Hover Color: Description text color change
Background Hover Color: Block background color change
Icon Hover Color: Icon color change on interaction
Icon Hover Background Color: Icon background color change

All color controls support alpha transparency for sophisticated design effects.

Icon Styling

Icon Visual Properties

Comprehensive styling options for icon appearance:

Icon Size: Responsive size controls for all devices
Icon Colors: Fill color with hover state support
Background Colors: Icon background with transparency
Border Styling: Full border control with style options

Icon Border Controls

When borders are enabled:

Border Style: None, solid, dotted, dashed, double, groove, inset, outset, ridge
Border Width: Responsive dimension controls for all sides
Border Radius: Corner radius with percentage and pixel units
Border Colors: Normal and hover border colors

Icon Spacing

Precise control over icon positioning:

Padding: Internal spacing around icon with responsive controls
Margin: External spacing with dimension controls for all sides
Gap Controls: Spacing between icon and content elements

Box Styling

Border Configuration

Professional border styling for the entire block:

Border Style: Complete range of CSS border styles
Border Width: Independent control for each side with responsive settings
Border Radius: Corner radius controls with multiple units
Border Colors: Color selection with transparency support

Hover Effects

Built-in interactive effects for enhanced user engagement:

None: No hover effect (default)
Lift: Subtle upward movement on hover
Scale: Gentle scaling effect for emphasis
Glow: Brightness increase for luminous effect

Box Shadow

Professional shadow effects for depth and visual hierarchy:

Normal Shadow: Default shadow state with position, offset, blur, spread, and color controls
Hover Shadow: Alternative shadow on hover for interactive feedback
Shadow Types: Inset and outset shadow positioning
Precise Controls: Horizontal/vertical offsets, blur radius, spread radius, and color

Button Styling

When using button link type, comprehensive styling options are available:

Button Colors

Normal and hover states for complete visual control:

Text Colors: Button label colors with hover states
Background Colors: Button background with transparency and hover effects
Border Colors: Button border colors with hover state support

Button Borders

Professional button border styling:

Border Styles: All CSS border style options
Border Width: Responsive dimension controls
Border Radius: Corner radius for button shape
Hover Effects: Border color changes on interaction

Button Spacing

Precise control over button positioning and internal spacing:

Padding: Internal button spacing with responsive controls
Margin: External button positioning
Alignment: Button alignment following block alignment settings

Button Typography

Independent typography controls for button text:

Complete font family, size, weight, and style controls
Responsive font sizing
Line height and letter spacing
Text transformation and decoration options

Button Box Shadow

Professional shadow effects for buttons:

Normal and hover shadow states
Complete shadow control with position, offset, blur, spread, and color
Inset and outset shadow positioning

Responsive Controls

All styling options include responsive controls for optimal appearance across devices:

Device-Specific Settings

Desktop: Settings for screens 992px and larger
Tablet: Settings for screens 768px to 991px
Mobile: Settings for screens 767px and smaller

Responsive Typography

Font sizes adapt to screen size
Line heights optimize for readability
Letter spacing adjusts for device constraints

Responsive Spacing

Padding and margin values scale appropriately
Gap controls maintain proper spacing ratios
Border dimensions adapt to screen real estate

Advanced Features

Animation Effects

Add professional entrance animations to enhance visual appeal:

Available Animations

Comprehensive animation library includes:

Fade Effects: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
Slide Effects: slideInUp, slideInDown, slideInLeft, slideInRight
Zoom Effects: zoomIn, zoomInUp, zoomInDown
Bounce Effects: bounceIn, bounceInUp, bounceInDown
Rotation Effects: rotateIn, rotateInDownLeft, rotateInDownRight

Animation Preview

Live preview button for testing animations in the editor
Animations trigger when blocks enter the viewport
Smooth, performance-optimized transitions
CSS-based animations for optimal performance

Visibility Controls

Control block visibility across different device types:

Device-Specific Visibility

Hide on Desktop: Hide block on desktop screens (992px+)
Hide on Tablet: Hide block on tablet screens (768px-991px)
Hide on Mobile: Hide block on mobile screens (767px and below)

Editor Behavior

Hidden elements appear with reduced opacity in the editor
Complete visibility control on the frontend
Easy identification of hidden elements during editing

HTML and CSS Customization

HTML Anchor

Create unique anchor links for direct section linking:

Custom anchor ID for the block
Enable direct linking to specific page sections
SEO-friendly URL fragments
Accessibility-compliant anchor implementation

Additional CSS Classes

Extend styling capabilities with custom CSS:

Add multiple CSS classes separated by spaces
Integration with theme styles
Custom styling flexibility
Developer-friendly customization options

Layout and Alignment

Block Alignment

Control the overall alignment of the icon box:

Alignment Options

Left: Left-align content with icons positioned accordingly
Center: Center-align all content for balanced presentation
Right: Right-align content for alternative layouts

Responsive Alignment

Independent alignment settings for each device type
Maintain design consistency across screen sizes
Optimize layouts for different viewing contexts

Icon Layout Positioning

Control icon positioning relative to content:

Layout Modes

Before: Icon appears before content (left side in LTR languages)
Above: Icon positioned above content for vertical layouts
After: Icon appears after content (right side in LTR languages)

Layout Responsiveness

Different layouts can be set for different devices
Optimize icon positioning for screen constraints
Maintain visual hierarchy across breakpoints

Best Practices

Content Creation

Effective Icon Selection

Choose icons that clearly represent the content or feature
Maintain consistent icon style across multiple icon boxes
Consider cultural context and universal recognition
Ensure icons remain legible at smaller sizes

Content Writing

Keep titles concise and descriptive
Write clear, benefit-focused descriptions
Use consistent tone and voice across multiple blocks
Consider character limits for mobile display

Visual Hierarchy

Use typography settings to establish clear hierarchy
Maintain sufficient contrast for accessibility
Consider color psychology in color selection
Balance visual weight across multiple icon boxes

Design Consistency

Color Schemes

Establish consistent color palettes across icon boxes
Use hover effects consistently throughout the site
Consider brand colors and accessibility requirements
Test color combinations for sufficient contrast

Spacing and Layout

Maintain consistent spacing between related icon boxes
Use consistent icon sizes within grouped displays
Align multiple icon boxes for professional appearance
Consider white space for improved readability

Typography Coordination

Use consistent font families across icon boxes
Establish hierarchy with font sizes and weights
Maintain consistent line heights for aligned baselines
Consider reading patterns and text flow

Accessibility Considerations

Color and Contrast

Ensure sufficient color contrast for text readability
Don’t rely solely on color to convey information
Test with accessibility tools and real users
Provide alternative indicators for colorblind users

Link Accessibility

Use descriptive link text when using button links
Ensure adequate touch targets for mobile users
Provide clear indication of link destinations
Test with screen readers and keyboard navigation

Content Structure

Use appropriate heading levels for title elements
Ensure logical content flow and hierarchy
Provide meaningful alt text for custom SVG icons
Test with assistive technologies

Performance Optimization

Icon Management

SVG Optimization

Optimize custom SVG files before use
Remove unnecessary code and comments
Use appropriate icon sizes for context
Consider icon loading and display performance