{"id":275,"date":"2017-02-19T04:21:09","date_gmt":"2017-02-19T04:21:09","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=275"},"modified":"2020-03-31T10:25:41","modified_gmt":"2020-03-31T10:25:41","slug":"portfolio-grid","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/portfolio-grid\/","title":{"rendered":"Portfolio Grid"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-7d812feafbcffb497f645bfe50612cb4\">\n#top .av-special-heading.av-av_heading-7d812feafbcffb497f645bfe50612cb4{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-7d812feafbcffb497f645bfe50612cb4 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-7d812feafbcffb497f645bfe50612cb4 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-7d812feafbcffb497f645bfe50612cb4 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Portfolio Grid<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-b2u2n7-9dee826d44e24d8b967ba3b9a3346b29 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-atbl63-bfbed9fda937fef4c27e2eeffa11fa91 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-apggoj-d9f99d1df06d560ff50508ae58c4da8d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This element allows you to display a\u00a0grid with portfolio items, that can link\u00a0to the full portfolio entry, just a single image or open a ajaxed preview version of the entry. Please see all options at the\u00a0<strong>portfolio main menu<\/strong>\u00a0where we show different ways to\u00a0show your work in a beautiful way.<\/p>\n<p>Example <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/portfolio-grid\/\" target=\"_blank\" rel=\"noopener noreferrer\">portfolio entries<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-11qjmb-486c06490cc4127c2e0fa42fd7ef48b8 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-11ausz-733d75b4d8ce1e79ab4d0318a4dc5626 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Portfolio Grid Settings<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-a7ghir-a9740a8f9e4da3ca942ea26c334b7a54 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><ul>\n<li>Select Portfolio categories<\/li>\n<li>Columns<\/li>\n<li>Post Number<\/li>\n<li>Excerpt<\/li>\n<li>Portfolio Grid Image Size<\/li>\n<li>Link Handling<\/li>\n<li>Sortable?<\/li>\n<li>Pagination<\/li>\n<li>Order by (Bate\/Title\/etc)<\/li>\n<li>Display order (Descending\/Ascending)<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-3lwwr-3537fd2837a53393dac37b68381be15b hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9u8duz-f9d7d4ff05f770375c0345208d6d8a3b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Creating new Portfolio Items<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-ysihn-dd0cd9c109ed3023def71d36bd456288 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>When you install and use Enfold you have access to a new\u00a0<a href=\"http:\/\/codex.wordpress.org\/Post_Types#Custom_Post_Types\" target=\"_blank\" rel=\"noopener noreferrer\">Custom Post Type<\/a>\u00a0for displaying Portfolio items. It isn\u2019t strictly for Portfolio data but that is the general design and how other elements within the theme are set to handle the single portfolio items made with it.<\/p>\n<p>Adding a Portfolio item works just like adding a post or page. Your portfolio categories can be hierarchical with Parent->Child relationships and each portfolio item can also have tags added to it like a post. Once you have some portfolio items created you then output\u00a0<em>portfolios<\/em>\u00a0on your pages using either shortcodes or using the Advanced Layout Builder Portfolio elements.<\/p>\n<\/div><\/section>\n<div  class='avia-video av-9kcp2r-dc363ffe6558038ca1fab95a9c806c69 avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/vimeo.com\/92503992'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"Intro to the Portfolio\" src=\"https:\/\/player.vimeo.com\/video\/92503992?dnt=1&amp;app_id=122963&autoplay=0&loop=0&controls=1&muted=0\" width=\"1280\" height=\"720\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div>\n<section  class='av_textblock_section av-xsdkb-563e26ee59353596785a02fcf94a0cb9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>From the left menu click on Portfolio Items and then Add New to create your own Portfolio item. Now add your title and jump in to adding in your content. You can use the blue Advanced Layout Editor button to turn on the Advanced Layout Builder and create a completely custom layout for each content area of your portfolio items.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6125 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/add-new-portfolio-item-e1520787661347.png\" alt=\"\" width=\"853\" height=\"337\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-6126 alignleft\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/layout-meta-box-e1520787487322.png\" alt=\"\" width=\"285\" height=\"351\" \/><\/p>\n<p>Just like on a page you can choose to have a sidebar, page title and breadcrumbs showing and footer\/socket settings all from the Layout Meta box on the right-hand side of the visual editor.<\/p>\n<p><strong>The Featured Image meta box just below the Layout meta box is where you will set the main single image to represent your portfolio item in the Portfolio grid and other outputs.<\/strong>\u00a0So make sure to set that with an image larger than 700\u00d7700 pixels for the most flexibility.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6127\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Featured.png\" alt=\"\" width=\"287\" height=\"103\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-986rn7-af1432a54ae9586a795fb957d3207e13 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><p><strong>Additional Portfolio Item Settings<\/strong><br \/>\nJust below the visual editor section is the\u00a0<em>Additional\u00a0Portfolio Settings<\/em>\u00a0meta box with some additional single portfolio item options. The first option \u201cOverwrite Portfolio Link Setting\u201d will let you change the default action of a user clicking on that item in a portfolio grid. By default, the item will open in a lightbox: larger size of your featured image zoomed in with a black background over the page content. By selecting \u201cDefine custom link\u201d you can instead make the image link to a custom page URL of your choice.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6129 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Additional-Portfolio-e1520787943292.png\" alt=\"\" width=\"1008\" height=\"191\" \/><\/p>\n<p><strong>Ajax Portfolio Settings<\/strong><br \/>\nWithin the Additional Portfolio Settings, meta box is the options for the Ajax portfolio view of that single portfolio item. See an ajax portfolio demo here:\u00a0<a href=\"http:\/\/www.kriesi.at\/themes\/enfold\/portfolio\/portfolio-ajax\/\">http:\/\/www.kriesi.at\/themes\/enfold\/portfolio\/portfolio-ajax\/<\/a><\/p>\n<p>The Ajax view is more limited in layout than what you can do with the single page view. The image(s) will be displayed on the left and the visual editor content on the right. Add your images using the \u201cAdd Preview Images\u201d button, choose the display style from the \u201cDisplay Preview Images\u201d drop-down and if needed the number of columns for the thumbnails.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6130\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Ajax-portfolio.png\" alt=\"\" width=\"993\" height=\"511\" \/><\/p>\n<p>Then add in the content you want to appear on the right of the image(s) and publish!<\/p>\n<\/div><\/section>\n<div  class='hr av-923e9n-1875cb7911c751400ff04bbd8964f6eb hr-default  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8sbeyz-e6937fa559feaeb36b43f8e22a8d5b54 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-15  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-8i7wjv-3ec673a5aaff30ceaea49dcc4070362e hr-default  avia-builder-el-16  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8b6u7n-63342f7cfd92089b7de1c49bcdbb17e0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Title and Background<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-tko57-87d7db2711ca8c7cc5857654ae6f90e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The title and background by default pick up style from the color scheme and styles set up in the theme options. To add custom style to the portfolio grid element please use the CSS below.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-bja23-605894fe2cd36d89ad8ac60c8e9457fd\">\n.flex_column.av-bja23-605894fe2cd36d89ad8ac60c8e9457fd{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-bja23-605894fe2cd36d89ad8ac60c8e9457fd av_one_full  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><\/div>\n<section  class='av_textblock_section av-7uezsb-49e6c5616c561f93ecc901e11e0d2a47 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Portfolio Grid Title and Background\n\/\/--------------------------------------*\/\n\n\/* Font *\/\n.grid-entry .grid-entry-title {\n  color:#7d3f98;\n  background: transparent;\n  font-weight: 800;\n}\n\/* Title background *\/\n.grid-entry .grid-content,\n\/*  Arrow*\/\n.grid-entry .grid-content .avia-arrow {\n  background: #ffc168;\n}\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-7ph2oz-5a912b7b7f1cde364fdf8ebc712f5f1e hr-default  avia-builder-el-22  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7l7wsz-7e48e159a7c7984e00f25ceb68cf5922 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overlay style<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7e1wzv-13ff82b03e901eec556a84180362d2ab '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Use the below CSS to make the portfolio grid entry overlay and title appear on hover.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-74xks3-b8be6d9e2252faac5774a94f010b0ff7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/* Portfolio overlay with title *\/\n\/* Disable default animation *\/\n\n#top .grid-entry a:hover .image-overlay .image-overlay-inside {\nanimation: none;\n}\n\n\/* Overlay color *\/\n\n#top .grid-entry .image-overlay {\nbackground: rgba(10, 10, 180, .96)!important;\n}\n\n\/* Remove hover icon *\/\n\n#top .grid-entry .image-overlay .image-overlay-inside:before {\ndisplay: none !important;\n}\n\n\/* Remove default title below *\/\n\n.grid-content .avia-arrow,\n#top .grid-entry .grid-content {\ndisplay: none;\n}\n\n\/* Display title on hover*\/\n\n.grid-entry a:hover:before {\ncontent: attr(title);\nposition: absolute;\nwidth: 100%;\nz-index: 1000;\ntext-align: center;\nopacity: 1;\nfont-size: 18px;\ncolor: #ffffff !important;\ntop: 50%;\ntransform: translateY(-50%);\nanimation: avia-fadein 0.75s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275) !important;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-6zje1f-2c93ecb13c73096fcc4a0b69ba4c5f0e hr-default  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6vrdfn-fe1540ee404efcf0b1cae706bb80745b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove Overlay<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-6qte0z-b5a3c09709f286feeeaac00a0d899f06 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the default overlay effect please use the CSS below.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-6iyyl7-71e6cd515c8e3b3518b0fbac06ccb58a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Portfolio Grid overlay\n\/\/--------------------------------------*\/\n\n.grid-entry  .image-overlay { \n  display:none;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-6c4th7-c9620ac9728c9e8df4f0ab69119e7fa5 hr-default  avia-builder-el-30  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-68ynwr-dffd0063bf9a53e1fae8475fbf141ef7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Alignment <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-621irv-47d3d51290227401f712b7f4c5c48efe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the title text is center aligned. To align the title text to the right or left please use the CSS below.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-brup7-17e91cbce520bfdd1f5471937f8374c0\">\n.flex_column.av-brup7-17e91cbce520bfdd1f5471937f8374c0{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-brup7-17e91cbce520bfdd1f5471937f8374c0 av_one_full  avia-builder-el-33  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><\/div>\n<section  class='av_textblock_section av-5qoair-3f3ee7c4dd72b42fd9c54d29956a297c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Portfolio Grid Title Alignment\n\/\/--------------------------------------*\/\n\n\/* Font Alignment *\/\n#top .grid-entry .grid-entry-title {\ntext-align: left;\n  }<\/pre>\n<\/div><\/section>\n<div  class='hr av-5hxpob-77c72a6766b2322431804d48f26d882e hr-default  avia-builder-el-36  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5fimn7-87613f71410564fc8b32405488b1b6cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Border and image shape<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-55l7cz-8c1ee3e461fd9ca62ed8b8409766e4e9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We can add custom CSS style to change the shape of the portfolio image and hide the borders.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7sz6j-2c93a7cc219df4e18212b7075a37ab69\">\n.flex_column.av-7sz6j-2c93a7cc219df4e18212b7075a37ab69{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-7sz6j-2c93a7cc219df4e18212b7075a37ab69 av_one_full  avia-builder-el-39  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><\/div>\n<section  class='av_textblock_section av-4weeer-427caa237fb43e168270e8399700a50b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Portfolio Grid  Border and shape\n\/\/--------------------------------------*\/\n\n\/* Remove Border\n.grid-entry .inner-entry { box-shadow: none; }  *\/\n\n\/* Image shape *\/\n.grid-image img {\n  border-radius: 200px!important;\n  width: 200px;\n  max-width:200px;\n  height: 200px;\n  text-align: center;\n}\n.grid-image img {\n  display:inline-block;\n }<\/pre>\n<\/div><\/section>\n<div  class='hr av-gqs23-dcf65af85d0228c8905503ca7a3b8713 hr-default  avia-builder-el-42  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4huiub-6bb8f3e4b7d40c6b166ea0cf28076709 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change the sort order of Portfolio Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4cdz83-a2d6b307c7de1ed3aacd0dc74b2f5668 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default the portfolio elements that display a group of portfolio items will show them sorted by date created. You can add this function to your functions.php to change the sorting order:<\/p>\n<pre>  function custom_post_grid_query( $query, $params ) {\n    $query['orderby'] = 'title';\n    $query['order'] = 'ASC';\n    return $query;\n  }\n  add_filter( 'avia_post_grid_query', 'custom_post_grid_query', 10, 2);<\/pre>\n<p>You can see all of the Order and Orderby parameters for additional options here:\u00a0<a href=\"http:\/\/codex.wordpress.org\/Class_Reference\/WP_Query#Order_.26_Orderby_Parameters\">http:\/\/codex.wordpress.org\/Class_Reference\/WP_Query#Order_.26_Orderby_Parameters<\/a><\/p>\n<p>For example, to reverse the above it would be:<\/p>\n<pre>  function custom_post_grid_query( $query, $params ) {\n    $query['orderby'] = 'title';\n    $query['order'] = 'DESC';\n    return $query;\n  }\n  add_filter( 'avia_post_grid_query', 'custom_post_grid_query', 10, 2);<\/pre>\n<p>Or to just sort the visible items randomly on page load:<\/p>\n<pre>function custom_post_grid_query($query)\n{\n  $query['orderby'] = 'rand';\n  return $query;\n}\nadd_filter('avia_post_grid_query','custom_post_grid_query');<\/pre>\n<\/div><\/section>\n<div  class='hr av-49sgpn-bf7e9f44cd8083acd1c3ddefefe2c8e2 hr-default  avia-builder-el-45  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-41d79v-3c49dbf8b76876b821efeaeadc7227a2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Prev \/ Next arrows on mobile<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3u63cb-a41c4579b20080f64624fb0b84bb5133 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the Previous \/ Next arrows on the portfolio item page are hidden on the mobile display. To display the post \/portfolio navigation arrows please use the CSS below.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/arrows.png\" alt=\"\" width=\"650\" height=\"489\" class=\"alignnone size-full wp-image-7289\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/arrows.png 650w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/arrows-300x226.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/arrows-450x339.png 450w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-3ok7lf-96fc5a9ac7c9cf95b38a206f60391087 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS - Display Previous \/ Next arrows in mobile view\n\/\/--------------------------------------*\/\n\n@media only screen and (max-width: 767px) {\n.responsive #top.documentation .avia-post-nav {\ndisplay: block !important;\n}}<\/pre>\n<\/div><\/section>\n<div  class='hr av-3m4ki3-ecdc982d4981d6870028a6a03b077a99 hr-default  avia-builder-el-49  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3cvhrf-bbe2f0995314c3ac359212bc93618a78 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Load a default portfolio category <\/h3>\n<\/div><\/section>\n<p><section  class='av_textblock_section av-36kshv-2f0471df5f50ffba4795d96ba5a76434 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To open a default portfolio category add the code to your functions.php file.\u00a0 By default the code activates the first category of the portfolio filter if you like to change it increase the eq(x) value in line jQuery(\u2018.inner_sort_button:eq(1)\u2019).click();<\/p>\n<p><br \/>\n\/\/&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br \/>\n\/\/ php &#8211;  Open portfolio category<br \/>\n\/\/&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<\/p>\n<p>function select_portfolio_filter(){<br \/>\n?><br \/>\n<script>\njQuery( window ).load(function() {\n  jQuery('.inner_sort_button:eq(1)').click();\n});\n<\/script><br \/>\n<?php\n}\nadd_action('wp_head', 'select_portfolio_filter');\n&#091;\/av_codeblock&#093;\n&#091;\/av_textblock&#093;\n\n&#091;av_hr class='default' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' av_uid='av-b2a6b'&#093;\n\n&#091;av_textblock size='' font_color='' color='' custom_class='' admin_preview_bg='' av_uid='av-2yp0g3'&#093;\n\n\n\n\n<h3>Portfolio filter hide the word &#8220;ALL&#8221;<\/h3>\n<\/div><\/section><\/p>\n<section  class='av_textblock_section av-2p0pv7-16da32daa7c10d06bdc98ea4be500f82 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Hide the word All in the portfolio filter sort options.<\/p>\n<pre>\n\/*----------------------------------------\n\/\/ CSS - Hide the word All \n\/\/--------------------------------------*\/\n.all_sort_button,\n.all_sort_button + .text-sep {\n    display: none !important;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-95swb-fde37a392632bcf3d7ee704919476273 hr-default  avia-builder-el-53  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2folk3-4b7084a0a52447525d44f21b5eb8b456 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Replace the word &#8220;ALL&#8221; in portfolio filter<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-28qd2j-379db2aea802b33b26d582dff5d6c803 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Add your replacement text in the below code and copy the code to functions.php<\/p>\n<\/div><\/section>\n\n<div  class='hr av-1w4j3v-884338db61a9d2cc7b80f8bd76a31ff6 hr-default  avia-builder-el-56  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6agzn-0e18338f0622cf796779487953999358 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Hide portfolio filter separator<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1jwb43-62f11914961ae7fc7bdd5206b85bf959 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To hide the sort filter separator please use the CSS below.<\/p>\n<pre>\/*----------------------------------------\n\/\/ CSS - Hide sort separator\n\/\/--------------------------------------*\/\n\n.sort_width_container .text-sep {\n    display: none !important;\n}\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-1h2ne3-6bef4cef67c81e8a35686d0b734bfa53 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-189ger-620b21ba99a39fe09dbae80357d88d4c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Enable deeplinking to the Portfolio AJAX<\/h3>\n<\/div><\/section>\n<p><section  class='av_textblock_section av-13le97-9d101e957ac538a897067c011bf6bde2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold Version 3.0.4+<\/p>\n<p>This snippet will allow you to create links to your portfolio ajax items and have one of them open up when the page is loaded.<\/p>\n<p>1. <strong>Add to the functions.php file.<\/strong><\/p>\n<p>First off open up the functions.php file and add this to the very bottom.<\/p>\n<p><br \/>\nadd_action( &#8216;wp_footer&#8217;, &#8216;enfold_customization_portfolio_linking&#8217;, 999 );<br \/>\nfunction enfold_customization_portfolio_linking() {<br \/>\n?><br \/>\n<script type = \"text\/javascript\">\njQuery(document).ready(function(){\nvar p = getUrlParameter('custom_ajax');\n\/\/jQuery('.grid-links-ajax').avia_portfolio_preview();\njQuery('.post-entry-'+p+' .grid-image').click();\n});\nfunction getUrlParameter(sParam)\n{\n    var sPageURL = window.location.search.substring(1);\n    var sURLVariables = sPageURL.split('&');\n    for (var i = 0; i < sURLVariables.length; i++) \n    {\n        var sParameterName = sURLVariables&#091;i&#093;.split('=');\n        if (sParameterName&#091;0&#093; == sParam) \n        {\n            return sParameterName&#091;1&#093;;\n        }\n    }\n}      \n<\/script><br \/>\n<?php\n}\n&#091;\/av_codeblock&#093;\n&#091;\/av_textblock&#093;\n\n&#091;av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' custom_class='' admin_preview_bg='' av_uid='av-xdv6r'&#093;\n2. Create your links\nNext you would create the links to your portfolio page.\n\n\n\n\n<pre><code>\nhttp:\/\/www.yoursite.com\/your_portfolio_page?custom_ajax=12\nhttp:\/\/www.yoursite.com\/your_portfolio_page?custom_ajax=13\n<\/code><\/pre>\n<p>And then change 12 and 13 to the ID\u2019s of some of your portfolio posts.<\/p>\n<\/div><\/section><\/p>\n<div  class='hr av-pplyz-4f79f9e6106541e2456953f3d60c61ab hr-default  avia-builder-el-60  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-189ger-01a88b83913900f066a0530477b6b1ed '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Open external links when a portfolio image is clicked<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-189ger-01a88b83913900f066a0530477b6b1ed '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To link the portfolio image to an external page or site, open the portfolio item and scroll down to the bottom and look for \"<strong>Portfolio Additional Settings<\/strong>\" here you can select \"<strong>Define custom link<\/strong>\" under the\u00a0<strong>Overwrite Portfolio Link setting <\/strong>option<strong>.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12492\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link.png\" alt=\"\" width=\"849\" height=\"220\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link.png 849w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link-300x78.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link-768x199.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link-845x220.png 845w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link-705x183.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/portfolio-link-600x155.png 600w\" sizes=\"auto, (max-width: 849px) 100vw, 849px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-pplyz-4f79f9e6106541e2456953f3d60c61ab hr-default  avia-builder-el-63  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-lqhyr-80e4f80b58342e4a5085f3161c9d379a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-d06dn-37dc62716b6b8df63d453f3016f8d6ba hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-10wwz-d28875d39f16d778446ac03b7f4229b1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=8YzW5bl75ko\">Portfolio Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-275","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":3,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":12865,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/275\/revisions\/12865"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}