Posts Widget

Before setting up the Posts Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Posts Widget, at no cost! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Posts Widget displays a list of blog posts with options to filter by category or tag and customize the design to fit your site.

Key Use Cases for the Posts Widget in Elementor:

• Use the Posts Widget to display and filter blog posts by category or tag, with design customization to enhance layout and user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate a Posts Widget ?

To activate the Posts Widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Posts Widget in the list.
3. Toggle it on to enable the widget.

This will activate the Posts Widget for you to use!

How to Configure Posts Widget

To get started, navigate to the Animation Addons dashboard and select Theme Builder.

Within the Theme Builder interface, locate and select the Single option, then click on Add New Template to create a new single post template.

Fill in all the necessary sections and then click on Edit with Elementor to customize the template further.

After selection, the Elementor panel appears with all tools and customization options.

Configuring Posts Widget: A Step-by-Step Guide

Once the Posts Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

In the content section, we have three options: Layout, Query, and Pagination.

Under the Content tab of the Posts Widget, the Layout section allows you to control how your blog posts are displayed. Below is a detailed explanation of the available customization options:

Layout 

Style

Choose from six predefined layout styles to determine the structural design for displaying your posts. 

Columns

Set the number of columns to control how many posts appear per row. This setting supports responsive adjustments for different devices.

Posts Per Page

Define the total number of posts to display on a single page.

Image Resolution

Select the image size (Medium – 300 x 300) to maintain visual consistency and performance optimization.

Show Title

Toggle to show or hide the post title. When enabled, each post will display its title above or below the image, depending on the style layout.

Title Length

Set a character limit for post titles. If the title exceeds this limit, it will be truncated with an ellipsis (…).

Title HTML Tag

Choose the HTML tag (H1–H6) used for the post title, which helps maintain SEO structure and hierarchy.

Highlighted Title

Enable or disable highlighted styling for the post title, which visually differentiates it for better user engagement.

Show Excerpt

Toggle this option to display a short summary of the post content.

Excerpt Length

Set the number of words or characters to display in the excerpt field.

Show Date / Show Comment / Show Author / Show Taxonomy

Enable or disable the display of post metadata such as:

• Date – Shows the publish date.
• Comment – Displays the comment count.
• Author – Shows the post author’s name.
• Taxonomy – Displays categories or tags.

Read More

Toggle this option to show a “Read More” link below each post.

Read More Text

Customize the call-to-action text for the “Read More” link.

Icon

Choose an icon to accompany the “Read More” text. You can select from the icon library or upload a custom SVG.

Icon Position

Define the position of the icon relative to the text:

• Before – Icon appears before the text.
• After – Icon appears after the text.

Icon Spacing

Adjust the space between the icon and the “Read More” text to ensure proper visual balance.

Query 

The Query section allows you to control which posts are displayed in the widget by applying specific filtering and ordering parameters.

Query Type

• Custom: Enables advanced filtering options, allowing users to manually define what content appears.
• Default: Displays posts based on the default WordPress loop or theme settings.

Source

Choose the type of content to be displayed, such as:

• Posts (default)
• Pages 
• Any registered Custom Post Type

Include / Exclude

• Toggle between Include or Exclude filters.
• Define specific parameters to include or exclude posts based on taxonomies or terms like categories, tags, or custom taxonomies.

Include By

• Use this field to select specific terms ( a category or tag) to include in the query results.
• Clicking the “+” button opens a taxonomy selector to refine your content display.

Post Format

• Filter posts by WordPress post formats (e.g., Standard, Gallery, Video, Quote), if applicable.
• Supports multiple format selections.
  

Date

• Select a time range to display posts:
  • All, Today, Last 7 Days, This Month, etc.
• Useful for time-sensitive or trending content filtering.

Order By

• Choose how the posts should be sorted:
  • Date, Title, Menu Order, Random, etc.
• Ensures content appears in the desired order for relevance or aesthetics.

Order

• Set the display order:
  
  • ASC (Ascending) – Oldest to Newest
  • DESC (Descending) – Newest to Oldest

Ignore Sticky Posts

• Yes/No Toggle
  
  • When enabled, sticky posts will be ignored in the query.
  • Helps maintain a uniform post flow without prioritizing sticky content.

Pagination 

Pagination allows users to navigate through multiple pages of blog posts.  When you select “Numbers + Previous/Next” from the Pagination options, additional settings become available to enhance functionality and appearance:

Available Options:

• Style Section : Choose the visual style for pagination elements to match your site design.
  
• Page Limit : Set the maximum number of page numbers to display at once.
  
• Shorten Toggle Button: Enable or disable shortening for long pagination lists with ellipsis (…) to improve layout and readability.
  
• Previous Arrow Icon : Choose a custom icon for the “Previous” button.
  
• Next Arrow Icon : Choose a custom icon for the “Next” button.
  
• Alignment : Align the pagination section to Left, Center, or Right within its container.
  
• Spacing : Adjust spacing between pagination elements for better visual balance.

Style Settings

Within the Style section of the Post Widget, you will find multiple customization panels to control the visual appearance of your post listings. These include:

• Layout – Adjust spacing, alignment, and column gaps to define the overall structure.
  
• Thumbnail – Customize image size, border radius, spacing, and hover effects.
  
• Content – Control the padding, spacing, and background styling of the content container.
  

Title – Modify typography, color, spacing, and hover effects for post titles.

• Excerpt – Configure font styles, length, and spacing for the post excerpt text.
  
• Taxonomy – Style category or tag labels, including background, color, spacing, and hover effects.
  
• Meta – Customize author, date, and other post meta elements with typography and color settings.
  
• Read More – Style the “Read More” button or link, including hover animations, typography, and color.
  
• Pagination – Adjust layout, icon size, spacing, and color options for pagination controls.
  
• Hover – Define hover animation styles and effects for post items.

In the content section, I made a few slight changes for my design as I don’t need any further customization.

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Words

The Posts widget in Elementor allows you to showcase multiple posts in a customizable layout. With options for styling and content display, it helps create an engaging and dynamic blog or news section on your website.