How To Use the Post List Widget of HappyAddons
If you’re looking to showcase the most important post of your site, the ‘Post List‘ widget of HappyAddons can help you to do that swiftly. Yes, sometimes, we need to show the special posts on the website. So in this documentation, we’ll show how you can use and customize it perfectly.
So without any delay, let’s get started:
Check this handy video tutorial.
Step One: Add the Post List Widget to the Elementor Canvas
Like other widgets of HappyAddons, you can add this widget in the same way. To do that, first select the widget from the left sidebar and drag it to the marked area.
Step Two: Explore the Content Tab Options of the Post List Widget
After selecting the widget, you are ready to customize it in the ‘content tab‘. Here you’ll get four items. They are Presets, List, Settings, and Wrapper Link.
# Preset
In the Preset section, you will get lots of predesigned templates that you can use to present your post list.
# List
Expanding the List option, you’ll see four options. They are Source, Show post by, Item Limit, and Offset.
From the Source option, you can set the source of content. You can set Posts, Pages, and Content Query. For the docuentation post, we are selecting the Posts option.
From the Show post by option, you’ll again see a list of options. For example, by choosing the Category type, you can set categories to display personalized posts.
Once the Category type has been selected, a new field will open up. Now, add your desired categories to the field. You’ll see posts are changing according to the category type.
From the Item Limit option, you can set the number of posts to be displayed. As you can see that we have set 5, the number of posts has been increased on the canvas.
By setting the Offset value, you can again increase/descrase the number of item to be displayed on the canvas.
# Settings
Now, expand the Settings section. You’ll see so many options. However, now toggle on the Show Content and Show Meta options.
Once the Show Meta option is enabled, some more items will be dispalyed as you can see on the screenshot below.
Enable all the meta options and information regarding the meta options will keep appearing on the posts.
# Date Format
Once clicked the dropdown icon of Date Format, a list of date formats will open up. Choose a date format you like.
You can see that the date format has been changed.
# Custom Field
There are so many options. Hope you can explore and optimize them yourself. But for example, come to the Custom field.
Note: Custom field information will be displayed only on the post where you configure it.
But for that, you have to enable the custom field option. To do this, go to the three-dot icon of your Gutenberg editor of the respective post where you want to show the extra information. Click the Preferences option.
Scroll down to the Custom fields option. Toggle on to enable this.
There are two fields. The left field is for naming the info, and the right field is the value you want to display. Once done, hit the Add Custom Field button and then press the Save button.
Now, type the name into the field. The value will instantly be displayed on the canvas.
# Meta Separator
Go to the Meta Separator field. Write any character you want to show. It will be shown on the respective place on your canvas.
Step Three: Stylize the Post List Widget
Come to the Style tab. You’ll see lots of options there. They are List, Title, Icon & Feature Image, Content, and Meta.
Let’s, for example, expand the List section. By placing padding and margin, you can customize the layout fo the widget. You can even set a background color to the widget.
Now, expand the Title section. By clicking the pencil icon, you’ll find options to customize the typography of the titles.
In the same way, expand sections and stylize other parts of the widget. Hope you can do it yourself.
That’s It!