10Web Help Center

Hi, how can we help?

Posts Archive Widget

Copy article URL

in this article

You can easily customize how your posts archive looks using a versatile widget. This article will guide you through the process of adding and configuring this widget to suit your needs.

Adding Posts Archive widget

  1. Drag the widget from the widget panel to the page canvas while editing the page.
  2. Configure the settings of the widget according to your preferences.

Content tab

Note:

You can control the number of posts displayed per page under WordPress Dashboard Settings Reading section.

Layout

  • Masonry: By default, the widget layout is set to a grid. Turn the toggle on to use a masonry layout.
  • Columns: Choose the number of columns to be displayed.
  • Show Image: Option to show or not show an image for your post.
  • Image Position: Choose how to position your image, above or below the title.
  • Image Resolution: Choose a size for your post image.
  • Title: Hide or show the title of the post by clicking on the toggle.
  • Title HTML Tag: Choose an HTML tag for the title.
  • Title Length: Choose the number of words to display for the title length.
  • Excerpt: Option to show or hide an excerpt of posts.
  • Excerpt Length: Choose the number of words to display for the post excerpt.

Note:

If a post lacks an excerpt, Elementor will generate one from the content automatically. You can control the length of this auto-generated excerpt using the Excerpt Length option. This control only applies to posts without a manually created excerpt. For posts with a manual excerpt, the length setting in the Elementor widget is not applied.

  • Meta Data: Choose the meta data you want to display, such as date, time, author, etc.
  • Separator Between: Option to use a separator between the meta data.
  • Read More: Option to enable a “Read more” button.
  • Read More Text: Option to customize the button text.

Pagination

  • Pagination: Choose to turn pagination on or off. This will add a page button to your post widget.
  • Page Limit: Set the maximum number of pages displayed on the button.
  • Scroll to top: If the toggle button is enabled, the page will scroll to top after changing the page.
  • Next and Previous Buttons: Click the toggle to add next and previous page buttons.
  • First and Last Buttons: Click the toggle to add first and last page buttons.
  • Numbers: Click the toggle to show/hide page numbers.
  • Previous & Next Labels: Set the text for their respective buttons.

Advanced

  • Nothing Found Message: Customize the message in the field box.

Style tab

Layout

  • Column Gap: Set the spacing between columns.
  • Rows Gap: Set the spacing between rows.

Block

  • Background Color: Option to set color for the post block.
  • Border Color: Option to set color for the border of the post.
  • Border Width: Choose the width of the border.
  • Border Radius: Choose to have rounded block edges.
  • Horizontal Padding: Set the vertical padding of text in the post block.
  • Vertical Padding: Set vertical padding relative to the post widget column.

Content

  • Alignment: Choose the alignment of text (Left, Center, Right).
  • Image Spacing: Set the spacing between image and text.
  • Title: Edit the color, typography, and spacing of the title. Spacing is relative to the excerpt text.
  • Excerpt: Set the color, typography, and spacing of the excerpt. Spacing is relative to the read more button.
  • Read More: Set the color, typography, and spacing of the read more button. Spacing is relative to the image.
  • Meta: Set the meta color and typography. Set the color for the meta separator and border. Set the spacing of the meta relative to the excerpt text.

Pagination

Note:

This section is applicable for Normal, Hover, and Active settings.

  • Alignment: Align the pagination button. Choose from left, center, and right.
  • Typography: Choose the desired font.
  • Colors: Set the color for the pagination button.
  • Space Between: Set the space between the Prev/Next and the numbers of the pagination button.

Nothing Found Message

  • Color: Set the color of the message.
  • Typography: Customize the typographical settings of the message.

Advanced tab

You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.

in this article