The Mai divider block.
Use the divider block to add a shape to the top or bottom of any group block on your page.
There are five shapes to choose from, and you can set different heights or depths for the shape. The angle shape below this block is set to XS, or extra small.
Wide shape dividers
If you’re using a full width site layout you can use a full width divider block. This block has a wave divider above, and a wave divider below.
In this instance the wave dividers are set to XS, or extra small.
This block is wide width.
Caveats and restrictions
To use the divider block you need to understand it’s restrictions.
When I wrote this post: 13/07/2020…
The color section and white section, in the point shape and round shape divider blocks, can NOT be flipped. So you get this…
Or you get this…
I wanted to put an arrow a the bottom of a block.
But I can’t…
I think this will change with future updates of the theme. But for now, I do what I can with the available settings.
I wanted to add an arrow that points to the block below this one.
So I made this section white and then I added a pale grey color to the point divider block below.
The gray point shape is a divider block. That divider block is directly above this group block. Both blocks have a grey background color.
The other three divider blocks don’t have this restriction.
I can add an angle divider above and below this group block.
I can add an curve divider above and below this group block.
I can add an wave divider above and below this group block.
How do you add a divider block to your page?
First add a group block to your page.
Give the group block a background color.
Add some content to the group block, like I’ve done here.
When you have a group block in your page, similar to the block above this headline. You can add the divider.
Adding the divider…
- select the group block
- click the three dot, more options, button
- select, insert before
Next, we’ll choose the Mai Divider block from the widgets tab.
To do this…
- click the, add block, plus icon
- open the widgets tab
- select Mai Divider
Mai divider block settings
You should now have a Mai Divider block above a container block. Configure the settings as I have below.
- set a color for your divider
- select a divider style or shape
- experiment with flipping horizontally and vertically
- Make sure the width setting for your divider block. And the width setting for the group block below the divider block, are the same. For example. If the divider block width setting is set to wide width. The group block below the divider block should be set to wide width too.
This is the end product. It’s a divider block above a group block.
Mai Post Grid block
»