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.

Live Preview    Download Section

1

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.

  1. Go to Projects/Add New
  2. Name your project and upload Featured Image
  3. Click Publish

* You can also add project description and more images however for this tutorial we only need Featured Images setup.

2

Add Section, Row and Portfolio Module

For this tutorial we will add row with 1 column and we will place Portfolio Module inside it.

  1. Add new Standard Section and select 1 column layout
3

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

4

Customize Portfolio Module

Open Portfolio Module Settings and customize as following:

  1. In Content tab set Pignation OFF (optionally)
  2. Go to Design tab and select Grid Layout
  3. 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.

4

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.

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

Maciej Ekstedt

Creative Director

Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15

7 Comments

  1. Andy

    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

    Reply
  2. Dehn Merrill

    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.

    Reply
    • Maciej Ekstedt

      Hey Dehn,
      It’s a pleasure to create something nice and share with the community. I’m glad you like it 🙂

      Reply
  3. Kate

    How do you make, upon click, to view larger image?

    Reply
    • Maciej Ekstedt

      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

      Reply
  4. Mitch Powell

    Hi Maciej,
    This is a great tutorial, exactly the way I would like to do my portfolio.
    Thank you,
    Mitch

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Shares

Pin It on Pinterest

Share This
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Get in touch
We are ready to talk about your project. Please leave your message and we will get back to you shortly.
Your Information will never be shared with any third party.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your email has been added successfully.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout