Articles

The Post Title widget is a Theme Element. It is one of the available Single Post Template widgets that is used to dynamically display the current post’s title.

Content #

Title #

1. Title: Post Title is the only option
2. Link:  Enter a URL, or more appropriately, select the Dynamic icon  to choose a dynamic URL such as the Post URL
3. Size: Select the title size, choosing from Default, S, M, L, XL, or XXL. Additional sizing is available on the Style tab in the Typography options
4. HTML Tag: Set the heading’s HTML tag to H1- H6, Div, Span or Paragraph
5. Alignment: Align the post title to the left, right, center, or justified

Note: If you click “Post Title”, a window will popup to allow you to choose a Fallback Title in the event that a Post Title does not exist. This popup also allows you to place static content Before and/or After the Post Title

Style #

Title #

1. Text Color: Choose the color of the Title’s text
2. Typography: Set the typography options for the Title
3. Text Shadow: Add a shadow and blur to the Post Title
4. Blend Mode: Set a blend mode for the title

Read the tutorial showing how to Create a Single Post Template

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.

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. *See Note below for instructions to set image position on mobile.
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

Note: Adjust Image Width and Image Ratio in desktop and mobile view as shown below.

Query

Source: Select the source from which the widget will display the content. Options include Posts, Pages, Custom post types if available, Manual Selection, Current Query, and Related. Depending upon which source you’ve chosen for the query, you’ll be given options which allow you to filter the results.

Include #

1. Include By: Term or Author, then use Search and Select to choose which ones to use. Terms include all of the items in a taxonomy. The available taxonomies are: categories, tags, formats and custom taxonomies.
2. Date: Select from All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates) 
3. Order By: Set the order in which the posts will be displayed. Options include: Date, Title, Menu Order, or Random
4. Order: DESC (descending) or ASC (ascending)
5. Ignore Sticky Posts: Yes or No
6. Query ID: Give your Query a custom unique ID to allow server side filtering

Note: Choosing Related as the Source and Category as the Include By term will display posts related to the category assigned to the current post being displayed. So if the user is viewing a post in the Travel category, for example, the page will show Related posts which are also in the Travel category. If the post currently displayed has multiple categories assigned to it, the Related posts will pull posts from the FIRST category (alphabetically) assigned to the post. Important Exception: Keep in mind that if you set a Fallback for Related Posts, it will not take the query into account. Once you select a fallback as shown below, it will pull and display all the latest posts.

#

#

1. Exclude By: Current Post, Manual Selection, Term, or Author, then use Search and Select for Manual,Term, or Author choices
2. Avoid Duplicates: Yes or No – Choose Yes to avoid displaying duplicate posts on the frontend only. Elementor looks for duplicates at the page level (not at the widget level) given that there cannot be duplicates in a Posts widget.
3. Offset: Use this setting to skip over posts (e.g. “2” to skip over 2 posts)
4. Date: All, Past Day, Past Week, Past Month, Past Quarter, Past Year, Custom (Choose Before or After dates)
5. Order By: Date, Title, Menu Order, or Random
6. Order: DESC (descending) or ASC (ascending)
7. Ignore Sticky Posts: Yes or No
8. 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: 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.

Content #

1. Skin: Select a pre-designed skin, either Classic or Cards Columns: Set how many columns will be displayed, from 1 to 6
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

#