Create a Homepage Design for your Website

In this tutorial I will show you how to make a homepage for a website. More specifically, I will show you step-by-step how to create a user-friendly and pro-looking website Home page for your WordPress site.

You might not create the best homepage ever, but we don’t need that. All we need is for our home page UX and content to serve its purpose.

What is a Home page and why is it important?

The home page is the main page of your website and it’s important that your home page design is easy to navigate for your visitors. I like to compare web site home pages to a Hotel Lobby. Let me explain why.

From the homepage your site visitors can get a good sense of what your website is about. Just like the lobby of a Hotel immediately gives you an idea of the quality of the Hotel in terms of services and amenities one can expect.

The homepage can also easily navigate visitors to the most important sections of your website by showing them what they can find on your site and where they can find it. Compare this to the direction signs we usually find in a Hotel Lobby that show us where to go for restaurants, gyms, rooms, SPA, etc.

I also like to use the homepage to say a few words about the people behind the website. This gives you the opportunity to build trust with the visitor by explaining why the website was built and our expertise on the topic in question. Again, this is similar to a Hotel Lobby’s receptionist or concierge who explain the Hotel amenities as soon as you check-in.

Finally, the website homepage can update visitors with the latest articles and content that have been published just like we might find notice boards in lobbies showing events and shows currently taking place in the Hotel.

So, yes, the website homepage is a critical element of your website. It helps visitors decide if they want to stay on your site and explore more pages or if they think it’s not for them and move on to another website.

Homepage Content

The Homepage content should be enough to provide the necessary information to visitors, but not too long as to get them lost.

The way I like to structure my homepage content is to split it in 4 parts. So in this tutorial you can expect the following sections;

• Top Part with Call-to-Action (CTA) Message. Also known as the Hero section, this is the first thing people see when they visit your website homepage. It sits right under the logo and menu bar, and usually includes a short paragraph describing what the website is about. The top Hero section usually includes a catchy tag-line, and also a CTA button (Call-to-action button). Here’s a list of examples.

• Navigation Section: In this section we include banners or images that take visitors to our main sub-pages. From here visitors can navigate easily throughout our website. This section also carries an SEO benefit because we are linking internally from the homepage content to the inner pages.

• ‘Who is behind the Site’ Section: In this section we give a brief description about the person or people behind the website. You explain why you have set up this site and your experience on the topic. By explaining why you know so much about the topic of your website, you are creating trust with the visitors. The idea is to show visitors you are an authority on the topic your site about.

• Blog Posts Section: In the last section of the homepage we include a list of our latest blog posts. These can have a slightly click-bait title and can show how deep and interesting we can go into the topic. This section would be like a mini version of a blogger home page, which usually only features the list of articles on their blog sites.

In the next part I will show you the step-by-step process of how I built these four sections on my website homepage.

Before we proceed, it’s important that you understand the difference between the default WordPress blogger home page and the WordPress custom homepage. You can read this tutorial to understand more.

Also, the remaining part of this tutorial is based on the static front page WordPress settings. So before you proceed further, make sure you have changed to the static home page in your WordPress.

Prepping the Home Page

Head over to your WP dashboard. Here you should find the Page you previously created to serve as your home page. I explain how to do it in this section of the WordPress Settings Tutorial.

Click Pages > Home.

You should be in the edit screen of the Home page. We will prep this page so that it’s properly set-up before we start creating the different sections on our homepage.

Go to the right-options sidebar and scroll down to the Layout section, specifically the Content Container heading. From the drop-down menu, select FULL WIDTH.

We do this so the image at the top (in our Hero section) covers the full width of the screen.

Just under this you will see the Disable Elements section. Click on the CONTENT TITLE so that we disable it from showing on the screen. We will be styling our title with GenerateBlocks instead.

Finally, if you had already created some test content (Lorem Ipsum content) on your homepage, make sure to delete it all.

Click UPDATE.

Now we have a blank page on which we can start creating our 4 different homepage sections as explained above.

Building the Homepage Top Section (Top Hero) with GeneratePress

On the homepage edit screen click on the + sign at the right of the input page to choose the first block we will be using. This will be a container.

Click on the CONTAINER icon.

Adjusting Container Settings

In the right-hand settings menu, under ‘Layout’, your Container settings should be FULL WIDTH.

The ‘Inner Container’ setting should be set to CONTAINED WIDTH.

