{"title":"Displaying Recent Posts in Phlox Tiles and Tiles Carousel Styles","id":37423,"link":"https:\/\/env.averta.net\/en\/step\/displaying-recent-posts-in-phlox-tiles-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><strong>Tiles Recent Posts Widget?<\/strong>is one of the Page Builder elements for collecting recent posts in a page\/post. This element gives a tiled grid style to your recent posts. Tiles can appear in two different styles and each tile can include the post title and post meta (date, and category\/categories).<\/p>\n<p>The tiled layout is best for creating image gallery out of your recent posts and is the best choice for photo blogs.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37456\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/tiled-dark.jpg\" alt=\"tiled-dark\" width=\"1344\" height=\"1902\" \/><\/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\/SUQqXTUbpD8?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><\/iframe><\/div>\n<hr \/>\n<h3>Tiles 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>Tiles Posts?<\/strong>or?<strong>Tiles Carousel Posts<\/strong><\/li>\n<\/ol>\n<p>After adding tiles 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-tiles-posts-layout-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-55938 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-posts-layout-elementor.png\" alt=\"\" width=\"300\" height=\"731\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-posts-layout-elementor.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-posts-layout-elementor-123x300.png 123w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-posts-layout-elementor-71x173.png 71w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/h4>\n<p>There are 8 different?<strong>Post Tile styles<\/strong>.<\/p>\n<p>Also, you can set?<strong>Standard?<\/strong>or?<strong>Dark?<\/strong>layout for the items of tiles.<\/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 title<\/li>\n<li>Display post info<\/li>\n<\/ul>\n<h3>Tiles Carousel Posts<\/h3>\n<p>If you select?<strong>Tiles Carousel Posts?<\/strong>from the available elements, you can see all of the above options, besides you can customize?<strong>Carousel?<\/strong>settings.<\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-posts.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55939 alignnone\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-posts.png\" alt=\"\" width=\"300\" height=\"353\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-posts.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-posts-255x300.png 255w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-posts-147x173.png 147w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong>Navigation control?<\/strong>can be?<strong>Bullets<\/strong> or?<strong>Arrows<\/strong>.<\/p>\n<p>You can choose?<strong>Navigation type?<\/strong>to?<strong>Move per column<\/strong>, <strong>per page<\/strong>,?or <strong>Scroll smoothly<\/strong>. You can enable?<strong>Loop<\/strong> <strong>navigation<\/strong>,?<strong>Autoplay carousel<\/strong>, and set an?<strong>Autoplay<\/strong>?<strong>delay<\/strong> time in seconds.<\/p>\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 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>Tiles Recent Posts Options?in SiteOrigin Page Builder<\/h3>\n<p>Follow below steps to activate the<strong> Tiles 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] Tiles 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<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37425 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/tiles-recent-posts.jpg\" alt=\"tiles-recent-posts\" width=\"392\" height=\"1100\" \/><\/h4>\n<p>Choosing a title for the recent posts is optional.<\/p>\n<h4>Categories<\/h4>\n<p>This section allows you to select?all available categories to show posts from them, or choose a specific category.<\/p>\n<h4>Number of Posts to Show<\/h4>\n<p>You can?the number of posts you want to be shown in recent posts.<\/p>\n<h4>Exclude and Include Posts<\/h4>\n<p>You are able to exclude the posts you do not want to show in the recent posts. These posts are listed below:<\/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<p>Additionally, in Exclude Posts field, you can enter the ID of the specific posts you do not want to show, and in Include Posts field, you can choose which posts to show by entering their ID.<\/p>\n<h4>Order by and Order<\/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>This option?indicates the start point. You can write the number of posts you want to skip.<\/p>\n<h4>Post Tile Style<\/h4>\n<p>There is two available styles for tiles. Standard and Dark. By choosing the second style, the tile become darker when the mouse hovers over it. Also, the title and the post meta will appear at the center of the tile.<\/p>\n<h4>More Features<\/h4>\n<p>You are able to switch on below features to display:<\/p>\n<ul>\n<li>Post Title<\/li>\n<li>Post Meta<\/li>\n<\/ul>\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"}