Elementor Post Time Widget

Showcase the exact time a post was published or updated with full control over formatting and display styles. Customize typography, colors, and alignment to fit your theme, ensuring consistency across your website. This is especially useful for time-sensitive content like news articles and event posts.

Table of Contents

The Post Time Widget in Vertex Addons for Elementor allows you to display the time a post was published in a customizable format. This widget enhances blog pages by making publication times easily visible to users, improving readability and engagement. With a variety of styling options, you can seamlessly integrate it into your website’s design.

Key Features

  • Display the post’s publication time dynamically.
  • Customize time formats with various patterns.
  • Add before and after text for additional context.
  • Fully customizable typography and styling options.
  • Supports Elementor dynamic tags and link attributes.
  • Responsive design that adapts to all screen sizes.

What’s Needed?

To use the Post Time Widget, ensure you have the following installed:

  • Elementor Free Version
  • Vertex Addons for Elementor

Install and Activate the Post Time Widget

To activate this widget, please refer to our Widget Activation Guide.

How to Configure Post Time Widget in Elementor

After adding the Post Time Widget to your Elementor page, you will find a variety of customization options structured under three main tabs: Content, Style, and Advanced. These options allow you to personalize how the post time is displayed and styled.

Content Tab

Heading

The Heading section contains three key settings: Title, Link, and HTML Tag.

Title

The Title option controls the display format of the post time. Click on it to open the available settings.

  • Settings: Choose from various date-time patterns to match your website’s formatting.
  • Advanced Options: Use Before, After, or Fallback text options to add context around the displayed time. The fallback option ensures a default value is displayed if no time is available.
Link

The Link option lets you hyperlink the post time. This follows Elementor’s standard link settings.

  • Open the Link Options to specify a custom URL, set it to nofollow, or add custom attributes.
  • Utilize Dynamic Tags to fetch links dynamically using Vertex Dynamic Tags or Elementor Pro Dynamic Tags.
HTML Tag

You can choose the appropriate HTML tag for the post time display:

  • Options include H1 to H6, div, span, and p tags, allowing for structured content and SEO benefits.

Style Tab

Under the Style tab, you have various options to refine the appearance of the post time.

Heading

  • Alignment: Choose from Left, Center, Right, and Justified to position the text.
  • Typography: Modify font family, size, weight, style, and spacing.
  • Text Stroke: Add an outline effect around the text.
  • Text Shadow: Apply a shadow for better contrast and depth.
  • Blend Mode: Choose from different blending modes such as Normal, Multiply, Screen, and more to match your design aesthetics.

Normal and Hover States

  • Text Color: Set distinct colors for normal and hover states.
  • Transition Duration: Define how quickly the hover effect transitions (in seconds).

Advanced Tab

The Advanced tab includes general settings available for all Vertex Addons widgets. These options allow for custom margins, padding, motion effects, and responsive settings to optimize display across devices.

Conclusion

The Post Time Widget is a powerful tool for enhancing blog layouts in Elementor. With extensive customization options, you can tailor its appearance to match your site’s branding. If you encounter any issues, refer to our support documentation or contact our support team for assistance.

Still Stuck? We’re Here to Help.

Share:

Table of Contents