Elementor Recent Posts Notification Widget

Elementor Recent Posts Notification Widget by Premium Addons for Elementor is a powerful tool for WordPress websites. It notifies visitors of new content in your blog or news section, with customizable settings and an easy-to-use interface. It’s great for personal blogs or business websites, and a useful addition to your Elementor toolkit.

Check Elementor Recent Posts Notification 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.

Elementor Recent Posts Notification Settings

Start by dragging & drop Elementor Recent Posts Notification widget into your Elementor editor.

Key Features

• Notification Icon.
• Posts Number.
• Posts Box.
• Posts Box Header.
• Query.
• Post Options.
• Featured Image.

Notification Icon

• Icon Type: You can choose between icon types.
  • Icon: Select from the icon settings.
    • Icon.
    • Draw Icon.
    • Icon Size.
    • Alignment.
  • Image: Select from image settings.
    • Image.
    • Icon Size.
    • Image Size.
    • Alignment.
  • Text: Select from text settings.
    • Text.
    • Alignment.
  • Lottie Animation: Select from Lottie animation settings.
    • Animation JSON URL.
    • Loop.
    • Reverse.
    • Icon Size.
    • Alignment.
  • SVG Draw: Add the SVG code to the notification icon.
    • SVG Code.
    • Draw Icon.
    • Icon Size.
    • Alignment.

Posts Number

• Number: Set the number of posts to present.
• Use Cookies to Get Unseen Posts: Enable/Disable use cookies to get unseen posts option.
• Number Box Size: Set the number box size.
• Horizontal Position: Set the post number horizontal position.
• Vertical Position: Set the post number vertical position.

Posts Box

• Width: Set the post’s box width.
• Max Height: Set the maximum height of the posts box.
• Position: Set the post’s box position.
• Posts Entrance Animation: Select the title entrance animation from the dropdown menu.
• Apply Animation on Posts Individually: Enable/Disable applying the animation on posts individually.
• Show Overlay: Enable to show posts box overlay.
• What To Show When No Posts. (available only when you enable Use Cookies To Get Unseen Posts)
  • Same Posts.
  • Elementor Templates.

Posts Box Header

• Title Text: Write down the post title.
• Title Entrance Animation: Select the title entrance animation from the dropdown menu.
• HTML Tag: Select the HTML tag used for the post title. Choose from H1 to H6.
• Close Icon Position: Select the close icon position to be on top, middle, or bottom.
• Icon Type: You can choose between icon types.
  • Icon: Select from the icon settings.
    • Icon.
    • Draw Icon.
    • Icon Size.
    • Alignment.
  • Image: Select from image settings.
    • Image.
    • Icon Size.
    • Image Size.
    • Alignment.
  • Text: Select from text settings.
    • Text.
    • Alignment.
  • Lottie Animation: Select from Lottie animation settings.
    • Animation JSON URL.
    • Loop.
    • Reverse.
    • Icon Size.
    • Alignment.
  • SVG Draw.
    • SVG Code.
    • Draw Icon.
    • Icon Size.
    • Alignment.

Query

Query settings for Elementor Recent Posts Notification 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 Recent Posts Notification page or Elementor section.

• Source: Select the source of the posts.
  • Posts.
  • Pages.
  • Landing Pages.
  • My Templates.
• Posts to load: Set the number of posts to load.
• Categories Filter Rule: Show the posts that match specific categories 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: Enable/Disable excluding the current post from the query.
• Get Posts From: Select the time to get your post from.
• Order By: You can choose to order the 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.

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:

• Change post HTML Tag To Article: Set post container HTML tag to <article> instead of <div> for better SEO compatibility.
• Open Links in New Tab: Open post, author, and category links in the new tab.
• Skin: Select the skin of posts from classic, modern, card, or banner.
• Title HTML Tag: Select the HTML tag of the post title.
• 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.

• Enable or disable the following:
  • Author Meta
  • Date Meta
  • Categories Meta
  • Comments Meta
  • Tags Meta
• Alignment: Optionally align the pagination to the left, right, or center.
• Bottom Spacing: Set the space below the title in Pixel (px), Em (em), or Percentage (%).

Featured Image

Featured Image settings are applied to the post’s thumbnail (featured image). You can combine several different hover effects with color effects. You can view several of the effects in action on the demo page.

• Show Featured Image: Show or hide the featured image for the posts.
• Image Size: Set the featured image sizes.
• Hover Effect: Set a hover effect for the featured image:
  • None
  • Zoom In
  • Zoom Out
  • Scale
  • Grayscale
  • Blur
  • Bright
  • Sepia
  • Translate
• Height: Select the height of the featured images.
• Thumbnail Fit: Select between cover, fill, and contain.
• Shape Divider: Graphic shapes that separate between post-featured images and post content.

Style

