Recreating Austin Kleon’s Website using Gutenberg Site Editing and a Block Theme

Creating a website can seem overwhelming, especially if you’re not familiar with web design and development. However, with the right resources, anyone can create a professional-looking website that can help promote their brand, showcase their work, or connect with their audience.

In this video, I’ll explore the power of WordPress Gutenberg editor and walk you through how to create a website using it, specifically using the 2023 block theme.

By following along with this tutorial, you’ll learn how to use Gutenberg blocks to create a website that looks professional and functions effectively, even if you have little to no experience in web design.

We’ll start by creating a front page template and adding a navigation block, then use a group block to make it sticky. From there, we’ll add a three-column layout with image and text blocks and a query loop block to populate the middle column with posts. I’ll also demonstrate how to add custom fonts using a plugin and adjust the layout with flexbox controls. Finally, I’ll show you how to create a page template and add content to it.

Follow these steps 👇

1. Create a new front page template by going to Pages > Add New, then select “Front Page” as the template under Page Attributes.
2. Add a navigation block to the front page template by clicking on the plus sign (+) icon and selecting “Navigation” from the list of available blocks.
3. Use a group block to make the navigation block sticky by clicking on the plus sign (+) icon and selecting “Group” from the list of available blocks. Then, drag the navigation block inside the group block and enable the “Sticky” option.
4. Add a three-column layout to the front page template by clicking on the plus sign (+) icon and selecting “Columns” from the list of available blocks. Then, drag the “Image” and “Text” blocks into each column.
5. Use a query loop block to populate the middle column with posts. To do this, click on the plus sign (+) icon and select “Query Loop” from the list of available blocks. Then, configure the block to display the desired number of posts and select the post type.
6. Add custom fonts to your website by installing a font plugin, such as “Easy Google Fonts,” and selecting the desired fonts from the plugin’s settings.
7. Adjust the layout of your website using flexbox controls. To do this, click on the block’s settings icon and select “Edit as HTML.” Then, add the appropriate flexbox properties to the block’s HTML code.
8. Create a page template by going to Pages > Add New and selecting “Page” as the template under Page Attributes.
9. Add content to your page template by clicking on the plus sign (+) icon and selecting the desired blocks.

Conclusion

WordPress Gutenberg editor is a powerful tool that can help you create a stunning website quickly and easily. By using the 2023 block theme and following the step-by-step guide in this tutorial, you can use Gutenberg site editing to build a professional-looking website that can help promote your brand, showcase your work, or connect with your audience.

Whether you’re an experienced web designer or a beginner, Gutenberg editor can help you create a website that looks great and functions effectively. So, take the time to experiment with Gutenberg editor and see what you can create. With the right tools and resources, you can build a website that you’re proud of in no time!