Post Excerpt

Before setting up the Post Excerpt Widget, ensure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll have access to all free Elementor widgets, including the Post Excerpt Widget—completely free! Additionally, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Post Excerpt Widget shows a short, customizable summary of your post to boost readability and engagement.

Key Use Cases for the Post Excerpt widget

The Post Excerpt Widget in Elementor is perfect for:

• Enhanced Readability – Display a concise summary of your posts to engage readers.
• Blog Layouts – Improve blog design by showing excerpts instead of full posts.
• Content Previews – Give visitors a sneak peek before they click to read more.
• Customization – Adjust excerpt length and styling to match your website’s aesthetics.
• Improved Navigation – Help users quickly find relevant content.

With the Post Excerpt Widget, you can display post summaries dynamically, making your site more engaging and user-friendly.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate Post Excerpt Widget?

To activate the Post Excerpt widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Post Excerpt widget in the list.
3. Toggle it on to enable the widget.

How to Add the Post Excerpt Widget in Elementor

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

You can upload your logo, adjust its size, alignment, and link it to the homepage as needed.

How to Configure Post Excerpt widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

• Enable the Widget from your dashboard (Animation Addons → Elements).
• Create a New Page, add a title, choose the Elementor Full Width template, and publish the page. Adjust page settings as needed.
• In the Elementor panel, search for the “Post Excerpt Widget.”
• Drag and Drop the widget into your desired section.
• The excerpt (summary) of the current post will display automatically.
• Customize the length, alignment, typography, and styling options to match your layout and design preferences.

Configuring Post Excerpt Widget: A Step-by-Step Guide

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

Content Settings

There is only one option available: Content. 

Content

Within the Content section of the Post Excerpt Widget, you’ll find a single setting group labeled Content. This section includes two primary configuration options: Limit and Alignment.

 Limit

• Function: This option allows you to define the number of words or characters displayed from the post excerpt.
  
• Usage: Adjust the limit to control how much of the excerpt is shown. This helps maintain layout consistency and ensures the summary remains concise.
  
• Effect: When you increase or decrease the limit, the length of the displayed post excerpt will change accordingly on the front end.

Alignment

• Function: This controls the horizontal positioning of the excerpt text within its container.
  
• Available Options: Left, Center, Right, or Justify.
  
• Effect: Adjusting the alignment changes the visual layout of the excerpt, aligning it according to your selected preference. This helps with maintaining design uniformity across sections.

These customization options help ensure that the excerpt content aligns well with your page design while also enhancing readability and layout balance.

Style Settings

The Style section allows you to customize the visual appearance of the post excerpt text, enabling better alignment with your website’s design aesthetics. Below are the available settings and their functions –

Text Color

• Function: Defines the color of the excerpt text.
• Usage: Choose a color that matches or contrasts well with your background to maintain readability and visual appeal.
• Effect: The selected color is applied to the text, instantly updating its appearance.

 Typography

• Function: Controls font-related properties such as font family, size, weight, transform (uppercase, lowercase), style (italic, normal), line height, and letter spacing.
• Usage: Fine-tune how the excerpt text looks and feels.
• Effect: Adjustments reflect in real-time, allowing you to create consistent and polished typography across your site.

Text Stroke

• Function: Adds an outline around the excerpt text.
• Usage: You can define the stroke width and color to emphasize text or create a stylistic effect.
• Effect: The text appears with a bordered outline, improving visibility and adding design impact.

Text Shadow

• Function: Applies a shadow behind the excerpt text.
• Usage: Customize the blur, horizontal and vertical position, and shadow color.
• Effect: Adds depth and dimension to the text, helping it stand out, especially on visually busy backgrounds.

Blend Mode

• Function: Determines how the excerpt text visually interacts with the background or surrounding elements-

• Available Modes Include:
  
  • Multiply: Darkens the text by blending it with the background.
    
  • Screen: Brightens the text using the background’s light areas.
    
  • Overlay: Mixes multiply and screen modes for contrast.
    
  • Darken / Lighten: Shows the darker or lighter parts of the blend.
    
  • Color Dodge / Color Burn: Enhances contrast or saturation.
    
  • Saturation / Hue / Color / Luminosity: Adjusts text based on background color properties.
    
  • Difference / Exclusion: Creates effects by inverting background and text interaction.
    
• Effect: Each mode alters how the text appears in relation to its background, allowing for creative and advanced visual effects without additional graphic editing.

These style settings ensure you have full control over the design and visibility of your post excerpt content, enabling a more dynamic and visually engaging presentation on your site.

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 Post Excerpt Widget in Elementor to create dynamic and engaging event displays on your website.

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