The Shape Divider Block for Gutenberg – and WordPress Version 5

With the release of Caxton 1.7.1 – our Gutenberg based plugin – we’ve introduced a brand new block, called the Shape Divider Block.

The Shape Divider Block makes it easy to create beautiful transitions between your Gutenberg rows. Below is an example 🙂

With this release we’ve introduced 5 styles of Shape Divider, including; Clouds, Waves, Pyramids, Tilt and Book.

The Shape Divider Block has lots of powerful customization options, and because it uses the new Gutenberg Editor it’s super easy to use.

The Shape Divider Block works great with our Caxton Layout Block that also comes as part of our Caxton plugin. The Layout Block makes it easy create complex grid layouts and add backgrounds (images and colors).

Here’s some examples of the Shape Divider Block for Gutenberg

Customization Options

The Shape Divider Block comes with a full range of customization options including

  1. Set to Full width
  2. Place Dividers above or below Blocks
  3. Change colors
  4. Flip Blocks
  5. Place Shape Dividers over blocks, to create cool cut out effects

Easy to use

Because the Shape Divider Block is based on the new WordPress Editor, Gutenberg, it means that using it is really simple. Here’s a little animated gif that shows you how to use the Shape Divider Block to add a shape above an existing row. 

The Shape Divider Block for Gutenberg - and WordPress Version 5 10

And here’s an animated gif that shows you how to add a Shape Divider Block to create a cool cut out effect on an existing row – in this case a photograph. 

The Shape Divider Block for Gutenberg - and WordPress Version 5 11


Comments

8 responses to “The Shape Divider Block for Gutenberg – and WordPress Version 5”

  1. Paul cobb on Avatar
    Paul cobb on

    I can see a thin orange line across the top of the shape in some views? Is this a rendering issue? Love the concept though 😄

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Paul,

      Firstly thanks 🙂

      Could you let me know which views you see the thin orange line ? I’d like to replicate so we can fix up,

      Jamie

      1. Paul cobb Avatar

        I am seeing this on an iPhone 5 in portrait, this disappears when turning to landscape mode

        1. Jamie Marsland Avatar
          Jamie Marsland

          Thanks Paul, we’ll take a look and fix 😉

  2. I built the startpage with 18Tags and Pagebuilder Pro. How can I use Caxton and the Shape Divider Block? And does Caxton replace Pagebuilder?

  3. How do you use the shape divider to ‘cut out’ the bottom the featured image? (e.g the bottom right screenshot)

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi,

      You can only cut out images that have been built with Gutenberg, i.e that are part of the page.(which featured images aren’t)

      So if you image is part of the page you are building, use the option to set the shape divider over previous block.

      jamie

      1. Thanks for your prompt reply. So how do you get pages to look like the middle and bottom right screenshots?

Leave a Reply

Your email address will not be published. Required fields are marked *