Widgets

Archive Posts

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

The Archive Post Widget of Zyre Addon combines functionality with style, ensuring your website is both informative and visually captivating. With sleek layouts, unique effects, and complete customization, it transforms simple lists into impactful design elements.

Learn How To Use Archive Post Widget:

Exploring the Features of Archive Post Widget

Step 1: Drag the widget

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

Step 2: Content tab

General:

  • Archive Posts Style : Currently, only two styles are available.
  • Columns : Set the number of columns to display posts in a grid layout.
  • Nothing Found Message : Customize the message shown when no posts are available in the archive.

Post Query:

  • Source : Select post’s source from archive or manual.
  • Ignore Sticky Posts : Toggle for enable or disable sticky post.
  • Post Per Page : Count post that will show per page.

Post Thumbnail:

  • Thumbnail : Enable or disable the post thumbnail display.
  • Image Resolution : Choose the resolution of the thumbnail image.
  • Thumbnail Position : Set the position of the thumbnail.

Post Title:

  • Title : Enable or disable the post title display.
  • HTML Tag : Select the HTML tag for the site title.

Post Meta:

  • Post Meta Switcher : Enable or disable the post meta display.
  • Post Meta Elements : Create and manage multiple meta elements
    • Select Meta : Choose which post meta element to display (e.g., author, date, categories, comments).
    • Author Link enable : Enable or disable setting link to the meta element.
    • Icon Switcher : Toggle to enable or disable an icon with the meta element.
    • Icon Upload : Upload an icon from the icon library.
  • Separator Between : Set a custom separator between each post meta element.

Post Excerpt:

  • Excerpt :Enable or disable to display the post excerpt.
  • Excerpt Length : Control how many characters are shown in the excerpt.

Read More:

  • Read More : Enable or disable to display the “Read More” link or button.
  • Read More Text : Customize the text label for the “Read More” link or button.

Pagination:

  • Pagination Show : Enable or disable pagination on archive posts.
  • Previous Label : Set custom text for the “Previous” button.
  • Next Label : Set custom text for the “Next” button.
  • Alignment : Adjust the alignment of the pagination (left, center, right).

Step 3: Style tab

In the Style section, you can customize the General, Post, Post Thumbnail, Post Title, Post Meta, Post Excerpt, Read More, Pagination — but make sure you have added them first.

General:

  • Column Gap : Set the spacing between post columns.
  • Row Gap : Set the spacing between post rows.

Post:

  • Background Color : Set background color on each post. Explore full background settings here.
  • Padding : Add inner spacing to balance text and visuals.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.
  • Box Shadow : Apply drop shadow on each post.
  • Alignment : Adjust the alignment of the post.

Post Thumbnail:

  • Width : Set the width of the post thumbnail.
  • Height : Define the height of the thumbnail.
  • Object Fit : Choose how the image fits within the thumbnail area.
  • Background Color : Set a background color behind the thumbnail. Explore full background settings here.
  • Padding : Adjust the inner spacing around the thumbnail.
  • Margin : Control the outer spacing around the thumbnail.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.

Post Thumbnail Overlay:

  • Margin Bottom: Control the upper outer spacing of the thumbnail overlay.
  • Padding : Adjust the inner spacing around the thumbnail.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.
  • Background Color : Set a background color for thumbnail overlay both for normal and hover state. Explore full background settings here.

Post Title:

  • 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.
  • Margin : Adjust outer spacing around the post title.
  • Color : Set color of the title for both normal and hover states.

Post Meta:

  • 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 : Set the text color for meta elements.
  • Background Color : Apply a background color behind the post meta area. Explore full background settings here.
  • Bottom Space : Control the spacing below the section.
  • Column Gap : Set horizontal spacing between individual meta items.
  • Row Gap : Set vertical spacing between meta items.
  • Padding : Adjust inner spacing inside the post meta container.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.
  • Horizontal Align : Align the meta content (left, center, right).


Icon, Separator & Link:

  • Icon Size : Adjust the size of the icon.
  • Icon Color : Set the icons color.
  • Link Color : Set link color for both normal and hover state.

Post 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 : Set the color for post excerpt.
  • Margin Bottom : Control the spacing below the section.

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.
  • Color : Set the color for both normal and hover states.
  • Background Color : Set background color for both normal and hover state. Explore full background settings here.
  • Padding : Adjust inner spacing inside the button.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.

Pagination:

  • Background Color : Apply a background color behind the pagination. Explore full background settings here.
  • Padding : Adjust inner spacing of the container.
  • Margin : Adjust outer spacing of the container.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.


Page Numbers:

  • 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.
  • Padding : Adjust inner spacing of the section.
  • Margin : Adjust outer spacing of the section.
  • Border Type : Define border style, width, and color.
  • Border Radius : Control corner roundness.
  • Color : Set the color for both normal and hover states.
  • Background Color : Set background color for both normal and hover state. Explore full background settings here.

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 Archive Post come to life on your webpage!

You’re all set!

Share: