{"title":"Adding Carousel Portfolios","id":61631,"link":"https:\/\/env.averta.net\/en\/step\/adding-carousel-portfolios\/","parent":[48372],"content":"<div>Carousel Portfolios are elements to showcase your recent portfolios on an archive page.<\/div>\n<div>These elements include two Grid and Tiles styles, and have various options to edit and simply customize your recent portfolios page.<\/div>\n<h3>Tiles Carousel 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>Tiles Carousel 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><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62215 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-layout.jpg\" alt=\"\" width=\"293\" height=\"903\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-layout.jpg 293w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-layout-97x300.jpg 97w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-layout-56x173.jpg 56w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/>Layout<\/h4>\n<p>There are 9 available post tile styles for tiles carousel portfolios.<\/p>\n<p>You are able to enable these features to add more details to your carousel portfolios:<\/p>\n<ul>\n<li>Display title<\/li>\n<li>Insert portfolio meta<\/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>\n<h4>Carousel<\/h4>\n<p>On carousel portfolio navigations have different styles, types, and options.<\/p>\n<p>You can set either Bullets or Arrows for navigation control and there are three types of navigations: move per column or page, or smooth scroll.<\/p>\n<p>By enabling <strong>Loop navigation<\/strong>, your portfolios get in an infinite loop and keep navigating. To switch automatically between portfolio items, enable?<strong>Autoplay carousel?<\/strong>and specify an?<strong>Autoplay delay?<\/strong>in seconds.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62218 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-content.jpg\" alt=\"\" width=\"295\" height=\"898\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-content.jpg 295w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-content-99x300.jpg 99w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-content-57x173.jpg 57w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/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<p>&nbsp;<\/p>\n<div style=\"clear: both;\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62220 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-style.jpg\" alt=\"\" width=\"295\" height=\"807\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-style.jpg 295w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-style-110x300.jpg 110w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-carousel-portfolios-style-63x173.jpg 63w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Hover<\/h4>\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>?Overlay title style 1<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-61524\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Portfolio-Overlay-Title-1.gif\" alt=\"\" width=\"388\" height=\"256\" \/><\/td>\n<\/tr>\n<tr>\n<td>?Overlay title style 2<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-61525\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Portfolio-Overlay-Title-2.gif\" alt=\"\" width=\"384\" height=\"256\" \/><\/td>\n<\/tr>\n<tr>\n<td>Overlay title with lightbox style 1<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-61526\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Portfolio-Overlay-Title-Lightbox-1.gif\" alt=\"\" width=\"388\" height=\"254\" \/><\/td>\n<\/tr>\n<tr>\n<td>Overlay title with lightbox style 2<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-61527\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Portfolio-Overlay-Title-Lightbox-2.gif\" alt=\"\" width=\"386\" height=\"260\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-style2.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-61522 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-style2.jpg\" alt=\"\" width=\"294\" height=\"606\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-style2.jpg 294w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-style2-146x300.jpg 146w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-style2-84x173.jpg 84w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/a><\/h4>\n<h4>Title<\/h4>\n<p>On this section there are some options to 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<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 style=\"clear: both;\" \/>\n<p><span style=\"color: #363d40; font-size: 26px; font-weight: 600;\">Tiles Carousel Layout<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-62483\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-carousel.png\" alt=\"\" width=\"960\" height=\"453\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-carousel.png 960w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-carousel-300x142.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-carousel-768x362.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-portfolio-tiles-carousel-318x150.png 318w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\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 Tile Carousel<\/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<hr \/>\n<h3>Grid Carousel 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>Grid Carousel 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><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62497 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-layout.jpg\" alt=\"\" width=\"293\" height=\"754\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-layout.jpg 293w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-layout-117x300.jpg 117w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-layout-67x173.jpg 67w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/>Layout<\/h4>\n<p>Enable each one of these features you want, to add more details to your carousel portfolios:<\/p>\n<ul>\n<li>Display title<\/li>\n<li>Display info<\/li>\n<li>Display 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>\n<h4>Carousel<\/h4>\n<p>On carousel portfolio navigations have different styles, types, and options.<\/p>\n<p>You can set either Bullets or Arrows for navigation control. There are three types of navigations: move per column or page, or smooth scroll.<\/p>\n<p>By enabling <strong>Loop navigation<\/strong>, your portfolios get in an infinite loop and keep navigating. To switch automatically between portfolio items, enable?<strong>Autoplay carousel?<\/strong>and specify an?<strong>Autoplay delay?<\/strong>in seconds.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-62499 alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-settings.jpg\" alt=\"\" width=\"294\" height=\"575\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-settings.jpg 294w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-settings-153x300.jpg 153w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolio-settings-88x173.jpg 88w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/p>\n<ul>\n<li>\n<h4>Settings<\/h4>\n<\/li>\n<\/ul>\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<div style=\"clear: both;\"><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62504 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-content.jpg\" alt=\"\" width=\"294\" height=\"858\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-content.jpg 294w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-content-103x300.jpg 103w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-content-59x173.jpg 59w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/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<p>&nbsp;<\/p>\n<div style=\"clear: both;\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62505 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-1.jpg\" alt=\"\" width=\"289\" height=\"830\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-1.jpg 289w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-1-104x300.jpg 104w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-1-60x173.jpg 60w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/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<p>There are four available <strong>Image aspect ratio<\/strong>:<br \/>\nHorizontal 4:3 Horizontal 16:9 Square 1:1 Vertical 3:4<\/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><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-62506 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-2.jpg\" alt=\"\" width=\"297\" height=\"593\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-2.jpg 297w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-2-150x300.jpg 150w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-style-2-87x173.jpg 87w\" sizes=\"(max-width: 297px) 100vw, 297px\" \/><\/h4>\n<h4>Title<\/h4>\n<p>On this section there are some options to change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?and <b>Bottom space<\/b>.<\/p>\n<h4>Info Meta<\/h4>\n<p>Like previous section, 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<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 style=\"clear: both;\" \/>\n<p><span style=\"color: #363d40; font-size: 26px; font-weight: 600;\">Grid Carousel Layout<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-62507 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-layout.png\" alt=\"\" width=\"938\" height=\"277\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-layout.png 938w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-layout-300x89.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-layout-768x227.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/grid-carousel-portfolios-layout-318x94.png 318w\" sizes=\"(max-width: 938px) 100vw, 938px\" \/><\/p>\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 Tile Carousel<\/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<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","type":"solution"}