The Post List Element is available in all versions of OptimizeBuilder after March 2023.
You may use this element to add a grid or list of posts on your page for any post type whether that be pages, posts, custom post types, lessons, courses, or any other post type which is not hidden on your site.
To add the Post List element, you may search the element library for "post list" and once you type in the word "post" you'll see it there. Just drag it to the spot in your page where you want to use the element.
Drag the Post List Element into your page
Once the element is added, you'll see the Query Builder popup.
The Post List element's Query Builder will allow you to select specific content to show on your page based on several options.
First, you'll choose the type of Content such as Post Types, or Related. In the below screenshot I have selected the post type option, and selected "Posts" as this will show all of my latest blog posts. If you select "Related" and use the element on a post type with a certain taxonomy you can then show other content that matches that or other criteria.
Now you may add one or more Filters which is what you would use if you wanted to choose posts from specific categories (Taxonomies), a specific Author, or all posts within a specific Date range. Just click "Add Rule" to create one.
Once you add your first rule, you can also add multiple filters by clicking Add Rule again. In the example below, I have created a filter that shows all my blog posts that are in one of two Taxonomies (Taxonomy is another name for Category), and only if they have a featured image assigned (set) to the post. Note that if you select "Is all of" then the posts would only show that include ALL the Taxonomies selected.
There are several options for the order in which the posts appear, but in the below example you can see I selected "Date" and "Ascending" which means the oldest post will be at the top.
You can also exclude the current post if you like. Use this when including the Post List element on a post, and you want to not show the post that someone is viewing currently in the same list of posts you want to add to the page.
Below, you can see I have selected Post type of Posts, and filtered those posts to show only when they have a featured image set, and when they are part of the selected categories, and the Order is set to "Date, Ascending" - You can choose any options you want here, and then see what the result is after you exit the Query Builder.
To continue with the Query Builder, we'll now click "Next Step"
The next step lets you set the post excerpt word count, Display type, and the number of shown items. After we choose what we want here, we'll click "Next Step" again.
Now, we'll choose how many posts to show and options for how the Pagination works. IF you do not set something for "Pagenation pages limit" then it will not limit those. You can also choose how the navigation appears and where it appears. After you make your selections, just click "Next Step" again.
Now, you'll see a basic summary of what you have selected. You can click the "Close" button to exit the Query Builder.
To enter the Query Builder again, you can click on the icon for that in the element toolbar.
For example if I wanted to change the Order to "Date" and "Descending" I could go back in and change that like you see below. Then just click through the next steps and close the Query Builder at the end. Then you'll see the change, and now the newest posts will show first instead of the oldest posts.
Choosing a preset style may save you some time by not having to set all the settings you need if we have a preset that is similar to the layout you want. You can still change any settings as you could with the default element settings. To choose a Preset, just click the magic icon and you'll see the preset options open up on the left for you to select.
I started with the one the arrows point to, and changed some settings to get what you see above.
You can change the number of columns by clicking the Block Options icon, and then under the "Columns" tab, choosing the number of columns there. You can also do this while in Tablet and Mobile editing views in order to change the number of columns for those devices.
You can turn on or off the different parts of the Post List element by clicking the Block Options icon, and then selecting the "Visibility" tab.
To change the layout of the content within the post list items, click the Block Options icon and then go to the "Layout" Tab where you can then drag/drop the items in the order you want them to appear.
By default, the image is on top of all other post details. If you want to reposition the image to the left, right, or bottom of the post details, you can do so by clicking into the Post list toolbar and selecting the Block Options icon again, and then click the "Image" tab where you'll have the options to change the image layout and default image. The default image is used when there is no featured image for the post.
In the example above, I have already chosen a default image
Each part of the post list element can be clickable if you like, or the entire post list items can be clickable. To make your selection on what is clickable, you would just click the link icon in the Post List element toolbar, and then turn on or off the options under the "Enable Links" tab.
You'll see when you set the "Make entire post link" option to "Yes" all the other options go away. So if you see that and only want certain things (such as the button for example) to be clickable, then you would simply turn off the "Make entire post link" option and then you'll see those again like you do above. Here is what it looks like with that turned on.
With this option turned on, each post list item will be fully clickable and go to the post's link.
You can also set the Link Action in the next tab. You can set the link to open in the same frame or in a new window, and whether to set the link to "No Follow" which is something you would do for SEO reasons if you don't want the search bot to follow the link to the individual post (in most cases this would be set to "no").
If you have the Post Meta option turned on, you can click on that area in the post item and change some settings.
Note: If you click the Date or author name, just click the little up arrow next to the "x" in the element toolbar to focus on the main "Post Meta" area.
Click the "Post Meta Options" icon (first icon) in the toolbar to open up the settings where you can change the Separator, Horizontal spacing, and Vertical spacing of the Post Meta block.
You can also change the block order by clicking the "Block Order" tab.
If you want to turn off some of the post meta, you may do so through the Block Visibility tab. For example, if you don't like showing the post date you can turn that off here.
Set Post Date to "No" to turn that off in the Post List Element
You may need to increase or decrease the vertical spacing between the post image, title, taxonomies, content, button, or post meta. To do this, just click on the post item and then click the Settings icon to change the Gap. This will adjust the vertical spacing within the post list item.
You can get to the Post List Item toolbar by clicking on anything in the post list item, and then clicking "Post List" at the top of editor or by clicking the little up arrow next to the "x" on the toolbar until you see the "Post List Item" toolbar.
When you went through the Query Builder, you had some options for Pagination settings such as Infinite Scroll, Load More button, and Pagination Buttons. If you selected the "Pagination Buttons" then there are more customizations you can do in the element.
If you selected Pagination Buttons, then you can click on either the top or bottom pagination buttons to customize how they appear on your page. You can change the number of pages count, whether to display First and Last page buttons, Previous/Next buttons, and if you want the page number buttons to show. There is also some dots that would show and you can even turn those on/off if you want.
Note: The "Preview" tab has some settings that only impact the admin preview of the element.
If you are going for a certain design where there is no space around the post image, but you also want some padding around the content that doesn't impact the space around the image, there is a way to do this.
First, you'll go to the Post List Item advanced options and change the padding to zero like you see here (notice the image goes up to the sides of the post list item).
When you do that, you'll notice the padding for the items below the image is taken away. To fix that, we'll now go back to the Post List Item Advanced Options and change the "Content Positioning" so there is some padding added to make it look nice.
Now you can see the spacing/padding around the post list item content is looking pretty good.
The styling options for the Post List Element are very similar to other elements. You can set backgrounds, fonts, colors, spacing, and a number of other things from the toolbars in this element. Each item in the Post List element also has its own toolbar where you can make changes to that specific item as well.
If you have any questions about using the Posts List Element on your site, please reach out to our support team for further help.
