Advanced Posts

Before setting up the Advanced Posts Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Since the Advanced Posts Widget is a premium feature, you’ll need to upgrade to access its advanced functionalities. Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Advanced Posts Widget in Elementor displays blog posts dynamically with custom layouts and filters for better engagement.

Key Use Cases for the Advanced Posts Widget in Elementor:

• Showcase blog posts dynamically for better content visibility.
• Customize layout and filters to enhance user experience.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Advanced Posts Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Advanced Posts widget in the list.
• Toggle it on to enable the widget.
• Now, the Advanced Posts widget is ready to use!

How to Add Advanced Posts Widget in Elementor

• Open the page where you want to add the Advanced Posts Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Advanced Posts Widget”.
• Drag the widget to your desired section.
• Since this is a premium widget, ensure you have the pro version activated.
• The Advanced Posts Widget is now ready for customization.

How to Configure Advanced Posts Widget

Make sure the Advanced Posts Widget is activated in your Elementor settings.

• Open a new page where you want to showcase your posts.
• Provide a title for your page as required.
• Select the Elementor Full Width template for a seamless layout.
• After finalizing the title and layout, publish the page.
• In the Elementor panel, type “Advanced Posts Widget” in the search bar.
• Place the widget in the desired section of your page.
• Customize the widget’s layout, post query, pagination, metadata, and style options to fit your design preferences.

Once added, the Advanced Posts Widget will automatically display a dynamic list of posts based on your selected query settings, allowing users to browse and engage with curated post content seamlessly.

Configuring Advanced Posts Widget : A Step-by-Step Guide

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

Content Settings

The Content section of the Advanced Posts Widget offers extensive customization to control how your posts appear and function. Key options include:

Filter

• Enable Filter: Toggle this option to display a filter bar above the post grid.
• Alignment: Once enabled, you can set the alignment (left, center, right) of the filter controls.

Query

• Query Type: Choose from 12 different query types to control the logic for post display.
• Source: Select from Posts, Pages, or Video Stories.
• Include/Exclude: Define which posts to show or hide based on various parameters.
• Include By:

• Post Format: Choose from Image, Video, Audio, and Gallery formats.
• Date Range
• Order By: Set sorting criteria such as date, title, or random.
• Order: Ascending or Descending.
• Ignore Sticky Posts: Optionally ignore posts marked as sticky.

Layout

• Layout Type: Choose from 5 unique layout styles to present your content visually.
• Offers a flexible grid system for showcasing posts in a structured manner.

Settings

• Columns: Define how many columns to display across different screen sizes.
• Posts Per Page: Set how many posts should appear at a time.
• Show/Hide Toggles: Customize visibility for elements like:
  
  • Thumbnail Image
  • Image Resolution
  • Title
  • Excerpt
  • Taxonomy
  • Meta Information
  • Rating
  • Read More Button
  • Masonry Layout
  • Post Audio, Video, and Gallery Integration

Title

• Title Length: Limit the number of words shown in the post title.
• HTML Tag: Choose the HTML heading tag (H1–H6, Div, Span, etc.).
• Show Highlights: Highlight certain keywords or styled portions of the title.
  

Excerpt

• Excerpt Length: Set the number of words displayed in the excerpt section.
  

Taxonomy

• Categories Displayed: Show up to three taxonomy types (e.g., Category, Tag, Custom Taxonomy).
• Limit: Control the number of taxonomies shown per post.

Meta

• Post Meta: Show or hide post views, publish date, and author information.
• Separator: Add a custom separator between different meta fields.
• Author Avatar: Option to display the author’s profile image.

Read More

• Text Label: Customize the “Read More” button text.
• Icon: Choose an icon from the library or upload an SVG.
• Icon Position: Set it to display before or after the text.
• Icon Spacing: Define the space between icon and text.

Pagination

• Choose from multiple pagination types including Numbers, Load More Button, and Infinite Scroll.

Style Settings

Layout 

