How to Use Divi’s New Opacity Filter Option to Create a Stunning Team Section

Posted on January 23, 2018 by in Divi Resources | 28 comments

How to Use Divi’s New Opacity Filter Option to Create a Stunning Team Section

Divi’s built-in options allow you to create endless stunning and unique designs. Whatever type of website you might be building, you can adjust the settings to meet your website’s and visitors’ needs seamlessly. In this post, in particular, we’re going to show you how to make use of the new opacity filter to achieve a beautiful team section for your next project or own website. To bring this tutorial to a good end, you will be needing the following:

  • A subtle background image that will be part of your entire row(s)
  • Team member pictures that have a subtle background, a width of ‘800px’ and a height of ‘455px’

Result

Before we dive into the tutorial, let’s take a look at the example we’ll be showing you how to recreate, step by step.

On Desktop

opacity

On Tablet

opacity

On Mobile

opacity

Add a Standard Section

Background Color

The first thing you’ll need to do is add a new standard section to an existing or new page. Once you’ve added the new section, change the background color into ‘#a8a8a8’ or any other color of choice within the Background subcategory.

opacity

Spacing

Then, move on to the Design tab of your section and add the following custom padding to the Spacing subcategory:

  • Top: 115px
  • Right: 0px
  • Bottom: 115px
  • Left: 0px

opacity

Add Row

Column Structure

Continue by adding a new row with two equal columns to your section.

opacity

Background Color

Open the row settings and choose ‘#666666’ as the row background color.

opacity

Background Image

Then, add a subtle gradient background and apply the following settings:

  • Background Image Size: Cover
  • Background Image Position: Center
  • Background Image Repeat: No Repeat
  • Background Image Blend: Overlay

opacity

Alignment

Move on to the Design tab and use a center Row Alignment next.

opacity

Sizing

Then, open the Sizing subcategory, enable Custom Gutter Width and use a value of ‘1’ for your row’s Gutter Width.

opacity

Spacing

Next, move on to the Spacing subcategory and make sure all the padding options are set to ‘0px’. This will ensure that, once you clone the row further down this post, you won’t have any space between your rows.

opacity

Box Shadow

Last but not least, add the following box shadow to your row:

  • Box Shadow Horizontal Position: 0px
  • Box Shadow Vertical Position: 2px
  • Box Shadow Blur Strength: 18px
  • Box Shadow Spread Strength: 0px
  • Shadow Color: rgba(0,0,0,0.71)

opacity

First Text Module

Text Settings

Once you’re done with your row settings, you can start adding the various modules to both columns. Start off by adding a Text Module to the first column with the following text settings:

  • Text Font: Default
  • Text Font Weight: Regular
  • Text Size: 11px
  • Text Color: #dbdbdb
  • Text Orientation: Center

opacity

Sizing

Then, open the Sizing subcategory and make the following changes:

  • Width: 61%
  • Module Alignment: Center

opacity

Spacing

Lastly, add a top padding of ’60px’ to the Spacing subcategory.

opacity

Second Text Module

Text Settings

Right below the previous Text Module you’ve created, add another Text Module with the following text settings:

  • Text Font: Aladin
  • Text Font Weight: Regular
  • Text Size: 70px
  • Text Color: #FFFFFF
  • Text Orientation: Center

opacity

Spacing

Move on to the Spacing subcategory and use the following custom padding as well:

  • Top: 50px
  • Bottom: 0px (Desktop), 120px (Tablet & Phone)

opacity

Filters

Last but not least, change the opacity filter option in the Filter subcategory to ‘40%’ to make your row background and Image Module melt together.

opacity

Image Module

Image Dimensions

As mentioned in the intro of this post, we’ll be using specific image dimensions for the team member images that are part of this tutorial. To achieve the exact same result, use a width of ‘800px’ and a height of ‘455px’. Go ahead, add an Image Module to the second column and upload an image of one of your team members.

Filters

Then, move on to the Design tab and open the Filters subcategory. Play around with the different options you have until you achieve a desired result. In this example, we’ve made the following changes to the Image Module:

  • Contrast: 122%
  • Opacity: 45%

opacity

Clone Row

Now, once you’ve finished a row entirely, you can clone it to create the second version of the row.

opacity

Change Background Color

The first thing of the cloned row we’ll change is the background color. We’re choosing a slightly lighter background overlay color, ‘#adadad’, to make the rows somewhat different from each other.

opacity

Change Position of Modules

We’re also going to change the position of our modules. Place your Image Module in the first column and both Text Modules in the second column.

opacity

Change Image

