Displaying Recent Posts in Phlox Grid and Carousel Style
Almost every WordPress theme allow you to display your recent posts. This option is available in Phlox, too. The difference is you can you can give a style to the recent posts by editing the widget options in Widget Areas or in Page Builder. Phlox Recent Posts Widgets let you show your most recent posts on a widget bar of your website, and any page or post you want.
One of Page Builder elements for recent posts, is Grid and Carousel Recent Posts Widget. You can specify the category or categories and the number of recent posts. You have the options to choose a title, ordering the posts, the content layout, etc. In addition, you can change the number of columns up to 6 columns.
Grid and Carousel Recent Posts Options in Elementor Page Builder
- Go to your WordPress Admin Panel
- Click the Pages on the Dashboard
- Click the Add New
- Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
- Check out Elements
- Scroll down to PHLOX - POSTS section
- Choose Grid & Carousel Posts
After adding recent posts to your post or page, you are able to customize it by available options:
-
Layout
Layout
Here you can choose the number of Columns and Column space of your recent posts.
Also, you are able to Display items as Grid, Grid - Table Style, Grid - Modern Style, Carousel - Modern Style and Carousel.
On Carousel layouts, you will find different options. You can choose Navigation type to Move per column, per page, or Scroll smoothly. You can enable Loop navigation, Autoplay carousel, and set an Autoplay delay time in seconds.
Navigation control can be Bullets or Arrows.
Arrows control can have two different Positions and Skins. You can set them to Center or Side of the items. Your arrows can be Long Arrows or Boxed.
Your Content layout can be Full Content or Boxed Content. On the second content layout, a narrow border will appear around your items.
Display
You are able to enable these features to display on your recent posts:
- Display post media (Image, Video, etc.)
- Display post title
- Display post info and choose its position (After/Before Title)
- Display categories
- Display date
- Display post content
- Display like button
- Display excerpt and choose the length of it (The number of characters to show)
- Display author or read more
-
Content
Query
You are able to choose one or more than one Category for your recent posts, or even show the posts of all available categories. Also, you can select a specific category.
Number of posts to show is editable. Also, you are able to Exclude posts without media and custom post formats. If you exclude custom post formats, you are able to Exclude quote and link post formats.
You can Order posts by:
- Date: Order the posts by their publication date
- Menu Order: Order by page order
- Title: Order by post title
- ID: Order by post ID
- Random: Your posts appear randomly
- Comments: Order the posts by number of comments
- Date Modified: Order by last modified date
- Author: Order by the posts' author
- Inserted post IDs: In the order you write post IDs on Include posts section
Post Order can be Descending or Ascending.
In Include/Exclude posts field, you can enter the the specific posts IDs that you want/do not want to show.
In Start offset field, you are able to set a number to choose the number of posts you want to skip, and start the output with the next posts.
Paginate
There are three types for Load more:
- Infinite Scroll
- Next Button
- Next/Prev Button
You can choose none if you do not want any of the mentioned load more types.
-
Style
Image
You can change image aspect ratio to: Horizontal 4:3, Horizontal 16:9, Square 1:1, and Vertical 3:4
Title
You can change the Color, Typography, and Bottom space of the title on Normal or Hover.
Post Info
Many options are available here that let you change Typography, Color, Bottom space, and Space between metas on Normal and Hover.
Excerpt
Customize Color, Typography, and Bottom space of posts excerpt.
Meta
Like previous options, you can change the Color, Typography, and Bottom space for post metas on Normal or Hover.
Check out this article to know more about Advanced tab and start working with Elementor.