Create Interactive Portfolio Section Using Blurb Modules in Divi

Are you looking for a way to show off your latest web design work, but are not happy with the default Divi portfolio module? Checkout this tutorial on how to create a custom portfolio section using blurb modules, and sign-up to get the layout completely FREE!

I’ve never felt satisfied with the default Divi portfolio module. As a Web Designer trying to display my work, I find it very limiting with not only the layout, but also the fact you have to link it to a portfolio item without the option of an external link.

This got me thinking of ways I could build a portfolio section using different Divi modules.

The blurb module is one of the most versatile Divi modules. The combination of an image, title, and body text can be used for so many different things. And with just a little bit of CSS magic you can turn the default blurb module into a really cool portfolio item. Here’s how…

View Demo →

Subscribe to download free section →

1

Create a section

Create a new section, add a row with 2 columns. Its up to you the column widths, but for this example I used the 3/5ths and 2/5ths option.

2

Setup your row

In the the row settings, add a background image to both columns. These images will be used as the background for each portfolio piece.

In the design tab, select “gutter-width: 2” in the sizing options.

Also in the design tab, in the spacing options, give it a bottom padding of 8px.

In the custom css tab, add “portfolio-column” to each columns custom css class box.

3

Add a blurb module

Add a blurb module to one of the columns. Give the blurb the following settings:

– Title: this will be the title of your portfolio piece
– Content: short description of the project
– In the image & icon area, remove the image
– In the background section, hover over “add background” until the mouse icon appears above, then select “hover”. Now add a semi-transparent background. For this example I’ve used: rgba(23,23,51,0.9)
– Add a module link to your project, making sure to select the “Open in new tab” option
– In the design tab, set your text to “Light”, then style to fit in with the rest of your website
– In the advanced tab, add the custom css class “portfolio-blurb”

4

Add 2nd portfolio item

Copy and paste the blurb into the 2nd column, and update the info with your 2nd project.

5

Add the 2nd row

Clone your first row so you’re now displaying 4 projects. If you’re following along with the layout from this guide, I also switched the column structure to have the thinner column first.

In the row settings, update the column background images for your 3rd and 4th projects.

Update both blurb settings in the new row for your 3rd and 4th projects.

6

Save!

Save and publish the page.

IMPORTANT: At this stage you’ll just have a blurb with a background image, so I wouldn’t recommend doing this on a live page. Saying that, I wouldn’t recommend doing any sort of experimental updates on a live page!

If you are, then do this step after step 8.

7

Add custom CSS

Add the code below into your child theme style.css (or the custom css tab of your Divi Theme Options):

8

Save CSS

Save the CSS settings and you’re done!

View Demo→

Subscribe to download free section →

Let us know in the comments below if you liked this free module! Your feedback gives us motivation to create new products and freebies. And if you have any suggestions about what we could make for you next, let us know!
Andy Hooke

Andy Hooke

Andy is a self-taught web designer who now specialises in the Divi theme. He comes from a html & css coding background, and enjoys taking these skills to see how far he can customise Divi and create websites which don’t look like your standard Divi websites.

To celebrate the launch of Divi Testimonial Slider 1.5, we're giving away 15% off. Get advantage of this special offer before it's too late!
Use coupon code SLIDER15 at checkout!

16 Comments

  1. Jitendra

    Very good useful post. Thanks.

    Reply
    • Maciej Ekstedt

      You welcome Jitendra 🙂 I hope it will be useful!

      Reply
  2. Victor

    Looking crisp, thanks for sharing!

    Reply
  3. Jacob Jizics

    Thank you so very much Andy for sharing precious information with us. It really helps.

    Reply
  4. Gianni

    Thats great! I was just looking for this features since weeks!

    What if I would like to have more than 2 columns? What should I change in the CSS code, a part addin the class for third coloumn too?

    Reply
    • Maciej Ekstedt

      Hi Gianni,

      It’s no problem. Just select the number of columns you want and make sure to add custom CSS class to each column (see step 2).

      Reply
  5. Tony Sampson

    This looks great, any suggestions for getting a similar result with a Filterable Portfolio?

    Reply
  6. Shane

    Very Nice tutorial Andy, defiantly will be using this one. Is there any chance you could do some unique footer layouts?

    Reply
    • Andy Hooke

      Thanks Shane -that’s a great idea!

      Reply
  7. Hurri

    Very cool… I’ve enjoyed your last few posts very much, thanks!

    Reply
  8. Claudio Muzi

    Thanks for the tutorial. Just a few question, maybe I miss something:
    1. How do you round the corner pictures (I have all squared)?
    2. I don´t understand in step 3 what you refer to “hover” under “add background” I do not have that option. I do not see the transition to blue you have in your demo
    3. It doesn´t open other page when I click “View Project”. I need it open other page with more pictures. How must it be configuered? Why do you mentione in step 3 add a module link … “open in a new tab”.

    Reply
    • Andy Hooke

      Hey Claudio! In response to your first question, in Step 2 you add the class “portfolio-column” to each of the columns, and this has styling attached which rounds the corners.

      For question 2: if you hover over the background color option icons will appear above. Click the one which looks like a mouse and you’ll see the “hover” toggle to set the hover background setting.

      (You need to be on the latest version of Divi and using the front-end builder for this option).

      For question 3: This is a setting in the blurb module in the “content” tab. If you don’t see this option it means you’re on an older version of Divi and need to update.

      Hope that all helps!

      Reply
  9. Chuck

    Thanks for the great tutorial. I do have one question. I would like to display the project category in place of the “View Project” text. Is there a way to insert a call for the project category via CSS? I’ve spent several hours and have turned up no help at all. Thanks!

    Reply
    • Andy Hooke

      Hey Chuck – glad you like the tutorial! To change the “View project” text, you need to find this part of the CSS:

      .portfolio-blurb:after {
      content: ‘View project →’;
      position: absolute;
      opacity: 0;
      bottom: 0;
      transition: all 0.4s;
      }

      And update the content part inside the ‘ ‘. Hope that helps!

      Reply
  10. Jamie Rowland

    Brilliant ‘Tutorial’ – I will definitely be using this…

    Reply

Submit a Comment

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

Sign up to our newsletter list

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood