{"id":28185,"date":"2018-02-11T14:29:07","date_gmt":"2018-02-11T14:29:07","guid":{"rendered":"https:\/\/divicio.us\/?p=28185"},"modified":"2018-03-02T14:38:20","modified_gmt":"2018-03-02T14:38:20","slug":"free-download-divi-filterable-portfolio-sections-custom-hover-effects","status":"publish","type":"post","link":"https:\/\/divicio.us\/freebies\/free-download-divi-filterable-portfolio-sections-custom-hover-effects\/","title":{"rendered":"Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects"},"content":{"rendered":"

[et_pb_section bb_built=”1″ transparent_background=”on” custom_padding=”0px|0px|0px|0px” custom_padding_last_edited=”on|phone” _builder_version=”3.0.51″ background_color=”rgba(255,255,255,0)”][et_pb_row make_fullwidth=”on” custom_padding=”0px|0px|0px|0px” padding_mobile=”on” custom_margin=”0px||0px|” column_padding_mobile=”on” parallax_method_1=”off” custom_padding_last_edited=”on|phone” _builder_version=”3.0.47″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″][et_pb_post_title admin_label=”Free Download: Divi Filterable Portfolio Sections with Custom Hover Effects” categories=”off” featured_placement=”background” text_orientation=”center” text_color=”light” text_background=”on” text_bg_color=”rgba(194,17,244,0.8)” _builder_version=”3.0.97″ title_font=”Source Sans Pro||||” title_font_size=”80px” title_font_size_tablet=”60px” title_font_size_phone=”40px” title_font_size_last_edited=”on|desktop” title_line_height=”1.3em” title_line_height_last_edited=”on|phone” meta_font=”Lato||||” meta_font_size=”18″ meta_line_height=”1.3em” meta_line_height_last_edited=”on|phone” parallax_method=”off” title=”on” meta=”on” author=”on” date=”on” comments=”on” featured_image=”on” \/][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section bb_built=”1″ background_color=”#ffffff” padding_mobile=”off” specialty=”on” parallax_2=”off” parallax_method_1=”off” parallax_method_2=”off” background_position_1=”top_left” background_repeat_1=”no-repeat” _builder_version=”3.0.69″ custom_padding_tablet=”50px|0|50px|0″ custom_padding_last_edited=”on|desktop”][et_pb_column type=”3_4″ specialty_columns=”3″][et_pb_row_inner admin_label=”Row” _builder_version=”3.0.91″][et_pb_column_inner type=”4_4″ saved_specialty_column_type=”3_4″][et_pb_text admin_label=”Text – Intro” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

In this post I would like to share with you four Divi Filterable Portfolio section layouts with different custom hover effects applied to portfolio items on hovering over.<\/p>\n

I decided to make it a FREE download rather than a DIY tutorial since this will allow Divi users to implement these effects on their sites with much less effort.<\/p>\n

Check out the short demo video of these layouts with custom hover effects below or click the button to navigate to the live demo.<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”H2 – What we are going to achieve” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”25px||0px|” custom_padding_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_padding_tablet=”20px||0px|”]<\/p>\n

Demo<\/h2>\n

[\/et_pb_text][et_pb_video admin_label=”Video – Demo” _builder_version=”3.0.97″ src=”https:\/\/youtu.be\/ge20YXlUo2E” play_icon_color=”#ffcc00″ \/][et_pb_button admin_label=”Button – Live Demo” _builder_version=”3.0.97″ button_text=”Live Demo” button_url=”https:\/\/divicio.us\/demos\/demo\/divi-filterable-portfolio-sections-custom-hover-effects-demo” url_new_window=”on” button_alignment=”center” background_layout=”dark” custom_button=”on” button_text_size=”26″ button_text_size_tablet=”24″ button_text_size_phone=”22″ button_text_size_last_edited=”on|phone” button_text_color=”#ffffff” button_bg_color=”#ffcc00″ button_border_width=”0″ button_border_radius=”5″ button_font=”|||on|||||” button_use_icon=”off” button_icon_placement=”right” button_text_color_hover=”#ffffff” button_bg_color_hover=”#ffcc00″ button_border_radius_hover=”5″ button_letter_spacing_hover=”1″ box_shadow_style=”preset1″ box_shadow_blur=”32px” box_shadow_color=”rgba(255,204,0,0.46)” animation_style=”bounce” \/][et_pb_text admin_label=”H2 – How To Download” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”25px||0px|” custom_padding_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_padding_tablet=”20px||0px|”]<\/p>\n

How To Download<\/h2>\n

[\/et_pb_text][et_pb_text admin_label=”Text – This download is exclusive to our subscribers ,,,” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

This download is exclusive to our subscribers, so, in order to download first you’ll need to subscribe via the form below and confirm your email and after that you will receive an email with the download link.<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”H2 – Requirements” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”25px||0px|” custom_padding_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_padding_tablet=”20px||0px|”]<\/p>\n

Requirements<\/h2>\n

[\/et_pb_text][et_pb_text admin_label=”Text – The download is a single .zip … ” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

These protfolio sections make use of the section dividers feature of Divi, so, at least Divi v3.0.101<\/strong><\/em> is required in order for the divider shapes to show up in the section background.<\/p>\n

But the rest of the styling and custom hover effects will work with earlier versions of Divi too.<\/p>\n

[\/et_pb_text][et_pb_text admin_label=”H2 – Installation” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”25px||0px|” custom_padding_last_edited=”on|desktop” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop” custom_padding_tablet=”20px||0px|”]<\/p>\n

Installation<\/h2>\n

[\/et_pb_text][et_pb_text admin_label=”Text – The download is a single .zip … ” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

The download is a single .zip<\/em> file with separate folders for each section layout and a README.txt<\/em> file which you need to read first before installation since it contains the instructions for installation of these layouts.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”Image – Download file contents” _builder_version=”3.0.97″ src=”https:\/\/divicio.us\/wp-content\/uploads\/2018\/02\/download-file-contents.jpg” show_in_lightbox=”on” url_new_window=”off” use_overlay=”off” align=”center” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset1″ box_shadow_blur=”50px” box_shadow_color=”rgba(0,0,0,0.1)” \/][et_pb_text admin_label=”Text – Each of the section layout folders is named accordingly … ” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

Each of the section layout folders is named accordingly and contains two files – the section layout\u00a0JSON<\/em> file which needs to be imported into the Divi Library, and a CSS<\/em> file with the section custom styling and hover effect.<\/p>\n

First import the JSON file of the section layout into the Divi Library.<\/p>\n

Then\u00a0add the CSS from the CSS file of the same section layout folder either into the\u00a0Custom CSS<\/em><\/strong>\u00a0field on\u00a0Divi -> Theme Options <\/em><\/strong>page\u00a0<\/em><\/strong>or into the\u00a0Divi -> Theme Customizer -> Additional CSS <\/em><\/strong>field.<\/i><\/b><\/p>\n

Alternatively, add the CSS to you child theme\u00a0style.css\u00a0<\/em><\/strong>file.<\/p>\n

Next, go to the page where you would like to have your portfolio and add the imported section from the Divi Library. Then open the Filterable Portfolio<\/em> module settings and select your project categories which you would like to show on your site.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”Image – Include portfolio categories” _builder_version=”3.0.97″ src=”https:\/\/divicio.us\/wp-content\/uploads\/2018\/02\/include-portfolio-categories.jpg” show_in_lightbox=”on” url_new_window=”off” use_overlay=”off” align=”center” always_center_on_mobile=”on” force_fullwidth=”off” show_bottom_space=”on” border_radii=”on|5px|5px|5px|5px” box_shadow_style=”preset1″ box_shadow_blur=”50px” box_shadow_color=”rgba(0,0,0,0.1)” \/][et_pb_text admin_label=”Text – END” _builder_version=”3.0.97″ text_font=”Source Sans Pro||||” text_font_size=”30″ text_font_size_tablet=”25″ text_font_size_phone=”20″ text_font_size_last_edited=”on|phone” text_text_color=”#515b69″ text_line_height=”1.3em” text_line_height_last_edited=”on|desktop” header_font_size=”35px” header_font_size_tablet=”30px” header_font_size_phone=”25px” header_font_size_last_edited=”on|phone” header_line_height=”1.3em” header_line_height_last_edited=”on|phone” custom_margin_last_edited=”on|phone” custom_padding=”||0px|” custom_padding_last_edited=”on|phone” custom_css_main_element=”font-weight: 300 !important;” saved_tabs=”advanced,css” background_layout=”light” header_2_font_size=”34px” header_2_font_size_tablet=”29px” header_2_font_size_phone=”24px” header_2_font_size_last_edited=”on|desktop”]<\/p>\n

Save everything and you are done, enjoy!<\/p>\n

Hope these section layouts with custom hover effects will come in handy, this is the first free download I am offering but there’s more to come. So, subscribe and stay tuned!<\/p>\n

\n\t\t\t\t