
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:
- Cover
- Separator
- Columns (3)
- Cover
- Cover
- Cover
- Separator
- Cover
- Separator
- Heading (H3)
- Latest Posts
- Button
- 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]

I would absolutely love to know how you got the navigation menu/logo at the top! I presume this appeared after you step 8 “change your homepage settings”? Thank you.
I am currently using Trellis without any child theme, and that is its default position! Hope this helps, but let me know if I didn’t answer your question.
Did you leave the title of the page untitled/blank so nothing would get displayed at the top of your homepage?
If you’re using Trellis, you should be able to go into the page editor, select the Trellis menu, and select the box to remove the title from the homepage.
This is so helpful–thank you! The only issue I’m having is with that Blog Posts Page. I created a blank page with /blog like you did, but when I link to it from the static home page, it says “No Posts Found
We didn’t find the posts for that URL.”
I can’t figure out how to have people go from the six Latest Posts on the home page to ALL blog posts.
Thanks for reading! Make sure to go into Settings > Reading and confirm that the new blank page you created is listed as the “Posts page.” Sometimes this setting is also listed in your appearance customization depending on what theme you’re using. Let me know if it still doesn’t work!
@Leah Wise, thanks for the quick reply! Yes, I have both of those set up correctly. Hmmm… So if you go to moneywisemoms.com and click on the button I put under Latest Posts, I put the /blog link there. Is there another way to go to all posts?
So strange. The only other thing I can think of is that the url for the page you created is something other than blog or it is still in draft mode. I know for me that I couldn’t use /blog because I had migrated over from Squarespace, where that was the default url for blog posts, and I have a redirect set up for it. But that doesn’t seem to be your issue.
I created a page but when I published and set it as homespage, it looked like a regular page, not fullwidth like in the previews while I was testing. Did I miss something?
You might need to reset your cache (in the WordPress admin bar) or clear your cookies to see the change.