The Layout section under the Style tab in the Advanced Posts Widget provides essential customization controls to refine the visual structure of your post grid. Below is a professional breakdown of each available setting:

Columns Gap: Adjust the horizontal spacing between post columns. The value can be set using the slider or entered manually in pixels (px).

Rows Gap: Control the vertical spacing between rows of posts. This setting ensures that your post layout remains visually balanced and well-organized.

Border Type: Choose a border style (e.g., Solid, Dashed, Dotted) or keep it as Default to inherit global or theme styles.

Padding: Set the inner spacing of the post container from all sides (Top, Right, Bottom, Left). This helps create breathing space within each post block.

Margin: Define the outer spacing of each post container. Use this to manage spacing between multiple widgets or content blocks.

Background Type: Select a background type (e.g., Classic, Gradient, or Video) to enhance the visual appeal of your post containers.

Hover Effect : Choose an animation effect ( Zoom In) that is triggered when users hover over the posts. This adds interactivity and improves user engagement.

Thumbnail

You can control the visual appearance of post thumbnails to align with your design preferences. Below are the available customization options explained professionally:

Height & Width

• Height: Set a fixed height for your post thumbnails to ensure uniformity across all post items.
• Width: Define the width of the thumbnails to control their horizontal size and alignment within the post layout.

Border Radius: Adjust the border radius to create rounded corners for the thumbnails. This helps soften the design and adds a modern touch to your posts.

Margin: Control the space outside the thumbnail image. This setting is useful for maintaining consistent spacing between thumbnails and other post elements

Title

You have control over the visual appearance of post titles in both Normal and Hover states. This allows for a more dynamic and interactive design. Here’s a breakdown of the available settings:

Typography

Customize the font family, size, weight, transform, style, line height, and letter spacing to ensure the post titles match your website’s branding and remain visually appealing.

Color

• Normal: Choose the default color for the post title when it is not being interacted with.
• Hover: Set a different color that appears when a user hovers over the title, adding visual feedback and interactivity.

Margin

Define the space around the title element, controlling how it aligns with other components such as thumbnails, excerpts, or meta information. You can adjust the top, right, bottom, and left margins individually for precise spacing.

Excerpt

Color: Choose the text color for the excerpt to ensure readability and design consistency with the rest of your content.

Typography: Adjust the font family, size, font weight, transform, style, line height, and letter spacing to control the look and feel of the excerpt text. This helps maintain a consistent visual hierarchy across the widget.

Margin: Define the outer spacing around the excerpt area. You can set the top, right, bottom, and left margins individually to manage how the excerpt is positioned relative to other elements like the title or metadata.

Taxonomy

Typography: Customize the font family, size, weight, style, line height, and letter spacing to control the visual presentation of taxonomy text, ensuring it aligns with your site’s overall typography.

Space Between:  Define the spacing between individual taxonomy items, allowing for clear separation and better readability when multiple terms are shown.

Color: Set the text color for taxonomy items to match your branding or improve visibility against the background.

Background Type: Choose a background style (solid color, gradient, or image) to highlight the taxonomy section and make it stand out from the rest of the content.

Border Type: Apply a border around taxonomy items. You can choose the border style (solid, dashed, dotted, etc.) and control its thickness and visibility.

Border Radius: Define rounded corners for the taxonomy box. This adds a softer, more modern look to the tags or categories.

Box Shadow: Add a shadow effect around taxonomy items for depth and visual emphasis. This is useful for drawing attention subtly.

Padding: Set inner spacing within each taxonomy item to ensure the text isn’t cramped and maintains a neat appearance.

Position: Control the placement of taxonomy labels within the post layout, offering flexibility in alignment and design hierarchy.

Meta

Gap

Adjust the space between meta elements (e.g., between date and author) to ensure a clean and balanced layout.

Color

Set the text color for meta information. This allows you to highlight or tone down metadata depending on your design preference.

Typography

Control the font style, size, weight, line height, and spacing for meta text to match the overall site typography and improve readability.

Margin

Define outer spacing around the meta section to separate it visually from other content, like post titles or thumbnails.

Icon Size

Set the size of icons (such as calendar, user, or eye icons) used alongside metadata to ensure they are proportionate and clear.

Icon Color

Customize the icon color separately from the text color for visual contrast or harmony, depending on your design.

Icon Gap

Adjust the space between each icon and its corresponding text to maintain clarity and visual appeal.

Meta – Admin

These settings ensure the author’s presence aligns seamlessly with your overall design and user interaction preferences. Below is a professional explanation of each option:

Gap

Defines the spacing between the author label (e.g., “By”) and the author’s name. This helps maintain a clean and readable layout.

Author By

Allows you to customize or toggle the “By” prefix shown before the author’s name (e.g., “By John Doe”). You can choose whether to display it or not, based on your content style.

Color

Sets the default color of the author text. You can use this to match your theme or highlight the author’s name for emphasis.

Typography

Manage typographic properties such as font family, size, weight, line height, and spacing for the entire author section to ensure consistent branding.

Author – Typography

Provides separate control over the typography of the author’s name itself. You can distinguish it from surrounding text for better visual hierarchy.

Author – Color

Allows you to apply a distinct color style to the author’s name, helping it stand out or blend in based on your preference.

Animation (Normal & Hover)

You can apply two animation states:

• Normal: Default animation style for the author text when not interacted with.
• Hover: Define animation effects or transitions when the user hovers over the author’s name, adding interactive appeal.

Read More

In the Read More section of the Advanced Posts Widget, you can fully personalize the appearance and behavior of the “Read More” link or button that invites users to explore individual posts further. Below is a clear and professional breakdown of each available style setting:

Typography: Adjusts the font family, size, weight, letter spacing, and line height of the “Read More” text to maintain consistency with your site’s overall design.

Icon Size: Allows you to set the size of the icon used alongside the text (if any), ensuring proper visual balance between icon and text.

Text Color: Controls the color of the “Read More” text, helping it stand out or blend in with your design theme.

Background Type: Lets you choose between a solid color, gradient, or image as the background for the button or text area, adding depth and visual interest.

 Border Type:  Defines the border style (solid, dashed, dotted, double, or none), allowing you to create separation or emphasize the call-to-action.

Border Radius:  Customizes the rounded corners of the button or link, giving it a soft or sharp appearance based on your design preference.

Padding: Controls the inner spacing around the text and icon, ensuring the “Read More” element has appropriate breathing room.

Box Shadow: Adds a shadow effect around the element to create depth or highlight the call-to-action area.

Margin: Sets the outer spacing between the “Read More” element and other sections, helping to align it cleanly within the post layout.

Filter

These options usually allow users to customize the appearance of elements on a website, particularly when styling a widget or section.

Padding: Controls the space inside the container, creating a buffer between the content and the edges of the element. It helps in adjusting the internal spacing for a clean and balanced layout.

Tab Item Gap: Defines the space between each tab within a tabbed interface. Adjusting the gap ensures a visually appealing and easy-to-navigate tab layout.

Content Gap: Determines the spacing between individual content sections or elements. This setting improves readability and ensures proper alignment and balance of the content.

Border Type: Specifies the style of the element’s border. Options typically include solid, dashed, dotted, or double, providing flexibility in the visual appeal and border design.

Border Radius: Adjusts the roundness of the corners of an element’s border. A higher radius creates a more rounded appearance, offering a softer, modern look.

Typography Customizes the font style, size, weight, line-height, and other text-related attributes. Typography settings are crucial for readability and overall design consistency.

Text Color: Allows for the modification of the text color within the element. Proper contrast and color choices enhance readability and align with the brand’s aesthetic.

Background Type: Defines the background style of an element, which can include solid color, gradient, or image. This option is key in enhancing visual appeal and setting the tone of the design.

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 Outcome

That’s it! You’ve successfully learned how to configure the Archive Title widget in Elementor to display dynamic and customized titles for your archive pages.

For any further assistance or inquiries, feel free to contact our support team!