Widgets

Post Excerpt

Step-by-Step Tutorial on Using the Post Excerpt Widget of Zyre Addon

The Post Excerpt Widget in Zyre Addon for Elementor helps you display a clean preview of your blog posts with style and flexibility. Instead of overwhelming visitors with full-length articles, you can showcase short snippets, making it easier for readers to scan content and decide what interests them.

Learn How To Use Post Excerpt Widget:

Exploring the Features of Post Excerpt Widget

Step 1: Drag the widget

From the left panel, search or choose the Post Excerpt Widget of Zyre Addon and simply drag it into your desired section.

Step 2: Content tab

Post Excerpt Content:

  • Post Excerpt Style : Currently, only one style is available.
  • Excerpt Length : Control how many words are displayed in the excerpt.
  • Alignment : Set the alignment (left, center, right, or justified).
  • Read More : Enable/disable the “Read More” option for excerpt.
    • Text : Set custom text.
    • Icon : Add an icon (including SVG).
    • Icon Position : Choose the icon’s placement (before or after the text).
    • Icon Spacing : Adjust spacing between the icon and the text.
    • Link : Add a custom link for the “Read More” action.

Step 3: Style tab

Excerpt:

  • Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Color : Choose colors of the text content.
  • Space Bottom : Adjust spacing bottom of the excerpt.

Read More:

  • Typography : Here you can customize the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing for your text. Explore full typography settings here.
  • Width : Define the width of the button.
  • Height : Set the height of the button.
  • Margin : Adjust the spacing outside the button.
  • Padding : Control the inner spacing.
  • Border Type : Set the border style, width, color.
  • Border Radius : Control corner roundness.
  • Icon Size : Adjust the size of the read more icon.
  • For both Normal & Hover states:
    • Color : Set the text color.
    • Icon Color : Set the icon color.
    • Background Color : Set the background color of the button.

Step 4: Advance tab

If you want to customize the layout, backgrounds, or make your design more engaging, head over to the Advanced section. The Advanced panel is a default Elementor feature. Check out this document to learn more about its features.

Finally, hit the Publish button and watch your stunning Site Excerpt come to life on your webpage!

All done and ready to go!

Share: