{"title":"Adding Masonry and Grid Portfolios","id":50444,"link":"https:\/\/env.averta.net\/en\/step\/adding-masonry-and-grid-portfolio\/","parent":[48372],"content":"<div>Masonry and Grid Portfolios are two of the available elements to showcase your recent portfolios on an archive page.<\/div>\n<div>The options for both elements are the same, however, there are some differences on the appearance. These elements include various options to edit. You can simply customize the style of your recent portfolios.<\/div>\n<div><\/div>\n<h3>Masonry and Grid Portfolios 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 Sidebar<\/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; PORTFOLIO?<\/strong>section<\/li>\n<li>Choose <b>Masonry\/Grid Portfolios<\/b><\/li>\n<\/ol>\n<p>After adding recent products 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><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-portfolios.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-60871 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-portfolios.png\" alt=\"\" width=\"299\" height=\"463\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-portfolios.png 299w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-portfolios-194x300.png 194w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-masonry-portfolios-112x173.png 112w\" sizes=\"(max-width: 299px) 100vw, 299px\" \/><\/a>Layout<\/h4>\n<p>&nbsp;<\/p>\n<p>You are able to change the number of <strong>columns<\/strong> (up to 6) on desktop, tablet, and mobile.<\/p>\n<p>You are able to enable these features:<\/p>\n<ul>\n<li>Display title\/categories\/like button<\/li>\n<li>Deeplink<\/li>\n<\/ul>\n<p>You can deeplink your portfolio, for SEO or sharing a specific portfolio filter with a unique URL.<\/p>\n<p>To index a portfolio filter on your website, enable deeplink and write a slug for it.? (Ex:?<em>http:\/\/yourdomain.com\/portfolio\/#\/deeplink-slug\/filter-slug\/<\/em>)<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>You need to specify slug for portfolio filters, too.<br \/>\nTo do so, select the filter you want on <strong>WordPress Admin Panel -&gt; Dashboard Sidebar -&gt; Portfolio -&gt; Filters<\/strong> and change the slug. Like the below screenshot:<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-61150 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-slug.png\" alt=\"\" width=\"970\" height=\"356\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-slug.png 970w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-slug-300x110.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-slug-768x282.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-slug-318x117.png 318w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/>??<\/p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-content.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-60874 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-content.png\" alt=\"\" width=\"300\" height=\"840\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-content.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-content-107x300.png 107w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-content-62x173.png 62w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/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 and select a specific category.<\/p>\n<p><strong>Number of posts to show<\/strong> is editable and it is possible to?<strong>Exclude posts without media<\/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 portfolios<\/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?<\/strong><b>portfolios<\/b>?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> section, 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<div style=\"clear: both;\"><\/div>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-settings.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-60875 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-settings.jpg\" alt=\"\" width=\"298\" height=\"1627\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-settings.jpg 298w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-settings-55x300.jpg 55w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Settings<\/h4>\n<\/li>\n<\/ul>\n<h4>Filters<\/h4>\n<p>On recent portfolios, you are able to show some items on top of the element. The?<strong>Filter<\/strong> bar allows visitors to sort portfolio items easily.?Portfolios can be filtered by?<b>Categories<\/b>,?<strong>Tags<\/strong>, or?<strong>Filters<\/strong>.<\/p>\n<p>To add this filter bar to your portfolio, you need to enable?<strong>Display filters<\/strong>.<\/p>\n<p>You are able to change the?<strong>Filter Control Alignment?<\/strong>to?<strong>Left<\/strong>,?<strong>Center<\/strong>,?or?<strong>Right<\/strong>.<\/p>\n<p>There are 9 available?<b>Filter Button?Style<\/b>:<\/p>\n<div class=\"fusion-text\">\n<div class=\"fusion-text\">Slide up, Fill, Cube, Underline, Float Frame, Bordered, Float Underline, Dropdown<\/div>\n<\/div>\n<h4>Transition<\/h4>\n<p><strong>Transitions?<\/strong>make your portfolio better. You can change the transition by customizing the duration while portfolio items are going to appear and be hidden, and the delay between reveal and hide. Please note that all of the options are in milliseconds.<\/p>\n<h4>Paginate<\/h4>\n<p>You can add?pagination to your portfolio by enabling?<strong>Paginate<\/strong>. Also, it is possible to change the number of items per page.<\/p>\n<div style=\"clear: both;\">\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-61245 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-e1539090035390.jpg\" alt=\"\" width=\"292\" height=\"750\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-e1539090035390.jpg 292w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-e1539090035390-117x300.jpg 117w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-e1539090035390-67x173.jpg 67w\" sizes=\"(max-width: 292px) 100vw, 292px\" \/><\/a><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p><strong>Space<\/strong>?adds some space between portfolio items.<\/p>\n<div style=\"clear: both;\"><\/div>\n<h4>Portfolio Hover Type<\/h4>\n<table width=\"100%;\">\n<tbody>\n<tr>\n<th>Hover type<\/th>\n<th>hover preview<\/th>\n<\/tr>\n<tr>\n<td>?Classic<\/td>\n<td>There is no hover action.<\/td>\n<\/tr>\n<tr>\n<td>?Classic with Lightbox Style 1<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48573 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/classic-w-lightbox-1.gif\" alt=\"\" width=\"295\" height=\"177\" \/><\/td>\n<\/tr>\n<tr>\n<td>?Classic with Lightbox Style 2<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48574 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/classic-w-lightbox-2-1.gif\" alt=\"\" width=\"297\" height=\"173\" \/><\/td>\n<\/tr>\n<tr>\n<td>Overlay Title Style 1<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48575 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/overlay-title-1.gif\" alt=\"\" width=\"294\" height=\"175\" \/><\/td>\n<\/tr>\n<tr>\n<td>Overlay Title Style 2<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48576 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/overlay-title-2.gif\" alt=\"\" width=\"291\" height=\"174\" \/><\/td>\n<\/tr>\n<tr>\n<td>Overlay Title with Lightbox Style 1<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48577 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/overlay-title-w-lightbox-1.gif\" alt=\"\" width=\"295\" height=\"226\" \/><\/td>\n<\/tr>\n<tr>\n<td>?Overlay Title with Lightbox Style 2<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-48578 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/overlay-title-w-lightbox-2.gif\" alt=\"\" width=\"295\" height=\"172\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-1-e1539090279874.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-61254 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-1-e1539090279874.jpg\" alt=\"\" width=\"288\" height=\"879\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-1-e1539090279874.jpg 288w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-1-e1539090279874-98x300.jpg 98w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-masonry-style-1-e1539090279874-57x173.jpg 57w\" sizes=\"(max-width: 288px) 100vw, 288px\" \/><\/a><\/h4>\n<h4>Title<\/h4>\n<p>You can change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and <strong>Spacing?<\/strong>on both?<strong>Normal?<\/strong>and?<strong>Hover<\/strong>.<\/p>\n<h4>Categories<\/h4>\n<p>Like previous options, you can?change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?<strong>Space between metas<\/strong>?and?<strong>Bottom<\/strong> <strong>space?<\/strong>on?<strong>Normal?<\/strong>and?<strong>Hover?<\/strong>mode.<\/p>\n<h4>Wrapper<\/h4>\n<p>Editable options on wrapper are?<strong>Padding<\/strong>, <strong>Background<\/strong>?and?<strong>Border<\/strong><strong> Type<\/strong>. There are different types for?border:?<strong>Solid<\/strong>, <strong>Double<\/strong>, <strong>Dotted<\/strong>, <strong>Dashed<\/strong>, and <strong>Groove<\/strong>. The width and color can be changed too.<\/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<\/div>\n<hr \/>\n<p>&nbsp;<\/p>\n<h3><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-50432 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Page-Builder-Portfolios-e1509784044323.png\" alt=\"\" width=\"527\" height=\"333\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Page-Builder-Portfolios-e1509784044323.png 527w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Page-Builder-Portfolios-e1509784044323-300x190.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Page-Builder-Portfolios-e1509784044323-274x173.png 274w\" sizes=\"(max-width: 527px) 100vw, 527px\" \/>Enable SiteOrigin Page Builder<\/h3>\n<p>First of all you need to make sure page builder tab is available on your portfolio pages. To enable page builder, please follow the below instructions:<\/p>\n<ol>\n<li>Go to your?<strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click?<b>Settings<\/b>?on the <strong>Dashboard<\/strong><\/li>\n<li>Go to?<strong>Page Builder<\/strong><\/li>\n<li>Enable?<strong>Portfolios?<\/strong>on <strong>General -&gt;?<\/strong><strong>Post Types<\/strong><\/li>\n<li>On the bottom of the page,?<strong>Save Settings<\/strong><\/li>\n<\/ol>\n<hr style=\"clear: both;\" \/>\n<p><span style=\"color: #363d40; font-size: 26px; font-weight: 600;\">Grid &amp; Masonry Layouts<\/span><\/p>\n<p><strong>Grid<\/strong> portfolio can showcase your portfolio items on specified rows and columns. All of the thumbnails in this layout have equal size. The height and widths of all images are the same and the space between them are set to the specified values.<\/p>\n<div id=\"attachment_50449\" style=\"width: 1168px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1.png\"><img aria-describedby=\"caption-attachment-50449\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-50449 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1.png\" alt=\"\" width=\"1158\" height=\"1652\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1.png 1158w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1-210x300.png 210w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1-768x1096.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1-718x1024.png 718w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-1-121x173.png 121w\" sizes=\"(max-width: 1158px) 100vw, 1158px\" \/><\/a><p id=\"caption-attachment-50449\" class=\"wp-caption-text\">Grid Portfolio<\/p><\/div>\n<p><strong>Masonry<\/strong> is a grid layout, however, the thumbnails in Masonry are full-view and they do not have fixed height and width. One of the example websites using this layout, is Pinterest. If you prefer dynamic dimensions for the thumbnail images of your works, you can set Masonry layout.<\/p>\n<div id=\"attachment_50450\" style=\"width: 1168px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1.png\"><img aria-describedby=\"caption-attachment-50450\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-50450 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1.png\" alt=\"\" width=\"1158\" height=\"1640\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1.png 1158w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1-212x300.png 212w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1-768x1088.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1-723x1024.png 723w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-1-122x173.png 122w\" sizes=\"(max-width: 1158px) 100vw, 1158px\" \/><\/a><p id=\"caption-attachment-50450\" class=\"wp-caption-text\">Masonry Portfolio<\/p><\/div>\n<p>Follow below steps to add?<strong>Portfolio <\/strong>via SiteOrigin page builder?in your posts and pages content:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages\/Posts?<\/b>on the <b>Dashboard Sidebar<\/b><\/li>\n<li>Select?<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?<strong>Add Widget<\/strong><\/li>\n<li>Navigate to?<strong>Phlox?<\/strong>and choose?<strong>[Phlox] Recent Portfolio on Grid, Tile and Masonry<\/strong><\/li>\n<li>Click?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>If you do not want to have featured image on your single page anymore, you can hide it?on <strong>Portfolio Options -&gt; Portfolio Information?<\/strong>under WordPress text editor.?<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out?<a href=\"https:\/\/env.averta.net\/en\/step\/displaying-phlox-recent-portfolios-by-page-builder\/?b=48606,48606\" title=\"Displaying Phlox Recent Portfolios by Page Builder\">this article<\/a> to get to know better Phlox portfolios and SiteOrigin page builder options. <\/p>\n","type":"solution"}