How to create a visual sitemap in Gutenberg without any plugin

Table of Content

In this tutorial, we will create a visual sitemap tree using the default list block with some custom CSS only.

First, you need to add a list block and assign the class tree. And add list items to represent your sitemap structure. Indent the list items that need to be the sub-tree items in the sitemap.

?Β Note:Β You must need to make each list item textΒ Bold. This is an important step; otherwise, you won’t see the required result.

Here is the magic CSS code, which will make the list items look like an organize sitemap tree.

Learn how to add custom CSS code in WordPress Gutenberg

.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}
.tree, .tree ul {
    display: table;
}
.tree ul {
  width: 100%;
}
    .tree li {
        display: table-cell;
        padding: .5em 0;
        vertical-align: top;
    }
      
   .tree li:before {
            outline: solid 1px #666;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
        .tree li:first-child:before {left: 50%;}
        .tree li:last-child:before {right: 50%;}
 .tree strong {
            border: solid .1em #666;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .2em .5em;
            position: relative;
        }

 .tree ul:before,       
.tree strong:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
top: -.55em;
                position: absolute;
            }
.tree ul:before {
                top: -.5em;
      

That’s it. You have a lovely visual sitemap tree.

Remember to link your list items to relevant pages/links.

The code used in this tutorial is from this code pen.

πŸ’Œ

Unlock Exclusive Perks: Join Our VIP Subscriber Club Today!

Subscribe for special promotions, offers, freebies, and the latest updates and news – all exclusively for our VIPs. Don’t miss out, join now! πŸŒŸπŸ’ŒπŸŽ

We won’t send you spam, we promise.

Comments

Leave a Reply

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

Join the All Access Club

Your All-Inclusive Pass to Premium WordPress Products.