Phi Phan

<p>A simple, lightweight, accessibility-ready icon separator block.</p>
<h3>Key Features</h3>
<ul>
<li>Customize the icon width, spacing, color and position.</li>
<li>Customize the separator width, style, color and position.</li>
<li>Accessibility ready with ‘separator’ role.</li>
<li>Simple and easy to use but included full settings even with responsive width and responsive vertical margin.</li>
<li>An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.</li>
</ul>
<p>Please take a look at <a href="https://boldpatterns.net/keywords/separator?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=Icon+Separator" rel="nofollow ugc">these custom block patterns</a> that use this block to see how it can be applied to real-world sites.</p>
<p>If this plugin is useful for you, please do a quick review and <a href="https://wordpress.org/support/plugin/icon-separator/reviews/#new-post" rel="ugc">rate it</a> on WordPress.org to help us spread the word. I would very much appreciate it.</p>
<p>Please check out my other plugins if you’re interested:</p>
<ul>
<li><strong><a href="https://wordpress.org/plugins/content-blocks-builder" rel="ugc">Content Blocks Builder</a></strong> – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.</li>
<li><strong><a href="https://wordpress.org/plugins/display-a-meta-field-as-block" rel="ugc">Meta Field Block</a></strong> – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.</li>
<li><strong><a href="https://wordpress.org/plugins/svg-block" rel="ugc">SVG Block</a></strong> – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.</li>
<li><strong><a href="https://wordpress.org/plugins/breadcrumb-block" rel="ugc">Breadcrumb Block</a></strong> – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.</li>
<li><strong><a href="https://wordpress.org/plugins/block-enhancements" rel="ugc">Block Enhancements</a></strong> – Adds practical features to blocks like icons, box shadows, transforms, etc.</li>
<li><strong><a href="https://wordpress.org/plugins/counting-number-block" rel="ugc">Counting Number Block</a></strong> – A block to display numbers with a counting effect</li>
<li><strong><a href="https://wordpress.org/plugins/better-youtube-embed-block" rel="ugc">Better YouTube Embed Block</a></strong> – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.</li>
</ul>
<p>The plugin is developed using @wordpress/create-block.</p>


Icon Separator

A simple, lightweight, accessibility-ready icon separator block.

Freemius

Abu Hayat

bPlugins

Charles Cormier

asadsuzan

