Table Of Contents

Post List widget

How to Use Post List Widget

Post List widget is one of our super easiest widgets. Even after that, if you have to go through a tough tour while using the widget, the doc below will show you the way of getting out of that.

Let’s start the doc section by section.

To Insert Widget

Inserting Post List widget

Inserting the widget is just a matter of dragging and dropping. As you see in the screenshot above, drag the Elementor Post List widget inside your page.


Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Now, I’m going to show the sections of the Content Tab and how they work behind the list widget for posts.

Layout

postlist 2 1 - BdThemes

Go to the Content tab > Layout.

Before using this widget, you’ve to make sure that you have enough post to show. Ok! Look at this section that includes a few switcher buttons. And using the buttons, you might easily manage the layout of the widget.

One more thing you can also calculate the column number and adjust the spacing here.

Query

This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats. The references can be different in accordance with the source location. Read more 

postlist 3 - BdThemes

For example, 

A.  Go to Source ➤ next select data location( such as Manual Selection

B. Then, write category name in the Categories field.

C. Next, go for Posts Limit. For example, 2, 3, 5 like this.

D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or Category – wise and also with ascending or descending order.


Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Image

postlist style 2 - BdThemes

First of all, go to the Style tab > Image. Then, under the Normal mode, you might adjust Image Size, Padding, Margin, Border Type and Radius, and Box Shadow.

Next thing is to add background to the image from the Background Type (Classic/ Gradient).

postlist style 3 - BdThemes

Another important thing is CSS Filters. Go to the Style tab > Image > CSS Filters.

postlist style 4 - BdThemes

But, you can also set opacity and transition to the image using the Opacity and Transition Duration scroll bar for the list widget for posts. See the image above.

postlist style 5 - BdThemes

Secondly, go to the Style tab > Image. After that, under the Hover mode, you’ll be able to add Background, Border color, CSS Filters.

List Style

postlist style 6 - BdThemes

Just, go to the Style tab > List Style.

This section will let you style title, date, category, and divider under the sub-section Title, Date, Category one by one on the Post List widget. See the image example above.

Video Assist

At the end of this documentation, I hope you’ve noticed what is Post List widget by Element Pack is and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.