The Post List widget from Element Pack Pro lets you display posts in a clean and organized list layout. It helps showcase blog posts or custom content with flexible styling and query options. With responsive controls, you can easily present your content in an engaging way using Elementor. In this documentation, we will guide you on how to use and customize the Post List widget.
Enable the Post List Widget
To use the Post List by Element Pack, first, you have to enable the widget.
- Go to WordPress Dashboard → Element Pack Plugin dashboard.
- Then, click the Core Widgets Tab.
- Search the Post List Widget Name.
- Enable the Post List Widget.
- Hit the Save Settings Button.
Inserting the Post List widget
1. Go to the Elementor Editor Page and hit the “+” icon Button.
2. Search the Post List widget.
3. Drag the widget and drop it on the editor page
Configuring the Content Tab
Layout Section
Go to Content → Layout
1. Title: Enable the switcher to show the title to your audience.
2. Title HTML Tag: You can adjust the HTML tag for the title with this option.
3. Featured Image: Enable the switcher to show the featured image with this option.
4. Image Resolution: You can adjust the resolution of the image with this option.
5. Multiple Columns: Enable the switcher to get the option to add multiple columns.
6. Columns: You can adjust the number of columns that you want to show to your audience with this option.
7. Gap: You can adjust the gaps between the posts with this option.
8. Date: Enable the switcher to show the post creation date to the audience.
9. Human Different Time: Enable the switcher to show the post creation date as a human-readable time with this option.
10. Category: Enable the switcher to show the category of the posts to your audience with this option.
Query Section
Go to Content → Query
1. Source: Select the source for the slider from here. The types of sources are – Posts, Pages, Floating Elements, Testimonials, Template Items, Manual Selection, Current Query, and Related. Here, we selected the type as testimonials.
2. Limit: You can adjust the limit here of how many posts you want to show in the thumbs gallery.
3. Include/Exclude Selection: Select the Include / Exclude filter to show/hide specific posts by Terms (Tags/Categories) or Authors. Here, we selected the include field as Author.
4. Authors: This option lets you select the author’s name whose post you want to add to the slider.
5. Offset: The Offset option lets you skip a certain number of posts from the start, so the display begins from the next post instead. Keeping it 0 means post without any exclusion.
6. Date: You can select the post as per the date of creation with this option.
7. Order By: It controls the data you want to display through title, id, date, author, comment count, menu order & random. Here we selected the order by date.
8. Order: This option controls the order by which data is arranged. There are two types of order. Ascending Order (Starts from the smallest or lowest value and goes to the largest or highest.) & Descending Order (Starts from the largest or highest value and goes to the smallest or lowest.)
9. Ignore Sticky Posts: Enable the switcher to ignore all the sticky posts to show in the list with this option.
10. Only Featured Image Post: Enable or disable the switcher to show or hide the featured image post.
11. Query ID: Give your query a custom, unique ID to allow server-side filtering. Learn more about the Query.
Additional Options Section
Go to Content → Additional Options
1. Filter Bar: Enable the switcher to show the category filter above the posts with this option.
2. Taxonomies: You can select the posts’ arrival at the editor by selecting the categories, tags, or formats with this option.
3. Filter Bar Title: You can make changes to the filter bar title text with this option.
4. Follow Descendants: Enable the switcher to ensure that selected parent categories automatically include ot exclude all their child and grandchild categories.
5. Icon: You can add icons to the posts with this option.
6. Link Open in a New Tab: Enable the switcher to open the post in a new tab when clicked on it.
7. Content Direction: You can set the content direction to left, right, or justified with this option.
8. Content Vertical Align: You can adjust the content vertical align to top, middle, or bottom with this option.
Work with The Style Tab
Filter Bar Section
Go to Style → Filter Bar
1. Title Color: You can make changes to the title text color with this option.
2. Background Type: You can choose the background type to be classic or gradient with this option.
3. Border Type: You can add and change the border types with this option.
4. Border Radius: You can control the roundness of the border with this option.
5. Padding: You can adjust the inner space of the filter bar with this option.
6. Margin: You can adjust the space around the filter bar with this option.
7. Box Shadow: You can add a shadow effect to the filter bar with this option.
8. Title Spacing: You can adjust the space between the categories and the title with this option.
9. Title Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Filter Category Section
Go to Style → Filter Category
In this section, we have three more tabs. These are Normal, Hover & Active. Let’s start describing those one by one –
1. Color: You can make changes to the filter category text color with this option.
2. Background Type: You can choose the background type to be classic or gradient with this option. Here, we have selected the background type as classic.
3. Color: You can change the filter categories’ background color with this option.
4. Border Type: You can add and change the border types with this option.
5. Border Radius: You can control the roundness of the border with this option.
6. Padding: You can adjust the inner space of the category names with this option.
7. Gap: You can adjust the space between the categories with this option.
8. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
Now, let’s proceed to the Hover Tab –
1. Color: You can change the filter category text hover color with this option.
2. Background Type: You can choose the background type to be classic or gradient with this option.
3. Color: You can change the background hover color with this option.
Now let’s proceed to the Active Tab –
1. Color: You can make changes to the filter category’s text active color with this option.
2. Background Type: You can choose the background type to be classic or gradient with this option.
3. Color: You can change the background active color with this option.
Items Section
Go to Style → Items
1. Divider Color: You can make changes to the divider color with this option.
2. Background Type: You can change the background type to be classic or gradient with this option. Here, we have selected the background type as classic.
3. Color: You can change the background color of the items with this option.
4. Image: You can change the background image with this option.
5. Border Type: You can add and change the border types with this option.
6. Border Radius: This option controls the roundness of the border.
7. Padding: You can adjust the inner space of the post field with this option.
8. Space Between: You can adjust the space between the image and the content with this option.
9. Box Shadow: You can add a shadow effect to the post lists with this option.
Image Section
Go to Style → Image
In this section, we have two more tabs. These are Normal & Hover. Let’s start with the Normal Tab first –
1. Width: You can adjust the width of the image with this option.
2. Background Type: You can choose the background type to be classic or gradient with this option.
3. Border Type: You can add and change the border types with this option.
4. Border Radius: You can control the roundness of the border with this option.
5. Padding: You can adjust the inner space of the image field with this option.
6. Margin: You can adjust the space around the image with this option.
7. Box Shadow: You can add a shadow effect to the image with this option.
8. CSS Filters: You can customize the image with this option.
9. Opacity: You can add and adjust the transparency to the image with this option.
10. Transition Duration: You can adjust the timing of the transition of the image with this option.
Now let’s proceed to the Hover Tab –
1. Background Type: You can change the background type to be classic or gradient with this option.
2. Color: You can change the image background hover color with this option.
3. Image: You can change the background image with this option.
4. CSS Filter: You can customize the image hover preview with this option.
5. Opacity: You can adjust the transparency of the image with this option.
Title Section
Go to Style → Title
1. Color: This option allows you to change the title text color.
2. Hover Color: You can make changes to the title text hover color with this option.
3. Typography: Change the title’s font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
4. Margin: This option allows you to adjust the space & creating gaps around the title.
Meta Section
Go to Style → Meta
1. Separator Color: You can change the separator color with this option.
2. Color: You can change the date’s text color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
1. Color: You can change the category text color with this option.
2. Hover Color: You can change the category text hover color with this option.
3. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
All done! You have successfully customized the Post List widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Post List Widget. Please visit the demo page for examples.
Thanks for being with us.
