Ciprian Popescu

<p>Modern Design Library is a toolkit of opinionated Gutenberg blocks for WordPress. All optional blocks are registered using PHP-only block registration (<code>autoRegister</code>) — no JavaScript build step or Node.js tooling required.</p>
<p>The plugin ships with:</p>
<ul>
<li><strong>Colored Line</strong> — a fully customisable horizontal separator block with striped, shade, and dotted style variants (classic JS-registered block).</li>
<li><strong>Advanced Separator</strong> <em>(experimental)</em> — a PHP-only separator with configurable width, height, padding, alignment, and three decorative variants.</li>
<li><strong>Advanced Heading</strong> <em>(experimental)</em> — 13 decorative heading styles, heading level selector (H1–H6), optional tagline, and full typography/spacing/border block support controls. Accent decorations automatically follow the text colour.</li>
<li><strong>Marquee</strong> <em>(experimental)</em> — a single infinitely scrolling text row. Stack multiple blocks for multi-row layouts. Speed (Slow/Medium/Fast) and direction (Left/Right) are configurable. Animation script is loaded lazily — only on pages containing the block.</li>
<li><strong>Call to Action</strong> <em>(experimental)</em> — a CTA banner with heading, subheading, button label/URL, three visual variants (Primary/Secondary/Dark), and native colour overrides.</li>
<li><strong>Author Box</strong> <em>(experimental)</em> — displays a user card with avatar, bio, email, and LinkedIn link. User is selected from a dropdown. LinkedIn URL is stored as user meta (set on the user’s profile page).</li>
</ul>
<p>Optional blocks are enabled from <strong>Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Modern Design Library <span aria-hidden="true" class="wp-exclude-emoji">→</span> Modules</strong>.</p>
<p>The optional blocks require the <strong>Gutenberg plugin</strong> or <strong>WordPress 7.0+</strong> for the <code>autoRegister</code> block support.</p>
<p>Read more on <a href="https://getbutterfly.com/wordpress-plugins/modern-design-library-ui/" rel="nofollow ugc">getButterfly</a>.</p>
<p>For a deep dive into how the PHP-only blocks work, read <a href="https://getbutterfly.com/php-only-block-registration-in-wordpress/" rel="nofollow ugc">PHP-Only Block Registration in WordPress 7.0</a>.</p>


Modern Design Library

A Modern Design Library toolkit for blocks: separators, headings, marquees, call-to-action banners, and author boxes.

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.

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