<p><strong>Section Separator Block</strong> is the ultimate design tool for WordPress users who want to break free from boring, flat layouts. This lightweight and high-performance Gutenberg block allows you to add professional, eye-catching section dividers that improve user engagement and site aesthetics in seconds.</p>
<p>Whether you’re building a landing page, a portfolio, or a high-converting marketing site, our separators help you guide the visitor’s eye and create a premium feel without touching a single line of code.</p>
<h3>✨ Why settle for standard dividers?</h3>
<p>Traditional dividers are static and dull. Section Separator Block brings your site to life with dynamic wave motion, scrolling marquee pills, and the unique Emoji Stack effect that makes your content pop.</p>
<p><strong><a href="https://bblockswp.com/demo/section-separator-all/" rel="nofollow ugc">See Live Demos</a></strong></p>
<h3>🚀 Key Features</h3>
<h3>🌊 Multi-Layer Wave Separators</h3>
<h4>Create beautiful, fluid transitions between sections.</h4>
<ul>
<li><strong>Layered Waves:</strong> Stack multiple wave layers with different colors and opacities.</li>
<li><strong>Custom Motion:</strong> Control speed, amplitude (height), and shape.</li>
<li><strong>Advanced Directions:</strong> Choose from Left-to-Right, Right-to-Left, Bounce, or Static.</li>
<li><strong>Vertical Flip:</strong> Easily invert waves for top or bottom placement.</li>
</ul>
<h3>💊 Animated Pill Marquee (Pro)</h3>
<h4>Highlight your features or selling points with scrolling pill labels.</h4>
<ul>
<li><strong>Infinite Marquee:</strong> Smooth, high-performance scrolling animation.</li>
<li><strong>Fully Customizable:</strong> Edit text, colors, rotation, and shadows for every single pill.</li>
<li><strong>Global Styling:</strong> Control track padding, background, and item spacing.</li>
</ul>
<h3>🌟 Playful Emoji Stacks</h3>
<h4>A unique way to separate sections using your favorite emojis.</h4>
<ul>
<li><strong>Custom Emoji Selection:</strong> Use any emoji to create a patterned stack.</li>
<li><strong>Density & Randomness:</strong> Control how tightly emojis are packed and how “scattered” they look.</li>
<li><strong>Hover Animations:</strong> Make your emojis react when users move their mouse.</li>
<li><strong>Deterministic Layout:</strong> Stays consistent across all page loads.</li>
</ul>
<h3>🎨 Bold Gradient & Patterns</h3>
<h4>Geometric designs for a modern, tech-forward look.</h4>
<ul>
<li><strong>Pattern Overlays:</strong> Add stripes or organic shapes to your gradients.</li>
<li><strong>RichText Editing:</strong> Edit item text directly inside the block editor.</li>
<li><strong>Dynamic Gradients:</strong> Combine solid colors with stunning CSS gradients.</li>
</ul>
<h3>🛠️ Icon Separator</h3>
<h4>Classic dividers with a modern twist.</h4>
<ul>
<li><strong>SVG Support:</strong> Choose from a library or use your own custom icons.</li>
<li><strong>Line Styles:</strong> Solid, Dashed, or Dotted lines with adjustable thickness.</li>
<li><strong>Smart Alignment:</strong> Perfect positioning for Left, Center, or Right layouts.</li>
</ul>
<h3>✅ Perfect For</h3>
<ul>
<li><strong>Landing Pages:</strong> Create “sticky” designs that keep users scrolling.</li>
<li><strong>Portfolios:</strong> Showcase your work with creative, modern separators.</li>
<li><strong>E-commerce:</strong> Highlight trust badges or features using the Pill Marquee.</li>
<li><strong>Blogs:</strong> Add a touch of personality to your long-form content.</li>
</ul>
<h3>💎 Free vs Pro</h3>
<h4>Free Version Includes:</h4>
<ul>
<li>Standard Wave Separator with core controls.</li>
<li>Fully featured Icon Separator (All options included!).</li>
<li>Basic Bold Gradient Separator.</li>
<li>Responsive controls for Desktop, Tablet, and Mobile.</li>
<li>Centralized management via the “Section Separator” post type.</li>
</ul>
<h4>Pro Version Unlocks:</h4>
<ul>
<li><strong>Premium Wave Presets:</strong> Ocean, Neon Glow, Fire, and Sunset.</li>
<li><strong>Animated Pill Separator:</strong> The infinite marquee effect for features.</li>
<li><strong>Advanced Wave Motion:</strong> Bounce, Invert, and custom directions.</li>
<li><strong>Complex Patterns:</strong> High-end geometric overlays for gradients.</li>
<li><strong>Priority Support:</strong> Direct help from our expert developers.</li>
</ul>
<h3>How to use</h3>
<ol>
<li>Install and activate the Section Separator plugin.</li>
<li>Open the Gutenberg editor.</li>
<li>Add the Section Separator block from the Widgets category.</li>
<li>Customize settings from the right-side block panel.</li>
<li>Enjoy beautiful section dividers 🎉</li>
</ol>
<p><strong><em>For installation help click on Installation Tab</em></strong></p>
<h3>Feedback</h3>
<p>Did you find a bug or have a feature request? <a href="mailto:support@bplugins.com" title="Send feedback" rel="nofollow ugc">Please share your feedback with us</a></p>
<h3>Check out the Parent Plugin of this plugin-</h3>
<p><a href="https://bblockswp.com" rel="nofollow ugc"><strong>B Blocks</strong></a> – A blocks collection and page building tool for Gutenberg.</p>
<h3>Check out our other WordPress Plugins-</h3>
<p><a href="https://bplugins.com/products/html5-video-player/" rel="nofollow ugc"><strong>Html5 Video Player</strong></a> – Display videos as single and playlist in multiple skins.</p>
<p><a href="https://bplugins.com/products/pdf-poster/" rel="nofollow ugc"><strong>PDF Poster</strong></a> – Display/Embed PDF files with different styles.</p>
<p><a href="https://bplugins.com/products/html5-audio-player/" rel="nofollow ugc"><strong>Html5 Audio Player</strong></a> – Listen audios with awesome visuals.</p>
<p><a href="https://bplugins.com/products/streamcast-radio-player/" rel="nofollow ugc"><strong>StreamCast</strong></a> – Customizable radio player with different skins.</p>
<p><a href="https://bplugins.com/products/3d-viewer/" rel="nofollow ugc"><strong>3D Viewer</strong></a> – Embed 3D models and 3D products with interaction.</p>
<p><a href="https://bplugins.com/products/advanced-post-block/" rel="nofollow ugc"><strong>Advanced Post Block</strong></a> – Show posts and custom posts in different layouts.</p>


Section Separator Block – Modern Waves, Icons, Pills & Emoji Stacks

Create stunning, responsive section dividers with multi-layer waves, animated pills, SVG icons & playful emoji stacks to boost conversions.

Icon Separator vs Section Separator Block – Modern Waves, Icons, Pills & Emoji Stacks