The Social Icons Block is a comprehensive and flexible component designed to help you add professional social media links and contact information to your WordPress site. This block offers extensive customization options, multiple layout styles, responsive design controls, and supports all major social media platforms with beautiful icons and interactive functionality.
Key Features
The Social Icons Block includes a comprehensive set of features to meet all your social media integration needs:
Multiple Social Networks: Support for Facebook, Twitter, LinkedIn, Instagram, Pinterest, YouTube, Dribbble, GitHub, Behance, Vimeo, TikTok, Email, and Website links
Flexible Label Options: Show or hide labels with customizable positioning (top, right, bottom, left)
Advanced Styling: Independent styling for normal and hover states with colors, backgrounds, and borders
Icon Customization: Responsive icon sizing, spacing controls, and shape customization
Typography Controls: Complete typography settings for labels including font family, size, weight, and spacing
Interactive Editor: Intuitive popover interfaces for easy icon management and URL configuration
Animation Effects: Choose from various entrance animations to enhance user engagement
Responsive Design: Fully responsive with device-specific controls for optimal display
Link Management: Configure URLs, labels, target behavior, and rel attributes for each social icon
Accessibility Ready: Built with accessibility standards including proper ARIA labels and keyboard navigation
Adding the Social Icons Block
To add a Social Icons Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Social Icons” or navigate to the “DigiBlocks” category
- Click on the “Social Icons” block to add it to your page
- The block will appear with a default Facebook icon that you can customize
Managing Social Icons
Adding New Icons
The Social Icons Block starts with one default icon, but you can easily add more:
- Add Icon Button: Click the “+” button that appears after your existing icons
- Select Network: Choose from the available social networks in the popup
- Configure URL: A popup will automatically appear to set the URL and other options
- Repeat: Add as many icons as needed for your social media presence
Configuring Individual Icons
Each social icon can be fully customized through an intuitive popup interface:
Social Network Selection:
- Choose from 13 predefined networks including major platforms
- Each network comes with its official icon and default styling
- Switch between networks while maintaining your URL and label settings
URL Configuration:
- Set the destination URL for each social icon
- Automatic placeholder suggestions based on the selected network
- Support for various URL formats (https://, mailto:, tel:, etc.)
Label Management:
- Add custom labels that appear alongside icons
- Labels can be positioned above, below, left, or right of icons
- Typography controls for label appearance
Link Behavior:
- Open in New Tab: Control whether links open in the same window or new tab
- Rel Attribute: Add SEO and security attributes like “nofollow”, “sponsored”, or “noopener”
- Custom Attributes: Full control over link behavior and properties
Removing and Reordering Icons
Removing Icons:
- Hover over any icon in the editor to reveal the remove button
- Click the “×” button to delete unwanted icons
- The block maintains at least one icon to prevent empty states
Reordering Icons:
- Icons appear in the order they were added
- Remove and re-add icons to change their order
- Future updates will include drag-and-drop reordering
Layout Configuration
Alignment Options
Control how your social icons are positioned within their container:
Left Alignment: Icons align to the left side of the container, perfect for sidebar widgets or left-aligned content sections
Center Alignment: Icons center within their container, ideal for headers, footers, or standalone social media sections
Right Alignment: Icons align to the right, suitable for author boxes or complementary content areas
Label Display and Positioning
Show/Hide Labels:
- Toggle label visibility based on your design needs
- Labels provide additional context and accessibility benefits
- Hidden labels still maintain accessibility through ARIA attributes
Label Positioning:
- Bottom: Labels appear below icons (default) – most common layout
- Right: Labels appear to the right of icons – horizontal layout
- Left: Labels appear to the left of icons – reverse horizontal layout
- Top: Labels appear above icons – inverted vertical layout
Spacing Controls
Icon Spacing:
- Control the gap between individual social icons
- Responsive controls for different device sizes
- Range from 0px to 100px for precise control
Label Spacing:
- Adjust the distance between icons and their labels
- Independent control from icon spacing
- Maintains visual hierarchy and readability
Styling Options
Color Configuration
The Social Icons Block provides comprehensive color controls with separate settings for normal and hover states:
Normal State Colors:
- Icon Color: Primary color for the social icon symbols
- Background Color: Background color for icon containers
- Border Color: Color for icon borders when border style is applied
- Label Color: Text color for social media labels
Hover State Colors:
- Icon Hover Color: Color when users hover over icons
- Hover Background: Background color change on hover
- Hover Border Color: Border color change on hover
- Label Hover Color: Label text color on hover
Size and Shape Controls
Icon Sizing:
- Responsive size controls from 0px to 100px
- Independent sizing for desktop, tablet, and mobile devices
- Icons scale proportionally while maintaining crisp appearance
Border Styling:
- Border Style: Choose from None, Solid, Dotted, Dashed, or Double
- Border Width: Control thickness on all sides with responsive settings
- Border Radius: Create rounded corners or circular icons
- Border Colors: Normal and hover state color options
Padding Controls:
- Add internal spacing within icon containers
- Responsive padding controls for each device type
- Helps create better visual balance and touch targets
Typography Settings
When labels are enabled, comprehensive typography controls are available:
Font Properties:
- Font Family: Choose from available system and Google Fonts
- Font Size: Responsive sizing with pixel, em, or rem units
- Font Weight: Control text weight from light to bold
- Font Style: Apply italic or normal styling
Text Formatting:
- Text Transform: Uppercase, lowercase, or capitalize options
- Text Decoration: Add underlines or other decorations
- Line Height: Control vertical spacing between lines
- Letter Spacing: Adjust character spacing for visual effect
Advanced Features
Animation Effects
Add visual interest with entrance animations:
Available Animations:
- 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:
- Use the preview button in the editor to test animations
- Animations trigger when the block enters the viewport
- Smooth, CSS-based animations for optimal performance
Responsive Design
All styling options include responsive controls for optimal display across devices:
Device-Specific Settings:
- Desktop: Controls for screens 992px and wider
- Tablet: Controls for screens 768px to 991px
- Mobile: Controls for screens 767px and narrower
Responsive Features:
- Icon sizing adapts to screen size
- Spacing adjusts for touch interfaces
- Typography scales appropriately
- Layout maintains usability across devices
Visibility Controls
Control when and where your social icons appear:
Device Visibility:
- Hide on Desktop: Hide icons on large screens
- Hide on Tablet: Hide icons on medium screens
- Hide on Mobile: Hide icons on small screens
Editor Behavior:
- Hidden elements appear with reduced opacity in the editor
- Full visibility controls only affect the frontend
- Easy identification of hidden elements during editing
HTML and CSS Customization
HTML Anchor:
- Create unique anchors for deep linking
- Enable users to link directly to your social icons section
- Useful for single-page sites and navigation menus
Custom CSS Classes:
- Add custom CSS classes for advanced styling
- Integrate with theme styles and custom CSS
- Multiple classes supported with space separation
Supported Social Networks
The Social Icons Block includes built-in support for major social media platforms:
Social Media Platforms
Facebook: Standard Facebook profile or page links with official branding
Twitter: Support for Twitter/X profiles with updated iconography
LinkedIn: Professional networking profiles and company pages
Instagram: Photo and video sharing platform integration
Pinterest: Visual discovery and inspiration platform
YouTube: Video platform with channel and video linking
TikTok: Short-form video platform with profile integration
Professional Networks
GitHub: Developer portfolios and project repositories
Dribbble: Design portfolio and creative community
Behance: Adobe’s creative platform for showcasing work
Vimeo: Professional video hosting and portfolio platform
Contact Options
Email: Direct email links with mailto: functionality
Website: General website links with custom icons
Each network includes:
- Official brand-accurate icons
- Appropriate placeholder URLs
- Default labels matching platform names
- Optimized icon designs for all sizes
Best Practices
Content Organization
Strategic Selection: Choose social networks where you actively maintain a presence to avoid dead links
Consistent Branding: Maintain consistent visual styling across all social icons for brand cohesion
Logical Ordering: Place most important or frequently used social networks first
Contact Priority: Position email or contact forms prominently if those are primary communication channels
Design Considerations
Visual Hierarchy: Use sizing and spacing to create clear visual relationships
Color Harmony: Choose colors that complement your site’s overall color scheme
Contrast Requirements: Ensure sufficient contrast between icons and backgrounds for accessibility
Touch Targets: On mobile devices, ensure icons are large enough for comfortable tapping (minimum 44px)
Performance Optimization
Icon Efficiency: Built-in SVG icons load faster than external image files
Minimal Animations: Use animations sparingly to avoid overwhelming users
Responsive Loading: Icons adapt to device capabilities and screen sizes
Caching Friendly: CSS-based styling enables better browser caching
SEO and Accessibility
Meaningful Labels: Use descriptive labels that clearly identify each platform
Proper Link Attributes: Use appropriate rel attributes like “nofollow” for external social links
Alternative Text: Labels provide context for screen readers and accessibility tools
Keyboard Navigation: Ensure all icons are accessible via keyboard navigation
Common Use Cases
Website Headers
Place social icons in header areas for immediate visibility:
- Use smaller icon sizes (16-20px) to avoid overwhelming navigation
- Center alignment works well in most header layouts
- Consider hiding labels in headers to save space
Footer Sections
Social icons are common in website footers:
- Larger icons (24-32px) work well in footer contexts
- Left or center alignment depending on footer layout
- Labels can provide additional context in footer areas
Author Boxes
Include social icons in author biography sections:
- Medium-sized icons (20-24px) balance well with text content
- Right alignment complements author information
- Professional networks (LinkedIn, GitHub) often most relevant
Contact Pages
Comprehensive social presence on dedicated contact pages:
- Larger icons (32-40px) for emphasis and easy interaction
- Center alignment creates focal points
- Include all relevant platforms and contact methods
Sidebar Widgets
Compact social icons for sidebar areas:
- Smaller icons (16-20px) fit sidebar constraints
- Vertical stacking may work better than horizontal layouts
- Consider icon-only display to save space
Troubleshooting
Icons Not Displaying
Missing Icons: Verify that social network selection is complete and valid
Theme Conflicts: Check for theme CSS that might be hiding or overriding icon styles
Plugin Conflicts: Deactivate other plugins to identify potential conflicts
Browser Cache: Clear browser and site caches after making changes
Styling Issues
Color Not Applying: Ensure color values are properly set and not overridden by theme styles
Size Problems: Check responsive settings and verify pixel values are reasonable
Spacing Issues: Review spacing controls and ensure values work across devices
Border Display: Confirm border style is set to something other than “none”
Link Functionality
URLs Not Working: Verify URL format includes proper protocol (https://)
New Tab Issues: Check “Open in new tab” setting in link configuration
Email Links: Ensure email addresses use proper mailto: format
Relative Links: Use absolute URLs for external social media platforms
Responsive Display
Mobile Sizing: Check mobile-specific settings if icons appear too large or small
Tablet Layout: Verify tablet breakpoint settings align with your theme
Desktop Spacing: Ensure spacing values work well on larger screens
Visibility Issues: Review device visibility settings if icons disappear unexpectedly
Performance Concerns
Loading Speed: Large icon sizes or excessive animations can impact performance
Animation Lag: Reduce animation complexity if experiencing performance issues
CSS Conflicts: Check for conflicting CSS that might cause rendering issues
Network Loading: Verify social platform links load quickly and reliably
The Social Icons Block provides a comprehensive solution for adding professional social media integration to your WordPress site. With extensive customization options, responsive design capabilities, and accessibility features, it enables you to create engaging social media connections that enhance user experience while maintaining optimal performance and SEO benefits.