Elementor Smart Post Listing Widget

Elementor Smart Post Listing Widget by Premium Addons is a WordPress plugin for Elementor page builder that customizes post layouts with magazine-style designs. It has powerful and flexible customization options to elevate website aesthetics and take advantage of Elementor’s capabilities.

Check Elementor Smart Post Listing Widget demo page

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Make sure that this widget is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Smart Post Listing Settings

Start by dragging & drop Elementor Smart Posts Listing widget into your Elementor editor.

Key Features

• Layout.
• General.
• Query.
• Posts Header.
• Featured Posts.
• Posts Options.
• Navigation.

Layout

You can select the layout settings to create Elementor smart post listing to display your posts. Also, you can select the grid, a post per page, feature posts, listing columns, grid spacing, and list posts grid.

• Grid: The first option is the grid layouts. You can choose between.
  • Grid 1, Grid 2, and Grid 3: Select if you want to use an already built Posts Grid layout.
  • Custom Grid: Select to create a new layout in Elementor editor.
• Post Per Page: Select the number of posts you desire to show per page.
• Featured Posts: Enable/Disable to show the featured post.
• Listing Columns: Select between 1 and 5 columns for the layout of your posts.
• Grid spacing: Adjust the spacing of the Grid.
• Listed Posts Grid: The second option is to adjust the Post’s spacing.
  • Row Spacing: Control the post’s row spacing.
  • Post Inner Spacing: Alter the post inner spacing.

General

You can select the general settings to create Elementor Smart Post Listing to display your posts. Also, you can select the hover effect, loading animations, animation speed, open post link in new tab, change post-HTML tag to article, post title HTML tag, post meta separator, and post meta spacing.

• Hover Effect: Set on hover effect for posts. For instance: None, Underline, Overline, Double Line, Framed, Background, or Text.
• Loading Animation: Select Elementor Smart Post’s entrance. For instance: None, Slide Up, Slide Down, Slide Left, and Slide Right.
• Animation Speed: Select the animation duration in milliseconds.
• Open Post Link in New Tab: Enable/Disable open post link in new tab.
• Change Post HTML Tag To Article: Enable/Disable changing the post’s HTML tag to article.
• Post Title HTML Tag: Select the title’s HTML tag for instance: H1, H2, H3, H4, H5, H6, div, span, or p.
• Post Meta Separator: Select the separator between the post’s metadata.
• Post Meta Spacing (px): Adjust the spacing between metadata in pixels.

Query

Query settings for Elementor Smart Post Listing widget, you can from here select the source of the posts, and you can select custom posts type. Also, you can filter by categories, tag, author, and select specific posts. Generally, this option is to select the posts to display on the Elementor Smart Post listing.

• Source: Select the source of the posts, you can select a custom post type.
• Categories Filter Rule: Show the posts that match specific categories or exclude them.
• Tags Filter Rule: Show the posts that match specific tags or exclude them.
• Filter By Author Rule: Show the posts that match specific authors or exclude them.
• Filter By Post Rule: Select posts to show or exclude them.
• Ignore Sticky Posts: Enable it to ignore sticky posts. Sticky Post is a post that is placed at the top of the front page, keeping it there until new sticky posts are published. For more information please check this article.
• Offset: Exclude a number of initial posts from being displayed.
• Exclude Current Post: Remove the current post from the query.
• Order By: You can choose to order the blog posts by the following attributes:
  • None
  • ID
  • Author
  • Title
  • Name
  • Date
  • Last Modified
  • Random
  • Number of Comment
• Order: Additionally, you can show the posts in descending or ascending order.
• Empty Query Text: Add a message to be shown when the query result is empty.

Posts Header

• Posts Title: Add Post title.
• Filter Tabs: Enable to add filter tabs.
• Get Tabs From: Get tabs to filter from Categories or Tags. Please make sure to select the categories/tags you need to show from the Query tab.
• First Tab Label: Add the first tab label.
• Number of Visible Tabs: Select the number of filter tabs.
• Filter Tab Spacing: Adjust the spacing between filter tabs.

Featured Posts

• Posts: Select the feature post from the dropdown menu.
• Featured Area Size: Adjust the feature post size in pixels.
• Image Size: Set the featured image sizes.
• Minimum Height: Set the feature post’s minimum height.

Posts Options

