Section Divider Bae

Webflow has no native shape or divider element. The Add panel groups elements under Layout, Basic, Typography, CMS, Media, Forms, and Components, and a wave or a diagonal is not among them. An angled transition between two sections comes down to one of two routes: upload an SVG and drop it into an Image element, or paste inline SVG markup into a Code Embed. Both work. Both leave you owning the file and the positioning every time a brand color moves or a section changes height.

Section Divider Bae handles that from inside Webflow instead. Pick one of six preset shapes, set its height and color, choose an orientation, and the app writes the divider onto the canvas with a real Webflow style attached. There is no asset to upload and no snippet to maintain afterwards.

The app suits freelance designers and no-code builders shipping marketing sites, portfolios, and landing pages where shaped section breaks are a visual decision rather than an engineering one. It also suits anyone maintaining a site full of hand-built dividers that misbehave at odd viewport widths.

How to integrate Section Divider Bae with Webflow

What is Section Divider Bae? Section Divider Bae is a free Webflow app built by Keegan Leary, who publishes as Web Bae. It generates SVG section dividers in six preset shapes: Wave, Curve, Diagonal, Hex Wave, Sawtooth, and Square Wave. It carries the Approved by Webflow review badge and requests two capabilities on install, access to site data and a Designer workflow, which is why it can place and style elements on the canvas directly.

Reach for it when a hand-built divider starts costing you time. An SVG exported from a design tool can look clean on desktop and show a hairline seam at a viewport width nobody tested, and patching that per breakpoint is work that never quite ends.

Installing from the Webflow Marketplace is the only documented integration path. Two standard Webflow reuse workflows layer on top of it. The Section Divider Bae app inserts and customizes dividers on the canvas with no code, and cloning and copy-paste let you start from the official demo project or carry a divider you already configured into another site.

Install the Section Divider Bae app

The app is free on the Webflow Marketplace and its listing names no plan requirement, so a Starter site can run it. Install it from the listing itself or from the Apps panel inside Webflow, then launch it and work from its panel next to the canvas.

To set the integration up:

1. Open the Marketplace listing and click Add to site, or search the app from the Apps panel and click Install on site.
2. Select the Workspace or site you want the app on, then click Authorize app.
3. Open the Apps panel, hover the app, and click Launch.
4. Select the section that should hold the divider.
5. Create the divider from the app panel, then pick a shape and set its height, color, and orientation.
6. Publish the site.

Everything the app exposes is a visual control rather than a code field:

• Six preset shapes: Wave, Curve, Diagonal, Hex Wave, Sawtooth, and Square Wave cover the common section-break geometries without a trip to a design tool.
• Height, color, and orientation: Each divider is configured from the app panel, and flipping orientation reuses the same shape at the top and bottom of a section.
• Automatic positioning: The app applies absolute positioning to the divider and sets the parent to relative if it is not already, so the shape sits flush against the section edge.
• Post-insertion editing: The divider carries a real Webflow class, so you can keep styling it from the Style panel exactly like any other element.

That automatic positioning is the one thing to watch. Changing a parent's positioning context can shift siblings that were relying on static flow and can create stacking conflicts with anything already layered over the section, so add the first divider on a staging site and walk every breakpoint before you publish. Worth knowing for later: per the Webflow Apps overview, dividers the app has already placed stay on your site if you revoke its access, because they are ordinary elements rather than injected code.

Clone the demo project or copy dividers between sites

Because dividers are ordinary elements with ordinary classes, they move around the way anything else in Webflow moves around. Two routes give you a preconfigured divider without building one from an empty section.

Clone the official demo project

Web Bae publishes a Made in Webflow demo project with a live version at section-divider-bae.webflow.io. Take this route when you want a finished reference layout with shapes already placed, so you can change a height or a color and watch what moves. Open the cloneable and click Clone in Webflow, choose the Workspace you want it in, then name the site and create it.

A community template, Diagonal Website Layouts by Jonas Arleth, was built with Section Divider Bae together with Clip Path Bae and shows the dividers carrying a full diagonal page rather than a single section break. One limit applies to both: you cannot clone a site that uses code components.

Reuse configured dividers across sites

Take this route when a divider on one of your own sites is already exactly right and you want it somewhere else. Webflow lets you copy and paste an element between any two sites you are a member of, and nested elements, styles, assets, settings, and interactions all travel with it. Copy the divider in the source site, open the destination site, and paste it into the target section.

Three limits are worth knowing before you rely on it. Read-only sites cannot be copied from, content held in the Webflow CMS does not travel with a paste because Collection data stays behind, and code components are stripped entirely. None of those touch a plain divider, but they will bite if you copy a whole section that happens to contain one.

What you can build with the Section Divider Bae Webflow integration

The integration is for shaped transitions between page sections, built without hand-coding SVG or exporting divider assets from a design tool. The shapes are generic on purpose, so what matters is where you put them.

Common places a shaped break earns its keep:

• Portfolio and agency sites: Wave and Curve dividers soften the hard edge between colored work sections and give case-study pages movement without a custom graphic.
• Property and hospitality pages: A diagonal divider under a hero holds its angle across breakpoints, which is where a hand-placed SVG usually starts showing a seam.
• Menu and promo sections: A Sawtooth at the top and a Curve at the bottom frame a block of content as a distinct panel without adding a background image.
• Article and blog indexes: Hex Wave and Square Wave mark the boundary between an index band and the surrounding page, so long scrolling lists read as separate sections.

Look at Variables Bae next if your colors live in a design system rather than on individual elements, since it comes from the same publisher and covers that side of the workflow. And be honest about the alternative before you install anything: when a divider appears once and never changes color, an SVG placed in an Image element is still the simplest thing that works, and the image file types reference covers why an SVG scales cleanly there too.