Section Separator Block – add stylish dividers between page sections vs Wavy Divider

Break free from boring, flat layouts – add professional, eye-catching section dividers that guide the visitor’s eye and give your site a premium feel, no code required. See Live Demos Why Section Separator Block? Traditional dividers are static and dull. Section Separator Block brings your site to life with dynamic wave motion, scrolling marquee pills, geometric gradients, and the unique Emoji Stack effect that makes your content pop. This lightweight, high-performance Gutenberg block lets you add stunning separators between sections in seconds. Whether you’re building a landing page, a portfolio, or a high-converting marketing site, every separator type comes with responsive controls for desktop, tablet, and mobile. Free Features Multi-Layer Wave Separator: Stack wave layers with different colors and opacities, control speed and amplitude, and flip waves vertically for top or bottom placement. Icon Separator (fully featured): Classic dividers with SVG support – choose from a library or paste your own custom icons, with solid, dashed, or dotted lines, adjustable thickness, and left/center/right alignment. Emoji Stack Separator: Use any emoji to create a patterned stack with density, randomness, and hover animation controls – layout stays consistent across page loads. Bold Gradient Separator (basic): Combine solid colors with CSS gradients and edit item text directly in the editor with RichText. Responsive Controls: Fine-tune every separator for desktop, tablet, and mobile. Centralized Management: Manage all separators via the “Section Separator” post type. Pro Version Premium Wave Presets: Ocean, Neon Glow, Fire, and Sunset. Animated Pill Separator: Infinite marquee of scrolling pill labels – edit text, colors, rotation, and shadows for every pill, plus global track padding, background, and spacing controls. Advanced Wave Motion: Bounce, Invert, and custom directions (Left-to-Right, Right-to-Left, Static). Complex Patterns: High-end geometric overlays for gradients – stripes and organic shapes. Priority Support: Direct help from our expert developers. How to Use – Quick Start Install and activate the Section Separator plugin. Open the Gutenberg editor. Add the Section Separator block from the Widgets category. Customize settings from the right-side block panel. Enjoy beautiful section dividers! Use Cases Landing Pages: Create “sticky” designs that keep users scrolling. Portfolios: Showcase your work with creative, modern separators. E-commerce: Highlight trust badges or features using the Pill Marquee. Blogs: Add a touch of personality to your long-form content. Did you find a bug or have a feature request? Please share your feedback with us Check Out the Parent Plugin B Blocks – A blocks collection and page building tool for Gutenberg. Check Out Our Other WordPress Plugins Html5 Video Player – Display videos as single and playlist in multiple skins. PDF Poster – Display/Embed PDF files with different styles. Html5 Audio Player – Listen audios with awesome visuals. StreamCast – Customizable radio player with different skins. 3D Viewer – Embed 3D models and 3D products with interaction. Advanced Post Block – Show posts and custom posts in different layouts.

Generate and add a simple wavy divider to anywhere on your page, giving you the ability to separate blocks of content with an impressive, professional-looking design element. Follow @kevinbatdorf on Twitter View on GitHub Features Color settings, including opacity. Choose between wide, normal, and full width Choose between rounded edges and stright lines Fine tune curves and lines with built-in controls Supports top or bottom shapes Stack multiple dividers with group block (see below) Gradients – easy to use (see below) Control height, number of points, and direction Use a single, smooth point to give you a curved divider Gradients To use a gradient, you need to wrap the wavy divider in a group block and apply the gradient to the group block. After that, create a wavy shape and apply a color that matches your content background (e.g. white). You can then switch the direction of the divider (under settings) to give a mirrored effect. This way the gradient is applied to the group block and the wavy divider acts as a mask. Group Block If nesting the wavy divider in a group block, you may want to remove the padding and margins so that the wavy divider will not have spacing around it. To handle this, select the group block, and under “Advanced” (at the bottom of the settings area) add these two classes: wavy-divider-remove-margin wavy-divider-remove-padding Patterns Within the block inserter, under the Patterns tab, select ‘Wavy Divider’ from the dropdown menu to view some example patterns.