How to Customize Divi Portfolio Module
In today’s tutorial I will show you how to create a beautiful portfolio section for displaying your work in a nice and clean way.
Portfolio is a very important part of every business website. Customers want to see some samples of our work before they will hire us so it is crucial to showcase our work in a pleasant way.
As you know, default Divi Portfolio Module isn’t too attractive but it’s highly customizable. We can change colors, font sizes, overlay icon and overlay color in module customizer but what if we want to add some text animations or repositioning elements? Well we can do that too. With a few lines of CSS we can transform default Divi Portfolio module into a nice Portfolio section with hover effects and animations that will attract your potential customers.
In this tutorial I will show you how to customize Title and Meta Texts. We will hide them by default and make them sliding down on mouseover. We will also add a custom background overlay using CSS brightness filter, so when user hover on portfolio item he will be able to easily read texts. Let’s get started!
- You will need Divi Theme by Elegant Themes installed.
- You can follow this tutorial or download Ready-To-Use Divi Builder section with CSS code embedded.
Add Portfolio items
First thing we need to do is to add Portfolio items to our website so they will be displayed when we use Portfolio module.
- Go to Projects/Add New
- Name your project and upload Featured Image
- Click Publish
* You can also add project description and more images however for this tutorial we only need Featured Images setup.
Add Section, Row and Portfolio Module
For this tutorial we will add row with 1 column and we will place Portfolio Module inside it.
- Add new Standard Section and select 1 column layout
Apply CSS Class and customize Row Settings
In this step we need to apply a few settings that will make our section full width and remove spaces between images. We will aslo add class that will apply Custom CSS to our Portfolio Module.
1. Open Row Module Settings and in Design tab set the following options:
2. Go to Advanced tab and add CSS Class b3_portfolio
Customize Portfolio Module
Open Portfolio Module Settings and customize as following:
- In Content tab set Pignation OFF (optionally)
- Go to Design tab and select Grid Layout
- Set Zoom Icon and Hover Overlay Color to transparentFor this tutorial we don’t want to display icon however you can experiment. Background must be transparent because we will use custom CSS Brightness Filter to execute dark image hover effect.
3. Set Text Color to White and Text Orientation to Center
4. For Title Text we use Montserrat font with Bold option enabled.
5. For Meta Text enable Uppercase Mode and add 1px Letter Spacing.
Adding CSS
In this last step we will add some CSS to the Divi/Theme Options/Custom CSS section or you can just copy and paste it in to your style.css file located in your child theme folder - Appearance/Editor. Make sure to save your work.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/*** B3 PORTFOLIO ***/ .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item h2, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover h2, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover .post-meta, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover img, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item img { -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item h2 { opacity: 0 !important; transform: translateY(-140px); position: absolute; margin: auto; width: 100%; } .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta { opacity: 0 !important; transform: translateY(-130px); position: absolute; margin: auto; width: 100%; } .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover h2 { opacity: 1 !important; transform: translateY(-120px); } .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover .post-meta { opacity: 1 !important; transform: translateY(-90px); } .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item:hover img { filter: brightness(40%) ; } @media only screen and (max-width: 980px) { .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item h2, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta { width: 33.3%; } } @media only screen and (max-width: 768px) { .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item h2, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta { width: 50%; } } @media only screen and (max-width: 480px) { .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item h2, .b3_portfolio .et_pb_portfolio_grid .et_pb_portfolio_item .post-meta { width: 100%; } .b3_portfolio .et_portfolio_image img { width: 100%; } } |
This is it! Thank you for your attention! This was my sixth tutorial and I’ve got more to come! If you enjoy these, please let me know in the comments below.
Maciej Ekstedt
Creative Director
Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15
Just the way tutorials should be… Clear, concise, with pictures so no confusion. Good tutorial with a nice effect. Thanks very much for your efforts. I really like your work.
All the best
Andy
Hi Andy. Thanks for the comment 🙂
Although I still work with Divi every day, maintaining and creating sites still….I haven’t been hanging in the community much….and I still make it a point to catch your tut’s and share them back onto the socials I crawl.
Absolutely love your work and appreciate the time you save me.
Hey Dehn,
It’s a pleasure to create something nice and share with the community. I’m glad you like it 🙂
How do you make, upon click, to view larger image?
Hi Kate, Divi Portfolio module opens project page by default. You could instead use Gallery module to open image lightbox. You would have to tweak CSS, replace this:
.et_pb_portfolio_grid .et_pb_portfolio_item
with this:
.et_pb_gallery_grid .et_pb_gallery_item
Hi Maciej,
This is a great tutorial, exactly the way I would like to do my portfolio.
Thank you,
Mitch