• Icon Style.
• Number Style.
• Posts Box Style.
• Header Style.
• Post Image.
• Title.
• MetaData.
• Content Box.

Icon Style

Style Elementor Recent Posts Notification icon on normal state or hover state.

• Icon/Text Color: Pick a color for Elementor Recent Posts Notification icons or text.
• Size: Set Icon size on desktop, tablet, and mobile.
• Background Color: Pick a color Elementor Recent Posts Notification icons background.
• Border Type: Select from different border types, as well as the color and the width of the border on each side of Elementor Recent Posts Notification icon.
• Border Radius: Increasing the border-radius will add circular corners to the Elementor Recent Posts Notification icon.
• Margin: Creates a space around the Elementor Recent Posts Notification icon.
• Padding:  Creates space around Elementor Recent Posts Notification icon.

Number Style

• Typography: Adjust Elementor Recent Posts Notification number font settings and style it.

Style Elementor Recent Posts Notification on normal state and hover state.

• Color: Pick colors for Elementor Recent Posts Notification number.
• Background Type: Pick a background for Elementor Recent Posts Notification number.
  • Classic Background: Color or Image background.
  • Gradient Background: Set the background using gradient colors.
• Border Type: Customize border settings for Elementor Recent Posts Notification number.
  • Width.
  • Color.
  • Border Radius.
  • Padding.
• Border Radius: Increasing the border-radius will add circular corners to the Elementor Recent Posts Notification number.
• Advanced Border Radius: Enable/Disable custom radius values. Get the radius value from here.
• Text Shadow: Adjust Elementor Recent Posts Notification number shadow using the following controls on normal, hover, and active states:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Box Shadow: Add a shadow around Elementor Recent Posts Notification number panel by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• Padding:  Creates space around Elementor Recent Posts Notification number.
• Margin: Creates a space around Elementor Recent Posts Notification number.

Posts Box Style

• Background Color: Pick a color Elementor Recent Posts Notification posts box background.
• Box Shadow: Add a shadow around Elementor Recent Posts Notification posts box.
• Border Type: Customize border settings for Elementor Recent Posts Notification posts box.
• Border Radius: Add radius for border corner for Elementor Recent Posts Notification posts box.
• Padding: Set padding inside Elementor Recent Posts Notification posts box.

Header Style

Style Elementor Recent Posts Notification header for the title and Close Icon.

• Size: Adjust Elementor Recent Posts Notification close icon size.
• Color: Pick colors for Elementor Recent Posts Notification header/close icon.
• Typography: Adjust Elementor Recent Posts Notification header font settings and style it.
• Text Shadow: Adjust Elementor Recent Posts Notification header shadow using the following controls on normal, hover, and active states:
  • Color
  • Horizontal Position
  • Vertical Position
  • Blur
• Margin: Creates a space around Elementor Recent Posts Notification header.
• Background Color: Pick a color Elementor Recent Posts Notification header/close icon background.
• Shadow: Add a shadow around Elementor Recent Posts Notification close icon panel by controlling the following settings:
  • Blur
  • Horizontal Position
  • Vertical Position
• Border Type: Customize border settings for Elementor Recent Posts Notification header/close icon.
  • Width.
  • Color.
  • Border Radius.
  • Padding.
• Border Radius: Increasing the border-radius will add circular corners to the Elementor Recent Posts Notification header/close icon.
• Margin: Creates a space around Elementor Recent Posts Notification header/close icon.
• Padding:  Creates space around Elementor Recent Posts Notification header/close icon.

Post Image

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

Title

• 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 (%).

Metadata

The Meta settings are the same as for the title:

• Typography: Adjust font settings of Elementor Recent Posts Notification metadata.
• Metadata Color: Select the color of Elementor Recent Posts Notification metadata.
• Link Hover Color: Select the color of Elementor Recent Posts Notification metadata when the user hovers over the links.
• Separator Color: Set the separator color between the metadata.

Content Box

• Typography: Adjust font settings.
• Text Color: Select the text color for the content.
• Text Margin: Creates a space around the content box in Elementor Recent Posts Notification Widget, outside of any defined borders.
• Background Color: Select a background color and its opacity.
• Box Shadow: Add a box shadow around the post content.
• Margin: Creates a space around the content box in Elementor Recent Posts Notification Widget, outside of any defined borders.
• Padding: Creates space around the content box in Elementor Recent Posts Notification Widget, inside of any defined borders.

Conclusion

In conclusion, the Elementor Recent Posts Notification by Premium Addons for WordPress website builders is an extremely user-friendly tool, even for those without technical skills. Its intuitive interface and straightforward settings make it easy to set up and customize notifications for your website’s recent posts, without requiring any coding knowledge. Overall, this tool is a great addition for anyone looking to improve their website’s user engagement and keep their audience up-to-date with the latest content.

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.