5 unique designing ideas for displaying selected posts on the homepage

   Joe Lobo

How to

August 7, 2020
0

When you are a web designer you need to be adaptable based on the requirements of each project. Some clients will ask for certain features or for a specific design style. 

The best way to show flexibility is by having tools that allow you to make changes to designs easily without large amounts of complex coding.

The best platform for building websites is WordPress which uses its core editor, Gutenberg, to build and design content. One of the advantages of Gutenberg is that it has a number of extensions to create unique designs. One of the best is Toolset. Take a look at our WordPress Design Course to see how to create a great-looking site.

Below I will outline 5 unique design ideas that you can easily create using WordPress and Toolset to display your posts. 

I built all my examples on Toolset’s membership site demo, which you can download and play around with for free. Each of the designs will load content from the posts type and will be added to the homepage.

I loaded my content from the Posts in the membership site demo.

How you can create and design content using WordPress and Toolset

When you build websites using WordPress and its extensions you will design your pages and insert content using blocks. Inside each block, you can add a type of content (such as a heading or image) and rearrange them how you see fit.

With WordPress you build your content using blocks.

Toolset’s set of blocks (known as Toolset Blocks) is unique in that it allows you to add dynamic content to your pages. Toolset also provides a number of new blocks that we will go through below.

1. Using a collage layout

An example of a collage layout.

To display the list of posts in collage layout and in many of the other designs I first need to add Toolset’s View block. 

Think of the View block as the base from which you can load and design your list of posts.

You can find the View block under Toolset’s blocks section.

Once you add the View block you are taken to the wizard where you can set it up. On one of the steps, you can choose the View Loop Style for your list of posts. Here you can select the Collage style.

With the Toolset wizard you can select the view loop style.

Next, you can choose the type of collage you want to create. You can either design your own or choose one of the pre-made templates. Below is an example of a collage I designed myself.

Customize your collage with Toolset.

Once you have decided on your collage design you choose which content the collage will display. For example, below I have selected to list content from my “Posts.”

I can load whatever content I want using Toolset.

I have now finished the wizard and I can start adding my blocks to build my content. Before I add the content itself I will include another of Toolset’s unique blocks – the Container block. The Container block allows you to add the same styling, background, font and much more to a set of blocks.

The Container block is available with Toolset.

Below I have added a number of blocks inside my container block. For example, below I am in the middle of adding an image using Toolset’ Image block. Note, I am not using the standard WordPress block, rather, the one Toolset provides. This is in order to add dynamic content.

To add dynamic content I simply select the source for the images. Below, the source is from the post’s featured image. This means each post will display its own featured image.

I can select the source for my images using the dropdown.

Besides the image, I have added a number of other fields including the date, title and post excerpt.

I can add my fields using blocks.

Thanks to Toolset, there are also a number of ways you can style each of your blocks. When you click on each of the blocks you can see on the right hand sidebar a number of options to style the content. 

For example, you are able to add a margin/padding, change the background color, font, add a border and much more.

There are a number of ways to style your content without using coding.

Once you have styled your blocks you now have a working collage for the front-end.

My collage on the front-end.

Remember, you can check out our documentation on creating galleries including collages for detailed steps on how to create them.

2. Using a masonry layout

Just like with a collage, you create a masonry layout by adding the View block. This time we select masonry as the output.

This time I select the masonry layout.

Once you have selected the masonry style you can add your blocks just like for the collage style. Below I have added exactly the same blocks as before and included a black background.

I have included the same blocks as before and changed the background slightly.

One difference is that you can click on the View Loop and head to Masonry Settings -> Columns Number to adjust the number of posts in each row. You can also increase the spacing between them. Below I have set the number of columns to 2.

You can adjust the number of columns easily on the right-hand side.

Here is how my masonry design looks on the front-end.

My masonry design on the front-end.

3. Grid layout

Just like the previous two layouts you can turn your list of posts into a grid using the View block. Once again on the wizard, you simply select the Grid loop.

I now select the Grid loop from the wizard.

I have added the exact same blocks as before. This time I have styled the Read more button by changing the font and background color. Similarly to the masonry layout, I can change the number of columns and the gap between the columns and rows.

I can make changes to my grid’s columns using the sidebar.

Here is how the grid layout looks on the front-end. Remember it has the same content as our previous layouts.

This is the grid layout, with the same content as previous layouts.

4. Sliders with dynamic post content (1 post per page)

You can also utilize Toolset and WordPress to create different types of dynamic sliders with post content. First, I’ll show you how to create a slider with one post per page and later a slider with three posts.

Just like the other design ideas we start with the View block and choose our loop style. This time I chose the grid option but you can also opt for unformatted depending on the design you want. I have also selected the Pagination toggle which we will need later.

This time I select the Pagination toggle as well.

I added the same blocks for content as before including the Container block and the other blocks which will nest inside the Container block. I have even changed the background to an image and added an overlay so that the content is easier to read.

I have changed some of the colors using the sidebar styling available with Toolset.

There are a couple of cool things I can do to make the list of posts a true slider. First I can ensure it updates automatically to the next post.

You can do this on the right sidebar simply by selecting the Pagination enabled with automatic AJAX transition.

AJAX updates means the slider which transition automatically.

Secondly, I can adjust the pagination to dots on the right sidebar, center the pagination and limit the number of slides to one per page.

I can make a number of changes to my slider.

Now when you look on the front-end you can see a slider that updates automatically and contains only one post per slide.

My slider on the front-end.

5. Sliders with dynamic post content (3 posts per page)

With just a couple of clicks you can increase the posts per page on your slider. 

To display three posts per page, all I did was increase the number of slides on one page to three and the Column Count for the grid to 3 so that they were all on the same row.

Increase the column count to display more posts.

You now have a slider which looks completely different to the previous one but required next to no work to change it.

My modified slider on the front-end.

Start designing your posts today!

Here are the steps to take so that you can start adding posts with different designs..

  1. Download Toolset 
  2. Check out one of our Toolset courses to learn all about the different designs.
  3. Practice adding your designs using one of Toolset’s free reference sites.
  4. When you are ready, install and register Toolset on your own website and get started!