{"title":"Displaying Recent Posts in Phlox Masonry Style","id":37421,"link":"https:\/\/env.averta.net\/en\/step\/displaying-recent-posts-in-phlox-masonry-style\/","parent":[37224,35048],"content":"<p>Phlox lets you add Recent Posts page to your website, just like all other WordPress themes. It is easily possible 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?let you show your most recent posts on a widget bar of your website, or any page or post you want.<\/p>\n<p>One of Page Builder elements for collecting recent posts in a page\/post is <strong>Masonry?<\/strong><strong>Recent Posts Widget<\/strong>. This element?makes your pages or posts?more organized and clearer. You can simply edit and customize the options and add a title to this widget, specify the number of columns, set a style, etc.<\/p>\n[Preview]\n<hr \/>\n<h3>Masonry 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>Masonry Posts<\/strong><\/li>\n<\/ol>\n<p>After adding masonry 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>Layout<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-posts-layout-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-55931 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-posts-layout-elementor.png\" alt=\"\" width=\"299\" height=\"980\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-posts-layout-elementor.png 299w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-posts-layout-elementor-53x173.png 53w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/a><\/h4>\n<p>Here you can choose the number of <strong>Columns<\/strong><strong>?<\/strong>of your recent posts on desktop, tablet, and mobile.<\/p>\n<h4>Display<\/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 and choose its position (After\/Before Title)<\/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<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 image aspect ratio 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>Masonry Recent Posts Options?in SiteOrigin Page Builder<\/h3>\n<p>Follow below steps to activate the<strong> Masonry Recent Posts Widget<\/strong> with SiteOrigin Page 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]?Masonry 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>In this field, you can add a title to your recent posts. You can also leave it empty.<\/p>\n<h4>Categories<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/masnory-recent-posts.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37422 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/masnory-recent-posts.jpg\" alt=\"masnory-recent-posts\" width=\"437\" height=\"1365\" \/><\/a><\/h4>\n<p>You are able to select a category for selecting the 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 for showing as the recent posts.<\/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 are able to set a number for the number of posts you want to pass over.<\/p>\n<h4>Excerpt Length<\/h4>\n<p>This option specifies 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 like 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>Here you can 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>Number of Columns<\/h4>\n<p>The number of columns is changeable and can be up to 6.<\/p>\n<h4>Number of Columns in Tablet and Phone Size<\/h4>\n<p>On tablet and mobile, the number of columns can be set as inherited from larger, that means the number of columns is equal to the chosen number of larger screen size. For example, if you enter 4 in the?number of columns field, and choose inherited from larger in tablet and mobile, the number of columns will not change in the smaller screens. But if you change the number of columns in tablet to 2, and choose <em>inherited from larger<\/em> option for mobile, the number of columns in mobile will be 2, because it is inherited from the larger screen.<\/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"}