{"title":"Displaying Recent Posts in Phlox Land Style","id":37397,"link":"https:\/\/env.averta.net\/en\/step\/displaying-recent-posts-in-phlox-land-style\/","parent":[37224,35048],"content":"<p>Just like all other WordPress themes, Phlox lets you add Recent Posts page to your website, easily by adding a widget. The advantage is that you can give a style to the recent posts by editing the widget options in <a href=\"https:\/\/env.averta.net\/en\/step\/phlox-recent-posts-element\/?b=36639,36639\" title=\"Phlox Recent Posts Element\">Widget Areas<\/a> or in Page Builder. Phlox?Recent Posts?Widgets can?show your most recent posts on a widget bar of your website, and any page or post you want.<\/p>\n<p>One of Page Builder elements to create a recent posts page\/post is <strong>Land Style Recent Posts Widget<\/strong>.?You can specify the category or categories, the number of the posts you want to show, and order of the posts. You have the options to choose a title, exclude and include the posts, etc.<\/p>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/KnUgmJ3Bk-A?rel=0&amp;ecver=2\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><\/iframe><\/div>\n<hr \/>\n<h3>Land Style Recent Posts Options?in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; POSTS?<\/strong>section<\/li>\n<li>Choose?<strong>Land Style Posts<\/strong><\/li>\n<\/ol>\n<p>After adding recent posts to your post or page, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h4>Layout<\/h4>\n<\/li>\n<\/ul>\n<h4>Display<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-land-style-recent-posts-layout.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55933 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-land-style-recent-posts-layout.png\" alt=\"\" width=\"298\" height=\"761\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-land-style-recent-posts-layout.png 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-land-style-recent-posts-layout-117x300.png 117w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-land-style-recent-posts-layout-68x173.png 68w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/a><\/h4>\n<p>You are able to enable these features to display on your recent posts:<\/p>\n<ul>\n<li>Display post media (Image, Video, etc.)<\/li>\n<li>Display post title<\/li>\n<li>Display post info<\/li>\n<li>Display categories<\/li>\n<li>Display date<\/li>\n<li>Display post content<\/li>\n<li>Display like button<\/li>\n<li>Display excerpt and choose the length of it (The number of characters to show)<\/li>\n<li>Display author or read more<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-55905 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor.png\" alt=\"\" width=\"317\" height=\"1283\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor.png 317w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor-74x300.png 74w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor-253x1024.png 253w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phox-grid-carousel-posts-content-elementor-43x173.png 43w\" sizes=\"(max-width: 317px) 100vw, 317px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Content<\/h4>\n<\/li>\n<\/ul>\n<h4>Query<\/h4>\n<p>You are able to choose one or more than one <strong>C<\/strong><strong>ategory<\/strong> for your recent posts, or even show the posts of all available categories. Also, you can select a specific category.<\/p>\n<p><strong>Number of posts to show<\/strong> is editable. Also, you are able to?<strong>Exclude posts without media?<\/strong>and?<strong>custom post formats<\/strong>. If you exclude custom post formats, you are able to?<strong>Exclude quote and link post formats<\/strong>.<\/p>\n<p>You can <strong>Order posts by<\/strong>:<\/p>\n<ul>\n<li><strong>Date:<\/strong> Order the posts by their publication date<\/li>\n<li><strong>Menu Order:<\/strong>?Order by page order<\/li>\n<li><strong>Title:?<\/strong>Order by post title<\/li>\n<li><strong>ID:?<\/strong>Order by post ID<\/li>\n<li><strong>Random:<\/strong> Your posts appear randomly<\/li>\n<li><strong>Comments:?<\/strong>Order the posts by number of comments<\/li>\n<li><strong>Date Modified:<\/strong>?Order by last modified date<\/li>\n<li><strong>Author:?<\/strong>Order by the posts&#8217; author<\/li>\n<li><strong>Inserted post IDs:?<\/strong>In the order you write post IDs on?<strong>Include posts<\/strong> section<\/li>\n<\/ul>\n<p>Post?<strong>Order?<\/strong>can be <strong>Descending<\/strong> or <strong>Ascending<\/strong>.<\/p>\n<p>In <strong>Include\/Exclude posts<\/strong> field, you can enter the the specific posts IDs that you want\/do not want to show.<\/p>\n<p>In <strong>Start offset<\/strong> field, you are able to set a number to choose?the number of posts you want to?skip, and start the output with the next posts.<\/p>\n<h4>Paginate<\/h4>\n<p>There are three types for?<strong>Load more<\/strong>:<\/p>\n<ul>\n<li><strong>Infinite Scroll<\/strong><\/li>\n<li><strong>Next Button<\/strong><\/li>\n<li><strong>Next\/Prev?<\/strong><strong>Button<\/strong><\/li>\n<\/ul>\n<p>You can choose none if you do not want any of the mentioned load more types.<\/p>\n<div style=\"clear: both;\"><\/div>\n<ul>\n<li>\n<h4><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-carousel-posts-style-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-55908 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-carousel-posts-style-elementor.png\" alt=\"\" width=\"316\" height=\"1577\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-carousel-posts-style-elementor.png 316w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-carousel-posts-style-elementor-60x300.png 60w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-carousel-posts-style-elementor-205x1024.png 205w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/a>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p>You can change <strong>Image aspect ratio<\/strong> to: ?Horizontal 4:3, Horizontal 16:9, Square 1:1, and Vertical 3:4<\/p>\n<h4>Title<\/h4>\n<p>You can change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and <strong>Bottom space?<\/strong>of the title on <strong>Normal<\/strong> or <strong>Hover<\/strong>.<\/p>\n<h4>Post Info<\/h4>\n<p>Many options are available here that let you change <strong>Typography<\/strong>, <strong>Color<\/strong>, <strong>Bottom space<\/strong>, and?<strong>Space between metas?<\/strong>on?<strong>Normal?<\/strong>and?<strong>Hover<\/strong>.<\/p>\n<h4>Excerpt<\/h4>\n<p>Customize <strong>Color<\/strong>,<strong> Typography<\/strong>, and?<strong>Bottom space?<\/strong>of posts excerpt.<\/p>\n<h4>Meta<\/h4>\n<p>Like previous options, you can?change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and <strong>Bottom space <\/strong>for post metas?on <strong>Normal<\/strong> or <strong>Hover<\/strong>.<\/p>\n<p>&nbsp;<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr \/>\n<h3>Land Style Recent Posts Options?in SiteOrigin Page Builder<\/h3>\n<p>Follow below steps to activate the<strong> Land Style Recent Posts Widget<\/strong>?with SiteOriginPage Builder:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find <strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>, beside text tab<\/li>\n<li>Click?the?<strong>Add Widget<\/strong><\/li>\n<li>Click the?<strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Land Style Recent Posts<\/strong><\/li>\n<li>Click the?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<h4>Title<\/h4>\n<p>Choosing a title for the widget is optional.<\/p>\n<h4>Categories<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/land-recent-posts-1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37410 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/land-recent-posts-1.jpg\" alt=\"land-recent-posts\" width=\"426\" height=\"1287\" \/><\/a><\/h4>\n<p>You can select a specific category for choosing the recent posts from, or choose all available categories.<\/p>\n<h4>Number of Posts to Show<\/h4>\n<p>This option lets you choose the number of posts you want to show in your post or page.<\/p>\n<h4>Exclude and Include Posts<\/h4>\n<p>By writing the posts ID in Exclude and Include Posts fields, you are able to exclude and include posts from the recent posts. Additionally, you can exclude:<\/p>\n<ul>\n<li>Posts without Media<\/li>\n<li>Custom Post Formats<\/li>\n<li>Quote and Link Post Formats<\/li>\n<\/ul>\n<h4>Order by<\/h4>\n<ul>\n<li><strong>Date:<\/strong> Order the posts by their publication date<\/li>\n<li><strong>Menu Order:<\/strong>?Order by page order<\/li>\n<li><strong>Title:?<\/strong>Order by post title<\/li>\n<li><strong>ID:?<\/strong>Order by post ID<\/li>\n<li><strong>Random:<\/strong> Your posts appear randomly<\/li>\n<li><strong>Comments:?<\/strong>Order the posts by number of comments<\/li>\n<li><strong>Date Modified:<\/strong>?Order by last modified date<\/li>\n<li><strong>Author:?<\/strong>Order by the posts&#8217; author<\/li>\n<\/ul>\n<p>The posts can be either descending or ascending.<\/p>\n<h4>Start Offset<\/h4>\n<p>In this field,?you can set the start point?by writing the number of posts you want to skip.<\/p>\n<h4>Image Aspect Ratio<\/h4>\n<p>This option allows you to?change the image aspect ratio to Horizontal, Vertical, and Square.<\/p>\n<h4>Excerpt Length<\/h4>\n<p>In this field, you can specify the number of characters you want to display as a summary of the content.<\/p>\n<h4>More Options<\/h4>\n<p>There are more options that allow you to display media, title, meta, and button for your posts. Just simply switch on:<\/p>\n<ul>\n<li>Display Post Media (Image, Video, etc)<\/li>\n<li>Display Post Title<\/li>\n<li>Display Post Meta<\/li>\n<li>Display Like Button<\/li>\n<\/ul>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>To display like button bottom-right corner of the posts, you need to install?<strong>WP ULike<\/strong> plugin. For more information about recommended and required plugins in Phlox, check out <a href=\"https:\/\/env.averta.net\/en\/?post_type=step&p=35041&b=35041,35041\" title=\"Installing Recommended Plugins for Phlox (DRAFT)\">this article<\/a>.<\/p>\n<h4>Excerpt Length<\/h4>\n<p>Specify the number of characters you want to display as a summary of the content.<\/p>\n<h4>Display Author or Read More<\/h4>\n<p>This option lets you show either a Read More below each post, or the Author Name.<\/p>\n<h4>Extra Class Name<\/h4>\n<p>In this section, you are able to set a style for the widget. Write the style on?your CSS file, then add the defined class name here.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Here<\/a> you can find the common?styles of widgets in Page Builder.<\/p>\n","type":"solution"}