It's possible to list posts and custom post type posts using the Posts widget or the Portfolio widget of Elementor Page Builder.
Normally, posts displayed in the following ways in multiple columns:
If you want to display post items vertically in multiple columns in Elementor, you can use a simple CSS code snippet.
How to display post list items vertically in mulitple columns in Elementor
When displaying posts in multiple columns using the Posts widget or the Portfolio widget, you can list them vertically with simple CSS.
First, drag and drop the Posts widget or the Portfolio widget to the place you want to display.
You can specify the number of columns under the Content tab > the Layout section.
If you want to list post items vertically in multiple columns, please enter "1" in the Columns field.
Also, please specify the number of columns for the table and mobile devices:
Please click the Advanced tab and enter a CSS class in the CSS Class field (e.g. vertical-columns).
In the Custom CSS field, add a CSS code snippet to make the posts vertically listed:
I added the following CSS code:
/* Display Post list items vertically in mulitple columns in Elementor Post Widget */
@media screen and (min-width: 768px) {
.vertical-columns {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.vertical-columns .elementor-button-wrapper {
position: absolute;
left: 0;
right: 0;
}
}If you want to list posts in two columns, please change the value of the column-count property to "2".
Now if you save the changes and refresh your page, you can see that the post items display vertically in three columns.
※The Post widget and the Portfolio widget are available in Elmentor Pro.