{"id":291,"date":"2017-02-19T04:19:56","date_gmt":"2017-02-19T04:19:56","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=291"},"modified":"2018-05-12T05:27:23","modified_gmt":"2018-05-12T05:27:23","slug":"masonry","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/masonry\/","title":{"rendered":"Masonry"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-d6ef02d6191ec93921230f53a42062df\">\n#top .av-special-heading.av-av_heading-d6ef02d6191ec93921230f53a42062df{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-d6ef02d6191ec93921230f53a42062df .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-d6ef02d6191ec93921230f53a42062df .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-d6ef02d6191ec93921230f53a42062df 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\"  >Masonry<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-caul3f-581645f402b69c51b2b16ef0618ff2bb 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-c3p6w3-8ad000d86d6d5a9b3b56624a610ccaac '   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-bxnksb-33bda3ceb73095c8a115299226a0b64c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Masonry element is used to display blog posts, portfolio items and tags in different grid styles. The items displayed are sortable based on the categories or tags.<\/p>\n<p>Example of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/masonry\/?shortcut=true?\" target=\"_blank\" rel=\"noopener\">Masonry element<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-bv5g6r-e1c2c783a1a811916454972cde2a022a 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-bmnf7n-b09c14ea47ed5e10445dfbb1dc8d5616 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Masonry Settings<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-bgbbsj-850d7a26a78ebe30b3f117098908e2d5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Some of the masonry options that can be played with to change the look and feel of the\u00a0element are:<\/p>\n<ul>\n<li>Entry type (Post, Portfolio or tags)<\/li>\n<li>Sortable options<\/li>\n<li>Columns<\/li>\n<li>Pagination<\/li>\n<li>Display order<\/li>\n<li>Size Settings<\/li>\n<li>Image overlay effect<\/li>\n<li>Caption<\/li>\n<li>Color<\/li>\n<li>Background Color<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-babwe3-a60e47a5a22fb1763a6a7f7a06709f97 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-b6a8kb-ccd617c8a6bb5c395156dc7cb8bfd3c1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-9  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-awwfar-f8c8cfaaf9ef1e6f1614da328bb2c83d hr-default  avia-builder-el-10  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-ap4qmj-21ebe06f043fd04989fc6bc37932b1d4 '   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-agy9jn-63a3de9ac8ee0ff7dde0b61c0d22086e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The title and the background color are inherited by the options set up in the theme options. To add custom style please use the CSS below.<\/p>\n<p>NOTE: The &#8220;<strong>Image overlay effect&#8221; <\/strong>should be active in the masonry settings for the code below to work.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-hu71v-31914e264f2b6e5f12519024d9b057ac\">\n.flex_column.av-hu71v-31914e264f2b6e5f12519024d9b057ac{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-hu71v-31914e264f2b6e5f12519024d9b057ac av_one_full  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-1' class='av-masonry av-1193jn-1ef0faa13d24269d979d8bcabc1f85a5 noHover av-fixed-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-always av-caption-style- av-masonry-entries masonry-title-bg' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/entry-with-audio\/\"  id='av-masonry-1-item-51' data-av-masonry-item='51' class='av-masonry-entry isotope-item post-51 post type-post status-publish format-audio has-post-thumbnail hentry category-news tag-food tag-fun post_format-post-format-audio documentation content-elements  av-masonry-item-with-image' title=\"Entry with Audio\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-2-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><span class='av-icon-display av-masonry-media avia-svg-icon avia-font-svg_entypo-fontello' data-av_svg_icon='note-beamed' data-av_iconset='svg_entypo-fontello'><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"32\" viewBox=\"0 0 24 32\" preserveAspectRatio=\"xMidYMid meet\" role=\"graphics-symbol\" aria-hidden=\"true\">\n<path d=\"M6.592 4.352l17.088-3.712v22.528q0.064 1.344-0.96 2.592t-2.752 1.888q-2.048 0.768-3.52 0.256t-1.984-2.048q-0.576-1.536 0.224-3.104t2.72-2.336q1.664-0.64 3.392-0.32v-12.032l-11.328 2.624v15.68q0 1.344-1.024 2.592t-2.752 1.888q-2.048 0.704-3.488 0.224t-1.952-2.016q-0.576-1.536 0.192-3.104t2.688-2.336q1.728-0.64 3.456-0.32v-18.944z\"><\/path>\n<\/svg><\/span><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >Entry with Audio<\/h3><span class='av-masonry-date meta-color updated'>May 11, 2015<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-small-gallery\/\"  id='av-masonry-1-item-40' data-av-masonry-item='40' class='av-masonry-entry isotope-item post-40 post type-post status-publish format-gallery has-post-thumbnail hentry category-personal tag-food tag-fun post_format-post-format-gallery documentation content-elements  av-masonry-item-with-image' title=\"A small gallery\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A small gallery<\/h3><span class='av-masonry-date meta-color updated'>January 24, 2015<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-10h4ln-0f6889a75b75e10f6800e1d38c6bd20c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry overlay animation 1\r\n\/\/--------------------------------------*\/\r\n\/* Title *\/\r\n#top #main .av-masonry-entry .av-masonry-entry-title.entry-title  {\t\t\r\n\tcolor: #242424; \/* Apply the !important rule if the titles color do not change*\/\r\n\tfont-weight:800;\r\n}\r\n\/* Title Background *\/\r\n#top .av-masonry-entry.isotope-item figcaption,\r\n#top .av-masonry-entry.isotope-item .avia-arrow {\r\n\/*\tbackground: #dbebfa; *\/\r\n\tbackground: #6a67ce;\r\n}\r\n\/* Masonry Content *\/\r\n#top .av-masonry-entry.isotope-item .entry-content {\r\n\tcolor: #FFF;\r\n\tfont-size:13px;\r\n}\r\n\/* Hide date *\/\r\n#top span.av-masonry-date { display: none; }\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-a1p843-772be00b4b9b1e0dc5dbebf0b6bc2b56 hr-default  avia-builder-el-16  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-9sq5pn-ca0b97c595182a3ee00008d4c8d2a1ef '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overlay Styles<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-9r37sr-38b5d4da54a491fca5d4345844198d12 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The masonry overlay can be styled in a few different ways, let&#8217;s go over a few examples.<br \/>\nNOTE: Masonry caption should be on for this code to work.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-9l0gsr-a377088329cdc6adab98eaef2f7f3f64 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Masonry overlay animation 1<\/strong><\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-9jgf7-9b82a30c4f7f579af3e02f9e882695ad\">\n.flex_column.av-9jgf7-9b82a30c4f7f579af3e02f9e882695ad{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-9jgf7-9b82a30c4f7f579af3e02f9e882695ad av_one_full  avia-builder-el-20  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-2' class='av-masonry av-9b6g77-5ee3ce7d3a20d03c779e95206c49753c noHover av-fixed-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-always av-caption-style- av-masonry-entries masonry-overlay-animation-1' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/entry-with-audio\/\"  id='av-masonry-2-item-51' data-av-masonry-item='51' class='av-masonry-entry isotope-item post-51 post type-post status-publish format-audio has-post-thumbnail hentry category-news tag-food tag-fun post_format-post-format-audio documentation content-elements  av-masonry-item-with-image' title=\"Entry with Audio\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-2-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><span class='av-icon-display av-masonry-media avia-svg-icon avia-font-svg_entypo-fontello' data-av_svg_icon='note-beamed' data-av_iconset='svg_entypo-fontello'><svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"32\" viewBox=\"0 0 24 32\" preserveAspectRatio=\"xMidYMid meet\" role=\"graphics-symbol\" aria-hidden=\"true\">\n<path d=\"M6.592 4.352l17.088-3.712v22.528q0.064 1.344-0.96 2.592t-2.752 1.888q-2.048 0.768-3.52 0.256t-1.984-2.048q-0.576-1.536 0.224-3.104t2.72-2.336q1.664-0.64 3.392-0.32v-12.032l-11.328 2.624v15.68q0 1.344-1.024 2.592t-2.752 1.888q-2.048 0.704-3.488 0.224t-1.952-2.016q-0.576-1.536 0.192-3.104t2.688-2.336q1.728-0.64 3.456-0.32v-18.944z\"><\/path>\n<\/svg><\/span><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >Entry with Audio<\/h3><span class='av-masonry-date meta-color updated'>May 11, 2015<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-small-gallery\/\"  id='av-masonry-2-item-40' data-av-masonry-item='40' class='av-masonry-entry isotope-item post-40 post type-post status-publish format-gallery has-post-thumbnail hentry category-personal tag-food tag-fun post_format-post-format-gallery documentation content-elements  av-masonry-item-with-image' title=\"A small gallery\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A small gallery<\/h3><span class='av-masonry-date meta-color updated'>January 24, 2015<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-949mmz-398303f73b4476d22adad1209c992fa1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry overlay animation 1\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Title and caption area *\/\r\n#top .av-inner-masonry-content {\r\n\tbackground:rgba(15, 0, 56, 0.59)!important;\r\n\theight:100%\r\n\t} \r\n\/* Title text *\/\r\n#top .av-masonry .entry-title {\r\n    background: gold;\r\n\tdisplay:inline-block;\r\n    padding: 0 5px;\r\n\tposition: absolute!important;\r\n    top: -100%;\r\n\ttransition:all .35s cubic-bezier(0.63, 0.7, 0.55, 1.03);\r\n\tfont-size:22px;\r\n\tletter-spacing: .05em;\r\n\ttext-transform:uppercase;\r\n}\r\n\/* Title text on hover*\/\r\n#top .av-inner-masonry-content:hover .entry-title{\r\n\ttransition:all .5s ease;\r\n\ttop: 20px!important;\r\n}\r\n\/* Disable the overlay on hover*\/\r\n#top .av-inner-masonry-content:hover{\tbackground:transparent!important; }\r\n\/* Hide caption arrow *\/\r\n#top .avia-arrow {\tbackground: transparent; }\r\n\/* Hide date *\/\r\n#top span.av-masonry-date { display: none; }<\/pre>\n<\/div><\/section>\n<div  class='hr av-8yctdf-b1bb28bb360d85ffb00056d1eb682019 hr-default  avia-builder-el-23  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-8wdlbv-bf4f7ee986d9da6b7ae1a2017f92ab4e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Masonry overlay animation 2<\/strong><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-v5shf-ac4b4409a6aacfbbddb1f2720aa15394 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The masonry titles and excerpts can be styled to slide up using the following CSS code:<\/p>\n<p>NOTE: The below options in the settings should be selected for the code to function as seen in the example.<\/p>\n<p>Image overlay effect &gt; Overlay Active<br \/>\nElement Captions &gt; Element Title and Excerpt &gt; Display Title and Excerpts<br \/>\nElement Captions &gt; Element Title and Excerpt Styling &gt; Default display (At the bottom of the element&#8217;s image)<br \/>\nElement Captions &gt; Element Title and Excerpt display settings &gt; Display on mouse hover<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-aynsb-98168dfaa0752279a7a4457e0d90400d\">\n.flex_column.av-aynsb-98168dfaa0752279a7a4457e0d90400d{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-aynsb-98168dfaa0752279a7a4457e0d90400d av_one_full  avia-builder-el-26  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-3' class='av-masonry av-8hvr2b-9c8c92d493dfced5e793fb73a1373cb3 noHover av-fixed-size av-large-gap av-hover-overlay- av-masonry-animation-active av-masonry-col-2 av-caption-always av-caption-style- av-masonry-entries masonry-overlay-animation-2' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-entry\/\"  id='av-masonry-3-item-68' data-av-masonry-item='68' class='av-masonry-entry isotope-item post-68 post type-post status-publish format-standard has-post-thumbnail hentry category-personal tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice entry\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/business-office-work-705x470.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice entry<\/h3><div class='av-masonry-entry-content entry-content'  itemprop=\"text\" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\u2026<\/div><span class='av-masonry-date meta-color updated'>August 24, 2014<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-post\/\"  id='av-masonry-3-item-55' data-av-masonry-item='55' class='av-masonry-entry isotope-item post-55 post type-post status-publish format-standard has-post-thumbnail hentry category-news tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice post\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice post<\/h3><div class='av-masonry-entry-content entry-content'  itemprop=\"text\" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\u2026<\/div><span class='av-masonry-date meta-color updated'>May 24, 2012<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-8ec0ar-727ab3c787a101d284b1b94fff6c7175 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry overlay animation 2\r\n\/\/--------------------------------------*\/\r\n\/* Remove rotate animation *\/\r\n#top .av-inner-masonry-content {\r\n    -webkit-transform: rotateX(0deg);\r\n    transform: rotateX(0deg);\r\n}\r\n\r\n\/* Masonry Overlay*\/\r\n#top .av-inner-masonry:before {\r\n  content:'';\r\n  position:absolute;\r\n  background: rgba(0,0,0,.0)!important;\r\n  top:0;\r\n  right:0;\r\n  bottom:0;\r\n  left:0;\r\n  z-index:2;\r\n}\r\n#top .av-inner-masonry:hover:before {\r\n  background: rgba(0,0,0,0.69)!important;\r\n  transition:all .5s cubic-bezier(0.63, 0.7, 0.55, 1.03);\r\n}\r\n\r\n\r\n\/* Masonrt Title and Content position *\/\r\n#top .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { \r\n    bottom: calc(-100% + 151px)!important;\r\n}\r\n#top .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry:hover .av-inner-masonry-content { bottom: 0%!important; }<\/pre>\n<\/div><\/section>\n<div  class='hr av-86kk43-64d71b5a0634d9417bcdd48b723e32f2 hr-default  avia-builder-el-29  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-stk2r-1a1d1a9d47c86132e0be83972b918480 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Align Title and Excerpt<\/h3>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-bbfnv-5642044a0a06086f47aa561a74a667ca\">\n.flex_column.av-bbfnv-5642044a0a06086f47aa561a74a667ca{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-bbfnv-5642044a0a06086f47aa561a74a667ca av_one_full  avia-builder-el-31  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-4' class='av-masonry av-7tbu2r-fdb0d294ae2d6bd01b74fa9f426b9442 noHover av-fixed-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-always av-caption-style- av-masonry-entries masonry-title-align' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-entry\/\"  id='av-masonry-4-item-68' data-av-masonry-item='68' class='av-masonry-entry isotope-item post-68 post type-post status-publish format-standard has-post-thumbnail hentry category-personal tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice entry\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/business-office-work-705x470.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice entry<\/h3><div class='av-masonry-entry-content entry-content'  itemprop=\"text\" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\u2026<\/div><span class='av-masonry-date meta-color updated'>August 24, 2014<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-post\/\"  id='av-masonry-4-item-55' data-av-masonry-item='55' class='av-masonry-entry isotope-item post-55 post type-post status-publish format-standard has-post-thumbnail hentry category-news tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice post\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice post<\/h3><div class='av-masonry-entry-content entry-content'  itemprop=\"text\" >Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\u2026<\/div><span class='av-masonry-date meta-color updated'>May 24, 2012<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-7q7pt7-37e562377b45a4466637d250f7279397 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry title Alignment\r\n\/\/--------------------------------------*\/\r\n\/* Title *\/\r\n#top .av-masonry-entry-title {\t\t\r\n\tcolor: #FFF;\r\n\tfont-weight:800;\r\n\ttext-align: right;\r\n}\r\n\/* Title Background *\/\r\n#top .av-masonry-entry.isotope-item figcaption,\r\n#top .av-masonry-entry.isotope-item .avia-arrow {\r\n\tbackground: #008374;\r\n}\r\n\/* Masonry Content *\/\r\n#top .av-masonry-entry.isotope-item .entry-content {\r\n\tcolor: #FFF;\r\n\tfont-size:13px;\r\n\ttext-align: right;\r\n}\r\n\/* Hide date *\/\r\n#top span.av-masonry-date { display: none; }<\/pre>\n<\/div><\/section>\n<div  class='hr av-7jy7r7-fabc02da001eba1bf5defdbdd518a703 hr-default  avia-builder-el-34  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-7fcg5v-36905285abf6acedd05b800a8563aec8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Sort filter<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-79opab-cd644d7ff09255a03eca8d13ebfb77b1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Let&#8217;s take a look at styling the sort filter:<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-uz6z-6b8c2624813116f5b80080dec1c538b3\">\n.flex_column.av-uz6z-6b8c2624813116f5b80080dec1c538b3{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-uz6z-6b8c2624813116f5b80080dec1c538b3 av_one_full  avia-builder-el-37  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-5' class='av-masonry av-72zsg3-4bd98ae971edb1b7cc952649755852af noHover av-fixed-size av-large-gap av-hover-overlay- av-masonry-animation-active av-masonry-col-2 av-caption-on-hover-hide av-caption-style-overlay av-masonry-entries masonry-sort-filter-style' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image all_sort'><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/progress-bar\/\"  id='av-masonry-5-item-323' data-av-masonry-item='323' class='av-masonry-entry isotope-item post-323 post type-post status-publish format-standard hentry category-documentation category-content-elements tag-content-elements documentation content-elements all_sort av-masonry-item-no-image' title=\"Progress Bar\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >Progress Bar<\/h3><span class='av-masonry-date meta-color updated'>February 19, 2017<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/promo-box\/\"  id='av-masonry-5-item-322' data-av-masonry-item='322' class='av-masonry-entry isotope-item post-322 post type-post status-publish format-standard hentry category-documentation category-content-elements tag-content-elements documentation content-elements all_sort av-masonry-item-no-image' title=\"Promo Box\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >Promo Box<\/h3><span class='av-masonry-date meta-color updated'>February 19, 2017<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div><section  class='av_textblock_section av-6vglbv-f46f8c91bf1696d2bd2014663145247e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry Sotr filter\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Active sort filter *\/\r\n#top .av-masonry .active_sort {\r\n    background: #000;\r\n    color: #FFF;\r\n    padding: 0 10px;\r\n}\r\n\/* Sort filter  *\/\r\n#top .av-masonry .av-sort-by-term {\r\n    width: 100%;\r\n    display: table;\r\n    table-layout: fixed;\r\n}\r\n#top .av-masonry .av-sort-by-term a {\r\n    display: table-cell;\r\n    padding: 20px 5px;\r\n}\r\n\/* Hide Separator *\/\r\n#top .av-masonry span.text-sep {\r\n    display: none;\r\n}<\/pre>\n<\/div><\/section><\/p>\n<div  class='hr av-6qqu7v-44916ea3d33cbbc5197ca4236a5bd6f7 hr-default  avia-builder-el-40  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-6jkgir-847d736a888d5dc5e44d997569fdabea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Pagination<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-6g52e3-7e187ccc3be76b161d92af839719dfe2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Add custom style to masonry pagination:<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-wvv7-7373573e59da00a9ece3d12c91284faf\">\n.flex_column.av-wvv7-7373573e59da00a9ece3d12c91284faf{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-wvv7-7373573e59da00a9ece3d12c91284faf av_one_full  avia-builder-el-43  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-6' class='av-masonry av-68wvvn-34a9823cb781c982cb57050c270a12c5 noHover av-fixed-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-on-hover-hide av-caption-style-overlay av-masonry-entries masonry-pagination' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-entry\/\"  id='av-masonry-6-item-68' data-av-masonry-item='68' class='av-masonry-entry isotope-item post-68 post type-post status-publish format-standard has-post-thumbnail hentry category-personal tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice entry\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/business-office-work-705x470.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice entry<\/h3><span class='av-masonry-date meta-color updated'>August 24, 2014<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-post\/\"  id='av-masonry-6-item-55' data-av-masonry-item='55' class='av-masonry-entry isotope-item post-55 post type-post status-publish format-standard has-post-thumbnail hentry category-news tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice post\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice post<\/h3><span class='av-masonry-date meta-color updated'>May 24, 2012<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><div class='av-masonry-pagination av-masonry-pagination-pagination'><nav class='pagination'><span class='pagination-meta'>Page 1 of 76<\/span><span class='current'>1<\/span><a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/?avia-element-paging=2' class='inactive next_page' >2<\/a><a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/?avia-element-paging=3' class='inactive' >3<\/a><a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/?avia-element-paging=2'>&rsaquo;<\/a><a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/?avia-element-paging=76'>&raquo;<\/a><\/nav>\n<\/div><\/div><\/div>\n<section  class='av_textblock_section av-61j9dn-e6dbf95a098cb7c1c5cc30d4de572230 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Pagination style is inherited by the color scheme selected in the theme options. To add custom style to pagination:<\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry Pagination\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Pagination meta *\/\r\n#top .av-masonry .pagination .pagination-meta { \r\n\tbackground: #dbebfa;\r\n\tborder-radius: 2px;\r\n\tcolor: #1793d1;\r\n}\r\n\/* Active Link *\/\r\n#top .av-masonry .pagination .inactive {\r\n\tbackground: #333333;\r\n\tcolor: #FFF;\r\n}\r\n\/* Inactive Link *\/\r\n#top .av-masonry .pagination .current { \r\n\tbackground: #1793d1;\r\n\tcolor: #222;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-5tvpmj-7c704fe2b4d9b56c8fd4472cda6bd3fb hr-default  avia-builder-el-46  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-5pzq9v-f1a2d5f8ce32fa8beca1dfff7b2b8c5e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Hide Date<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5hzq7v-1cd8c61cc27cbc0f6398ffaa8c8375fb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To hide the date on the masonry element:<\/p>\n<pre>\/* Hide date *\/\r\n#top span.av-masonry-date { \r\ndisplay: none; \r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-5c4bvn-fefbfc151347c91c4200014ea90443ab 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-57wpjn-85fc6294544026a833a22640e473cb3d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Disable Masonry loading Animation<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-545kkr-6784bdc10657199ebd7faf67f28f9a5f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To disable the masonry loading or the fly-in animation, please use the CSS code:<\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Disable Masonry Animation\r\n\/\/--------------------------------------*\/\r\n.av-masonry-entry {\r\n    visibility: visible;\r\n    opacity: 1;\r\n}\r\n.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {\r\n    -webkit-animation: none;\r\n    animation: none;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-4y6gqz-e6fd1438249638bac483180ef4f6f980 hr-default  avia-builder-el-52  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-4o250b-715748141f2462c4e3a509a22c61ad57 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Replace the word ALL in masonry filter<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4irg1f-aef5866a1896ea1bed8633872a839d17 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To replace the word &#8220;ALL&#8221; in masonry filter update the &#8220;ALL TEXT&#8221; in the below code and add it to functions.php<\/p>\n<\/div><\/section>\n\n<div  class='hr av-49bdr7-b450cc4a83f5740c27b9c5e71a8eea62 hr-default  avia-builder-el-56  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-ep4u3-d12c73816634709c1d286b699b7cd753 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change the sort order of Masonry Elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3ynnpn-5c135477b85dd59bf56637691253ae1b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The default order of the masonry items is by creation date. What if you want to change it? It\u2019s easy. Use this filter on functions.php:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-3ipr7v-c9b826567715b4b9483b1287273eff5d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>You can see all of the Order and Orderby parameters for additional options here: http:\/\/codex.wordpress.org\/Class_Reference\/WP_Query#Order_.26_Orderby_Parameters<\/p>\n<p>For example, to reverse the above it would be:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-bf3lv-4c9b99f5f9bd5727e37f3c62d246f0a6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Or to just sort the visible items randomly on page load:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-aewd7-39c1ec5e8eec99f0ad312751de99d825 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Aside from adding these filters, you can also activate the order\/orderby option on the masonry element options panel:<br \/>\nhttps:\/\/www.kriesi.at\/documentation\/enfold\/how-to-add-an-orderorderby-option-to-the-blogpost-sliderportfoliomasonry-grid-element\/<\/p>\n<\/div><\/section>\n<div  class='hr av-2t7837-a4c551cb4d4ea48b7925cc375d39ee7c hr-default  avia-builder-el-65  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-2hx0mr-ff67b7551ae9b071e4c0d5f005197b82 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add custom link or lightbox to masonry element<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2fiolv-986197870a3e7bbe4eb05c5ad89125cd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A portfolio item can be linked to an external web page or any other page within your domain. The page content of the link to open can be an image,\u00a0slider or any external link.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-97boz-e8e87874b7fbd9c30a444f4f92ceac71\">\n.flex_column.av-97boz-e8e87874b7fbd9c30a444f4f92ceac71{\nborder-radius:0px 0px 0px 0px;\npadding:0px 0px 0px 0px;\n}\n<\/style>\n<div  class='flex_column av-97boz-e8e87874b7fbd9c30a444f4f92ceac71 av_one_full  avia-builder-el-68  el_after_av_textblock  el_before_av_textblock  first flex_column_div av-zero-column-padding  column-top-margin'     ><div id='av-masonry-7' class='av-masonry av-27smkr-f544ad2f3f6a7afde24af7975b868682 noHover av-fixed-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-2 av-caption-on-hover-hide av-caption-style-overlay av-masonry-entries ' data-post_id=\"291\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/a-nice-post\/\"  id='av-masonry-7-item-55' data-av-masonry-item='55' class='av-masonry-entry isotope-item post-55 post type-post status-publish format-standard has-post-thumbnail hentry category-news tag-food tag-fun documentation content-elements  av-masonry-item-with-image' title=\"A nice post\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-large-1-705x353.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >A nice post<\/h3><span class='av-masonry-date meta-color updated'>May 24, 2012<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><a href=\"http:\/\/www.kriesi.at\"  id='av-masonry-7-item-36' data-av-masonry-item='36' class='av-masonry-entry isotope-item post-36 post type-post status-publish format-link has-post-thumbnail hentry category-news category-personal tag-food tag-fun post_format-post-format-link documentation content-elements  av-masonry-item-with-image' title=\"This is a post with post type &#8220;Link&#8221;\"   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container' style=\"background-image: url(https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2015\/07\/portfolio-2-705x502.jpg);\" ><\/div><\/div><figcaption class='av-inner-masonry-content site-background'><div class='av-inner-masonry-content-pos'><div class='av-inner-masonry-content-pos-content'><div class='avia-arrow'><\/div><h3 class='av-masonry-entry-title entry-title '  itemprop=\"headline\" >This is a post with post type &#8220;Link&#8221;<\/h3><span class='av-masonry-date meta-color updated'>August 24, 2012<\/span><span class=\"av-masonry-text-sep text-sep-author\">\/<\/span><span class='av-masonry-author meta-color author'><span class='fn'>by vinay<\/span><\/span><\/div><\/div><\/figcaption><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-20zd3n-81132430053eb034fef955c5d7bb9405 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To open a link in a lightbox when a portfolio item is clicked, set up your portfolio items as usual and add the\u00a0lightbox link in the portfolio item page under <em>Additional Portfolio Settings<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7277\" src=\"https:\/\/kriesi.at\/documentation\/enfold-assistance\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox.png\" alt=\"\" width=\"1309\" height=\"253\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox.png 1309w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox-300x58.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox-768x148.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox-1030x199.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox-705x136.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Lightbox-450x87.png 450w\" sizes=\"auto, (max-width: 1309px) 100vw, 1309px\" \/><\/p>\n<p><strong>Note:<\/strong>\u00a0The link we added to\u00a0<em>Additional Portfolio Settings\u00a0has\u00a0<\/em><strong>?iframe=true<\/strong>\u00a0to the end. This will trigger the iframe.<\/p>\n<p>Example: If your link is http:\/\/kriesi.at to open it in a lightbox it should be <strong>http:\/\/kriesi.at?iframe=true<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-1ydoez-970ed989e23f2f5c21f05652cb86e130 hr-default  avia-builder-el-71  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-1p19az-27c145a61fcb5ce24d3eb41e109a7224 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-73  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-1ed6wz-4b18ab1e08e90313b237cba1130e6a19 hr-default  avia-builder-el-74  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-1b3udn-235cc43600d727db0a5873178db5a92f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-prsor-cdca31f8672a5f768a2c15e2babf6916 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ltb23-6bd815f5e93c83f6e3acc5a5903a3c56 '   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-cpmrf-995b8ab88403344dee6b84ec5a0dd61f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7avyj-577bac6ab0f3398228b0c1181ccf5b1c '   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=OEAiWbCHf9c\">Masonry 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":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-291","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291","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=291"}],"version-history":[{"count":10,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/revisions"}],"predecessor-version":[{"id":8276,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/291\/revisions\/8276"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}