Section Divider Bae
Connect Section Divider Bae, an SVG section divider app, with Webflow to add visual separation between page sections without custom code.
How to integrate Section Divider Bae with Webflow
The only way to integrate Section Divider Bae is by installing the Section Divider Bae app from the Webflow Marketplace. Once installed, you add dividers directly in the Designer interface and customize them using built-in controls — no custom code required.
Use the Section Divider Bae app
Install Section Divider Bae from the Webflow Apps Marketplace to add SVG dividers between sections. The app provides point-and-click controls for six pre-designed shapes with customization options for height, color, and orientation.
Setup process:
- Search for "Section Divider Bae" in the Webflow Designer's Apps panel
- Click Install and authorize the connection
- Insert dividers into your sections through the Designer
- Customize height, color, and orientation using the app controls
- Publish your site to see the dividers live
The app supports these capabilities:
- Six SVG shapes: wave, curve, diagonal, sawtooth, hex wave, and square wave
- Visual controls for height, color, and orientation
- Automatic positioning configuration
- Additional CSS styling through Webflow's native style panel
⚠️ Important: Section Divider Bae applies position: absolute to dividers and automatically sets parent containers to position: relative. This may break existing layouts depending on your positioning context and create z-index conflicts. Test in a staging environment before production deployment.
What you can build
Integrate Section Divider Bae with Webflow to add visual separation between page sections. Test these patterns in staging environments before production deployment.
- Portfolio sites with section transitions: Insert wave or curve dividers between project showcases, about sections, and contact areas with color-matched SVG shapes.
- Landing pages with content separation: Apply diagonal or sawtooth dividers to separate hero sections from feature lists and testimonials.
- Content marketing sites: Add hex wave or square wave dividers between blog sections, resource libraries, and conversion areas.
- E-commerce category pages: Use curve dividers between product collections and promotional banners as an alternative to whitespace-based separation.
Frequently asked questions
Section Divider Bae provides controls for height, color, and orientation through the Webflow Designer interface. Choose from six SVG shapes and adjust visual properties after insertion. The app creates Webflow styles that you can further customize using the Designer's native style panel for opacity, filters, or transforms.
You can choose from six SVG shapes and customize height, color, and orientation, and then further refine the element using Webflow’s Style panel (e.g., sizing, spacing, effects).
No. The app adds native elements and classes to your Webflow project and is controlled entirely through the Designer interface — no custom code or external embeds are required.
It can, in some cases, because absolute-positioned elements are removed from normal document flow, and the parent’s position change can affect stacking and spacing. Always test on a staging copy before going live.
Description
Section Divider Bae is a native Webflow app that generates SVG section dividers. Created by Web Bae (Keegan Leary), it provides six shape options (wave, curve, diagonal, sawtooth, hex wave, square wave) with controls for height, color, and orientation through the Webflow Designer.
This integration page is provided for informational and convenience purposes only.
Clip Path Bae
Connect Clip Path Bae, a CSS clip-path tool, with Webflow to create custom geometric shapes directly in the Designer without writing code.
Webflow Sort
Connect Webflow Sort (Finsweet Attributes) with Webflow to add client-side sorting functionality to Collection Lists, letting visitors reorder content by dates, prices, names, or custom values.
UI Web Kit
Connect UI Web Kit components with Webflow to build consistent design systems and component libraries.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