The Container Width should be set to 1000 for our Top Hero section.

Finally, in the Tag Name option choose SECTION from the drop-down menu.

Now click on the container and from the right-hand options and select BACKGROUNDS.

Here we will be choosing our background for the Top section (Hero section). You can have this background as a picture, or you can choose just to have a colored background.

If you decide to insert a picture for background, I suggest saving it in the dimensions of 1230 by 468 pixels. You then have to play around with the spacing of your container to make sure that the image fits well within the Hero section.

Finally, we want to adjust the Container spacing. Go to Spacing in the right-hand options and adjust the ‘Minimum Height’ option (400 should be good).

Adjust also the ‘Vertical Alignment’ option to CENTER. This ensures that your Headline is shown in the center of the container.

Inserting Blocks within the Top Section Container

Now that we have the first container set up, we need to fill it in with the different elements that will make up the top section of our homepage, aka Homepage Hero. The first block within our container will be a Headline.

Homepage Headline

Click on the + sign within the container block and choose the HEADLINE option.

Type in the text you want to include here. Example, in my case I wrote my website title ‘WordPress WebSite Wiki’.

This will be the heading of your homepage, so make sure that you choose H1 in the block pop-up.

Align the text in the center. At this stage it would be good to change the color of the text to make it stick out. Remember to try and stick with your brand colors.

Homepage Tagline

Next, we will include the tag line text under the main Heading, just to give visitors a brief statement about our website.

This will be done in a separate block below the headline, so that I can change the style and colors. Click on the ellipsis (three vertical dots on the right of the block pop-up) and select ‘insert after’.

Click on the + button and choose HEADLINE; make it a Div and Align center (all these options are set from the block pop-up as shown in the image below).

Type in the text you want your tag line to read. In my case I will type ‘Over the Shoulder Step-by-Step Guides to help you Build Your Site from Scratch’.

Change the typography type and color of the text to your liking. Remember this can be done from the right side-bar settings. There are also some options from the Block pop-up drop down arrow.

In my case, for example I highlighted the tag line by pressing on the Black Drop-down arrow within the block pop-up. See below:

I also adjusted the padding under this headline so that my next block will be spaced out. For this I went to right-hand Spacing option and under padding I set the number for bottom to 15.

Create a Home page Call-to-Action Button (CTA Button)

The final block in the homepage’s top container can be a CTA Button which takes the site visitors to your main money page or action step page. In other words, what is the main reason for your website and create a call-to-action that convinces visitors to do that.

At the time of writing this article I do not have a CTA button on my homepage yet. Eventually I might decide to create one if I want to collect emails, or want visitors to visit a particular page on my site etc.

For the sake of this tutorial however I created one so that you can follow my steps.

To start creating the CTA button on the homepage, click on the ellipsis in the block pop-up of the previous block created (i.e., the tagline block) and select INSERT AFTER.

Click on the + button and BROWSE ALL, from here choose the blue BUTTONS icon under the GenerateBlocks section.

Once added, Center Align the button and type in the wording you want to show on your button. For example, subscribe for free guides, or, click here for 10% discount.

For the CTA button I am also going to add an icon in front of the Text. To do this, go to the right-hand side bar, and click on ICONS > GENERAL.

Choose a relevant icon from the ones available here. For example, for a subscription Call-to-Action you could choose the envelope icon.

Next, copy and paste the URL of the landing page you want your visitors to go to when they press this button.

This URL goes into the input box under the button (you will notice an input box underneath the button that says ‘Paste URL or type to search’).

All that remains now is to style the button. Click on the list view menu (top left of page).

Now click on the first Buttons block on the list. Go to the right-hand options menu and adjust the top margin to 30.

Now click on the second Buttons block in the list view. Go to right-hand options menu and adjust the background color and text color for both Normal and Hover options.

In the Button settings option, under Spacing I included a Border size of 4 for all sides and a border radius of 20. This gives me the outline across the button and the radius makes the corners of the button curved.

Top section of Homepage Finalized

That’s all for the top section. Now that we have included all the blocks in the container we can hit the PUBLISH or UPDATE button.

Let’s see how it’s looking and go back to make any changes we want in the styling.

Open the Homepage in a separate tab on your internet browser. You should find the Top section of the Homepage we just created.

How’s the styling? This is how mine looked the first time I hit publish:

After I played around with the styling, colors, padding, margins and Typography, I settled on the following:

Remember to style any block within the container, all you need to do is click on that block and then adjust the style options available from the right-hand menu.

Now that the top section of the Homepage is finished, we can concentrate on the next section of our homepage, the Navigation Section.

Building the Homepage internal Navigation section

Just in case you’re not still on the Homepage edit screen, then to get there from your WP dashboard you need to Click Pages > Home.

You should now be in the edit screen of the Home page.

So, in this part of the Homepage I am going to include mini banners that link to the various sub-pages, where my tutorials are. I decided to split my guides in 5 categories, being

1. Domain Guide 
2. WordPress Guide
3. Branding Guide
4. Content Guide
5. SEO Guide

This section of the Homepage will link to these 5 hub-pages that in turn contain links to the various guides and tutorial within that particular category.

Choosing images for the Homepage internal navigation section

To start off I need to find images for each category of my internal navigation section and upload them into the WordPress media library.

For this section, we are going to use squared images. (Yes, I know they look circular in the image above but that will come later. First we need to find square images).

So, make sure that the images you download are edited to be squared. Pixels size of the images should be 500 pixels by 500 pixels.

Once you have the images go to your WP dashboard and click Media > Add New.

To upload the images into your WordPress Media library you can either drag the images from your computer folder into the area which says, ‘Drop files to upload’, or else you can just click on the Select Files button and select the images from your local computer folder.

Container Settings for the Navigation Menu

Once the images are uploaded, go back to your Homepage edit screen (WordPress dashboard > Pages > Home-Front Page) and start building the navigation section.

On the homepage edit screen click on the + sign just under the previous container we created.

Just like we did for the top section of the homepage, to start the navigation section, we need the first block to be a container.

Click on the CONTAINER block icon.

In the right-hand settings menu, under Layout the setting should be as follows:

• Your Container drop-down option should be FULL WIDTH.
• The Inner Container setting should be set to CONTAINED WIDTH.
• The Container Width should be set to 1000.
• Tag Name should be DIV

I will leave the container background empty this time so it’s white. You can set it up differently but if you added an image or colored background in your top section then I suggest you go for a more simple and clear background for contrast between the 2 sections.

Under the Spacing settings adjust the Top Margin to 50, to leave some space between the top section and the navigation section of your homepage.

Headline for the Navigation Section

The first block within our Navigation container will be a Headline. Click on the + sign within the container block and choose the HEADLINE icon option.

Type in the text you want to include here. In my homepage, for example I wrote ‘Wiki Tutorials by Category:’.

This will be an H2 headline. Align the text in the center.

Inserting the Grid in the Navigation Section

Next, we will include a grid under this Headline. Click on the ellipsis (three vertical dots) in the block pop-up and choose INSERT AFTER.

Click on the + sign in this new block and choose the GRID option.

Since the Grid block icon will probably not come up immediately when you click on the + sign, you will need to type it in the search box. See below picture.

At this point you will have to choose which style of grid you want.

Since I have five categories of tutorials in my homepage navigation section, I will choose the grid with 5 equally spaced boxes.

Obviously in your case you decide how many boxes you will need and choose the grid accordingly. Don’t worry if there isn’t a template grid with the same style you want. Choose one which is closest to what you need and you will then be able to tailor it to your requirements.

Click on the first box within the grid (far left) and click on the + sign. Now choose the IMAGE block icon.

At this stage you have the option to either

• Upload your image,
• Choose an image from your Media Library,
• Or insert an image from a URL (ie another web page)

Since we have already uploaded our ‘squared’ images previously, click on the MEDIA LIBRARY button. From here just pick the image you need for your first grid box and click on the SELECT button in the bottom right corner.

The image will be inserted into your first grid box. Now we will edit and style this box until we are completely happy with the results.

Why am I styling it immediately this time, instead of waiting till the end like I did in previous sections?

Reason is that all 5 boxes will have the same styling and settings. So, we are going to finalize the styling of the first grid box and then replicate the same stylings for the other 4 boxes in the grid.

We can do this by just copying the first box in the grid and pasting it in the remaining 4 boxes of the grid.

Once the first grid box is copied on the other boxes, then, all we need to do is to change the image and the text of the other 4 boxes. This saves a lot of work in repeating the styling for each box in the grid.

Styling the Grid

Click on the first Container block within the Grid (first item after Grid in the list view).

