Filterable Gallery
Tambahkan galeri imej yang menakjubkan pada tapak web Divi anda dengan modul Galeri Boleh Penapis Divi Pixel. Tapis imej berdasarkan kategorinya dan dayakan tetapan tindanan untuk memaparkan ikon, tajuk dan kapsyen pada tetikus.
[dipi_button_grid flex_direction=”row” justify_content=”flex-start” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_button_grid_child button_id=”Demo” button_text=”Demo 1″ _builder_version=”4.17.1″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#15022A” button_border_color=”#15022A” button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”off” button_custom_margin=”||||false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|0px||0px|false|false” global_colors_info=”{}” button_border_color__hover=”#15022A” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][dipi_button_grid_child button_id=”Download” button_text=”Download” button_link=”https://www.divi-pixel.com/downloads/Filterable-Grid-Demo-01.json” module_class=”dp_download” _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#FF4200″ button_border_color=”#FF4200″ button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”on” button_icon=”||divi||400″ button_icon_placement=”left” button_on_hover=”off” button_custom_margin=”|||0px|false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|||0px|false|false” global_colors_info=”{}” button_bg_color__hover=”rgba(255,66,0,0.85)” button_bg_color__hover_enabled=”on|hover” button_border_color__hover=”rgba(255,66,0,0)” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][/dipi_button_grid]
Content Settings
Display title and excerpt in grid layout
Build advanced filterable grid sections with content displayed below images. Use masonry or grid layout and display the images, titles, and excerpts in the layout.
[dipi_filterable_grid select_custom_tax=”category” include_term_ids_of_category=”38,39,32,41″ pagination_type=”numbered_pagination” posts_per_page=”6″ filter_tab_alignment=”center” show_all_filter=”off” grid_layout=”grid” columns=”3″ row_height=”230px” gutter=”40″ grid_animation=”fadeInUpShort” fix_lazy=”on” show_post_title=”on” show_post_excerpt=”on” enable_html_on_grid=”on” excerpt_length=”1000″ show_custom_taxonomy=”on” use_post_link=”on” use_overlay=”on” show_overflow=”on” overlay_bg_color=”rgba(21,2,42,0)” overlay_icon_use_icon_font_size=”on” overlay_icon_font_size=”15px” space_tabs=”0px” pagination_btn_padding=”10px|20px|10px|20px|false|false” pagination_active_btn_margin=”||||false|false” pagination_active_btn_padding=”10px|20px|10px|20px|false|false” load_more_padding=”12px|30px|12px|30px|false|false” pagination_btn_bg_color=”#FFFFFF” pagination_active_btn_bg_color=”#15022A” load_more_bg_color=”#000000″ filter_bar_margin=”0px|0px|40px|0px|false|false” filter_bar_padding=”0px|0px||0px|false|false” filter_bar_background_color=”#FFFFFF” overlay_padding=”30px|30px|0px|30px|false|false” filter_bar_item_padding=”25px|20px|25px|20px|false|false” filter_bar_item_padding_active=”25px|20px|25px|20px|false|false” filter_bar_item_background_color=”RGBA(255,255,255,0)” filter_bar_item_background_color_active=”rgba(249,247,252,0.5)” grid_margin=”|0px|0px|0px|false|false” grid_background_color=”RGBA(255,255,255,0)” grid_item_background_color=”#FFFFFF” grid_item_category_margin=”20px|0px|0px|10px|false|false” grid_item_title_margin=”0px|20px|10px|20px|false|false” grid_item_excerpt_margin=”10px|20px|40px|20px|false|false” filter_bar_layout_tablet=”” filter_bar_layout_phone=”column” filter_bar_layout_last_edited=”on|phone” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|tablet” space_tabs_tablet=”10px” space_tabs_phone=”10px” space_tabs_last_edited=”on|tablet” pagination_btn_padding_tablet=”10px|20px|10px|20px|false|false” pagination_btn_padding_phone=”10px|20px|10px|20px|false|false” pagination_btn_padding_last_edited=”on|phone” filter_bar_item_width_tablet=”” filter_bar_item_width_phone=”90%” filter_bar_item_width_last_edited=”on|phone” _builder_version=”4.21.0″ _module_preset=”default” pagination_btn_normal_font=”Poppins|300|||||||” pagination_btn_normal_font_size=”16px” load_more_text_color=”#FFFFFF” load_more_font_size=”14px” filter_bar_normal_text_align=”center” filter_bar_normal_text_color=”rgba(21,2,42,0.3)” filter_bar_active_text_color=”#15022A” grid_item_title_font=”Poppins|700|||||||” grid_item_title_text_color=”#15022A” grid_item_title_font_size=”19px” grid_item_title_line_height=”1.4em” grid_item_excerpt_font=”|300|||||||” grid_item_excerpt_text_color=”rgba(21,2,42,0.5)” grid_item_excerpt_font_size=”14px” grid_item_excerpt_line_height=”1.6em” grid_item_category_font=”|||on|||||” grid_item_category_text_color=”rgba(21,2,42,0.31)” grid_item_category_font_size=”12px” grid_item_category_letter_spacing=”1px” min_height=”1000px” filter_bar_normal_text_align_last_edited=”off|phone” border_width_bottom_filter_bar_item=”2px” border_color_bottom_filter_bar_item=”#FFFFFF” border_width_bottom_filter_bar_item_active=”2px” border_color_bottom_filter_bar_item_active=”#000000″ box_shadow_style_pagination_normal=”preset3″ box_shadow_color_pagination_normal=”rgba(68,0,153,0.13)” box_shadow_style_filter_bar=”preset3″ box_shadow_color_filter_bar=”rgba(68,0,153,0.09)” box_shadow_style_filter_bar_item=”preset7″ box_shadow_horizontal_filter_bar_item=”0px” box_shadow_vertical_filter_bar_item=”0px” box_shadow_color_filter_bar_item=”rgba(249,247,252,0.5)” box_shadow_style_images=”preset3″ box_shadow_color_images=”rgba(68,0,153,0.09)” global_colors_info=”{}” filter_bar_item_background_color__hover_enabled=”off|hover” box_shadow_vertical_filter_bar_item__hover_enabled=”on|hover” box_shadow_vertical_filter_bar_item__hover=”-80px” load_more_bg_color__hover_enabled=”on|hover” load_more_bg_color__hover=”rgba(21,2,42,0.8)” filter_bar_normal_text_color__hover_enabled=”on|hover” filter_bar_normal_text_color__hover=”rgba(21,2,42,0.5)” border_color_bottom_filter_bar_item__hover_enabled=”on|hover” border_color_bottom_filter_bar_item__hover=”rgba(249,247,252,0.5)” theme_builder_area=”post_content”][/dipi_filterable_grid]
[dipi_button_grid flex_direction=”row” justify_content=”flex-start” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_button_grid_child button_id=”Demo” button_text=”Demo 2″ _builder_version=”4.18.0″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#15022A” button_border_color=”#15022A” button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”off” button_custom_margin=”||||false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|0px||0px|false|false” global_colors_info=”{}” button_border_color__hover=”#15022A” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][dipi_button_grid_child button_id=”Download” button_text=”Download” button_link=”https://www.divi-pixel.com/downloads/Filterable-Grid-Demo-02.json” module_class=”dp_download” _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#FF4200″ button_border_color=”#FF4200″ button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”on” button_icon=”||divi||400″ button_icon_placement=”left” button_on_hover=”off” button_custom_margin=”|||0px|false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|||0px|false|false” global_colors_info=”{}” button_bg_color__hover=”rgba(255,66,0,0.85)” button_bg_color__hover_enabled=”on|hover” button_border_color__hover=”rgba(255,66,0,0)” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][/dipi_button_grid]
Filter Custom Post Types
Classy look and functionality
Use the Filterable Grid module for displaying your favorite recipes, projects, services, and any other post type you have created.
[dipi_filterable_grid select_post_type=”project” select_custom_tax=”project_category” include_term_ids_of_project_category=”88,90,89,91″ filter_tab_alignment=”center” show_all_filter=”off” gutter=”30″ grid_animation=”fadeInUpShort” grid_animation_speed=”1500ms” fix_lazy=”on” image_animation_speed=”3000ms” show_post_title=”on” show_post_excerpt=”on” enable_html_on_grid=”on” excerpt_length=”300″ show_author=”on” show_author_avatar=”on” read_more=”on” use_post_link=”on” use_overlay=”on” overlay_align_horizontal=”flex-start” overlay_align_vertical=”flex-end” icon_animation=”fadeInLeft” icon_speed=”300ms” show_overflow=”on” overlay_bg_color=”rgba(21,2,42,0)” overlay_icon_circle_padding=”17px|17px|17px|17px|false|false” overlay_icon_use_icon_font_size=”on” overlay_icon_font_size=”16px” filter_bar_max_width=”741px” filter_bar_margin=”0px|auto|40px|auto|false|false” filter_bar_padding=”15px|0px|15px|0px|false|false” filter_bar_background_color=”rgba(202,205,207,0.2)” overlay_padding=”30px|30px|0px|20px|false|false” filter_bar_item_padding=”12px|25px|12px|25px|false|false” filter_bar_item_padding_active=”12px|25px|12px|25px|false|false” filter_bar_item_background_color=”RGBA(255,255,255,0)” filter_bar_item_background_color_active=”#05ad1b” filter_bar_item_width=”160px” filter_bar_item_width_active=”160px” grid_margin=”0px|10px|0px|10px|false|false” grid_item_background_color=”#FFFFFF” grid_item_meta_margin=”10px||10px||false|false” grid_item_meta_padding=”|0px|||false|false” grid_item_author_margin=”0px|||0px|false|false” grid_item_category_margin=”0px|0px|0px||false|false” grid_item_title_margin=”10px|10px|10px|20px|false|false” grid_item_excerpt_margin=”10px|20px|10px|20px|false|false” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|phone” space_tabs_tablet=”10px” space_tabs_phone=”10px” space_tabs_last_edited=”on|tablet” filter_bar_margin_tablet=”0px|auto|40px|auto|false|false” filter_bar_margin_phone=”0px|10px|40px|10px|false|false” filter_bar_margin_last_edited=”on|phone” filter_bar_item_width_tablet=”150px” filter_bar_item_width_phone=”90%” filter_bar_item_width_last_edited=”on|tablet” filter_bar_item_width_active_tablet=”150px” filter_bar_item_width_active_phone=”90%” filter_bar_item_width_active_last_edited=”on|tablet” _builder_version=”4.21.0″ _module_preset=”default” link_font=”||||||||” link_text_color=”#15022A” header_font=”|700|||||||” header_text_color=”#FFFFFF” meta_text_color=”#15022A” meta_font_size=”11px” meta_author_font=”||||||||” meta_author_text_color=”rgba(21,2,42,0.37)” filter_bar_normal_font=”|||on|||||” filter_bar_normal_text_align=”center” filter_bar_normal_text_color=”rgba(21,2,42,0.4)” filter_bar_normal_font_size=”13px” filter_bar_normal_letter_spacing=”1px” filter_bar_active_font=”|||on|||||” filter_bar_active_text_align=”center” filter_bar_active_text_color=”#FFFFFF” filter_bar_active_font_size=”13px” filter_bar_active_letter_spacing=”1px” grid_item_title_font=”Yeseva One||||||||” grid_item_title_font_size=”23px” grid_item_excerpt_font=”Open Sans||||||||” grid_item_excerpt_text_color=”rgba(21,2,42,0.42)” grid_item_excerpt_font_size=”13px” custom_read_more=”on” read_more_text_size=”11px” read_more_text_color=”rgba(21,2,42,0.4)” read_more_bg_color=”rgba(202,205,207,0.2)” read_more_border_width=”0px” read_more_border_radius=”100px” read_more_letter_spacing=”1px” read_more_font=”|||on|||||” read_more_use_icon=”off” read_more_alignment=”left” read_more_custom_margin=”|||15px|false|false” read_more_custom_padding=”7px|15px|7px|15px|false|false” min_height=”780px” custom_css_grid_item_author_prefix=”margin-left: 10px;” border_radii_filter_bar=”on|100px|100px|100px|100px” border_radii_filter_bar_tablet=”on|100px|100px|100px|100px” border_radii_filter_bar_phone=”on|30px|30px|30px|30px” border_radii_filter_bar_last_edited=”on|phone” border_radii_filter_bar_item=”on|100px|100px|100px|100px” border_color_all_filter_bar_item=”#f4f2f7″ border_width_all_grid_item=”10px” border_color_all_grid_item=”#FFFFFF” box_shadow_style_filter_bar_item_active=”preset3″ box_shadow_color_filter_bar_item_active=”rgba(23,127,0,0.3)” box_shadow_style_images=”preset1″ box_shadow_vertical_images=”-1px” box_shadow_blur_images=”31px” box_shadow_color_images=”rgba(0,58,34,0.1)” global_colors_info=”{}” overlay_bg_color__hover_enabled=”on|hover” overlay_bg_color__hover=”rgba(10,0,0,0.55)” overlay_bg_enable_color__hover=”on” filter_bar_normal_text_color__hover_enabled=”on|hover” filter_bar_normal_text_color__hover=”#0a0000″ border_color_bottom_filter_bar_item__hover_enabled=”on|hover” filter_bar_item_background_color__hover_enabled=”on|hover” filter_bar_item_background_color__hover=”#F9F7FC” filter_bar_item_background_color_active__hover_enabled=”on|hover” filter_bar_item_background_color_active__hover=”#05ad1b” filter_bar_active_text_color__hover_enabled=”on|hover” filter_bar_active_text_color__hover=”#FFFFFF” read_more_bg_color__hover_enabled=”on|hover” read_more_bg_color__hover=”#15022a” read_more_bg_enable_color__hover=”on” read_more_custom_padding__hover_enabled=”on|hover” read_more_custom_padding__hover=”7px|15px|7px|15px|false|false” read_more_text_color__hover_enabled=”on|hover” read_more_text_color__hover=”#FFFFFF” theme_builder_area=”post_content”][/dipi_filterable_grid]
[dipi_button_grid flex_direction=”row” justify_content=”flex-start” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_button_grid_child button_id=”Demo” button_text=”Demo 3″ _builder_version=”4.17.1″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#15022A” button_border_color=”#15022A” button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”off” button_custom_margin=”||||false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|0px||0px|false|false” global_colors_info=”{}” button_border_color__hover=”#15022A” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][dipi_button_grid_child button_id=”Download” button_text=”Download” button_link=”https://www.divi-pixel.com/downloads/Filterable-Grid-Demo-03.json” module_class=”dp_download” _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#FF4200″ button_border_color=”#FF4200″ button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”on” button_icon=”||divi||400″ button_icon_placement=”left” button_on_hover=”off” button_custom_margin=”|||0px|false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|||0px|false|false” global_colors_info=”{}” button_bg_color__hover=”rgba(255,66,0,0.85)” button_bg_color__hover_enabled=”on|hover” button_border_color__hover=”rgba(255,66,0,0)” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][/dipi_button_grid]
Overlay Effects
Add stunning overlay effects
Add image overlay elements and show them with stunning animations when the user mouse over the image.
[dipi_filterable_grid select_post_type=”layouts” select_custom_tax=”category” include_term_ids_of_category=”84,87,86,85″ filter_tab_alignment=”center” show_all_filter=”off” grid_layout=”grid” columns=”3″ row_height=”350px” gutter=”60″ grid_animation=”zoomInShort” fix_lazy=”on” image_animation=”zoom-in” image_animation_speed=”2000ms” use_post_link=”on” use_overlay=”on” overlay_align_horizontal=”flex-end” overlay_align_vertical=”flex-start” icon_animation=”fadeInDown” icon_speed=”300ms” overlay_bg_color=”rgba(255,255,255,0)” overlay_icon_color=”#FFFFFF” overlay_icon_circle_color=”rgba(0,0,0,0.35)” overlay_icon_circle_padding=”20px|20px|20px|20px|false|false” overlay_icon_use_icon_font_size=”on” overlay_icon_font_size=”20px” space_tabs=”1px” filter_bar_max_width=”685px” filter_bar_margin=”0px|auto|40px|auto|false|false” filter_bar_padding=”20px|10px|20px|10px|false|false” filter_bar_background_color=”#FFFFFF” overlay_padding=”0px|0px|0px|0px|false|false” filter_bar_item_padding=”15px|25px|15px|25px|false|false” filter_bar_item_padding_active=”15px|25px|15px|25px|false|false” filter_bar_item_background_color=”#FFFFFF” filter_bar_item_background_color_active=”RGBA(255,255,255,0)” filter_bar_item_width=”160px” filter_bar_item_width_active=”160px” grid_item_background_color=”#FFFFFF” columns_tablet=”1″ columns_phone=”1″ columns_last_edited=”on|tablet” overlay_icon_font_size_tablet=”16px” overlay_icon_font_size_phone=”16px” overlay_icon_font_size_last_edited=”on|phone” space_tabs_tablet=”10px” space_tabs_phone=”10px” space_tabs_last_edited=”on|tablet” filter_bar_item_width_tablet=”150px” filter_bar_item_width_phone=”150px” filter_bar_item_width_last_edited=”on|tablet” filter_bar_item_width_active_tablet=”150px” filter_bar_item_width_active_phone=”150px” filter_bar_item_width_active_last_edited=”on|tablet” module_class=”fg_demo” _builder_version=”4.19.4″ _module_preset=”default” header_font=”|700|||||||” header_text_color=”#FFFFFF” filter_bar_normal_font=”|||on|||||” filter_bar_normal_text_align=”center” filter_bar_normal_text_color=”rgba(21,2,42,0.4)” filter_bar_normal_font_size=”13px” filter_bar_normal_letter_spacing=”1px” filter_bar_active_font=”|||on|||||” filter_bar_active_text_align=”center” filter_bar_active_text_color=”#FFFFFF” filter_bar_active_font_size=”13px” filter_bar_active_letter_spacing=”1px” min_height=”780px” filter_saturate=”110%” mix_blend_mode=”overlay” custom_css_grid_item=”opacity: 0.9;||filter: grayscale(70%);” custom_css_overlay_icon=”border-radius: 0px;||backdrop-filter: blur(3px);||” border_color_all_grid_item=”RGBA(255,255,255,0)” box_shadow_style_filter_bar=”preset3″ box_shadow_color_filter_bar=”rgba(51,0,13,0.07)” box_shadow_style_filter_bar_item=”preset7″ box_shadow_horizontal_filter_bar_item=”0px” box_shadow_vertical_filter_bar_item=”0px” box_shadow_color_filter_bar_item=”#FFFFFF” box_shadow_style_filter_bar_item_active=”preset7″ box_shadow_horizontal_filter_bar_item_active=”0px” box_shadow_vertical_filter_bar_item_active=”-60px” box_shadow_color_filter_bar_item_active=”#000000″ box_shadow_style_images=”preset3″ box_shadow_blur_images=”49px” box_shadow_color_images=”rgba(0,16,63,0.24)” global_colors_info=”{}” overlay_bg_color__hover_enabled=”on|desktop” overlay_bg_color__hover=”rgba(255,255,255,0)” overlay_bg_enable_color__hover=”on” filter_bar_normal_text_color__hover_enabled=”on|hover” filter_bar_normal_text_color__hover=”#0a0000″ border_color_bottom_filter_bar_item__hover_enabled=”on|hover” border_color_bottom_filter_bar_item__hover=”rgba(21,2,42,0.13)” overlay_icon_circle_color__hover_enabled=”on|hover” overlay_icon_circle_color__hover=”rgba(0,0,0,0.5)” custom_css_grid_item__hover_enabled=”on|hover” custom_css_grid_item__hover=”opacity: 1;||filter: grayscale(10%);||filter: contrast(110%);” filter_bar_active_text_color__hover_enabled=”on|hover” filter_bar_active_text_color__hover=”#FFFFFF” theme_builder_area=”post_content”][/dipi_filterable_grid]
[dipi_button_grid flex_direction=”row” justify_content=”flex-start” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_button_grid_child button_id=”Demo” button_text=”Demo 4″ _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#15022A” button_border_color=”#15022A” button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”off” button_custom_margin=”||||false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|0px||0px|false|false” global_colors_info=”{}” button_border_color__hover=”#15022A” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][dipi_button_grid_child button_id=”Download” button_text=”Download” button_link=”https://www.divi-pixel.com/downloads/Filterable-Grid-Demo-04.json” module_class=”dp_download” _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#FF4200″ button_border_color=”#FF4200″ button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”on” button_icon=”||divi||400″ button_icon_placement=”left” button_on_hover=”off” button_custom_margin=”|||0px|false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|||0px|false|false” global_colors_info=”{}” button_bg_color__hover=”rgba(255,66,0,0.85)” button_bg_color__hover_enabled=”on|hover” button_border_color__hover=”rgba(255,66,0,0)” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][/dipi_button_grid]
One module - unlimited possibilities
Filter CPT in Divi with ease
Want to show filtered reviews from your customers? No problem! The Divi Pixel Filterable Grid can display testimonials in a beautiful way.
[dipi_filterable_grid select_post_type=”dipi_testimonial” select_custom_tax=”testimonial_cat” include_term_ids_of_testimonial_cat=”47,48,77″ pagination_type=”load_more” posts_per_page=”9″ post_orderby=”date_asc” filter_tab_alignment=”center” show_all_filter=”off” columns=”3″ gutter=”40″ grid_animation=”fadeInUpShort” fix_lazy=”on” image_animation_speed=”1000ms” show_post_title=”on” show_post_excerpt=”on” enable_html_on_grid=”on” excerpt_length=”20000″ show_lightbox=”off” space_tabs=”10px” pagination_btn_padding=”10px|19px|10px|19px|false|false” pagination_active_btn_padding=”10px|20px|10px|20px|false|false” load_more_padding=”12px|30px|12px|30px|false|false” pagination_btn_bg_color=”rgba(21,2,42,0.02)” pagination_active_btn_bg_color=”#000000″ load_more_bg_color=”#0a0a0a” filter_bar_margin=”0px|0px||0px|false|false” filter_bar_padding=”0px|0px|40px|0px|false|false” filter_bar_item_padding=”15px|30px|15px|30px|false|false” filter_bar_item_padding_active=”15px|30px|15px|30px|false|false” filter_bar_item_background_color=”rgba(21,2,42,0.04)” filter_bar_item_background_color_active=”#15022A” filter_bar_item_width=”180px” filter_bar_item_width_active=”180px” grid_margin=”|0px|0px|0px|false|false” grid_padding=”|0px|0px|0px|false|false” grid_item_background_color=”#fafafb” grid_item_title_margin=”20px|10px|10px|10px|false|false” grid_item_excerpt_padding=”0px||0px||false|false” post_count_tablet=”9″ post_count_phone=”4″ post_count_last_edited=”on|phone” columns_tablet=”2″ columns_phone=”1″ columns_last_edited=”on|tablet” filter_bar_item_width_tablet=”180px” filter_bar_item_width_phone=”100%” filter_bar_item_width_last_edited=”on|phone” filter_bar_item_width_active_tablet=”180px” filter_bar_item_width_active_phone=”100%” filter_bar_item_width_active_last_edited=”on|phone” _builder_version=”4.21.0″ _module_preset=”default” header_6_font=”|700|||||||” header_6_text_color=”#15022A” header_6_font_size=”18px” header_6_line_height=”1.4em” pagination_btn_normal_font=”|300||on|||||” pagination_btn_normal_text_color=”rgba(21,2,42,0.5)” pagination_btn_normal_font_size=”13px” pagination_btn_normal_letter_spacing=”1px” pagination_btn_active_text_color=”#FFFFFF” load_more_font=”|||on|||||” load_more_text_color=”#FFFFFF” load_more_font_size=”11px” load_more_letter_spacing=”1px” filter_bar_normal_font=”|||on|||||” filter_bar_normal_text_align=”center” filter_bar_normal_text_color=”#15022A” filter_bar_normal_font_size=”13px” filter_bar_normal_letter_spacing=”1px” filter_bar_active_font=”Poppins|||on|||||” filter_bar_active_text_align=”center” filter_bar_active_text_color=”#FFFFFF” filter_bar_active_font_size=”13px” filter_bar_active_letter_spacing=”1px” grid_item_title_font=”Poppins|300||on|||||” grid_item_title_text_align=”center” grid_item_title_text_color=”rgba(21,2,42,0.4)” grid_item_title_font_size=”15px” grid_item_excerpt_font=”Poppins|300|on||||||” grid_item_excerpt_text_align=”center” grid_item_excerpt_font_size=”15px” grid_item_excerpt_line_height=”1.8em” min_height=”800px” grid_item_title_font_size_tablet=”18px” grid_item_title_font_size_phone=”16px” grid_item_title_font_size_last_edited=”on|phone” grid_item_excerpt_font_size_tablet=”15px” grid_item_excerpt_font_size_phone=”13px” grid_item_excerpt_font_size_last_edited=”on|phone” custom_css_grid_item=”padding: 30px;” custom_css_grid_item_img=”border-radius: 100%;||max-width: 80px;||margin: auto;” border_radii_pagination_btn_normal=”on|100px|100px|100px|100px” border_width_all_pagination_btn_normal=”1px” border_color_all_pagination_btn_normal=”rgba(21,2,42,0.06)” border_width_all_pagination_btn_active=”1px” border_color_all_pagination_btn_active=”#000000″ border_radii_load_more=”on|100px|100px|100px|100px” border_radii_filter_bar_item=”on|100px|100px|100px|100px” border_radii_grid_item=”on|10px|10px|10px|10px” border_width_all_grid_item=”1px” border_color_all_grid_item=”rgba(21,2,42,0.03)” global_colors_info=”{}” custom_css_grid_item__hover_enabled=”on|hover” custom_css_grid_item__hover=”transform: scale(1.02);” pagination_btn_normal_text_color__hover_enabled=”on|hover” pagination_btn_normal_text_color__hover=”#000000″ pagination_btn_active_text_color__hover_enabled=”on|desktop” pagination_btn_active_text_color__hover=”#FFFFFF” load_more_bg_color__hover_enabled=”on|hover” load_more_bg_color__hover=”rgba(0,0,0,0.7)” theme_builder_area=”post_content”][/dipi_filterable_grid]
[dipi_button_grid flex_direction=”row” justify_content=”flex-start” _builder_version=”4.19.4″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][dipi_button_grid_child button_id=”Demo” button_text=”Demo 5″ _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#15022A” button_border_color=”#15022A” button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”off” button_custom_margin=”||||false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|0px||0px|false|false” global_colors_info=”{}” button_border_color__hover=”#15022A” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][dipi_button_grid_child button_id=”Download” button_text=”Download” button_link=”https://www.divi-pixel.com/downloads/Filterable-Grid-Demo-05.json” module_class=”dp_download” _builder_version=”4.19.4″ _module_preset=”default” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#FF4200″ button_border_color=”#FF4200″ button_border_radius=”0px” button_font=”Poppins||||||||” button_use_icon=”on” button_icon=”||divi||400″ button_icon_placement=”left” button_on_hover=”off” button_custom_margin=”|||0px|false|false” button_custom_padding=”10px||10px||false|false” custom_margin=”0px|||0px|false|false” global_colors_info=”{}” button_bg_color__hover=”rgba(255,66,0,0.85)” button_bg_color__hover_enabled=”on|hover” button_border_color__hover=”rgba(255,66,0,0)” button_border_color__hover_enabled=”on|hover” theme_builder_area=”post_content”][/dipi_button_grid_child][/dipi_button_grid]
Overlay Effects
Add stunning overlay effects
Add image overlay elements and show them with stunning animations when the user mouse over the image.
[dipi_filterable_grid select_post_type=”project” select_custom_tax=”project_category” include_term_ids_of_project_category=”88,90,89,91″ post_count=”6″ filter_tab_alignment=”center” show_all_filter=”off” grid_layout=”grid” columns=”3″ row_height=”320px” gutter=”40″ grid_animation=”zoomInShort” fix_lazy=”on” image_animation=”move-up” image_animation_speed=”2000ms” use_post_link=”on” use_overlay=”on” overlay_align_vertical=”flex-end” title_in_overlay=”on” icon_speed=”300ms” overlay_bg_color=”rgba(255,255,255,0)” overlay_icon_color=”#FFFFFF” overlay_icon_circle_color=”rgba(255,255,255,0.28)” overlay_icon_circle_padding=”20px|20px|20px|20px|false|false” overlay_icon_use_icon_font_size=”on” overlay_icon_font_size=”20px” space_tabs=”10px” filter_bar_margin=”0px|auto|20px|auto|false|false” filter_bar_padding=”20px|10px|20px|10px|false|false” filter_bar_background_color=”RGBA(255,255,255,0)” overlay_padding=”0px|10px|20px|10px|false|false” filter_bar_item_padding=”15px|0px|15px|0px|false|false” filter_bar_item_padding_active=”15px|0px|15px|0px|false|false” filter_bar_item_background_color=”#FFFFFF” filter_bar_item_width=”200px” filter_bar_item_width_active=”200px” grid_item_background_color=”#FFFFFF” columns_tablet=”1″ columns_phone=”1″ columns_last_edited=”on|tablet” overlay_icon_font_size_tablet=”16px” overlay_icon_font_size_phone=”16px” overlay_icon_font_size_last_edited=”on|phone” space_tabs_tablet=”10px” space_tabs_phone=”10px” space_tabs_last_edited=”on|tablet” filter_bar_item_width_tablet=”130px” filter_bar_item_width_phone=”100%” filter_bar_item_width_last_edited=”on|tablet” filter_bar_item_width_active_tablet=”130px” filter_bar_item_width_active_phone=”100%” filter_bar_item_width_active_last_edited=”on|tablet” _builder_version=”4.19.4″ _module_preset=”default” header_font=”Montserrat|300|||||||” header_text_color=”#FFFFFF” header_font_size=”30px” header_letter_spacing=”1px” filter_bar_normal_font=”Montserrat|300|||||||” filter_bar_normal_text_align=”center” filter_bar_normal_text_color=”rgba(21,2,42,0.4)” filter_bar_normal_font_size=”18px” filter_bar_normal_letter_spacing=”1px” filter_bar_active_font=”Montserrat|300|||||||” filter_bar_active_text_align=”center” filter_bar_active_text_color=”#FFFFFF” filter_bar_active_font_size=”18px” filter_bar_active_letter_spacing=”1px” min_height=”780px” custom_padding=”|20px||20px|false|false” filter_saturate=”110%” mix_blend_mode=”overlay” header_font_size_tablet=”30px” header_font_size_phone=”24px” header_font_size_last_edited=”on|phone” filter_bar_normal_font_size_tablet=”16px” filter_bar_normal_font_size_phone=”16px” filter_bar_normal_font_size_last_edited=”on|tablet” filter_bar_active_font_size_tablet=”16px” filter_bar_active_font_size_phone=”16px” filter_bar_active_font_size_last_edited=”on|tablet” custom_css_main_element=”overflow: visible;” custom_css_overlay_icon=”backdrop-filter: blur(3px);||” border_radii_filter_bar_item=”off|30px||30px|” border_radii_filter_bar_item_active=”off|30px||30px|” border_radii_grid_item=”off|50px||50px|” border_width_all_grid_item=”4px” border_color_all_grid_item=”RGBA(255,255,255,0)” box_shadow_style_filter_bar_item_active=”preset7″ box_shadow_horizontal_filter_bar_item_active=”0px” box_shadow_vertical_filter_bar_item_active=”-60px” box_shadow_color_filter_bar_item_active=”#FF4200″ box_shadow_style_images=”preset3″ box_shadow_blur_images=”49px” box_shadow_color_images=”rgba(0,16,63,0.24)” global_colors_info=”{}” overlay_bg_color__hover_enabled=”on|hover” overlay_bg_color__hover=”rgba(255,255,255,0)” overlay_bg_enable_color__hover=”on” filter_bar_normal_text_color__hover_enabled=”on|hover” filter_bar_normal_text_color__hover=”#0a0000″ border_color_bottom_filter_bar_item__hover_enabled=”on|hover” border_color_bottom_filter_bar_item__hover=”rgba(21,2,42,0.13)” overlay_icon_circle_color__hover_enabled=”on|hover” overlay_icon_circle_color__hover=”#FFFFFF” custom_css_grid_item__hover_enabled=”off|desktop” overlay_bg_color_gradient_stops__hover=”rgba(0,0,0,0) 0%|rgba(0,0,0,0.5) 100%” overlay_bg_use_color_gradient__hover=”on” overlay_icon_color__hover_enabled=”on|hover” overlay_icon_color__hover=”#15022A” theme_builder_area=”post_content”][/dipi_filterable_grid]