Stack two sections of different colors, and you get a sharp border: a perfectly straight horizontal line. It looks clean, but that’s also what every website does. To add a bit of depth and personality to your pages, WebAcappella Fusion offers shape dividers—the famous shape dividers seen on modern websites: a wave, a curve, or a triangle that smooths the transition from one section to the next.
Good news: there’s no coding or drawing involved. Everything is configured in your section’s inspector with just a few clicks. In this tutorial, we’ll show you where to find it, how to add your first divider, and—most importantly—the color trick that makes all the difference.
What is a shape separator?
A shape separator is a decorative cutout placed at the top or bottom edge of a section. Instead of a straight transition between your blue banner and the white section that follows, you get, for example, a wave: the color of one section appears to “spill over” into the other in a gentle curve.
Each section has two independent separators: one at the top and one at the bottom. You can enable just one, both, or give them different shapes or colors. This is what allows you to create varied transitions throughout a page.
Where to find it in WebAcappella Fusion
The shape separator is a setting for the section (the “box” that contains your content blocks). To access it:
- Select the section whose border you want to style (click on an empty area of the section, not on an element inside it).
- Open the section inspector on the side.
- Click the Shape Separator tab (the wave-shaped icon).
- There you’ll find two groups of settings: Top Separator and Bottom Separator.
The separator applies to the section, not to an element inside it. If you don’t see the tab, make sure you’ve selected the section itself and not a piece of text, an image, or a button it contains.
Add your first separator, step by step
Let’s consider the most common scenario: you want a wave between a colored section and the white section directly below it.
- Select the top section and open the Shape Separator tab.
- In Bottom Separator, enable the Enabled option.
- Choose a shape from the list (start with “Wave” or “Soft Wave”).
- Set the color of the separator to the background color of the next section—this is the key tip; we’ll come back to it in a moment.
- Adjust the height to make the wave larger or smaller.
And there you go: the white section below appears to rise into the colored section, following a wave. No images, no exports, no code.
The trick that changes everything: color
This is the most common beginner’s mistake, so you might as well get it right right away. To achieve the “two sections interlocking” effect, the color of the separator must match the background of the adjacent section, not that of the section containing it.
Wavy line at the bottom of a section: set it to the background color of the section below. Wavy line at the top of a section: set it to the background color of the section above. The separator acts as an “overflow” from the adjacent section—hence the illusion of a cutout.
If your sections use the theme’s dynamic colors, be sure to use the same shade: that way, when you change your site’s color palette, the separator will remain consistent with the rest of the design.
Available Styles
WebAcappella Fusion offers eleven shapes, ranging from the most understated to the most striking. Choose one that matches the tone of your site:
- Waves: Wave and Soft Wave—the versatile option, ideal for a fluid and organic look.
- Curves: Curve and Asymmetrical Curve — a rounded, elegant, and subtle transition.
- Angles: Triangle, Asymmetrical Triangle, Slope, and Zigzag—for a more graphic, dynamic, or “tech” style.
- Decorative: Mountains, Drops, and Clouds — more thematic shapes, to be used sparingly.
Take it further: advanced settings
Once you’ve chosen the shape and color, several options let you fine-tune the result:
- Height: the vertical extent of the shape. The taller it is, the more pronounced the effect.
- Width (%) and horizontal position: Enlarge the pattern beyond 100% to show only a portion of the shape, then choose which part is visible (left, center, right).
- Layers: Overlay up to three copies of the shape, with decreasing opacity, for a nice depth effect.
- Horizontal/Vertical Flip: Flip the shape’s orientation to vary it from one section to another.
- Content Overlay: When enabled, the separator is placed on top of the content without adding height to the section; when disabled, the section expands to make room for it.
On mobile devices, a separator that’s too tall can take up a lot of vertical space. The responsive display setting lets you hide it on small screens: a spectacular separator on a large screen can remain visible on a computer and disappear on a phone, where every pixel counts.
Three tips to avoid overdoing it
- Stay consistent: one or two shape families across the entire site are enough. Alternating between waves, zigzags, and clouds on the same page muddies the message.
- Simplicity pays off: a separator should complement the reading experience, not overshadow it. When in doubt, reduce its height.
- Always check on mobile: preview your pages in phone size before publishing, and hide bulky separators if necessary.
In summary
- Shape separators are configured in the dedicated tab of the section inspector, at the top and/or bottom.
- The separator color should match the background of the adjacent section to create a cutout effect.
- Eleven shapes are available, ranging from a subtle wave to a graphic zigzag, plus settings for height, width, layers, and reversal.
- Keep the mobile rendering in mind: a separator may be hidden on small screens.
- It’s all visual—no code required.
Shaped separators are one of those little details that make a site look “professional” without any extra effort. A well-placed wave, the right color, and your pages immediately look more stylish.
Waves, curves, triangles, or clouds: dress up your section transitions in just a few clicks with WebAcappella Fusion, without writing a single line of code.
Discover WebAcappella Fusion