Then, change the image your using for your Image Module. Make sure this image has the same dimensions as your previous image (preferably a width of ‘800px’ and a height of ‘455px’.

opacity

Change First Text Module

Since we’re using a lighter background overlay for this row, we’ll need to use a darker text color as well so the text remains readable. Change the color of the first Text Module to ‘#5b5b5b’.

opacity

Change Second Text Module

The second Text Module needs a darker as well, change it to ‘#000000’. We’re using the darkest color there is to make sure our text is still readable after adding the opacity filter.

opacity

Clone Rows as Many Times as Needed

You can now clone both rows as many times as needed to match with the number of team members you want to showcase on your page. The custom padding we’ve added to the row settings will make sure that, no matter how many similar rows you use, it will still look like an entity.

Result

Let’s take a final look at the example we’ve shown you how to recreate in this post.

On Desktop

opacity

On Tablet

opacity

On Mobile

opacity

Final Thoughts

In this post, we’ve shown you how to use Divi’s new opacity filter option to create a stunning team section for your next project or own website. The example we’ve shown you how to recreate has a great balance between written content and visuality. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

28 Comments

  1. Only looks great desktop imo.

    • Hi Richard,

      If there were a demo view, the demo would look good on mobile, IMO.

      Cheers

      • One of the drawbacks of Divi’s Section -> Row -> Module system is that when a page stacks you run into an issue where if you’re using more than two sets your images or text start stacking on top of each other rather than tiling to follow the flow of text block -> image block. Instead you get a text block -> image block -> image block -> text block -> text block and so on. It is one of the most annoying factors of their columns layouts. It is also one of the most commonly requested advancements in the system. You either have to use extra copies of the rows that only appear on tablet or mobile or you have to use a ton of CSS to modify the layout on tablet and mobile. Both methods are total crap for a solution when it comes to good semantic code and web design. Divi is very good and quite powerful, however, it is still very flawed in some areas.

    • I think they need to increase the opacity for mobile version. Almost none.

      • David, can you explain what you mean by “tiling to follow the flow of text block -> image block”? An image example would be helpful also.

        • Les, fairly straightforward and I completely agree with David. Columns in a row always stack left on top, right on bottom in tablet/mobile. In some cases, such as the above, one would want the second row to stack in the reverse order (right on top) to maintain a consistent flow [text-image-text-image].

          A feature such as swap column order on mobile — or in the case of 3+ columns, choosing the order — would be great addition to Divi.

          My solution thus far has been to use CSS flex or grid to change the order in which columns stack on mobile.

          • In this example, you’d have to duplicate the rows, change the order to the desired stacking order and use the visibility options to get a more logical look on mobile.

            It’s indeed something I too dislike about Divi’s structure, as it means that because the content is duplicated, the pages’ sizes increase as well.
            On top of that, it can become a bother to maintain without resorting to saving the modules as global items, which really shouldn’t be necessary just to make maintenance (fixing typos etc.) easier.

            • I would tend to introduce flex on the columns to solve this.

              I believe the Divi team may be working on adding extra functionality to rows/columns, like Elementor, whereby you can drag a divider to adjust the widths of each column. Elementor has a swap columns option for mobile, so that would be something to be added to Divi.

              Having flex to hand though is also useful, as you can do more interesting things with it.

              I hear the complaints, and while I appreciate that having all those options at the click of a switch is useful, a) it can take time for a dev team to implement them and b) (as frustrating as this may seem) if you want to have these features you may have to be prepared to dig in and do it your self.

              • I perhaps agree with your argument about the stacking order on mobile. However it would have been just as easy to dupe that row, swap the modules and disable desktop and tablet using the visibility options, which, and correct me if I’m wrong, is Divi’s option to changing the views on different devices.

                However, and more to the point of my concerns, I thought the premise of Donjete’s exercise, was to demonstrate the new opacity filters and not web design. David’s argument was, I think, a cheap shot and totally off topic. I sometimes wonder why guys like him use Divi if it has so many faults

                • yes if u don’t mind the bit of white space it creates underneath because the hidden rows aren’t fully hidden, or the way the divi builder sometimes messes up when you try to live edit a page with hidden sections.

                  The simple fact is divi looks rubbish on tablets and in most cases on mobile too.

                  You have no choice but to use css grid and flex if you don’t want a ten mile long page with massive images everywhere.

                  • You don’t need to add another row to achieve text > image / text > image when the desktop view is text > image / image > text.

                    The way I would do this is duplicate the text on the second row and place it before the second row image but only show on mobile (and hide what is now the second text block on mobile).

                    This way you are not adding additional rows only one block of text.

                • Presumably because he’d like it to be even better. This issue about stacking issues seems pertinent to me in a demo focussed on stacked modules. We all love new glossy features on Divi but perhaps addressing this stacking issue and (my own bugbear) global setting of H1-Hx tags might actually help the developer do their job.

                  There is probably a commercial/development reasons for this but IWBN if ET actually said so.

  2. Lovely

  3. Great but it it would have been nice with a real demo preview……

  4. The continuous improvements to the Divi platform are exciting. I look forward to seeing the designs made by the community in 2018.

  5. Another good trick to do in a column. Would love to see some demo of it.

  6. I don’t think the font used is Aladin. So any idea which one it really is?

    • Nevermind, I found it. It is Allerta Stencil.

  7. It would be nice to see a demo, looked interesting but not interesting enough to make me want to build it without seeing a demo first.

  8. Hi,

    Thanks for the awesome layout. it would be very helpful if you people give theses layouts for downloads, it will save a lot of time.

    Thanks,
    Makarand

  9. A demo please – Or even better a download x

  10. Good grief you lot. Just follow the directions and you will all have your own ‘demo’…!

    You should not even need this post. Open up a new page and play with the settings and try and learn to do some of this stuff for yourself… I still have not got over how many people said they were going to use the web design agency layout for their own ‘design firm’ website. Unbelievable!

  11. Great! If anyone wants the .json, I have a download link

    • Great Stephanie, please share the .json download link.

  12. Great Stephanie, please share the .json download link.

  13. Hey guys, It would be great to get these in downloadable form so we could directly upload them to sites we’re working on. Helps us save time, and would be a valuable resource/addition to the Divi Layout Pack offerings. Thanks for everything, keep it up.

    -A

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest