{"id":106459,"date":"2023-05-04T15:01:44","date_gmt":"2023-05-04T09:31:44","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&#038;p=106459"},"modified":"2023-07-28T11:19:16","modified_gmt":"2023-07-28T05:49:16","slug":"blog-listing-widget-settings-overview","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/blog-listing-widget-settings-overview\/","title":{"rendered":"Blog Listing Widget Settings Overview"},"content":{"rendered":"\n<p>Blog posts are a valuable asset for any website as they provide a means to share information and engage with the audience. They can help establish authority, drive traffic, and improve search engine rankings. The Plus Addons for Elementor provides a powerful Blog Listing widget that allows you to display your blog posts in a variety of attractive and customisable layouts.&nbsp;<\/p>\n\n\n\n<p>With this widget, you can showcase your blog content in a way that is visually engaging and easy to navigate for your visitors. Whether you&#8217;re a blogger or a business owner, the Blog Listing widget is an essential tool for displaying your latest content in a stylish and professional manner.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pluslisting\/#blog-post-wgts?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Required Setup<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor FREE Plugin<\/a> installed &amp; activated.<\/li>\n\n\n\n<li>You need to have <a href=\"https:\/\/wordpress.org\/plugins\/the-plus-addons-for-elementor-page-builder\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">The Plus Addons for Elementor<\/a> plugin installed and activated.<\/li>\n\n\n\n<li>Make sure the Blog Listing widget is activated, to verify this visit Plus Settings \u2192 and Search for Blog Listing and activate.<\/li>\n\n\n\n<li>This is a Freemium widget, to unlock the extra features, you need the <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/pricing\/?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" target=\"_blank\" rel=\"noreferrer noopener\">PRO version of The Plus Addons for Elementor<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Activate the Blog Listing Widget?<\/h2>\n\n\n\n<p>Go to&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Plus Settings <\/strong>\u2192<strong> Plus widgets&nbsp;<\/strong><\/li>\n\n\n\n<li><strong>Search <\/strong>the widget name<strong> <\/strong>and<strong> turn on the toggle <\/strong>then<strong> <\/strong>click<strong> Save.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"913\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate.png\" alt=\"blog listing activate\" class=\"wp-image-106466\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate.png 1920w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate-300x143.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate-1024x487.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate-768x365.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate-1536x730.png 1536w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-activate-600x285.png 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Key Features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Multiple Post Listing Type <\/strong>(Pro) &#8211; You can choose from multiple post listing types. Normal Page, Archive Page and Single Page Related Posts.&nbsp;<\/li>\n\n\n\n<li><strong>Multiple Style Options <\/strong>(Freemium) &#8211; You can choose from multiple style options for each post listing type.<\/li>\n\n\n\n<li><strong>4 Layouts<strong> <\/strong><\/strong>(Freemium)<strong> <\/strong>&#8211; You can choose from four layout types Grid, Masonry, Metro and Carousel (Pro).<\/li>\n\n\n\n<li><strong>Multiple Layout Style Options<\/strong> &#8211; You can select from different predefined style options for each layout.<\/li>\n\n\n\n<li><strong>Include Posts by Category and Tags<\/strong> &#8211; You can include posts by category and tag.<\/li>\n\n\n\n<li><strong>Exclude Posts by Category and Tags <\/strong>(Pro) &#8211; You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/exclude-blog-post-based-on-category-and-tags\/\" target=\"_blank\" rel=\"noreferrer noopener\">exclude posts by category and tag<\/a>.<\/li>\n\n\n\n<li><strong>Offset Posts<\/strong> &#8211; You can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-recent-blog-post-from-list-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">hide posts from the beginning of the listing<\/a> by setting an offset number.<\/li>\n\n\n\n<li><strong>Order Posts by Different Parameters<\/strong> &#8211; You can order posts by different parameters like id, date, author, title and more.<\/li>\n\n\n\n<li><strong>Title Limit<\/strong> &#8211; You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/limit-blog-post-title-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">limit the post title by character or word<\/a>.<\/li>\n\n\n\n<li><strong>Limit Excerpt<\/strong> &#8211; You can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/limit-post-excerpt-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">limit the post excerpt by word count<\/a>.<\/li>\n\n\n\n<li><strong>Hide Author <\/strong>(Pro) &#8211; You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-author-name-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">hide the post author name from the blog post list<\/a>.<\/li>\n\n\n\n<li><strong>Hide Date <\/strong>(Pro) &#8211; You can <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-blog-post-date-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">hide the post date from the blog post list<\/a>.&nbsp;<\/li>\n\n\n\n<li><strong>Category Filter <\/strong>(Pro) &#8211; You can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-category-wise-filter-in-blog-post-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add filters (by category) for the Normal Page listing type posts<\/a> (except carousel layout).<\/li>\n\n\n\n<li><strong>More Post Loading Options <\/strong>&#8211; You can choose from different types of more post loading options such as Pagination, Load more and Lazy Load.<\/li>\n\n\n\n<li><strong>Preloader <\/strong>(Pro) &#8211; You can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/delay-loading-blog-post-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">add a preloader to your blog post listing<\/a> (for grid and masonry layout).<\/li>\n\n\n\n<li><strong>Unique Carousel ID <\/strong>(Pro) &#8211; With the Unique Carousel ID, you can easily <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-blog-posts-carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">connect and control the Carousel blog post listing with the Carousel Remote widget<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Content in the Blog Listing Widget?<\/h2>\n\n\n\n<p>To add content to the Blog Listing widget from The Plus Addons for Elementor, add the widget on the page or template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Layout<\/h3>\n\n\n\n<p>From the <strong>Post Listing Types<\/strong> dropdown under the <strong>Content Layout<\/strong> tab, you have to select the listing type.<\/p>\n\n\n\n<p>Here you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Normal Page<\/strong> &#8211; For showing blog post listing on any page.&nbsp;<\/p>\n\n\n\n<p><strong>Archive Page<\/strong> &#8211; For showing blog post listing on an archive template. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/create-category-archive-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Single Page Related Posts<\/strong> &#8211; For showing related post items on a single post page. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-related-blog-posts-on-blog-single-page-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: For Archive Page and Single Page Related Posts, you have to use them in an archive and single post template, respectively, to make it work properly. If you add the widget on a page, you won\u2019t see any difference between these three options, it is only for visual purposes so you can style the listing.<\/em>&nbsp;&nbsp;&nbsp;<\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"333\" height=\"483\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-layout.png\" alt=\"blog listing content layout\" class=\"wp-image-106467\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-layout.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-layout-207x300.png 207w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>Depending on the post listing type, options will change. Let\u2019s keep the listing to the <strong>Normal Page<\/strong> option.<\/p>\n\n\n\n<p>From the <strong>Style<\/strong> dropdown, you can select from different predefined styles.<\/p>\n\n\n\n<p>Then from the <strong>Layout<\/strong> dropdown, you can select the layout of your blog post listing. Here you\u2019ll find four options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Grid<\/strong> &#8211; For creating a grid post layout.<\/p>\n\n\n\n<p><strong>Masonry<\/strong> &#8211; For creating a masonry grid post layout.<\/p>\n\n\n\n<p><strong>Metro<\/strong> &#8211; For creating a modern metro layout.<\/p>\n\n\n\n<p><strong>Carousel<\/strong> &#8211; For creating a blog post carousel slider.<\/p>\n\n\n\n<p>Select the appropriate layout option which fits your need.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Source<\/h3>\n\n\n\n<p>From the <strong>Content Source<\/strong> tab, you can select categories and tags as the source of your blog posts and you can also exclude categories and tags from the source. Here you\u2019ll find four options &#8211;&nbsp;<\/p>\n\n\n\n<p><strong>Select Category<\/strong> &#8211; From here, you can select different categories as the source.<\/p>\n\n\n\n<p><strong>Select Tags<\/strong> &#8211;&nbsp; From here, you can select different tags as the source.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: You can use both categories and tags together as the source as well. In that case, a post must match both conditions to be included in the listing.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"333\" height=\"815\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-source.png\" alt=\"blog listing content source\" class=\"wp-image-106468\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-source.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-content-source-123x300.png 123w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p><strong>Exclude Category<\/strong> &#8211; From here, you can exclude different categories from the source.<\/p>\n\n\n\n<p><strong>Exclude Tags<\/strong> &#8211;&nbsp; From here, you can exclude different tags from the source.<\/p>\n\n\n\n<p><a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/exclude-blog-post-based-on-category-and-tags\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn how to exclude blog posts based on categories and tags<\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: Post source and exclude options are only available with the Normal Page listing type.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>In the <strong>Maximum Posts Display<\/strong> field, you can set a maximum number of posts to be displayed on a page.&nbsp;<\/p>\n\n\n\n<p>From the <strong>Offset Posts<\/strong> field, you can hide posts from the beginning of the blog post list. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-recent-blog-post-from-list-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p>Then from the <strong>Order By<\/strong> dropdown, you can order the posts. Here you\u2019ll find multiple options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>None<\/strong> &#8211; This will keep the list in its default order.<\/li>\n\n\n\n<li><strong>ID<\/strong> &#8211; With this, you can order the posts by their ID.<\/li>\n\n\n\n<li><strong>Author<\/strong> &#8211; With this, you can order the posts by post author name.<\/li>\n\n\n\n<li><strong>Title<\/strong> &#8211; With this, you can order the posts by title (alphabetical order).<\/li>\n\n\n\n<li><strong>Name (slug)<\/strong> &#8211; With this you can order the posts by their slug (URL).<\/li>\n\n\n\n<li><strong>Date<\/strong> &#8211; With this you can order the posts by date. This option can be used to show the latest blog posts, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/show-recent-blog-posts-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">learn the process<\/a>.<\/li>\n\n\n\n<li><strong>Modified<\/strong> &#8211; With this you can order the posts based on the last modified date.<\/li>\n\n\n\n<li><strong>Random<\/strong> &#8211; This will show posts in a random order. So every time pages loads, the blog posts will show in a different order.<\/li>\n\n\n\n<li><strong>Comment Count<\/strong> &#8211; With this you can order the posts based on the number of comments..<\/li>\n\n\n\n<li><strong>Default Menu Order<\/strong> &#8211; With this option you can order posts by menu order number. However menu order option is available for pages only. If you want to use the menu order feature for posts, you have to add some special code to your website&#8217;s files. This will allow you to give each post an order number, just like you can for pages.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Then from the <strong>Order<\/strong> dropdown, you can arrange the posts in ascending or descending order based on the option selected in the <strong>Order By<\/strong> dropdown.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Columns Manage<\/h3>\n\n\n\n<p>From the <strong>Columns Manage<\/strong> tab, you can manage the number of columns of your blog posts on desktop, tablet and mobile separately.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Note: <\/em><strong><em>Columns Manage<\/em><\/strong><em> is not available with the Carousel layout.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"506\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-columns-manage.png\" alt=\"blog listing columns manage\" class=\"wp-image-106469\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-columns-manage.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-columns-manage-197x300.png 197w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p>You can also manage the column gap from here.<\/p>\n\n\n\n<p>For the <strong>Metro <\/strong>layout, you can select the number of columns for desktop and tablet only, you can also select different styles for each device separately.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Options<\/h3>\n\n\n\n<p>In the <strong>Extra Options<\/strong> tab, you\u2019ll find some powerful options, these options will vary depending on listing and layout types.<\/p>\n\n\n\n<p><strong>Title Tag<\/strong> &#8211; From here, you can set different HTML tag to your blog post title.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"685\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-extra-options.png\" alt=\"blog listing extra options\" class=\"wp-image-106470\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-extra-options.png 332w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-extra-options-145x300.png 145w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p><strong>Title Limit<\/strong> &#8211; From here, you can limit the title by character or word. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/limit-blog-post-title-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Featured Image Type<\/strong> &#8211; This option is only available with the <strong>Carousel<\/strong> layout, from here you can set different sizes of the featured image for the carousel slider.<\/p>\n\n\n\n<p><strong>Title &amp; Description Word Break<\/strong> &#8211; From here, you can break the title and description by character if there is lack of space.<\/p>\n\n\n\n<p><strong>Display Excerpt\/Content<\/strong> &#8211; With this option, you can show or hide post excerpt from the blog post. When enabled, you can also limit the excerpt content by number of words from the <strong>Excerpt\/Content Count<\/strong> field, <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/limit-post-excerpt-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">learn the process<\/a>.<\/p>\n\n\n\n<p><strong>Display Image Size<\/strong> &#8211; From here, you can select different image sizes of the post featured image (except in <strong>Carousel<\/strong> layout). For example, if you want your image to be of the same square regardless of the image size uploaded, you can use this option and select TP square.&nbsp;<\/p>\n\n\n\n<p><strong>Display Post Meta<\/strong> &#8211; With this option, you can show or hide the post meta, such as post date, author name etc. When you turn on the toggle, you can choose from different predefined styles for post meta. You\u2019ll also get an option to show or <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-author-name-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">hide the post author name<\/a> and <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/hide-blog-post-date-in-elementor-blog-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">post date<\/a> separately.<\/p>\n\n\n\n<p><strong>Category Wise Filter<\/strong> &#8211; With this option, you can add a beautiful filter based on category for your blog post listing (only available in the <strong>Normal Page<\/strong> listing type, except in the <strong>Carousel<\/strong> layout). <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-category-wise-filter-in-blog-post-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/p>\n\n\n\n<p><strong>More Post Loading Options<\/strong> &#8211; From here, you can add different types of options to load more posts (except in <strong>Carousel<\/strong> layout and <strong>Single Page Related Posts<\/strong> type listing). Here you\u2019ll find three options &#8211;&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pagination<\/strong> &#8211; With this you can add pagination to your listing. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-pagination-in-blog-posts-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.&nbsp;<\/li>\n\n\n\n<li><strong>Load more<\/strong> &#8211; With this you can add a load more button to load more posts. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-read-more-button-in-blog-posts-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/li>\n\n\n\n<li><strong>Lazy Load<\/strong> &#8211; With this option you can add an infinite loading option to your blog post listing as the user scrolls down. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-infinite-scroll-for-blog-posts-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Preloader<\/strong> &#8211; You can add a preloader to your blog post listing (only in <strong>Grid<\/strong> and <strong>Masonry<\/strong> layout). <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/delay-loading-blog-post-in-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn the process<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Style the Blog Listing Widget?<\/h2>\n\n\n\n<p>To style the Blog Listing widget, you\u2019ll find all the styling options under the <strong>Style<\/strong> tab.<\/p>\n\n\n\n<p><strong>Title<\/strong> &#8211; From here, you can manage the post title typography and colour.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"333\" height=\"576\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-style.png\" alt=\"blog listing style\" class=\"wp-image-106471\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-style.png 333w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/05\/blog-listing-style-173x300.png 173w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/figure>\n\n\n\n<p><strong>Content Background<\/strong> &#8211; From here, you can manage the post content background for both normal and hover state.<\/p>\n\n\n\n<p><strong>Featured Image<\/strong> &#8211; From here, you can manage the post featured image background for both normal and hover state.<\/p>\n\n\n\n<p><strong>Box Loop Background Style<\/strong> &#8211; From here, you can add border and box shadow to each blog post item in the listing.<\/p>\n\n\n\n<p><strong>Carousel Options<\/strong> &#8211; This option will be visible when you use the <strong>Carousel<\/strong> layout. Here you\u2019ll find many options to control the carousel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Unique Carousel ID<\/strong> &#8211; With the Unique Carousel ID you can easily connect and control the Carousel blog post listing with the Carousel Remote widget. <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/carousel-remote-sync-with-elementor-blog-posts-carousel\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more<\/a>.<\/li>\n\n\n\n<li><strong>Slider Mode<\/strong> &#8211; From here, you can choose your slider orientation, Horizontal or Vertical.<\/li>\n\n\n\n<li><strong>Slide Speed<\/strong> &#8211; Control your slide transition speed from here.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Then you\u2019ll find various device-dependent options.<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Columns <\/strong>&#8211; You can set number of columns for the slide for desktop, tablet and mobile separately.&nbsp;<\/li>\n\n\n\n<li><strong>Next Previous<\/strong> &#8211; You can set the behaviour of your next\/previous slide movement from here. You can either move one column at a time or move all visible columns (depending on the number of columns set in the <strong>Columns<\/strong> dropdown).<\/li>\n\n\n\n<li><strong>Slide Padding<\/strong> &#8211; From here you can adjust the padding of your slider.<\/li>\n\n\n\n<li><strong>Draggable<\/strong> &#8211; Make your carousel draggable or non-draggable from here.<\/li>\n\n\n\n<li><strong>Multi Drag<\/strong> &#8211; With this option you can allow users to drag multiple slides at once.<\/li>\n\n\n\n<li><strong>Infinite Mode<\/strong> &#8211; You can turn your carousel into an infinite loop slider from here.<\/li>\n\n\n\n<li><strong>Pause On Hover<\/strong> &#8211; Allow the users to pause the slider on mouse hover.<\/li>\n\n\n\n<li><strong>Adaptive Height<\/strong> &#8211;&nbsp; If you have slides with uneven height with this option the carousel navigations will adjust its position automatically according to the height of the slide.<\/li>\n\n\n\n<li><strong>Animation Type<\/strong> &#8211; From here you can choose the animation type for your slider.<\/li>\n\n\n\n<li><strong>Autoplay<\/strong> &#8211; Make your carousel slider autoplay from here and adjust its speed as well.<\/li>\n\n\n\n<li><strong>Show Dots<\/strong> &#8211; From here you can add dots slider navigation and you can style them as well.<\/li>\n\n\n\n<li><strong>Show Arrow<\/strong> &#8211; You can also add arrows navigation for your carousel slider and style them from here.<\/li>\n\n\n\n<li><strong>Center Mode<\/strong> &#8211; From here, you can highlight the center slide by adding padding, scale effect or opacity.<\/li>\n\n\n\n<li><strong>Number Of Rows<\/strong> &#8211; From here, you can set the number of rows for your slider.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Post Not Found Options<\/strong> &#8211; To style the post not found message, you can use this tab. From here, you can manage the message typography, colour, background etc.<\/p>\n\n\n\n<p><strong>Extra Options<\/strong> &#8211; From here, you can make unique column alignment. Turn on the <strong>Messy Columns<\/strong> toggle you\u2019ll get options to move columns up and down up to 6 columns individually for different devices.<\/p>\n\n\n\n<p><strong>On Scroll View Animation<\/strong> &#8211;&nbsp; This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.posimyth.com\/tpae\/on-scroll-view-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about On Scroll View Animation<\/a><\/p>\n\n\n\n<p>Advanced options remain common for all our widget, you can explore all it options from here.<\/p>\n\n\n\n<p><a href=\"https:\/\/theplusblocks.com\/docs\/advanced-tab-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">View Advanced tab tutorial.<\/a><\/p>\n","protected":false},"author":16,"featured_media":106472,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[560,526],"class_list":["post-106459","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-blog-listing","docs-plus-listings"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106459"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106459\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106472"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106459"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}