5 unique designing ideas for displaying selected posts on the homepage
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.
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.
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.
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
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.
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.
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.
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 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.
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.
Besides the image, I have added a number of other fields including the date, title and post excerpt.
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.
Once you have styled your blocks you now have a working collage for 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.
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.
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.
Here is how my masonry design looks 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 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.
Here is how the grid layout looks on the front-end. Remember it has the same content as our 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.
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.
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.
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.
Now when you look on the front-end you can see a slider that updates automatically and contains only one post per slide.
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.
You now have a slider which looks completely different to the previous one but required next to no work to change it.
Start designing your posts today!
Here are the steps to take so that you can start adding posts with different designs..
- Download Toolset
- Check out one of our Toolset courses to learn all about the different designs.
- Practice adding your designs using one of Toolset’s free reference sites.
- When you are ready, install and register Toolset on your own website and get started!