The Separator Block is a versatile divider component designed to create visual breaks and section divisions in your WordPress content. This block offers an extensive collection of separator styles, content integration options, and comprehensive customization controls to help you create professional visual separators that enhance your page layout and user experience.
Key Features
The Separator Block includes a robust set of features to meet all your content division needs:
Multiple Separator Styles: Choose from Line, Dashed, Dotted, Double, Gradient, Shadow, Wave, Zigzag, and Slant designs
Content Integration: Add text or icons to compatible separator styles for enhanced visual appeal
Visual Style Selector: Interactive grid-based style picker with live previews of each separator type
Typography Controls: Complete text styling options when using text content
Icon Integration: FontAwesome icon support with sizing and color controls
Color Customization: Primary and secondary color options with transparency support
Responsive Design: Device-specific controls for all styling properties
Animation Effects: Choose from various entrance animations to make separators more engaging
Alignment Controls: Left, center, and right alignment options for precise positioning
Dimension Controls: Width, height, border radius, and spacing customization
Visibility Management: Hide separators on specific devices when needed
Adding the Separator Block
To add a Separator Block to your page:
- Click the “+” icon to open the block inserter
- Search for “Separator” or navigate to the “DigiBlocks” category
- Click on the “Separator” block to add it to your page
- The block will appear with a default line separator that you can customize
Separator Styles
The Separator Block offers nine distinct visual styles to match your design requirements:
Line Style
A clean, solid line separator with customizable thickness and color. This is the default style and works well for most content divisions. Supports border radius for rounded edges and works with both text and icon content.
Dashed Style
Creates a dashed line separator using CSS borders. The dash pattern automatically adjusts based on the separator’s dimensions. This style provides a subtle, less prominent division perfect for soft content breaks.
Dotted Style
Generates a dotted line separator with evenly spaced dots. The dot density and size automatically scale with the separator dimensions, creating a delicate visual break that doesn’t overpower surrounding content.
Double Style
Features two parallel lines with automatic spacing calculation based on the separator height. This style creates a more prominent visual division, ideal for major section breaks or chapter divisions.
Gradient Style
Creates a smooth color transition from transparent to your primary color and back to transparent (or to a secondary color). This style is perfect for creating elegant, modern separators that blend seamlessly with your design.
Shadow Style
A solid line separator enhanced with a drop shadow effect. The shadow automatically scales with the separator dimensions, adding depth and visual interest to create a floating appearance.
Wave Style
Generates an SVG-based wave pattern that creates organic, flowing divisions. This style is perfect for creative designs, beach-themed content, or any layout requiring natural, curved elements.
Zigzag Style
Creates a sharp, angular zigzag pattern using SVG technology. This dynamic style adds energy and movement to your page layout, ideal for modern designs or content requiring bold visual breaks.
Slant Style
Produces a diagonal, slanted separator that creates dynamic angles in your layout. This contemporary style works excellently for modern designs and helps create visual flow between sections.
Content Options
The Separator Block supports three content types to enhance your separators beyond simple lines:
None
The default option creates a pure separator without any additional content. This provides clean, unobstructed visual divisions perfect for most content separation needs.
Text Content
Add custom text to compatible separator styles (Line, Dashed, Dotted, Double, Gradient, and Shadow). The text appears centered on the separator with the line extending on both sides. This option includes:
- Custom Text Input: Add any text content you want to display
- Typography Controls: Complete font styling including family, size, weight, style, and spacing
- Color Controls: Independent text color selection
- Gap Controls: Adjust spacing around the text content
Icon Content
Integrate FontAwesome icons into compatible separator styles. Icons appear centered on the separator with configurable sizing and coloring options. This option includes:
- Icon Selection: Choose from thousands of FontAwesome icons
- Size Controls: Responsive icon sizing for all devices
- Color Controls: Custom icon coloring independent of separator color
- Gap Controls: Adjust spacing around the icon
Note: Wave, Zigzag, and Slant styles don’t support text or icon content due to their complex SVG-based designs.
Styling Options
Color Controls
The Separator Block provides comprehensive color customization:
Primary Color: The main color for all separator styles. This color defines the separator’s appearance and is used consistently across all style types.
Secondary Color: Available only for Gradient style separators. This color creates the gradient transition effect, allowing for complex color blending.
Text/Icon Color: When using text or icon content, this setting controls the color of your content independently from the separator color.
All color controls support transparency (alpha channel) for creating subtle, blended effects that integrate seamlessly with your design.
Dimension Controls
Customize separator dimensions with responsive controls:
Width Settings:
- Pixel Units: Absolute width control from 1px to 1000px
- Percentage Units: Relative width from 1% to 100% of container
- Responsive Controls: Set different widths for desktop, tablet, and mobile devices
Height Settings:
- Pixel Units: Absolute height control from 1px to 100px
- Percentage Units: Relative height from 1% to 20% for special effects
- Responsive Controls: Device-specific height adjustments
Border Radius: Available for Line, Gradient, and Shadow styles. Control corner rounding from 0px to 50px with responsive settings for creating pill-shaped or rounded separators.
Typography Controls
When using text content, access complete typography customization:
Font Family: Choose from available system and Google Fonts
Font Size: Responsive font sizing with pixel, em, rem, and percentage units
Font Weight: Control text weight from light to bold
Font Style: Apply italic or normal styling
Text Transform: Use uppercase, lowercase, capitalize, or none
Text Decoration: Add underlines or other text decorations
Line Height: Control vertical spacing with em, pixel, or unitless values
Letter Spacing: Adjust character spacing for improved readability
All typography settings include responsive controls for optimal display across all devices.
Spacing Controls
Margin Controls: Set top and bottom margins independently with responsive settings. Default margins are 30px top and bottom, but can be adjusted from 0px to 200px for each side.
Gap Controls: When using text or icon content, control the spacing around your content. This determines how much space appears between the content and the separator line on each side.
Icon Size: For icon content, control the icon dimensions from 8px to 100px with responsive settings for optimal display on all devices.
Alignment and Positioning
Alignment Options
Control separator alignment using the block toolbar:
Left Alignment: Separator starts from the left edge of its container. Content and separators align to the left side.
Center Alignment: Separator centers within its container. This is the default alignment and works well for most layouts.
Right Alignment: Separator aligns to the right edge of its container. Useful for specific design requirements or RTL layouts.
Responsive Behavior
All alignment and sizing controls include responsive options:
- Desktop: Settings for screens 992px and wider
- Tablet: Settings for screens 768px to 991px wide
- Mobile: Settings for screens 767px and narrower
Advanced Features
Animation Effects
Add entrance animations to make your separators more engaging:
Available Animation Types:
- 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 before publishing.
Visibility Controls
Control separator display across different devices:
Hide on Desktop: Hide the separator on desktop screens (992px and up)
Hide on Tablet: Hide the separator on tablet screens (768px to 991px)
Hide on Mobile: Hide the separator on mobile screens (767px and below)
Hidden elements appear with reduced opacity in the editor for easy editing while being completely hidden on the frontend.
HTML and CSS Customization
HTML Anchor: Create a unique anchor link for the separator to enable direct linking to this section of your page.
Additional CSS Classes: Add custom CSS classes for advanced styling or integration with custom themes and plugins.
Best Practices
Content Organization
Choose appropriate styles: Match separator styles to your overall design aesthetic. Use subtle styles like dashed or dotted for gentle content breaks, and bold styles like double or shadow for major section divisions.
Content consideration: When adding text or icons, ensure they enhance rather than distract from your content flow.
Consistent styling: Maintain consistent separator styles throughout your site for cohesive design.
Design Considerations
Color harmony: Choose separator colors that complement your site’s color scheme. Use transparency for subtle effects.
Responsive sizing: Test your separators on different screen sizes to ensure they maintain visual balance across devices.
Performance optimization: While animations add visual interest, use them sparingly to maintain good page performance.
Accessibility
Color contrast: Ensure separator colors have sufficient contrast with background colors for visibility.
Semantic structure: Use separators to reinforce content hierarchy rather than creating it.
Screen reader considerations: Remember that purely decorative separators may not be meaningful to screen reader users.
Layout Integration
Container Considerations
Separators work within their container’s width constraints. Consider the following:
- Full-width layouts: Use percentage widths for separators that should span the entire container
- Constrained layouts: Use pixel widths for precise control in fixed-width designs
- Responsive layouts: Set different widths for different screen sizes to maintain visual balance
Section Breaks
Major sections: Use prominent styles like double, shadow, or gradient separators
Minor sections: Use subtle styles like dashed, dotted, or thin line separators
Thematic breaks: Use decorative styles like wave or zigzag for creative content or themed pages
Content Flow
Position separators to enhance content flow:
- Between different topics or themes
- Before and after important announcements
- To break up long content sections
- To create visual breathing space in dense layouts
Troubleshooting
Common Issues
Separator not visible: Check color contrast with background and ensure height is sufficient
Content overlapping: Adjust gap settings around text or icon content
Responsive issues: Review device-specific settings and test on actual devices
Animation problems: Ensure JavaScript is enabled and no conflicts exist with other plugins
Performance Considerations
SVG styles: Wave, zigzag, and slant styles use SVG, which may impact performance with many instances
Animation usage: Limit animated separators to key sections to maintain page speed
Image optimization: If using custom backgrounds, ensure images are optimized
The Separator Block provides a comprehensive solution for creating professional, customizable content divisions that enhance your site’s visual hierarchy and user experience while maintaining performance and accessibility standards.