{"id":189775,"date":"2019-06-03T01:10:48","date_gmt":"2019-06-03T08:10:48","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=189775"},"modified":"2019-06-03T01:10:48","modified_gmt":"2019-06-03T08:10:48","slug":"portfolio-section-gallery-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/portfolio-section-gallery-beaver-builder\/","title":{"rendered":"How to Create a Portfolio Section with Filterable Gallery?"},"content":{"rendered":"

How you display your work on your website matters a lot! For a photographer or a graphic designer or any other professional, displaying your best work should be done in the best manner as well. But, most of the time, WordPress themes do not offer much editing and customization. To tackle this problem, we designed the Filterable Gallery module for Beaver Builder<\/a>.<\/p>\n

Filterable gallery module allows you to easily group the images into different categories and display these categories as filters. So, the user can click the Filter\/Category to see all the images for the particular filter\/category. Some websites even use Instagram Feed to display their latest work<\/a>, it is a good way to automate the portfolio specially for photographers & designers.<\/p>\n

Why you should Create a Portfolio with Filterable Gallery?<\/h3>\n

If you run a digital agency, you can have your portfolio across varied segments like Graphic Design, Web Design, Mobile Apps, Branding, etc. If you are a Photographer, you can have a wide range of categories like fashion, landscape, wildlife, sports, wedding, architectural, etc.<\/p>\n

A creative way of displaying web design portfolio is to use Image Scroll Module.<\/a> On some websites, where you need before & after comparison for example – Dermatologists, Dentist, Interior Design, etc. you can use the Image Comparison module<\/a>.<\/p>\n

Displaying all your work\/images in a gallery isn’t an efficient way of presenting your skills. Best of your works in different categories will be lost in between several images. Your portfolio should be easy to navigate for your prospective clients so that they can quickly look through your work similar to their requirements.<\/p>\n

Filterable Gallery module provides an easy to use and efficient solution to the problem of showcasing your work. The module allows you to add and customize impressive filterable galleries on your website. Let’s jump in and see how you can use this widget to share your work.<\/p>\n

How To Create a Portfolio with Beaver Builder?<\/h2>\n

Before we go further, make sure that you install and activate the Beaver Builder<\/a> and PowerPack Beaver Builder addon<\/a> on your WordPress website.<\/p>\n

Step 1: Adding the Filterable Gallery module<\/h3>\n

Go to the page where you want to add the filterable gallery and then open it using the Beaver Builder editor. Once you are in the editor, look for the Filterable gallery module<\/a>. You will see a message “Please add photos to the gallery.”<\/p>\n

\"filterable<\/p>\n

Step 2: Adding Images<\/h3>\n

Now firstly, we need to add the images to our gallery. For this, go to the Photos tab and Click on the “Edit photo group 1”. Give the filter label a proper name and add the photos from your media library using the Add Photos button. Repeat the same for different filters you want on your gallery.<\/p>\n

Once you are done adding the photos to different photo groups, click on the Save button as shown below.<\/p>\n

\"filterable<\/p>\n

Step 3: Layout and Design<\/h3>\n

Now go back to the module’s General tab and choose the layout you want from Grid and Masonry. You can also choose the image size, display order, etc. from the options. You can also enable\/disable the captions and can determine what happens when a user clicks on an image. Once you are done, move on to the Style tab.<\/p>\n

\"general<\/p>\n

Step 4: Display Image or link to a URL<\/h3>\n

Now that we have added the images and finalized the layout, it’s important to set the on click behavior. Filterable Gallery module for Beaver Builder<\/a> allows you to open the full-size image in a lightbox or you can set an external link. Displaying full-size image is perfect for photographers and artists, whereas web agencies can set an external link to the project.<\/p>\n

\"filterable-gallery-lightbox\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Step 5: Styling the Gallery<\/h3>\n

Style tab allows you to add hover effects, borders, padding, overlays, icon, etc. From the style tab’s general settings, you can change the radius, shadow, padding, overlay effects for the images. Further, you can change the icon size, background color, icon color, border radius, and padding of the picture.<\/p>\n

\"style\"<\/p>\n

Step 6: Filters Customization<\/h3>\n

Here we can customize how the filters look. Filters are the tabs on the top of the image gallery, which helps the users to navigate between the images and categories easily. Here you can change the background color, background hover color, the text color, and the hover color for the filters. You can change the width, horizontal and vertical spacing for the labels, padding, toggle responsiveness, alignment as well as borders from the given respective settings.<\/p>\n

\"filter\"<\/p>\n

Step 7: Typography<\/h3>\n

In terms of typography, you can make your text on the filters looks precisely the way you want from the typography tab. You can individually customize the typography for the captions and filters.<\/p>\n

\"typography\"<\/p>\n

Step 8: Publishing the Design<\/h3>\n

Once you have all the customizations taken care of, you can go ahead and publish the design just like any other. Go to the Don button on the top right corner of the page. Then, click on the Publish button to make your changes live.<\/p>\n

Here is what the final design looks like:<\/p>\n

\"filterable-gallery-custom-link\"<\/p>\n

Winding it Up!<\/h2>\n

There are a lot of layouts & designs that you can make with the Filterable gallery module<\/a><\/strong>. The power of bifurcating the images with just a single click can add a lot of value to your portfolio.<\/p>\n

If you liked this module for Beaver Builder, you can get it with PowerPack Beaver Builder addon<\/a>.<\/p>\n

What do you think of this module? Let us know that by commenting it down below!<\/p>\n","protected":false},"excerpt":{"rendered":"

How you display your work on your website matters a lot! For a photographer or a graphic designer or any other professional, displaying your best work should be done in the best manner as well. But, most of the time, WordPress themes do not offer much editing and customization. To tackle this problem, we designed…<\/p>\n","protected":false},"author":1811,"featured_media":191463,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-189775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/189775"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1811"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=189775"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/189775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media\/191463"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=189775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=189775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=189775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}