Archive Posts widget

The Archive Posts Widget displays a list of any posts within Archive templates, which are created in Templates > Theme Builder > Archive.

Note: The number of posts per page is controlled from the WordPress Reading settings (Dashboard >  Settings > Reading)

---

Content

Layout

1. Skin: Select a pre-designed skin, either Classic or Cards
2. Columns: Set how many columns will be displayed, from 1 to 6
3. Image Position: Set the image position, relative to the content. Options include: Top / left / right / none
4. Masonry: Slide on or off
5. Image Resolution: Set the size of the image, from thumbnail to full
6. Image Ratio: Set the exact ratio of the images
7. Image Width: Set the exact width of the images
8. Title: Choose to show or hide the title
9. Title HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p
10. Excerpt: Choose to show or hide the excerpt
11. Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed
12. Apply to Custom Excerpt: When toggled, this will override the length of the manual excerpt written in the WP editor
13. Meta Data: Select the meta data to be displayed in the widget. A click on the field opens the list of options. The options include author, date, time and comments
14. Separator Between: The separator may be customized by entering a value or using a Dynamic Tag
15. Read More: Show or hide the Read More button
16. Read More Text: Customize the Read More text by entering the value in the field or by using Dynamic Tags
17. Automatically Align Buttons: When toggled, this will automatically align the Read More button to the bottom of the wrapper. This is useful when the post titles exceed more than one line
18. Badge (Only available if Cards skin is selected): Slide to YES to show badge
19. Badge Taxonomy (Only available if Cards skin is selected): Select the taxonomy to be used for the badge, choosing from Categories, Tags, etc.
20. Avatar (Only available if Cards skin is selected): Show or Hide the Author avatar

Note: When Elementor displays a post, if it has no excerpt, Elementor automatically generates an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, the excerpt length only applies to posts in which no manual excerpt has been entered. The length specified in the Elementor widget is ignored if a manually-generated excerpt exists for a post. 

Pagination and AJAX Load More

Pagination Options: From the dropdown selector choose how you wish to paginate the results. Options include None, Numbers, Previous/Next, Numbers + Previous/Next, Load On Click, or Infinite Scroll.

AJAX Load More is the ultimate design technique to display large amounts of content in an intuitive and appealing way either by loading more posts on click or enabling infinite scroll. Infinite scroll is a web design technique that loads content seamlessly as the user scrolls down a page. Content is automatically and continuously loaded at the bottom of the page, eliminating the need for pagination. You can use this on the posts widget by selecting the Load on Click or Infinite Scroll pagination options.

If Numbers Is Selected

1. Page Limit: Enter the number of post you wish to display
2. Shorten: Toggle the selector if you wish to shorten the display
3. Alignment: Choose between Right, Center, and Left

If Previous / Next Is Selected

1. Page Limit: Enter the number of post you wish to display
2. Previous Label: Enter the text you would like to display after the carat
3. Next Label: Enter the text you would like to display before the carat
4. Alignment: Choose between Right, Center, and Left

If Numbers + Previous / Next Is Selected

1. Page Limit: Enter the number of post you wish to display
2. Previous Label: Enter the text you would like to display after the carat
3. Next Label: Enter the text you would like to display before the carat
4. Shorten: Toggle the selector if you wish to shorten the display
5. Alignment: Choose between Right, Center, and Left

If Load On Click Is Selected

1. Spinner: Choose to display a loading spinner by ticking the icons
2. Button Text: Enter the text you wish to display on the button
3. Alignment: Choose the alignment options by selecting the icon
4. Icon: Choose an Icon for your button from the library or upload your own
5. Icon Spacing: Use the slider or enter a value in the field

If Infinite Scroll Is selected

1. Spinner: Choose to display a loading spinner by ticking the icons

Reload Archive Posts individually

By default, if you have more than one Archive Posts widget on a page, all the archives will refresh to the same page. For instance, if you have one archive containing news stories and another containing sports stories, when visitors move to page two of the politics loop, the sports archive will automatically refresh to page two.

• Toggle Individual Pagination to On to have all loop grids on a page refresh individually.

Advanced

1. Nothing Found Message: Enter text or use a Dynamic Tag value for the message to be displayed when there are no posts to show.

---

Style

Layout

1. Columns Gap: Set the exact gap between the columns
2. Rows Gap: set the exact gap between the rows
3. Alignment: Set the alignment of the content in the widget as left, center or right

Card (Displayed only if Cards skin is chosen)

1. Background Color: Choose the background color of the card
2. Border Color: Choose the border color of the card
3. Border Width: Set the thickness of the border around the card
4. Border Radius: Set the roundness of the border corners of the card
5. Horizontal Padding: Set the horizontal padding of the card’s content
6. Vertical Padding: Set the vertical padding of the card’s content
7. Box Shadow: Choose Yes to apply a pre-defined box shadow to the card
8. Hover Effect: Select a hover effect, either None or Gradient
9. Meta Border Color: Choose the border color above the meta data

Image

1. Spacing: Set the exact spacing between the image and the content
2. CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings

Badge (Only available if Cards skin is chosen)

1. Badge Position: Align badge to the left or right of the card
2. Background Color: Choose the background color of the badge
3. Text Color: Choose the text color of the badge
4. Border Radius: Set the border radius to control corner roundness
5. Size: Set the size of the badge
6. Margin: Control the distance of the badge from the top and side of the card
7. Typography: Set the typography of the badge text

Avatar (Only available if Cards skin is chosen)

1. Size: Set the size of the avatar.

Content

Title

1. Color: Set the color of the titles
2. Typography: Set the typography of the titles
3. Spacing: Set the spacing between the title and the content

Meta (Only available if Cards skin is chosen)

1. Color: Set the color of the  meta data
2. Separator Color: Set the color of the  meta data separator
3. Typography: Set the typography for the meta data

Excerpt

1. Color: Set the color of the excerpt
2. Typography: Set the typography of the excerpt
3. Spacing: Set the spacing between the excerpt and the read more

Read More

1. Color: Set the color of the read more
2. Typography: Set the typography for the read more text
3. Spacing: Set the spacing between the read more text and the bottom of the post box

Pagination

1. Typography: Set the typography for the pagination text
2. Color: Choose the color for the pagination text for Normal, Hover, and Active states
3. Space Between: Set the spacing between the pagination elements

Nothing Found Message

1. Color: Choose the color for the message
2. Typography: Set the typography for the message