Post Meta Info

Before setting up the Post Meta Info widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all the free Elementor widgets, including the Post Meta Info—completely free! You can also explore both free and pro widgets by using the filter options in the widget panel.

Introduction

The Post Meta Info Widget shows details like author, date, categories, and tags for quick post insights.

Key Use Cases for the Post Meta Info Widget in Elementor:

• Use the Post Meta Info widget to display essential post details like author, date, categories, and tags.
• Customize its design and layout to match your site’s style, ensuring clear and organized post information for users.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate a Post Meta Info Widget?

How to Add Post Meta Info Widget in Elementor

1. Open the page where you want to add the Post Meta Info
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Post Meta Info.“
4. Drag the Post Meta Info widget to your desired section.
5. The Post Meta Info widget will now be available for customization.

How to Configure the Post Meta Info Widget

• Create a New Page: Go to Pages > Add New, set a title, choose the Elementor Full Width template, and click Publish.
• Edit with Elementor: Click Edit with Elementor to open the editor.
• Insert Post Meta Info Widget: In the Elementor panel, search for the Post Meta Info Widget. Drag and drop it into your desired section.
• Customize: The widget automatically displays post meta information. Adjust the size, alignment, border, and styling as needed.
• Publish: Click Update to save and publish the page.

Configuring Post Meta Info Widget: A Step-by-Step Guide

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

Content Settings

1. Layout

The Layout option offers two styles for presenting post meta information:

• Style 1: Displays the post meta information in a single line.
• Style 2: Displays the post meta information in a stacked format, with each meta item on its own line.

How it Affects the Display:

• Style 1 will display meta information like author, date, and categories horizontally, in one line.
• Style 2 will stack these elements vertically, with each piece of information appearing on a separate line.

Alignment

Under the Alignment section, you have three options:

• Left: Aligns the meta information to the left of the container.
• Center: Centers the meta information within the container.
• Right: Aligns the meta information to the right of the container.

How it Affects the Display: Changing the alignment will adjust the position of the entire meta information block within its container. The selected alignment will be reflected in real-time on the page.

Separator

The Separator option allows you to choose how the meta information elements are separated. You can choose from two available options:

• Slash (“/”): Adds a slash between each piece of meta information.
• Comma (“,”): Adds a comma between each piece of meta information.

How it Affects the Display: The separator determines the visual separation between the meta items. The selected separator will be reflected immediately, updating how the metadata appears between the various elements (e.g., author, date, categories).

1. Content

List Title: The List Title option allows you to define a custom heading or label for the meta list.

Effect on Display: The title appears above or beside the meta information block, depending on the layout and styling. It helps identify the metadata section, such as “Post Info”, “Details”, or “By the Author”.

Meta Options: You can select and display any combination of the following metadata elements:

• Category
• Date
• View Count
• Author
• Reading Time
• Comments

Effect on Display: Each selected meta item is displayed in the order chosen. For example:

• Selecting Author and Date will show something like: by John Doe / April 22, 2025.
• Enabling Reading Time adds the estimated reading duration (e.g., 3 min read).

These values are dynamically pulled from the post’s metadata and will update automatically based on the current post’s content.

Icon Customization: Each meta item includes an associated icon, which can be enabled, disabled, or replaced with a custom icon.

Effect on Display: Icons provide a visual cue for each meta type (e.g., a calendar for the date or a user icon for the author). Toggling or customizing icons changes how the information is visually communicated and enhances user readability.

Separator: You can define a separator to appear between each meta item in the list (e.g., slash (/), dot (•), pipe (|), or comma (,)).

Effect on Display:  The chosen separator appears between each meta element, impacting the overall look and spacing. For example:

• With a slash, the display might look like: John Doe / April 22, 2025 / 5 min read.
• With a pipe, it becomes: John Doe | April 22, 2025 | 5 min read.

Style Settings

In the Style Section of the Post Content widget, you will find the following options to customize and enhance the visual appearance of your content:

• Typography: Customize font family, size, weight, transform, and line height across all meta elements for consistency.
  Text Color: Define the primary text color used in the widget.
• Column Gap / Row Gap: Controls horizontal and vertical spacing between meta items and rows.
• Spacing: Fine-tune the distance between icons, text, and other elements for better layout structure.

Effect on Display: These settings establish the overall structure and readability of the meta block. Proper spacing and font adjustments enhance both aesthetics and user experience.

Separator

• Position: Set the separator before or after meta items, affecting flow and alignment.
• Icon Size & Color: Customize size and color of the separator icon or symbol.

Effect on Display: Adjusts how distinct and visually separated the meta items are. Larger or colored separators provide more emphasis, while smaller ones offer a minimalist look.

 Category Styling

• Column Gap / Row Gap: Adjusts the spacing between multiple categories displayed.
• Separator Position: Choose where the separator appears between categories.
• Hover Style: Select from effects such as Divided, Cross, None, Cropping, Rollover Top, Rollover Left, Parallel Border, Rollover Cross for interactive hover animations.
• Typography: Control font settings specifically for category labels.
• Padding: Space inside the category tag, affecting its size and position.
• Border Type: Choose from Default, None, Solid, Double, Dotted, Dashed, Groove.
• Border Radius: Rounds category tag edges for a softer appearance.
• Transition: Sets the duration and smoothness of hover effects.
• Animation Effect (Normal & Hover): Customize how the category reacts visually in static and hover states.
• Color: Text color control for both normal and hover states.
• Background Type: Set solid color, gradient, or image background.
• Box Shadow: Adds depth and emphasis around the category tags.
• Icon, Icon Color & Spacing: Enable or disable icons, change their color, and control their distance from text.

Effect on Display: These settings allow precise control over how categories appear and behave, improving both aesthetic value and interactivity.

Author Styling

• Typography: Set author text style.
• Transition: Manage hover effect smoothness.
• Animation Effect (Normal & Hover): Add visual interaction when hovered or in a static state.
• Color: Set normal and hover text colors.
• Icon Size, Color & Spacing: Customize author icon appearance and spacing from text.

Effect on Display: Creates a visually appealing author section that can subtly draw attention or integrate seamlessly with the layout.

Date Styling

• Color: Control text and icon color.
• Typography: Set font style and size for the date.
• Icon Size, Color & Spacing: Adjust the date icon to match other elements.

Effect on Display: Enables consistent styling with other meta elements while making the publication date easily visible and distinguishable.

View Count Styling

• Color: Define the text and icon color for views.
• Typography: Adjust how the view count is displayed textually.
• Icon Settings (Size, Color, Spacing): Modify the visual representation of the view’s icon.

Effect on Display: Allows the view count to stand out or blend in, depending on the emphasis desired for post popularity.

Comment Styling

• Color: Set text and icon colors for comment count.
• Typography: Customize how the number of comments is styled.
• Icon Settings: Adjust icon size, color, and spacing for better alignment.
• Separator Size, Color & Spacing: Control how the comments separator is presented.

Effect on Display: Improves readability and emphasis on user engagement through comments, with full control over style and positioning.

These comprehensive style controls ensure each element within the Post Meta Info Widget aligns with your branding and user interface goals, offering both visual appeal and functional clarity.

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 Post Content widget in Elementor allows you to customize and enhance your posts with options for layout, styling, and metadata. It helps create a clean, engaging, and professional presentation for your content.