Posts Widget (Pro)

With the Posts Widget you can display a list of any post types, including custom post types, in various layouts and ways. This practical widget can be used to display posts from a particular category or other taxonomy, recent posts, and more.


Classic Skin

The Classic skin is a fully customizable layer template that gets applied to the Posts widget, giving your posts a traditional design style.

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. Posts Per Page: Set the exact amount of posts displayed
  4. Image Position: Set the image position, relative to the content. Options include: Top / left / right / none
  5. Masonry: Slide on or off
  6. Image Size: Set the size of the image, from thumbnail to full
  7. Image Ratio: Set the exact ratio of the images
  8. Image Width: Set the exact width of the images
  9. Title: Choose to show or hide the title
  10. Title HTML Tag: Select the HTML tag to use for the title, from H1 to H6, or div, span, or p
  11. Excerpt: Choose to show or hide the excerpt
  12. Excerpt Length: Choose the length of the excerpt, setting the exact amount of words displayed
  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: Choose the separator you want to use between the meta data
  15. Read More: Show or hide the Read More button
  16. Read More Text: Customize the Read More text

Query

Source: Select the source from which the widget will display the content. Options include posts, pages, custom post types if available, manual selection, and current query. 
Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Posts

  1. Authors: Filter the posts displayed by author
  2. Categories: Filter the posts displayed by categories
  3. Tags: Filter the posts displayed by tags

Pages  

Authors: Filter the posts displayed by author.

Manual

Search & Select: When you start typing a specific name of a post, you will get the autocomplete full name of the post, which you can then select.

Note: If other taxonomies exist, such as Products or Galleries, they will also appear as filterable options.

Advanced

  1. Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu order or Random.
  2. Order: Set as ASC (Ascending) or DESC (Descending).
  3. Offset: Use this setting to skip over a number of posts (e.g. '2' to skip over 2 posts).
  4. Exclude: Choose to exclude the current post or manually search and select a post to exclude.
  5. Avoid Duplicates: Choose Yes to avoid displaying duplicate posts on the frontend only.
  6. Query ID: Give your query a custom unique ID to allow server side filtering. See the developer docs for more information on how to use this advanced feature.

Pagination

Pagination: Choose how you wish to paginate the results. Options include None, Numbers, Previous/Next, or Numbers + Previous/Next.


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

Box

  1. Border Width: Set the thickness of the border around the post’s box
  2. Border Radius: Set the roundness of the border corners of the post’s box
  3. Padding: Set the padding within the border of the post box
  4. Content Padding: Add additional padding around just the content of the post box
  5. Box Shadow: Set the box shadow options around the post box for both normal and hover modes
  6. Background Color: Choose the background color of the post box for both normal and hover modes
  7. Border Color: Choose the border color of the post box for both normal and hover modes

Image

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

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

  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
  4. Spacing: Set the spacing between the meta data and the excerpt

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

Cards Skin

The Cards Skin is a customizable pre-designed layer template that gets applied to the Posts widget, giving your posts a trendy material design style.

Read more about the Cards skin

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. Posts Per Page: Set the exact amount of posts displayed
  4. Show Image: Choose to show or hide the featured image
  5. Masonry: Slide on or off
  6. Image Size: Set the size of the image, from thumbnail to full
  7. Image Ratio: Set the exact ratio 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. 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
  13. Separator Between: Choose the separator you want to use between the meta data
  14. Read More: Show or hide the Read More button
  15. Read More Text: Customize the Read More text
  16. Badge: Show or hide the Badge. The badge lets you show the category, tag or other taxonomy inside the card
  17. Avatar: Show or hide the user avatar of the post’s author


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

  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

  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

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

  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
  4. Spacing: Set the spacing between the  meta data  and the excerpt

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