- Gutenberg
- Toolset - Its new Toolset Blocks allows you to add custom features to your websites including custom post types, a search and dynamic content.
- GeneratePress - A lightweight and fast theme that is easy for beginners to use.
![image3](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image3.jpg)
1. You Can Create Dynamic Content
An advantage it has over page builders is that Gutenberg comes with a number of block extensions to enhance your websites. One of those is Toolset which offers dynamic content capabilities. Dynamic content means you can create an element (such as an image) that will draw the correct content from the database. So when you create a list of posts you only need to add each block for each element once, but that block will display different content for each post. For example, I’ve created a list of tours posts - later I’ll go into how you can do this with Gutenberg. Do you notice something strange about the headings below?![image9](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image9.jpg)
![](images/image21.jpg)
![image21](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image21.jpg)
- Select Toolset’s heading block — unlike the normal Gutenberg blocks, Toolset’s allows you to make your content dynamic;
- Select the dynamic option;
- Choose the source for your heading;
- Confirm that the heading is correct.
![image7](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image7.jpg)
2. Display Custom Lists of Content
On a custom website, there will be times when you will want to list your content from a particular post type on different parts of your website. For example, a list of properties for sale on your real estate homepage.![image13](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image13.jpg)
![image8](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image8.jpg)
![image2](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image2.jpg)
![image5](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image5.jpg)
![image10](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image10.jpg)
![image17](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image17.jpg)
- The order I display posts such as the most recent blog post;
- The number of posts I display;
- If I want a filter on my posts, for example display only the tours that cost less than a certain amount.
![image16](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image16.jpg)
![image1](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image1.jpg)
3. Create a Template For Your Content
A template is your blueprint for your post types that provides each of your posts with a structure. For example, I’ve created a template for my tours post types which means each tour post will have exactly the same structure when you look at it on the front-end.![image6](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image6.jpg)
![image12](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image12.jpg)
![image14](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image14.jpg)
4. Create a Custom Search
One of the most important features on a custom website is a search. If you are designing a directory website which sells items, for example, you will want to make it as easy as possible for potential customers to find your products. The best way is with a search that contains filters so they can narrow the results down and find exactly what they’re looking for. Below you can see the custom search I created using Gutenberg and Toolset for my tours. It contains a number of filters. One of the filters is to only show those tours with a rating of 3-5 stars.![image4](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image4.jpg)
![image20](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image20.jpg)
![image11](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image11.jpg)
![image22](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image22.jpg)
![image18](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image18.jpg)
![image19](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image19.jpg)
5. Create an Archive of Similar Posts
An archive makes it easier for users to find all the posts you have published. If you want an archive with standard fields such as a heading and post content then a page builder such as Elementor is a great option. However, if you want to include custom fields with dynamic content then you will need to use Gutenberg, I built an archive for all of my tours on my travel website. When someone clicks on the archive they will see every tour I have created. You can create a tour for any of your posts. Just like with the custom list of content I can add the blocks for the content and arrange the posts how I want. I can also style the blocks by changing the text color, adding a padding/margin, add the background color, and much more.![](images/image15.jpg)
![image15](https://www.webdesignerdepot.com/cdn-origin/uploads/2020/06/image15.jpg)
You Do Not Need to be a Professional Developer to Create Professional Websites
Now that you have seen how even a coding beginner can build complete custom websites it is time for you to try it out yourself. Here are some tutorials and documentation worth going through:- If you are new to Gutenberg, Colorlib offers a good WordPress Gutenberg tutorial which will introduce you to how you can create blocks.
- The plugin I used with Gutenberg, Toolset, offers a training course on how you can use the two tools to build WordPress directory websites. It is a great way to understand exactly what features you can build and how for any type of website.
- To keep up to date with any changes to Gutenberg it is also worth keeping an eye on the block editor handbook.
Joe Lobo
Joe Lobo is a WordPress designer and marketing expert who enjoys discovering new plugins to speed up the website building process. He can be contacted on Twitter.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…