{"title":"Displaying Phlox Recent Portfolios by Page Builder","id":48606,"link":"https:\/\/env.averta.net\/en\/step\/displaying-phlox-recent-portfolios-by-page-builder\/","parent":[48372,37224],"content":"<div class=\"wpb_text_column wpb_content_element vc_custom_1494929715555\">\n<div><strong>Recent Portfolio Element <\/strong>is a good choice to present your portfolios on an archive page. If you are a photographer or a designer, you need to showcase an attractive portfolio on your website.<\/div>\n<div><\/div>\n<div>On Phlox theme, you can add portfolio elements to any page or post you want. In Elementor, Visual Composer, and SiteOrigin page builders, these elements include various options to customize. In this way, you can simply edit the style of your recent portfolios.<\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-48667 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-preview-300x286.png\" alt=\"\" width=\"300\" height=\"286\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-preview-300x286.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-preview-768x733.png 768w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-preview-181x173.png 181w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-preview.png 981w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<div><\/div>\n<\/div>\n<div><p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>To know more about creating portfolios, please take a look at <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-phlox-portfolio\/?b=48221,48221\" title=\"Getting Started with Phlox Portfolio\">this article<\/a>.<\/p><\/div>\n<div>\n<hr \/>\n<\/div>\n<h3>Portfolios on Grid, Tile and Masonry 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; PORTFOLIO?<\/strong>section<\/li>\n<li>Choose?<strong>Grid<\/strong>,?<strong>Masonry<\/strong>, and?<strong>Tiles Portfolios<\/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>Layout<\/h4>\n<div id=\"attachment_56339\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-masonry-portfolios-layout-elementor-2.png\"><img aria-describedby=\"caption-attachment-56339\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-56339 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-masonry-portfolios-layout-elementor-2.png\" alt=\"\" width=\"300\" height=\"490\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-masonry-portfolios-layout-elementor-2.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-masonry-portfolios-layout-elementor-2-184x300.png 184w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-grid-masonry-portfolios-layout-elementor-2-106x173.png 106w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-56339\" class=\"wp-caption-text\">Grid and Masonry Portfolios<\/p><\/div>\n<p>On Masonry and Grid Portfolios, you are able to change the number of <strong>columns<\/strong> (up to 6) on desktop, tablet, and mobile.<\/p>\n<p>There are 9 available patterns on <strong>Tiles Portfolios<\/strong> instead of columns.<\/p>\n<div id=\"attachment_56340\" style=\"width: 310px\" class=\"wp-caption alignright\"><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-portfolios-layout-elementor.png\"><img aria-describedby=\"caption-attachment-56340\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-56340 size-full\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-portfolios-layout-elementor.png\" alt=\"\" width=\"300\" height=\"245\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-portfolios-layout-elementor.png 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-tiles-portfolios-layout-elementor-212x173.png 212w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-56340\" class=\"wp-caption-text\">Tiles Portfolios<\/p><\/div>\n<p>You are able to enable these features:<\/p>\n<ul>\n<li>Display title<\/li>\n<li>Display categories<\/li>\n<li>Display like button (Only on Masonry and Grid)<\/li>\n<li>Deeplink<\/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\/phlox-recent-portfolios-content-elementor.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-56343 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-content-elementor.png\" alt=\"\" width=\"316\" height=\"893\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-content-elementor.png 316w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-content-elementor-106x300.png 106w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-content-elementor-61x173.png 61w\" sizes=\"(max-width: 316px) 100vw, 316px\" \/><\/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<p>&nbsp;<\/p>\n<div style=\"clear: both;\">\n<div style=\"clear: both;\"><\/div>\n<ul>\n<li>\n<h4>Settings<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-settings.png\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-56345 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-settings.png\" alt=\"\" width=\"294\" height=\"1778\" \/><\/a><\/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>You can change the <strong>Transition duration on reveal\/hide?<\/strong>in milliseconds. Also, you are able to change?<strong>Delay between reveal\/hide<\/strong>.<\/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<p>&nbsp;<\/p>\n<div style=\"clear: both;\"><\/div>\n<div><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-56346 alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-style-elementor.png\" alt=\"\" width=\"295\" height=\"904\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-style-elementor.png 295w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-style-elementor-98x300.png 98w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-recent-portfolios-style-elementor-56x173.png 56w\" sizes=\"(max-width: 295px) 100vw, 295px\" \/><\/p>\n<ul>\n<li>\n<h4>Style<\/h4>\n<\/li>\n<\/ul>\n<h4>Image<\/h4>\n<p>You can change <strong>Tiles hover type<\/strong> to: Classic with lightbox style 1 (for Grid and Masonry), Classic with lightbox style 2 (for Grid and Masonry). Overlay title style 1, Overlay title style 2, Overlay title with lightbox style 1,?Overlay title with lightbox style 2<\/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>Categories<\/h4>\n<p>Like previous options, you can?change the <strong>Color<\/strong>,?<strong>Typography<\/strong>,?<strong>Bottom<\/strong> <strong>space<\/strong>, and?<strong>Space between metas?<\/strong>on?<strong>Normal?<\/strong>and?<strong>Hover<\/strong>.<\/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<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong>To know more about each of the elements, you can take a look at these articles: <a href=\"https:\/\/env.averta.net\/en\/step\/adding-masonry-and-grid-portfolio\/?b=50444,50444\" title=\"Adding Masonry and Grid Portfolios\">Masonry and Grid Portfolios<\/a>\n<\/p>\n<\/div>\n<hr \/>\n<h3>Portfolios on Grid, Tile and Masonry Options?in SiteOrigin Page Builder<\/h3>\n<p>To display <strong>Recent Portfolio Items<\/strong>:<\/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] Recent Portfolio on Grid, Tile and Masonry<\/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<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-48224 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-1.jpg\" alt=\"\" width=\"475\" height=\"2165\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-1.jpg 475w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-1-66x300.jpg 66w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/portfolio-1-38x173.jpg 38w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/p>\n<h4>Title<\/h4>\n<p>Adding a title for your text element is optional.<\/p>\n<h4>Categories<\/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 Items to Show<\/h4>\n<p>Specify how many portfolio items do you need to display on this page.<\/p>\n<h4>Exclude Portfolios without Media<\/h4>\n<p>Enable this option, if you do not want to display portfolio items without image.<\/p>\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>Only Portfolios<\/h4>\n<p>To show only specific portfolios on portfolio page, you can insert their ID in this field.<\/p>\n<h4>Include and Exclude Portfolios<\/h4>\n<p>By writing the posts ID in Exclude and Include Portfolios fields, you are able to exclude and include portfolios from unspecified categories.<\/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>Portfolio Layouts<\/h4>\n<p>There are three available layouts for your portfolio page: Grid, Masonry, Tiles<\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-48245 size-thumbnail\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-150x150.png 150w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Grid-Portfolio-60x60.png 60w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-48244 size-thumbnail\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-150x150.png 150w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Masonry-Portfolio-60x60.png 60w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Tiles-Portfolio.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-48246 size-thumbnail\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/Tiles-Portfolio-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/Tiles-Portfolio-150x150.png 150w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/Tiles-Portfolio-60x60.png 60w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p>Click on each layout below, to find their demo:<\/p>\n<p><a href=\"http:\/\/averta.net\/phlox\/wordpress-theme\/demo\/portfolio\/\">Grid Layout<\/a><\/p>\n<p><a href=\"http:\/\/averta.net\/phlox\/wordpress-theme\/demo\/portfolio\/home-tile\/\">Tiles Layout<\/a><\/p>\n<p><a href=\"http:\/\/averta.net\/phlox\/wordpress-theme\/demo\/portfolio\/home-masonry\/\">Masonry Layout<\/a><\/p>\n<p><a href=\"http:\/\/averta.net\/phlox\/wordpress-theme\/demo\/portfolio\/home-grid-full\/\">Grid Layout (Full-page)<\/a><\/p>\n<h4>Image Aspect Ratio<\/h4>\n<p>This option is available only on Grid Layout, and allows you to?change the image aspect ratio to Horizontal, Vertical, and Square.<\/p>\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>Insert Portfolio Title<\/h4>\n<p>You can enable this option to show your portfolio title.<\/p>\n<h4>Insert Portfolio Meta<\/h4>\n<p>Enabling this option will show portfolio meta.<\/p>\n<h4>Show Filters<\/h4>\n<p>After enabling this option, three options will appear:<\/p>\n<ul>\n<li>Filter by: ?You can filter the portfolio either with Categories or Tags.<\/li>\n<\/ul>\n<ul>\n<li>Filter Control Alignment:?This option lets you align the portfolio on Left, Center, Right.<\/li>\n<\/ul>\n<ul>\n<li>Filter Button Style:?Slide up, Fill, Cube, Underline, Float Frame, Bordered, Float Underline<\/li>\n<\/ul>\n<h4>Display Like Button<\/h4>\n<p>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>Deeplink<\/h4>\n<div class=\"aux-element-field aux_switch\">\n<p class=\"option-description\">Enable the deeplink feature to update URL, based on page and filter status.<\/p>\n<p>You can specify the <strong>Deepling Slug<\/strong> on the address bar, after enabling Deeplink option<\/p>\n<\/div>\n<h4>Paginate<\/h4>\n<p>You can add pagination to your portfolio page, and by enabling paginate, you are able to set?<strong>Items Number per-page.<\/strong><\/p>\n<p>To know more about pagination skins, please check out <a href=\"https:\/\/env.averta.net\/en\/step\/customizing-pagination-skin\/?b=36817,36817\" title=\"Customizing Pagination Skin\">this documentation<\/a>\n<h4>Space<\/h4>\n<p>This option adds some space between portfolio items.<\/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"}