• Show Post Content: Enable to show the post’s content.
• Get Content From: Select from where to display the post content, Post Excerpt or Post Content.
• Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
• Excerpt Type:
  • Dots: 3 Dots (ellipsis) will be displayed after the text.
  • Link: If you select Link, a link to the full post will be added after the text, and you can also change the link text. Also, select the width of the button.
• Hide Content On: Select the devices to hide the content on it.
• Place Post Meta Above Post Title: Enable/Disable the post title above the metadata.
• Enable or disable the following:
  • Author Meta
  • Date Meta
  • Categories Meta
  • Comments Meta
  • Tags Meta

Post Options

The post options adjust the way the post content and the meta-information (such as the author and the publishing date) are presented:

• Show Post Thumbnail: Enable to show the post’s thumbnail.
• Position: Set the post position to the right or left.
• Image Size: Select the post’s image size.
• Width: Set the post’s width.
• Height: Set the post’s height.
• Content Alignment: Set the post’s content alignment.
• Show Post Content: Enable to show the post’s content.
• Get Content From: Select from where to display the post content, Post Excerpt or Post Content.
• Excerpt Length: Excerpt is used for the article summary with a link to the whole entry. The default excerpt length is 22.
• Excerpt Type:
  • Dots: 3 Dots (ellipsis) will be displayed after the text.
  • Link: If you select Link, a link to the full post will be added after the text, and you can also change the link text. Also, select the width of the button.

• Hide Content On: Select to hide content on which devices.
• Place Post Meta Above Post Title: Enable/Disable the post title above the metadata.
• Enable or disable the following:
  • Author Meta
  • Date Meta
  • Categories Meta
  • Comments Meta
  • Tags Meta

Navigation

With the Navigation, users can enable or disable the post carousel, or enable or disable the post pagination.

Carousel

• Enable Carousel: Enable or disable the post carousel.
• Fade: Enable fade effect on Carousel.
• Auto Play: Enable or disable autoplay.
  • Autoplay Speed: set the autoplay speed for the carousel in ms.
• Rows: Set Number of posts’ rows.
• Slides To Scroll: Set how many slides to show in one scroll.
• Transition Speed: Set the speed of the carousel animation in milliseconds (ms).
• Center Mode: Enables a centered view for one of the slides with partial next/previous slides. 
  • Slides’ Spacing: set a spacing value in pixels [when Center Mode is enabled], so you can set how much partial view from the next/previous slides should appear.
• Navigation Dots: Enable the navigation dots for the carousel.
• Navigation Arrows: Enable the navigation arrows for the carousel.
• Arrows Position: Set the arrows’ position in pixels or em.

Pagination

• Pagination: Pagination is the process of dividing posts into discrete pages.
• Page Limit: Choose the number of posts you want to display per page.
• Type: Select pagination type between numbers or arrows.
• Enable Pagination Next/Prev Strings: Enable Next and Previous buttons.
• Previous Page String: Change the previous button string.
• Next Page String: Change the next button string.
• Alignment: Optionally align the pagination to the left, right, or center.

Styles

In the Style tab, you will be able to customize your Smart Posts Listing widget the way you want, to make it match and fit your needs.

• Image
• Posts Header
• Filter Tabs
• Categories
• Featured Posts
• Posts

Image

• Featured Overlay Color: Select featured image overlay color.
• Post Overlay Color: Select the post image overlay color.
• CSS Filters: You can also customize the images further by selecting one of the available filters: Blur, Brightness, Contrast, Saturation, and Hue.
• Hover CSS Filters: You can also customize the images further by selecting one of the available hover filters: Blur, Brightness, Contrast, Saturation, and Hue.

Posts Header

• Box Shadow: Set a shadow for the filter and adjust its settings.
• Background Type: Pick a background for the post header.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Border Type: Customize border settings for the post header.
• Border Radius: Add radius for border corner for posts header.
• Padding: Creates space around the post header in Elementor Smart Posts Listing Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).
• Margin: Creates a space around the post header in Elementor Smart Posts Listing Widget, outside of any defined borders. You can set the margin in Pixel (PX), Em (em), or Percentage (%).

Filter Tabs

• Typography: Adjust font settings and style it.
• Color: Select a text color for normal, hover, and active modes.
• Background: Select tab color for normal, hover, and active modes.
• Border Type: Set a border type for filter buttons. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Set the border radius for filter tabs.
• Box Shadow: Set a shadow for the filter and adjust its settings.
• Padding: Creates space around the filter buttons in Elementor Smart Posts Listing Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Categories

