The Post Date Widget in Vertex Addons for Elementor allows you to display the publication date of any post dynamically. Whether you’re creating a blog, news site, or portfolio, this widget ensures that your posts are accompanied by clear and stylish timestamps, enhancing readability and engagement. With various styling and formatting options, you can fully control how the post date appears on your pages.
Key Features
- Dynamically displays the post’s publication date.
- Customizable date formats to match your site’s design.
- Supports dynamic tags from both Vertex and Elementor Pro.
- Customizable typography, colors, and text styles.
- Various alignment and blend mode options for advanced styling.
- Compatible with Elementor’s Advanced tab for additional design tweaks.
What’s Needed?
To use the Post Date Widget, you need:
- The Elementor free version
- The Vertex Addons for Elementor plugin
Install and Activate the Post Date Widget
Before using this widget, ensure that Vertex Addons is installed and activated on your website. If you haven’t installed it yet, follow our Widget Activation Guide.
How to Configure Post Date Widget in Elementor
The Post Date Widget is designed to be intuitive and highly customizable. Once you add it to your page using Elementor, you can configure its settings from three main tabs: Content, Style, and Advanced.
Content Tab
Under the Content tab, you’ll find the Heading section, which contains essential options to customize how the post date appears.
Title
The Title section allows you to set the format of the displayed date. You can choose from predefined patterns or define a custom format that best suits your content presentation. Additionally, clicking on this option reveals Advanced Settings, where you can:
- Add Before and After text to provide context (e.g., “Published on” before the date).
- Set a Fallback value in case a post lacks a publication date.
Link
If you want the post date to act as a clickable element, you can add a Link. This field works like all other Elementor link options, allowing you to:
- Open the link in a new window.
- Add a nofollow attribute for SEO purposes.
- Insert Custom Attributes.
- Use Dynamic Tags to pull data dynamically from Vertex Addons or Elementor Pro.
HTML Tag
To ensure proper semantic structure, you can define the HTML tag for the post date. The available choices include H1 to H6, div, span, and p tags. Choosing the correct tag helps improve SEO and maintain consistency with your website’s HTML hierarchy.
Style Tab
The Style tab provides various customization options to enhance the appearance of the post date.
Heading
- Alignment: Position the text to the Left, Center, Right, or make it Justified.
- Typography: Adjust font style, weight, spacing, and size to match your site’s theme.
- Text Stroke: Add a stroke effect to the text for a more dramatic look.
- Text Shadow: Apply shadows to the post date text for better visibility.
- Blend Mode: Choose from different blend modes like Normal, Multiply, Screen, and more to integrate the text seamlessly with the background.
Normal and Hover Effects
The Post Date Widget supports both Normal and Hover states for better interactivity.
- Text Color: Define separate colors for the normal and hover states.
- Transition Duration: Smoothly animate color changes when users hover over the text.
Advanced Tab
The Advanced tab includes Elementor’s standard options, allowing you to fine-tune the post date widget’s positioning, responsiveness, motion effects, background, and other styling options. These settings are common across all Vertex widgets, ensuring a consistent user experience.
Conclusion
The Post Date Widget is a simple yet powerful tool for displaying post publication dates dynamically in Elementor. With its extensive styling options and dynamic tag support, you can effortlessly match the post date’s appearance to your website’s design. Whether you’re running a blog, news site, or portfolio, this widget helps keep your content structured and engaging for visitors.