Shape dividers for your WordPress slider

Starting from Gutenslider version 5.1 you can now create the coolest sliders with top and bottom svg shape dividers. You can choose from 3 Dividers in the free version, from 16 in Gutenslider Pro, or add your own ones with a little coding knowledge.

Shape dividers are known from famous page builder plugins like Elementor or Divi Theme. With Gutenberg getting bigger and better every month people do not need complex themes or page builders as Gutenberg solves all that. We added the best functionality from the big ones into our slider plugin.

Let’s dive into how to add shape dividers to your WordPress sliders with Gutenberg.

Gutenslider Free Shape Dividers

woman in black tank top beside woman in blue sleeveless top

woman in white long sleeve shirt and green skirt standing on gray concrete pavement during night

boy in white hoodie standing near white wall

woman wearing sunglasses bokeh photography

selective focus photo of woman blowing gum standing in front of turned-on neon signage

Or try a more edgy shape.

woman in orange long-sleeved dress between buildings during daytime

person holding plastic while standing on wall

woman in yellow tracksuit standing on basketball court side

woman in blue bralette holding sunglasses putting on her eyes

woman in pink floral dress holding black sunglasses

photo of woman holding white and black paper bags

The free version of Gutenslider lets you choose from wave or triangle (both seen above), and set top and bottom dividers individually. You can also choose the background color of the divider, which should in most cases be set to the background color of your page. Shape dividers only work with `slide`, `fade` and `coverflow`(pro) animation.

If you have many sliders on your WordPress pages or posts and want save time setting the color individually, you can also set a default color with css, that will only be overridden if you set a different color in the block settings. Just use:
.gutenslider-divider-top, .gutenslider-divider-bottom { color: #123456; }

Gutenslider Pro Shape Dividers

There is much more settings and shapes to choose from in the Pro version:

13 more shapes to choose from
divider height
invert dividers (see examples below)

The pro version thereby lets you create cool sliders, which you can use as page dividers or unique content elements to enrich your WordPress pages by adding individual Gutensliders.