• Skip to main content
  • Skip to header right navigation
  • Skip to site footer

Mai Reach Theme

A Genesis User Guide

  • Home
  • Tutorials
  • Videos
  • Images
Main hero header image for Mai Reach theme tutorial site.

Mai Divider block

The divider block adds a shape to the top or bottom of any group block on your page.

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
Inserting a block before the group block.

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
Choose Mai Divider block from the widgets tab.

Mai divider block settings

You should now have a Mai Divider block above a container block. Configure the settings as I have below.

  1. set a color for your divider
  2. select a divider style or shape
  3. experiment with flipping horizontally and vertically
  4. 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.
Mai Divider block settings.

This is the end product. It’s a divider block above a group block.

Category: Mai Reach Theme Tutorials
Previous Post: « Mai Post Grid block
Next Post: Content width and sidebars Mai Reach theme site layouts. »

Learn more about Mai Reach theme

(It’s one of the new generation from BizBudding)

Mai Reach Theme

Mai Reach Tutorials

Mai Reach is one of the new generation of themes by BizBudding. They’re the people behind Mai Lifestyle, one of the most popular themes on StudioPress.

Mai Reach Tutorials

Template Parts

Template parts replace many of the widget areas in this block based theme.

Find out more about…

Template Parts

Genesis Framework

Mai Reach is built on the Genesis framework. Genesis is a good solid foundation for your website.

If you’d like to know more about Genesis read this.

This website is independently owned by an affiliate marketer of StudioPress. It is not sponsored by BizBudding, StudioPress, WP Engine, Copyblogger Media LLC, WordPress, or Automattic Inc. WordPress, Genesis, StudioPress, WP Engine and BizBudding are registered trademarks of their respective owners.