Go to the right-side block settings options. In Spacing under the padding section insert 15 for all sides. This will add some padding to the boxes so we get some spacing between the 5 boxes.

Next, we will set the image block style and function. Click on the image block.

Go to the right-hand settings menu and under Styles choose the ROUNDED option.

We will also make the images clickable by selecting the link option from the block pop-up and inserting the URL of the page we want it to link to.

Next, we need to insert some text under the image to explain the category.

Click on the first container in the Grid and a + sign will show under the image block.

Click on the + and choose the HEADLINE block icon. Make it a Div and Align it to the Center.

Once again any setting changes can be made from the right-hand options.

Change the Font size from Typography settings if necessary (in my case I put it at 22 and Bold).

Now type in the Reference name you want to give to your linked section page. In my case it is ‘Web Domain Guide’.

I will then click on the link option in the headline block and insert the URL where I want this title to link to.

So now we have both the image and the headline linking to the page we want our visitors to go to.

Update the page and see how it looks on the actual site. Remember to open in a new tab so you don’t go out of the home edit page.

If you’re happy with how the style of the box looks you can now copy and replicate this box for the other 4 boxes left on the grid.

To do this, click on the container of the first box, (i.e., first block under Grid in the list view). The block pop-up will appear. Click on the ellipsis (3 vertical dots) and choose DUPLICATE.

Do this over and over until you have the exact number of boxes you need. In my case I duplicated the box 4 times to have a total of five boxes.

Now however I need to delete the other 4 empty boxes from the grid. To do this I go in my list view, choose the empty containers, click on the ellipsis, and choose REMOVE BLOCK.

The next step is to change the image and the text for the remaining 4 boxes we just duplicated.

Click on the image block in each grid box and from the block pop-up click on REPLACE.

Now just upload a new picture from your media library. Remember to replace the link from the image to the new page you want to link to.

For the text, just delete the copied text and replace with new titles. Remember also to amend the link on this text to the relevant URL for the page you want to link to.

Finally, ensure your layout looks good on Mobile also.

Remember that for each block you are building, the right-hand settings can be adjusted for desktop, tablet and mobile.

Just click on the relevant tab and adjust for the device accordingly.

It’s up to you if you prefer doing this adjustment after every block or if you prefer doing it all at once after you finalize the page.

Building the Homepage ‘Who is Behind the Site’ section

In the next section of the Homepage we will be describing who we are and why people can trust our website. This is mainly for our first-time visitors.

For my purposes, in this section I will just include a Title and a few paragraphs.

Here I will describe who I am, why I created this site and a give brief explanation of what the website contains and how to follow the tutorials. It will be a pretty simple section however, feel free to add pictures and buttons to yours, depending on your needs.

Here’s how my section looks:

Once again, if you’re not on the Homepage edit screen already, go there from your WordPress dashboard by clicking Pages > Home.

Now for this section you can decide to either change the background color completely to make it clear that it is a separate section within the website home page, or else you can insert a ‘Separator’ which is a horizontal line that cuts between one section and the next.

Inserting a separator

To insert a Separator, in the Homepage editor find the last container we created, i.e., the navigation section container. Press the + button underneath the container to create the next block and then choose BROWSE ALL.

Now on the left-hand block list search for ‘Separator’ block icon and click on it.

You can then amend color, padding etc. to your liking by playing around with the settings options in the right-hand column of the page.

Container with different background color

If you want to separate the next section by changing the background color of the container, then disregard the previous section of the tutorial and continue following the next steps.

In the edit screen of the home page click on the + sign, just under the container section we built previously.

Choose the first block which will be a container.

Once again, in the right-hand settings menu, under Layout, your Container settings should be FULL WIDTH. Then Inner Container setting should be set to CONTAINED WIDTH.

As usual, I like to set the Container Width to 1000.

Next go to Colors setting on the right, and change the Background color, and the Text Color.

We change the container background color, so it clearly looks like a separate section. We change the Text color so that the text contrasts with the background and is clearly visible.

In my homepage, for example, since I made the background color of this section very dark, I had to change the text color to white so that the words are clearly visible to readers.

To finalize the container settings, go to Spacing and adjust the Top and Bottom Margins to 50. This creates some distance between this section and the two sections above it and below it.

Click UPDATE.

First Block within ‘Who is Behind the Site’ Container – Headline

The first block within this container will be a Headline.

Click on the + sign within the container block and choose the HEADLINE block icon.

Type the text you want to include here. In my case I will type ‘Who is behind WP Website Wiki’. You might want to write ‘Who I am’, or ‘Who we Are’. Whatever tickles your fancy.

Make sure this is an H2 heading and align the text in the center.

From the right-hand settings go to Spacing > Padding and add a top padding of 40 and bottom padding of 25. This will ensure proper spacing between the title and the description paragraph below it.

Second Block within ‘Who is Behind the Site’ Container – Paragraph

The next block under the Headline will be a paragraph.

Note that if you press enter after the headline, and you just start typing, the system will automatically detect that the block is a paragraph. Alternatively, as we did in previous sections, just click on the ellipsis from the Headline block pop-up and choose INSERT AFTER. Then just press the + sign and choose PARAGRAPH.

In the paragraph write a brief description about yourself or the team of writers who are creating the content and information for your site. Just something to introduce yourself and convince new visitors why you know what you are writing about and why they can trust you.

Add further blocks within ‘Who is Behind the Site’ Container as Necessary

The two blocks we just created can be enough for your ‘Who is behind the site’ section in the homepage, however depending on your requirements you might want to add other features.

For my site, for example, I added another Headline, Paragraph and Buttons within the container.

These extra sections are meant to give my visitors information about how to navigate the site and the tutorials and a button linking to the first tutorial. The Headline I inserted is ‘How to Use my Guides’.

Same as previous Headline, I made this an H2 heading, aligned the text in the center and added a top padding of 40 and bottom padding of 25.

After this, I just pressed ‘enter’ and started writing what I need to say in the following paragraph, which is a brief explanation of how to use my tutorials.

After the paragraph, to conclude the ‘Who is behind the site’ section, I added 2 buttons to guide my visitors to the first tutorial of the Website building journey.

One button will take them to the ‘buying a domain’ tutorial just in case they don’t have one yet. However, since I’m expecting many visitors who search for my guides to already have a domain in hand, with the other button I take them straight to the first WordPress tutorial.

To include these two buttons, I create a grid within the container by clicking on the ellipsis in the previous block pop-up and selecting INSERT AFTER.

I click on the + button and choose GRID. Next, I choose the grid with two equal boxes.

In each box I add a Headline and a Button.

I first add the Headline and make it an H4 and center align the text. The Headline will be a short sentence explaining where the button will take them.

After the sentence I will add the button by clicking on the ellipsis in the block pop-up and selecting INSERT AFTER.

Here I click on BROWSE ALL, to find the Buttons block icon. If you’re adding buttons, remember to choose the blue ‘buttons’ from GenerateBlocks and not the WP default buttons.

I now center Align the button and type in the wording I want to show on my button.

For this button I also add an icon in front of the Text just to draw more attention to the CTA I wrote on the button. To insert the icon, I go to right-hand side bar, and click on ICON, then General. Here I will choose a pointed arrow.

Now I insert the URL of the page I want visitors to land on when they press this button (just click where it says, ‘Paste URL or type to search’ and insert it there).

I also added some styling to my Buttons.

To style a button just click on the outer block of the button (remember; from the list view it’s easier to click on the right block) and go to the right-hand options menu.

I adjust the spacing first by increasing the top and bottom margins to 20.

Next, I click on the inner Button block, go to right-hand options menu and adjust the background color and text color for both Normal and Hover options.

For the inner Button block options within Spacing, I also included a Border Size of 2 for all sides and a Border Radius of 40. This gives me the outline across the button and the radius makes it a curved button.

Once I’m happy with the styling of the first box in the Grid I will duplicate it, so I have my styling settings all done for the second box in the block.

To duplicate the block all I need to do is click on the first container within the grid, then click on the ellipsis from the block pop-up and click on DUPLICATE. I then adjust the wording and the links in the duplicated box.

Finally, I remove any extra containers from the bottom.

Creating the Posts Grid on your Homepage using ‘WP Show Posts’

The next and last section of our Homepage will be a Posts Grid, which will display the latest Posts we publish on our website. Think of this as a mini version of a Blogger home page.

To insert a Posts Grid, we will need to download a plugin called WP Show Posts.

This is a free plugin created by the same developers of GeneratePress so it will work beautifully with our Theme and Block Editor.

To download the plugin, open your WordPress dashboard in a separate Tab.

Click on Plugins > Add New

Search for ‘WP Show Posts’.

