How to create a fancy divider using Gutenberg and full site editing

This will be the first of what I hope will be be many short tutorials using Gutenberg and full site editing. I’ll try to keep these quick, and if I’m lucky I’ll include a short video with each tip.

In this tutorial we’re going to have a little bit of fun with full site editing. We’re going to create a “fancy” divider to use at the end of blog posts, but it could be used in several other places on a site too. That’s why we’re making it a template part, so you can include it on any full site editing template page that you like.

1. Add a new template part

From your dashboard, go to Appearance>Editor. At first you’ll be in the Front Page editor, so click on your Site Logo (or WordPress logo) in the upper left corner or the dropdown at the top of the screen to Browse All Templates. Select Template Parts in the sidebar and click Add New.

2. Add the Row block and two Spacer blocks

Now that you’re in the block editing screen, let’s add our main two groupings of blocks. Add a Row block and two Spacer blocks. You can also add one Spacer block and Duplicate it. Arrange the blocks so the Row is in the middle.

3. Add a Separator block and duplicate it

Inside the Row block, click the + icon to add a new block within the row. Let’s add a Separator block. You can change the color to match one of your brand colors if you like. Make sure it is set to Default, then Duplicate it.

4. Insert an Image block between the Separators

Staying in the Row block, let’s add our Image. You can be as creative as you want. Use your logo, an icon block, or take an image and remove the background. I used Canva (pro account) to find an image that fit with my personal brand identity and removed the background with its built in one click tool. You can also use remove.bg, which is completely free and handy for all sorts of website images.

5. Set Image dimensions to 25%

Your image will likely look huge, so let’s bring the size down by selecting 25% in the Image Dimensions settings. I went that simple selection because my original image dimensions were 500px x 500px. You can play around with a size that you think looks good. The important part is to make it small enough that it looks good on mobile screen sizes.

6. Set the Row settings to Justify Center and toggle off Allow to wrap multiple lines.

This is an important step, because we don’t want our separator to collapse into separate lines when scaled down to smaller sizes. Set the Row to Justify-Center. Then, click the Allow to wrap multiple lines toggle to the off position. This keeps the blocks within the Row all in the same line no matter the screen size.

7. Insert a Paragraph after the Row block

Our separator is done! You can add anything else to the template part that you like. I added a new Paragraph block after the separator with a playful message that fits the tone and purpose of my new design.

8. Save

Click Save and your template part is ready to be used!

9. Open your desired page template

Navigate back to the Templates dashboard. Find the Template you want to add your new Template Part. This can be an index (all posts), blog archive, single post, or any other page template that has a long content scroll or specific sections that need visual dividers. I made mine to be a playful end to a blog post.

10. Add Template Part

This is why I love FSE and Template Parts. Pick the spot you want it to appear on your page. Add a new block. Browse and select Template Parts. Choose from existing and find your newly created Fancy Divider. Select it.

11. Save

That’s it. Save your Page Template and you are done. Go view any page or post using that template and see your new fancy divider.

Copy the Code

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"layout":{"type":"flex","allowOrientation":false,"justifyContent":"center","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:separator {"color":"primary"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color"/>
<!-- /wp:separator -->

<!-- wp:image {"id":180,"width":125,"height":125,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="http://twenty17.local/wp-content/uploads/2022/03/Derek-Hanson-Blog-Site-Logo-1.png" alt="" class="wp-image-180" width="125" height="125"/></figure>
<!-- /wp:image -->

<!-- wp:separator {"color":"primary"} -->
<hr class="wp-block-separator has-text-color has-background has-primary-background-color has-primary-color"/>
<!-- /wp:separator --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"500"}}} -->
<p class="has-text-align-center" style="font-style:normal;font-weight:500">That's the end. So sad.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

Final thoughts on Template Parts

Template Parts are quickly becoming one of my favorite aspects of full site editing. You can create any number of reusable elements and place them all throughout your site in different ways. I’ll definitely be creating more Template Parts in this series of WordPress tips with the block editor.

What did you make? Share in the comments below.