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.

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.
Get 10% discount with coupon code SLIDER10

4 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

Submit a Comment

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

Pin It on Pinterest