Divi Grid Portfolio

Create advanced galleries with your projects. Choose between more than 5 five design options. Show your project in a lightbox or on a detail project page. ¡You choose!

Furthermore, you will be able to:

Change the space between projects
Customize colors / size / position of title and subtitle
Customize the position / color / size of filters
Overlay color/icons
Customize pagination

New feature: Project gallery

Now you can open the project in a Light Box.

Choosing between showing only images or images plus text. Let’s take a look!

OPTION 1

Text and images slider

(click on any project to see)

Add images and text to each project. Show the content on a Light tbox

[diep_extended_portfolio fullwidth=”grid__1_4_square” grid_gap=”19″ zoom=”on” posts_number=”5″ include_categories=”56,58,55,57,51″ title_categories_position=”middle” show_on_mouseover=”on” show_categories=”off” zoom_icon_color=”rgba(255,255,255,0)” hover_overlay_color=”rgba(0,0,0,0.8)” filter_position=”left” filter_criteria_background=”RGBA(255,255,255,0)” filter_criteria_active_background=”#000000″ pagination_background=”#000000″ click_action=”full” include_thumbnail=”off” navigation_color=”#8300E9″ pagination_color=”#8300E9″ filter_padding=”10px|30px|10px|30px|false|false” _builder_version=”4.27.0″ _module_preset=”default” filter_font=”|||on|||||” filter_text_color=”#000000″ filter_font_size=”20px” filter_letter_spacing=”3px” filter_active_text_color=”#FFFFFF” title_text_align=”center” title_text_color=”#FFFFFF” title_font_size=”35px” pagination_text_align=”right” pagination_text_color=”#FFFFFF” pagination_font_size=”20px” pagination_line_height=”1em” pagination_active_text_color=”#EDF000″ gallery_title_text_color=”#8300E9″ gallery_title_font_size=”40px” gallery_description_font=”||||||||” custom_margin=”||3px|||” hover_enabled=”0″ global_colors_info=”{}” navigation_color__hover_enabled=”on|desktop” navigation_color__hover=”rgba(131,0,233,0.6)” show_title__hover_enabled=”on|hover” show_title__hover=”on” theme_builder_area=”post_content” sticky_enabled=”0″ title_line_height=”1.2em” title_font=”–et_global_heading_font||||||||”][/diep_extended_portfolio]

OPTION 2

Images slider

(click on any project to see)

You can add many images to each project. These images will be loaded on a Light Box.

[diep_extended_portfolio fullwidth=”grid__1_2″ grid_gap=”19″ zoom=”on” posts_number=”6″ include_categories=”15,16,17″ title_categories_position=”bottom” show_categories=”off” show_excerpt=”on” show_pagination=”off” show_filters=”off” zoom_icon_color=”#EDF000″ overlay_color=”rgba(0,0,0,0.41)” hover_overlay_color=”rgba(0,0,0,0.88)” hover_icon=”$||divi||400″ click_action=”gallery” include_thumbnail=”off” navigation_color=”#8300E9″ pagination_color=”#8300E9″ _builder_version=”4.27.0″ _module_preset=”default” title_font=”|800||on|||||” title_text_align=”left” title_text_color=”#FFFFFF” title_font_size=”26px” title_letter_spacing=”1px” caption_text_color=”#FFFFFF” pagination_text_align=”center” excerpt_font=”Poppins||||||||” excerpt_text_color=”#FFFFFF” gallery_title_text_color=”#8300E9″ gallery_title_font_size=”25px” gallery_description_font=”|700|||||||” custom_margin=”||95px|||” hover_enabled=”0″ global_colors_info=”{}” navigation_color__hover_enabled=”on|desktop” navigation_color__hover=”rgba(131,0,233,0.6)” show_title__hover_enabled=”on|desktop” show_title__hover=”on” title_text_color__hover_enabled=”on|hover” title_text_color__hover=”#EDF000″ excerpt_text_color__hover_enabled=”on|hover” excerpt_text_color__hover=”#EDF000″ theme_builder_area=”post_content” sticky_enabled=”0″][/diep_extended_portfolio]

6 different layouts

GRID 2-1

This example shows the title when the mouse does hover. This example has the click disable.

You can customize the background overlay and the color of the text.

[diep_extended_portfolio fullwidth=”grid__1_2″ posts_number=”6″ include_categories=”8,7″ show_on_mouseover=”on” show_categories=”off” show_pagination=”off” zoom_icon_color=”RGBA(255,255,255,0)” hover_overlay_color=”rgba(131,0,233,0.37)” hover_icon=”0||divi||400″ filter_criteria_background=”RGBA(255,255,255,0)” filter_criteria_active_background=”#8300E9″ _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Alata||||||||” filter_text_color=”#8300E9″ filter_font_size=”17px” filter_active_text_color=”#FFFFFF” title_font=”Alata|700|||||||” title_text_color=”#EDF000″ excerpt_font=”Abel|700|||||||” excerpt_text_color=”#FFFFFF” excerpt_font_size=”18px” excerpt_line_height=”1.3em” hover_enabled=”0″ global_colors_info=”{}” filter_criteria_background__hover_enabled=”on|hover” filter_criteria_background__hover=”#EDF000″ theme_builder_area=”post_content” click_action=”disabled” sticky_enabled=”0″][/diep_extended_portfolio]

GRID Square

This example shows the title always and the icon when mouse hover. The filters are hidden.

This example opens a demo project page

[diep_extended_portfolio grid_gap=”0″ zoom=”on” posts_number=”8″ include_categories=”8,7″ title_categories_position=”bottom” show_categories=”off” show_pagination=”off” show_filters=”off” zoom_icon_color=”#00e0d5″ hover_overlay_color=”rgba(0,0,0,0.59)” hover_icon=”T||divi||400″ _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Alata||||||||” filter_text_color=”rgba(0,0,0,0.65)” filter_font_size=”20px” title_font=”Poppins||||||||” title_text_align=”center” title_text_color=”#FFFFFF” title_font_size=”20px” title_line_height=”1.6em” caption_font=”Poppins||||||||” caption_text_align=”center” caption_text_color=”#FFFFFF” caption_line_height=”1.4em” excerpt_text_align=”center” excerpt_text_color=”#FFFFFF” excerpt_font_size=”13px” excerpt_line_height=”1.4em” hover_enabled=”0″ global_colors_info=”{}” title_text_color__hover_enabled=”on|desktop” title_text_color__hover=”#00e0d5″ theme_builder_area=”post_content” show_on_mouseover=”on” click_action=”disabled” sticky_enabled=”0″][/diep_extended_portfolio]

GRID 1-4

The example shows the content align on the vertical center.

This example opens a demo project page

[diep_extended_portfolio fullwidth=”grid__1_4″ grid_gap=”1″ zoom=”on” include_categories=”4,10″ title_categories_position=”middle” show_on_mouseover=”on” show_pagination=”off” filters_all_text=”My art” zoom_icon_color=”RGBA(255,255,255,0)” hover_overlay_color=”rgba(27,0,71,0.57)” hover_icon=”0||divi||400″ filter_position=”left” filter_criteria_background=”#EDF000″ filter_criteria_active_background=”#caff8a” _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Abel|700||on|||||” filter_text_color=”#000000″ filter_font_size=”25px” filter_letter_spacing=”2px” title_font=”Oswald|||on|||||” title_text_align=”center” title_text_color=”#FFFFFF” title_font_size=”29px” title_line_height=”1.6em” caption_font=”Abel|700||on|||||” caption_text_align=”center” caption_text_color=”#EDF000″ caption_font_size=”16px” caption_line_height=”1.4em” excerpt_text_color=”#FFFFFF” excerpt_line_height=”1.2em” hover_enabled=”0″ global_colors_info=”{}” filter_criteria_background__hover_enabled=”on|hover” filter_criteria_background__hover=”#caff8a” caption_text_color__hover_enabled=”on|desktop” caption_text_color__hover=”#caff8a” title_text_color__hover_enabled=”on|desktop” title_text_color__hover=”#caff8a” theme_builder_area=”post_content” sticky_enabled=”0″][/diep_extended_portfolio]

GRID 1-4 SQUARE

Example with pagination and custom color for filters with pagination.

This example opens a demo project page.

[diep_extended_portfolio fullwidth=”grid__1_4_square” grid_gap=”20″ zoom=”on” posts_number=”5″ include_categories=”4,10″ show_on_mouseover=”on” show_title=”off” show_categories=”off” phone_filters=”inline” zoom_icon_color=”#8300E9″ hover_overlay_color=”rgba(255,255,255,0.71)” hover_icon=”0||divi||400″ filter_criteria_background=”#f7578a” filter_criteria_active_background=”#f72769″ pagination_background=”#f7578a” grid_gap_tablet=”15″ grid_gap_phone=”15″ grid_gap_last_edited=”on|phone” _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Oswald|||on|||||” filter_text_color=”rgba(0,0,0,0.48)” filter_font_size=”18px” filter_active_text_color=”#FFFFFF” title_font=”Poppins||||||||” title_text_color=”#FFFFFF” title_font_size=”20px” title_line_height=”1.6em” caption_font=”Poppins||||||||” caption_text_color=”#FFFFFF” caption_line_height=”1.4em” pagination_font=”|800|||||||” pagination_text_align=”right” pagination_text_color=”rgba(0,0,0,0.39)” pagination_active_text_color=”#FFFFFF” global_colors_info=”{}” pagination_active_text_color__hover_enabled=”on|desktop” pagination_active_text_color__hover=”#000000″ pagination_text_color__hover_enabled=”on|desktop” pagination_text_color__hover=”rgba(0,0,0,0.6)” filter_criteria_background__hover_enabled=”on|hover” filter_text_color__hover_enabled=”on|desktop” filter_text_color__hover=”#FFFFFF” filter_criteria_background__hover=”#f73371″ theme_builder_area=”post_content”][/diep_extended_portfolio]

GRID 4-4

This example shows only the title on bottom position and it uses the grid with landscape thumbnails.

This example opens a demo project page

[diep_extended_portfolio fullwidth=”grid__4_4″ zoom=”on” posts_number=”8″ include_categories=”4,10″ title_categories_position=”bottom” show_on_mouseover=”on” show_categories=”off” show_pagination=”off” zoom_icon_color=”RGBA(255,255,255,0)” hover_overlay_color=”rgba(255,255,255,0.74)” hover_icon=”0||divi||400″ _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Poppins|700|||||||” filter_text_color=”#8300E9″ filter_font_size=”16px” title_text_color=”#8300E9″ title_font_size=”26px” title_line_height=”1.6em” caption_text_color=”#FFFFFF” caption_line_height=”1.4em” hover_enabled=”0″ filter_text_shadow_style=”preset3″ title_text_shadow_style=”preset1″ title_text_shadow_color=”#FFFFFF” global_colors_info=”{}” filter_criteria_background__hover_enabled=”on|desktop” filter_criteria_background__hover=”#000000″ filter_text_color__hover_enabled=”on|hover” filter_text_color__hover=”#FFFFFF” theme_builder_area=”post_content” title_font=”–et_global_heading_font||||||||” sticky_enabled=”0″][/diep_extended_portfolio]

GRID 2 COLUMNS

This example shows only the title in the middle position and uses the two-column layout.

This example has the click disabled.

[diep_extended_portfolio fullwidth=”grid__2″ grid_gap=”60″ zoom=”on” posts_number=”8″ include_categories=”4,10″ title_categories_position=”middle” show_on_mouseover=”on” show_categories=”off” show_pagination=”off” zoom_icon_color=”RGBA(255,255,255,0)” hover_overlay_color=”rgba(255,255,255,0.74)” hover_icon=”0||divi||400″ _builder_version=”4.27.0″ _module_preset=”default” filter_font=”Poppins|700|||||||” filter_text_color=”#8300E9″ filter_font_size=”16px” title_text_color=”#000000″ title_font_size=”40px” title_line_height=”1.6em” caption_text_color=”#FFFFFF” caption_line_height=”1.4em” hover_enabled=”0″ filter_text_shadow_style=”preset3″ global_colors_info=”{}” filter_criteria_background__hover_enabled=”on|desktop” filter_criteria_background__hover=”#000000″ filter_text_color__hover_enabled=”on|hover” filter_text_color__hover=”#FFFFFF” theme_builder_area=”post_content” title_font=”–et_global_heading_font||||||||” sticky_enabled=”0″ filter_padding=”20px||20px||false|false” filter_position=”left” title_text_align=”center”][/diep_extended_portfolio]