• Typography: Adjust font settings.
• Categories: Style categories labels.
  • Color: Pick a color for the category text.
  • Hover Color: Set a color for category text on hover state.
  • Background Color: Pick a color for the category label background.
  • Hover Background Color: Set a color for the category label background on hover state.
• Border Type: Set a border type for the category label.
• Border Radius: Set the border radius for the category label border.
• Padding: Creates space around the categories labels in Elementor Smart Posts Listing Widget. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).
• Margin: Creates a space around the categories labels in Elementor Smart Posts Listing Widget. You can set the margin in Pixel (PX), Em (em), or Percentage (%).
• Featured Posts Categories
  • Horizontal Position.
  • Vertical Position.
  • Spacing.

Featured Posts

• Title: Set featured posts settings.
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the featured post title.
  • Hover Color: Select the color of the featured post title when the user hovers over it.
  • Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

• Post Meta: Set Featured post meta settings.
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the featured post metadata.
  • Metadata Color: Select the color of the featured post metadata.
  • Link Hover Color: Select the color of the featured post metadata when the user hovers over the links.
  • Separator Color: Set the separator color between featured post metadata.
  • Bottom Spacing: Set the space below post metadata in Pixel (px), Em (em), or Percentage (%).

Content

• Typography: Adjust font settings and style it.
• Color: Select the color of the featured post content.

Content Box

• Width: Set featured post content box width.
• Box Shadow: Set a shadow for the featured post content box and adjust its settings.
• Background Type: Pick a background for the featured post content box.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Border Type: Set a border type for the featured post content box border.
• Border Radius: Set the border radius for the featured post content box border.
• Padding: Creates space around the featured post content box in Elementor Smart Posts Listing Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Container

• Box Shadow: Set a shadow for the filter and adjust its settings.
• Background Type: Pick a background for the featured post container.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Border Type: Customize border settings for featured posts container.
• Border Radius: Add radius for border corner for featured post container.
• Padding: Set padding for the featured post container.

Posts

• Title: Adjust posts’ title settings.
  • Typography: Adjust font settings and style it.
  • Color: Select the color of the post title.
  • Hover Color: Select the color of the post title when the user hovers over it.
  • Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

• Post Meta: Set the post’s meta settings.
  • Typography: Adjust font settings.
  • Metadata Color: Select the color of the post metadata.
  • Link Hover Color: Select the color of the post metadata when the user hovers over the links.
  • Separator Color: Set the separator color between post metadata.
  • Bottom Spacing: Set the space below the post meta in Pixel (px), Em (em), or Percentage (%).

Content Box

• Box Shadow: Set a shadow for the filter and adjust its settings.
• Background Type: Pick a background for the content post.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Border Type: Set a border type for the content box.
• Border Radius: Set the border radius for the content box border.
• Padding: Creates space around the content box in Elementor Smart Posts Listing Widget, inside of any defined borders. You can set the Padding in Pixel (PX), Em (em), or Percentage (%).

Container

• Box Shadow: Set a shadow for the filter and adjust its settings.
• Background Type: Pick a background for the post container.
  • Classic Background: Color or Image Background.
  • Gradient Background: Set a background using gradient colors.
• Border Type: Customize border settings for the posts container.
• Border Radius: Add a radius for the border corner for the post container.
• Padding: Set padding for the post container.

Pagination

• Typography: Adjust font settings as per your needs.
• Color: Select the color of the numbers in normal, hover, and active statues.
• Background Color: Select the background color of the numbers in normal, hover, and active statues.
• Border Type: Set a border type for the pagination box. Choose from the following border types:
  • None (Default)
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Advanced Border Radius: Apply custom radius values for Elementor Smart Posts Listing widget pagination. Get the radius value from here.
• Border Radius: Insert border radius values.
• Spacing: Creates a space around the pagination box in Elementor Blog Widget, outside of any defined borders.
• Padding: Creates space around the pagination box in Elementor Blog Widget, inside of any defined borders.
• Overlay Color: Overlay color when switching from one page to another.
• Spinner Color: Select the spinner color.
• Fill Color: Select the fill color for the spinner.

Conclusion

The Elementor Smart Posts Listing widget by Premium Addons is an easy-to-use tool that helps users create customized, visually appealing posts. Its versatility and flexibility make it a valuable addition to any website or blog. Overall, it is a must-have tool for enhancing the visual appeal and user experience of your website.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.