Archive Posts Widget (Pro)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
Skin: Select a pre-designed skin, either Classic or CardsColumns: Set how many columns will be displayed, from 1 to 6Image Position: Set the image position, relative to the content. Options include: Top / left / right / noneMasonry: Slide on or offImage Size: Set the size of the image, from thumbnail to fullImage Ratio: Set the exact ratio of the imagesImage Width: Set the exact width of the imagesTitle: Choose to show or hide the titleTitle HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or pExcerpt: Choose to show or hide the excerptExcerpt Length: Choose the length of the excerpt, setting the exact amount of words displayedMeta 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 commentsRead More: Show or hide the Read More buttonRead More Text: Customize the Read More textBadge (Only available if Cards skin is selected): Slide to YES to show badgeBadge Taxonomy (Only available if Cards skin is selected): Select the taxonomy to be used for the badge, choosing from Categories, Tags, etc.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
Page Limit: Enter the number of post you wish to displayShorten: Toggle the selector if you wish to shorten the displayAlignment: Choose between Right, Center, and Left
If Previous / Next Is Selected
Page Limit: Enter the number of post you wish to displayPrevious Label: Enter the text you would like to display after the caratNext Label: Enter the text you would like to display before the caratAlignment: Choose between Right, Center, and Left
If Numbers + Previous / Next Is Selected
Page Limit: Enter the number of post you wish to displayPrevious Label: Enter the text you would like to display after the caratNext Label: Enter the text you would like to display before the caratShorten: Toggle the selector if you wish to shorten the displayAlignment: Choose between Right, Center, and Left
If Load On Click Is Selected
Spinner: Choose to display a loading spinner by ticking the iconsButton Text: Enter the text you wish to display on the buttonAlignment: Choose the alignment options by selecting the iconIcon: Choose an Icon for your button from the library or upload your ownIcon Spacing: Use the slider or enter a value in the field
If Infinite Scroll Is selected
Spinner: Choose to display a loading spinner by ticking the icons
Advanced
Nothing Found Message: Enter text to be displayed when there are no posts to show.
Style
Layout
Columns Gap: Set the exact gap between the columnsRows Gap: set the exact gap between the rowsAlignment: Set the alignment of the content in the widget as left, center or right
Card (Displayed only if Cards skin is chosen)
Background Color: Choose the background color of the cardBorder Color: Choose the border color of the cardBorder Width: Set the thickness of the border around the cardBorder Radius: Set the roundness of the border corners of the cardHorizontal Padding: Set the horizontal padding of the card』s contentVertical Padding: Set the vertical padding of the card』s contentBox Shadow: Choose Yes to apply a pre-defined box shadow to the cardHover Effect: Select a hover effect, either None or GradientMeta Border Color: Choose the border color above the meta data
Image
Spacing: Set the exact spacing between the image and the contentCSS 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)
Badge Position: Align badge to the left or right of the cardBackground Color: Choose the background color of the badgeText Color: Choose the text color of the badgeBorder Radius: Set the border radius to control corner roundnessSize: Set the size of the badgeMargin: Control the distance of the badge from the top and side of the cardTypography: Set the typography of the badge text
Avatar (Only available if Cards skin is chosen)
Size: Set the size of the avatar.
Content
Title
Color: Set the color of the titlesTypography: Set the typography of the titlesSpacing: Set the spacing between the title and the content
Meta (Only available if Cards skin is chosen)
Color: Set the color of the meta dataSeparator Color: Set the color of the meta data separatorTypography: Set the typography for the meta data
Excerpt
Color: Set the color of the excerptTypography: Set the typography of the excerptSpacing: Set the spacing between the excerpt and the read more
Read More
Color: Set the color of the read moreTypography: Set the typography for the read more textSpacing: Set the spacing between the read more text and the bottom of the post box
Pagination
Typography: Set the typography for the pagination textColor: Choose the color for the pagination text for Normal, Hover, and Active statesSpace Between: Set the spacing between the pagination elements
Nothing Found Message
Color: Choose the color for the messageTypography: Set the typography for the message
