How To Make a Static Homepage With WordPress

This post was written in direct response to requests from users of a WordPress blog theme called Trellis. Many people asked me how I created my static homepage, given that Trellis itself doesn’t provide static homepage design options.

If you are a WordPress user that has installed any other theme that is compatible with WordPress block editor, this tutorial will apply to you, as well.

Make a Static Homepage

There are many ways to build and design a site. For coding aficionados, your preference may be to build your blog from the ground up. For others, purchasing the services of a designer or uploading a pre-built template is preferred.

A good website or blog requires more than just good design and sensible navigation.

In today’s competitive blog market, site speed has become more important than ever. So, you can’t just purchase a template with all the aesthetic bells and whistles. Because that site is most likely built for beauty and not for speed.

A few months ago, I switched my blog theme to a system called Trellis. Designed by popular ad network, Mediavine, Trellis is a lightweight, super fast theme that automates a lot of the backend stuff. That means I don’t need separate plugins for image compression or site acceleration. I just install and get all the benefits.

By nature of its base design options, Trellis encourages bloggers to use web-safe fonts, larger font sizes, and other design components that create a better, less bogged-down experiences for readers.

But, that can be an issue if you really want to differentiate yourself. Especially if you are used to having a “static” homepage that directs readers to posts and products that are most important to your strategy and goals.

How to Build a Static Homepage on WordPress

In this tutorial, I will tell you how I made my homepage, right down to the blocks and design features. I hope that you will be able to use this as a guide for creating a static homepage design that shows off your unique blog and design ideas.

---

If you would like to support my work, you can send me a tip or support my Patreon account.

---

1 | Add a new page.

I am going to assume that readers of this tutorial have at least some knowledge about how to use WordPress. With that in mind, I will try to be thorough while still using WordPress-specific language.

The first thing you need to do is go to your dashboard, then navigate to Pages > Add New.

Choose “Blank Page,” then proceed to the page builder.

2 | Make your page full width.

Once inside the page builder, locate the “Post” toolbar on the righthand side of the page builder. Scroll down until you see the “Template” section.

Using the drop-down menu, select “Full Width Page.” This will remove the sidebar from your static homepage.

3 | Start adding blocks.

My static homepage follows a general block pattern all the way down. To get started, I recommend adding the initial block styles you want to use to create a framework for the page. But, don’t format them just yet, and don’t create too many duplicates.

These are the names of the blocks I used, in order from the top of the page until the end of the Latest Posts section:

1. Cover
2. Separator
3. Columns (3)
   1. Cover
   2. Cover
   3. Cover
4. Separator
5. Cover
6. Separator
7. Heading (H3)
8. Latest Posts
9. Button
10. Separator

…I then continued using these blocks in slightly differing order to highlight special topics and categories all the way down the page.

4 | Format your initial blocks.

Add images, text, and design elements to the blocks you have added to your page. You can do this by hovering over each block element and clicking on it. WordPress will prompt you to add images or text where appropriate.

You can use the “Block” toolbar on the righthand side of the page builder to change design elements, colors, and styles. It is best for you to tinker with all of these design elements on your own to see what works best for you.

You can also make certain design changes by clicking on the block itself. In the above screenshot, you can see the toolbar for the “Cover” block allows you to select justification, toggle to full height, apply filters, and add animation.

Meanwhile, the white dot at the bottom border will allow you to change the size of the image by simply clicking and dragging.

Formatting the Latest Posts block

The “Latest Posts” block will auto-fill with your most recent posts. But you can use it to highlight specific categories, as well.

To format the “Latest Posts” block, using the “Block” toolbar on the righthand side of the page builder, find the “Sorting and filtering” section, and enter your desired Category.

5 | Duplicate blocks to save time and maintain consistent formatting.

Once you have formatted your initial blocks to your liking, you can duplicate them instead of re-building each one.

To retain the same style and format for blocks throughout your page, click on a block you have already formatted, click on the three dots (“Options”) and select “Duplicate.”

Once your block has been duplicated, use the up and down tool (seen above in the block toolbar) to move the block to your desired location on the page.

Use the “Block” toolbar on the righthand side of the page builder to change elements if needed. For instance, if you are using the “Latest Posts” block to create separate category sections, you will need to change the “Sorting and filtering” specifications for each duplicated block.

6 | Add spacers as needed.

If your blocks and sections feel a bit too close together, you can add spacers using the block tool. Adjust their height as needed.

7 | Make sure to add links where designated.

Add appropriate links to buttons and “Cover” blocks to ensure that your homepage is navigable. It’s helpful to direct readers to pertinent pages and directories.

But you may also want to consider adding “Read More” buttons under each of your “Latest Posts” blocks. If you want to link to your recent blog posts, see how to set that up in the last step.

If you want to link to a specific category, simply use the default category url (usually formatted as yourblogpage.com/category/category-title/). You can always look over my homepage to see how I set up my button links.

8 | Change your homepage settings.

When you’re ready to go live, first publish your new static homepage.

Creating a Blog Posts Page

Since you will no longer have your recent posts set as your homepage, you also need to create a placeholder page that will redirect to blog posts.

To do this, create a blank page by going to your dashboard, then selecting Pages > Add New. Set a title and commonsense url like /blog or /all-blog-posts. You do not need to add content. This will become the new url for your latest blog posts. Publish this post, as well.

Then, in your WordPress dashboard, go to Appearance > Customize > Homepage Settings. Change your homepage display to “A static page” and then select the static homepage you just created from the drop-down menu.

Under the “Posts Page” section, select your newly created, blank blog post url.

Click “Save Settings.” Now, go to your website and make sure everything works as it should.

---

My Custom Formatting Selections

In the “Block” toolbar in the righthand sidebar of the page builder, I made the following selections…

How I Formatted My “Cover” Blocks

• Image > Styles > Default
  • Overlay Opacity > 0
• Text > Color > Text > White Background, Black Text
  • Typography > Size > 18
• Button > Styles > Fill
  • Width Settings > 50%
  • Color > White Text, Black Background

How I Formatted My “Latest Posts” blocks

In the “Block” toolbar in the sidebar, I selected:

• Display Featured Image > ON
• Image Size > Trellis: Square
• Number of Items > 4
• Columns > 4

How I Formatted My “Button” blocks

• Styles > Outline
• Width Settings > 50%
• Size > 16
• Radius > 0

How I Formatted My “Cover” Blocks WITHIN the Columns Block

• Image > Overlay Opacity > 0
• Text > Color > Text > White Background, Black Text
• Typography > Size > 20

---

Was this post helpful?

[kofi]

---