Click on the INSTALL button and then the ACTIVATE button.

Creating Your Homepage WP Show Posts Grid

Now that we downloaded the plugin, we can create the first grid which will be then inserted in our Homepage.

Go to your left-hand side menu in the WordPress dashboard and you should see a new item in the Menu called WP SHOW POSTS. Click on it.

Next, click on ADD NEW to create your first Posts Grid.

At the top we need to give this grid a Title. I will call it ‘Home Post Grid’ since it will be featured on my home page.

The first Tab in the left-hand of the page is Posts. Here we will decide which articles to feature and how many will show up in the homepage grid.

Under Post Type leave it as Post.

Under Taxonomy leave it empty. In this section you can choose tags etc. to define which types of posts to show up. I leave it empty so all my posts will show up here.

Under Posts per Page you will set the number of Posts you want to feature in the grid. I will choose 6 for my homepage, however, feel free to choose as many as you want to show on your homepage.

Now go to the next tab which is Columns. Here we will set how our Posts Grid will look like.

Under Columns I will choose 3 columns. Since in the previous options I chose to show 6 posts, then my grid will be split in 3 columns by 2 lines, to show a total of 6 Posts.

In the Columns Gutter section you can set the spacing you want between the different posts boxes in the grid.

I suggest you set this setting after you have published your first grid so you can easily see if you need more, or less spacing in the Columns Gutter section.

In the next tab, Images, tick the Images box option to make sure the grid shows your images.

Under Image Width and Image Height, you can set the width and height of your images in pixels. I recommend you leave these empty for now until we get a clear idea of how the grid will look on the homepage.

Under Image Alignment choose if you want your image to show in the center or not.

Under Image Location choose if you want the image to show above the Post title or underneath it.

The next settings Tab is Content

Under Content Type you can choose if you want to show an Excerpt, which is the first few sentences of each blog post.

I prefer not to show this on my website home page, so I choose NONE. If you do decide to show an excerpt, you can then choose how many words to show in your excerpt.

Under Include Title, you choose whether you want to show the title of your blog post. This will depend on how you set up your images. If your images include the title on them, then you don’t need to show the title. If not, then I suggest you tick the INCLUDE TITLE box here.

Under Title Element you choose what Heading your title will show as. I suggest you make the title an H3 or H4 so the font is not too big.

In the Read More Text option you choose what to show under the excerpt part. Whether it’s just ‘Read More…’ or something else you want to say to convince users to click on this and go read your full blog post. I will leave mine empty since I didn’t put an excerpt.

In the next tab, the Meta tab you can choose what else to include in your grid, such as author, date and so on. For my Home page I will not include anything else as I want to show a very simple grid.

Finally, the More Settings tab includes various other options/settings you can apply to your grid. For my site I decided not to change anything here and leave the default settings. The most common settings you might want to use are:

• Exclude Post IDs: This is where you specify exact posts you want to exclude from your grid
• Offset: this is where you choose how many of the latest posts you want to exclude from your grid. Reason for this option is that you might have a homepage which already shows the first 5 posts in a different section for example. So, if you’re adding the Post grid as a separate section in the same page, you don’t want to show the same 5 Posts again. Instead, you would want the grid to start showing from the 6^th post onwards.
• Order: this is where you decide in which order you want the posts to show, latest first, or oldest first, for example
• Order by: here you instruct the grid to show the posts by date order, or random, or by date modified etc.
• For all other settings you can check the documentation of the plugin itself by going to their official website.

Now that all the settings in the WP Show Posts Plugin have been set you can hit PUBLISH on the top right corner of the page.

Once you hit publish, you will be taken to the Lists page which shows a list of all the WP Show Posts Grids you have created. Since this is our first Grid we only have one in our list.

Click on the Grid you just created from the list.

On the right side of the page you will see a box marked Usage. In this box you have the shortcode which you need to copy and paste in the Homepage. So, highlight the shortcode and copy it. We will paste it after we create the container (next step).

Adding the Posts Grid to Your Homepage

Go back to the Homepage edit screen (Pages > Home) and add a new container below the previous section by clicking on the right + button.

As usual the first block I choose will be a container.

In the right-hand settings menu, under Layout, your Container settings should be FULL WIDTH.

Then Inner Container setting should be set to CONTAINED WIDTH.

I will set the Container Width to 1000.

This time I will have no background color. I also set the Top Margin to 40.

