The "Post List" element in Thrive Architect allows you to display your favorite blog posts/pages/Thrive Apprentice content (if you have created courses with Thrive Apprentice) or other custom post types that you have, inside a layout, anywhere you want on your website.
In this article, you will discover how each of the options of the "Post List" element works and which is the best way to use them.
The "Post List" element replaces the "Post Grid" element in Thrive Architect.
However... If you have an existing Post Grid displayed somewhere on your website, you will still be able to use it as a "Post Grid", it will not be replaced with the "Post List" element.
On the other hand, you will not be able to add a new "Post Grid" on any of your pages, because it will be replaced in the elements panel with the new and improved "Post List" element.
The reason why we created a new element for this feature is that the "Post List" element uses new technology, so it had to be built separately from the old "Post Grid" element.
Add the Element to the Post/Page
In order to use the "Post List" element, you will first have to add it to the page, as is the case with all of the Thrive Architect elements.
In order to do this, click on the plus sign from the right sidebar to open the list of elements and look for the "Post List" element. Once you have found it, drag and drop it to the page:
After the element is added to the page, a pop-up window will open with all the available templates for the "Post List" element. Scroll down to see every template.
When you have found the one you want to use, click on it to select it and the template will automatically be applied to the element:
After you have selected a template, that template will be applied to the "Post List" element on the page and you will see the options of the element in the left sidebar:
Choose the Template
This option will let you change the current template of the "Post List" element with another one from the available templates. In order to do this, click on the box with the current template's name:
This will open the same pop-up window from where you have chosen the template in the first place:
Note: If you change the template of the "Post List" element, the content that you have previously added to the element will be lost.
Thus, it is advisable to select a suitable template before starting to add content to the "Post List" element.
Simply select the template you want to use from here and click on the "Replace Template" button to apply it:
Next in the left sidebar, we have two important options: the "Edit Design" and the "Filter Posts" options.
Since the "Edit Design" option makes the editing interface change, allowing for some more in-depth customization, we will deal with it further down this article.
Use the Main Options
This option will let you choose the content you want to display in the "Post List" element. To do this, click on the "Filter Posts" button:
After clicking on the "Filter Posts" button, a pop up will show up on the screen, containing all sorts of options regarding what content you would like to display in the element:
In the pop-up window, you will see two different sections/tabs: the “Custom Query” tab and the “Related Posts” tab.
With the help of this section, you can manage the posts/pages or other content that will be displayed in the "Post List" element. Here, you can choose exactly what to display and how to display it:
1. Select the content type
The first thing you have to choose here is the type of content you want to be displayed in the element. By default, the posts of your website are selected. In order to change this, click on the field next to the "Content to Display" option, which in this case is the “Posts”:
This will open the drop-down where you can choose the type of content from:
Keep in mind that the content types in this drop-down may vary based on the custom post types you have on your website, as well as based on whether or not you have Thrive Apprentice too.
Note: If you have installed and activated WooCommerce on your website, you will also have the "Products" option in this list, so that you will be able to showcase all of your WooCommerce products using the "Post List" element:
Simply click on the checkboxes content types you want to be displayed and then continue with setting up the other aspects of the custom query.
2. Add filtering rules
The next step is to add a certain rule for the blog posts/pages or other content that you selected to be displayed. For that, click on the “Add Rule” option from the "Filtering" section of the pop-up:
- If you have chosen to only display posts, this option will allow you to filter the content you want to display using Categories, Tags, Authors, or even choose the specific posts that you want to display:
Keep in mind that, if you have multiple categories created, the Post List category filter won't show the complete list of all the categories.
In case you're looking for a specific one and you can't see it in your list, simply start typing in the category in the dropdown and you will be able to find it and select it:
- In the case of pages, this option will allow you to filter the content you want to display using Authors, or the specific pages that you want to display:
- In the case of Thrive Apprentice content, this option will allow you to filter the content you want to display using Courses, Authors, or the specific content (lesson, chapter, or module) that you want to display:
You can add as many display rules as you want until you display the exact content you want in the "Post List" element.
Please note that, since you are able to select more than one type of content when setting a filtering rule, you might get this warning:
The reason why this might happen, as well as how you can solve it, has been explained here.
Once you have finished adding the display rules, you can further customize how the content will be shown in the element, using the options below the display rules in the pop-up.
3. Order the content
Select how to arrange the content by clicking on the down arrow next to the "Order" option.
You can either arrange the content by Date, Title, Author, Comments, or simply by random choice, in the drop-down that opens. You just have to click on the option you want from the drop-down to select it:
4. Sort the content
Next, you can sort the content of the "Post List" by opening the drop-down from the "and sort" option:
Simply select to sort the content either in an ascending or descending order by clicking on the respective option from the drop-down.
5. Choose how many items should be displayed
Last, but not least, you can set how many posts/pages/items of content you want to display on your actual "Post List" and also which ones should be placed first, based on the display rule you have chosen.
In order to do this, simply complete the numbers in the corresponding fields as shown below:
Below these options, you will also be able to enter a customized message that will be shown to users, in case there are no results to be displayed in your "Post List" element:
There is a default message filled in here, but you can change it anytime with your own message. Simply delete the current text and replace it with your own.
With the help of this section, you can choose to display posts that are related to the post/page that your “Post List” element is displayed on. In order to do this, click on the “Related Posts” tab from the pop-up that appeared when you opened the “Filter Posts” option.
Then, use the different options that appeared to set the criteria after which the posts should be displayed:
There are four criteria you can choose from here:
- Formats (for e.g. Video Post, Audio Post, Blog Article. These are defined by your theme)
For example, if you choose to filter the “Related Posts” by “Author”, then you can use the “Post List” element to display posts published by the same author, that are related to the current post/page.
You can also choose how to arrange/sort and display the related posts. These options work the same way as described above, in the case of the “Custom Query”.
Once you have finished setting up either the “Custom Query” or the “Related Posts”, click on the “Save and Close” button to save the changes and continue customizing your “Post List” element.
Post List Sidebar Options
After you have set up the "Filter Posts" option, you can use the rest of the sidebar options to further customize your "Post List" element:
There are three ways in which you can display your posts/pages/content in the "Post List" element:
- List: If this setting is selected, each post/page or item of content will be sown in a list format, one after another.
- Grid: If the "Grid" setting is selected, then the posts/pages/content will be displayed in a series of columns side by side. Each column will have a fixed height and spacing between them, to form a perfect grid.
- Masonry: This setting resembles the "Grid", in the sense that this will also display the posts/pages/content in columns. The difference is that there are no fixed heights for the columns (irregular layout, best visible when having 2 or more rows on your "Post List").
In order to select one of these settings, simply click on the preferred setting from the "Display Type" section:
Show Featured Content
This option allows you to display your most important posts/pages/another type of content on top of the "Post List" element as featured content. This featured content will be displayed above the "Post List" element, so this way you can highlight important posts/pages with it.
In order to use this option, first activate it, by clicking on the switch next to it:
Once this is activated, the switch will become green and another section, the “Featured Content List”, will appear on top of the “Post List” element. This is where you will have to add the featured content. In order to get detailed information about how to do that and how to use the “Featured Content” option, please check out this article.
Here you can select how many columns should the "Post List" element display the content in. In order to change the number of columns, simply drag the slider from the "Columns Number" section, or enter a value manually in the box next to it:
Horizontal Space & Vertical Space
With the help of these two options, you can adjust the horizontal space (the space between the columns) and the vertical space (the space between the rows). All you have to do is to drag the slider, or enter a value manually in the box next to the slider for the space you want to modify:
The "Pagination Type" option allows you to add pagination below the items of your "Post List" element. This comes in handy if you have many posts that you display on more pages of the "Post List" element.
By default, there is no pagination added to the element. In order to use this option, click on the field from the "Pagination Type" section. This will open a small drop-down with the three options you can choose from. Click on the one you want to use:
- None is the default state and it means that there is no pagination added to the element.
- Numeric: if you choose this option, a "Numeric" "Pagination" element will be added, below your "Post List" element.
- Load More: if you choose this option a "Pagination" in the form of a "Load More" button will be added, below your "Post List element".
If you want to find out how to further customize the "Pagination" that is added when you use the "Numeric" or the "Load More" "Pagination Type" options, take a look at this step-by-step guide.
Number of Items
You can also set the number of different article boxes that will be displayed within the selected "Post List" from the following option available in the sidebar:
Here you can select how much should be displayed in the "Post List" element from the blog posts/pages/content items.
You can choose to display the posts/pages/content items:
- In Full: this will show the entire content
- In an Excerpt: this will display part of the content (that you can set up in the WordPress editor of that post, through the "Excerpt" option).
- In a defined number of Words: here you can choose the exact number of words you want to display from every post/page/content items. When you click on the "Words" option, the "Word Count" field will appear, where you can select or type in the number of words you want:
All you have to do is to select one of these three options and then, in the case of "Words" complete the necessary field pertaining to the respective option.
Read More Text
With the help of the "Read More Text" option, you can display a hyperlinked text at the end of the "Post List" items. This is for the cases when you choose to show an excerpt or a certain number of words from the post/page/content.
In order to display this hyperlink text, all you have to do it to enter the text you want to be linked (e.g. "Read more", "Continue reading") in the box from the "Read More Text" option.
After you do this, the text will be displayed at the end of every "Post List" item and it will be linked automatically to the actual blog post/page/content from the "Post List". Thus, when clicked, this linked text will send the visitors to the actual content they have read an excerpt from.
Link entire item to content
This option gives you the possibility to link entire items from the "Post List" element to the page/post/content they represent.
If you use this option, when someone will see the "Post List" element, they will not have to click on a specific title, button, or on the featured image from one of its items, to be redirected to the post/page. They will be able to simply click anywhere on the respective "Post List" item and they will be redirected to the full page/post/content of that item.
If you want to use this option, all you have to do is to click on the switch next to it:
This will activate the option, the switch will become green and the items will be linked to their post/page/content.
Note: If you activate the "Link entire item to content" option, all the other links from the "Post List" (for example, the links applied to buttons or images of an item, with the “Animation and Action” option) will be disabled.
These were the main sidebar options of the "Post List" element.
However, the more general options (such as the "Layout & Position" or the "Borders & Corners" options) are also available for this element. Since these are general options, we have separate tutorials on using them. You can check these tutorials out here.
Customizing the Post List Design
In order to customize the design of the "Post List" element, click on the "Edit Design" button:
When clicking the "Edit Design" button, the editing interface changes a bit, allowing you to go more in-depth and make changes to the actual elements inside the "Post List" element.
This way, you can choose to remove a certain element from there or modify its structure.
Group editing is enabled at all times when you edit the design of this element, in order to keep consistency inside the "Post List" element.
This means that, for example, if you remove or modify an element from one column, the corresponding elements from the other columns will also be affected:
While editing the design, you can also add new elements from the right sidebar, elements that are currently available only for the Post List element!
So, if you open the list of elements by clicking on the plus sign from the right sidebar, while in "Edit Design" mode, you will see the following elements:
Some of these elements will be displayed on the "Post List" by default, as soon as you add it to the page (Featured Image, Post Categories, Post Content, Post Title, and Read More).
They are also displayed in the right sidebar, in case you remove them and then you want to add them back on.
Apart from those elements, you will also find the following:
- Author Bio: Description about the author of the post (needs to be set up in the WordPress "Users" section)
- Author Name: Name of the author (also set up within the WordPress "Users" section)
- Author Image: Image of the author (set up on Gravatar)
- Comments Counter: Shows the number of comments posted on the blog post
- Post Date: Display the publish date of the post
- Post Tags: Tags for the post set up within WordPress
Stylistically, you can also customize each of these elements how you see fit, using all of the customization options available in Thrive Architect.
Use the Rest of the Options
If you want to know how to use the rest of the options from the left sidebar, make sure to take a look at the articles and tutorials from our Knowledge Base.
In case you need even more information on the "Post List" element, check out this blog post.
Hopefully, this article was useful for you. If so, please give it a smile below :)