If you decided to go with a separator to divide between the previous 2 sections, then it makes sense to put another separator before the posts grid. In this case just duplicate your previous separator block and move it into this new container we just created.

In the new container we will create a Headline block which introduces this section.

Click on the + sign in the middle of the block and choose HEADLINE.

For my website I will type ‘My Tips and Recent Discoveries’. This is because any posts I publish will not be part of the tutorials, but will either be handy tips for WordPress users or a review of WP plugins and other WordPress related software.

Under the Heading we will now include a shortcode block.

To do this, insert the next block by clicking on the ellipsis in the previous block pop-up and selecting INSERT AFTER.

Click on the + sign and click on BROWSE ALL. This time we are looking for the ‘Shortcode’ block icon. (Type it in the Search bar if you don’t find).

Now in the input box under [/] Shortcode paste the shortcode you previously copied from WP Show Posts plugin.

Click on UPDATE in top right corner.

Now let’s check how our posts grid looks like on the actual website. Since I only published one test post, I can only see one entry in the grid. I will therefore Create 5 other test posts with the same ‘Featured image’ and publish them just to test out the look of this feature on our Home Page.

Go to Posts > Add New

Add a title. I will name mine Test Post 2, Test Post 3 etc.

On the right sidebar of the Post Edit page click on FEATURED IMAGE and choose the same image you used for your first Test Post.

I will not be adding any further wording to these test posts because I don’t need to see excerpt in my post Grid. If you chose to include the excerpt option when setting up your WP Show Posts settings, then I suggest you insert a few paragraphs of Lorem Ipsum wording from Lipsum.com so that you can see how the excerpt will look on your homepage.

Remember to click on the PUBLISH button of each Post once you’re ready.

Once the test posts are created and published, go back to your Homepage and refresh the page.

How is the Posts Grid looking?

Play around with the plugin settings to tailor it to your liking. Remember, every time you adjust the settings on the plugin, you must hit PUBLISH in the plugin page, and also go to the Homepage and click UPDATE to see the full effect of the changes on the Posts Grid.

This is how mine looked when I set it up the first time:

I then decided to add some more spacing between the 6 posts. So, I went back to my WP Show Posts Settings; went on the Columns Tab and changed the Columns Gutter to 3em. I then clicked Update.

Next, I went to my homepage edit tab and clicked Update there too. (I also increased the bottom Padding of the Header on top of the grid to 25, to make more space between the Heading and the Posts Grid)

And this is my final version:

Once you’re happy with the Grid’s look, then play around with the styling of the container on your Home page (right-hand settings options) to ensure it’s to your liking.

Remember to add some spacing at the bottom so you have a gap between your posts grid and your footer. I put a Margin of 40 in my container bottom.

Once you’re done hit PUBLISH.

Now that the look of the homepage is finalized and you’re happy with how it looks, it’s time to see it also on tablet and mobile. See how it looks on these devices and tweak the blocks that need adjustments.

To do this I like to open my website home page on a separate tab in the web browser. Then I right-click anywhere on the page and choose the ‘inspect’ option.

In the top right corner of the split window, you can see a mobile/tablet icon. Click on this.

You should now see how your page looks in responsive mode, that is, how it adapts to smaller screens.

At the top of this page you also have the option to choose between different makes and models of mobiles and tablets so that the screen changes to the dimensions of the brand you choose and you can see how your site will look on that particular brand and model of mobile/tablet.

If you don’t see the latest website changes remember to click on the Purge SG Cache button at the top of your WP dashboard.

If this still doesn’t work, then I recommend opening the site in a separate tab and pressing Shift+F5 for Chrome. This will clear the Cache on your computer just for that site.

If you are using a Mac or another type of browser, then google ‘how to clear cache for just one website’ to find alternative solutions.

Home Page Design Done. What Next?

At this point you should have your Header, Footer and Website Home Page design done. We have what is called a one-page website with just a completed Home page.

Next we will move on to the inner pages of our WordPress site. Starting with the legal requirements, i.e., T&C, Privacy Policy and About Us pages.

Let’s start with building the ‘About Us’ Page.

After these are done, we will build templates for our Posts and Pages, so that when we publish a content piece for our website, we will have a default structure already set and all we need to do moving forward is just write the content and add the images.

Then it’s just a matter of regularly updating your website with new articles.

For a full list of WordPress tutorials, click here.