Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part eight of this series, I am going to talk about the new and creative ways you can use semi-transparent background colors in Divi.
Introducing Color Pickers With Alpha Sliders
In Divi 2.4 we introduced new color pickers with alpha controls. These let you select and input RGBa color values.
What is RGBa?
RGBa is a color value that is defined by its RGB value plus an alpha value, which is what that little ‘a’ stands for. You can think of the alpha value as an opacity value.
For example…
Black can by represented in a couple different ways: #000000; or rgb(0,0,0);
We can use a third method that looks like this: rgba(0,0,0,1); where the 1 represents its opacity on a scale of 0 – 1. Using this scale we can create a 50% transparent black with rgba(0,0,0,0.5);
How Transparent Background Colors Can Add More Flexibility To Your Site
Adding a bit of transparency to background colors is a quick way to achieve a cohesive color palette. You can see below that true black on true white is a bit harsh, and that dark and light grays are a little easier on the eyes. You might be asking yourself, “Why not just use a solid gray value then?”. That’s a good question, and hard to argue, until you start adding colored backgrounds into the mix. A slightly transparent black when it’s on a white background is simply a dark gray, but turns into a dark blue on a blue background.
You can see that semi-transparent black can look the exact same as a dark gray when it’s on a white background, and how a semi-transparent white can look the same as a light gray, but when you you move to a colored background, the benefit of an rgba value is more apparent. This is a good thing to keep in mind when choosing background colors for the elements on your page.
Transparent Module Backgrounds
In Divi 2.4, modules now have a Background Color setting in their Advanced Design tabs. This means different things for different modules. For example, the background color of a Call-To-Action module controls the background color of the module’s entire container, whereas the the background color of an accordion module controls the background color of the individual toggles. Here are a few examples.
Use Transparent Backgrounds for Slider Slides
In the example below, I used transparent background colors for each slide in my slider. I then added a background image to the section that can show through due to the transparency.
This is what the background color picker looks like in the context of an individual slide
Use Transparent Module Background Colors To Create A Cohesive Color Palette
When adding modules with a background color to a section that already has a background color, it can be hard to make those two colors work well together. And when you do get those colors to work nicely, what happens when you change your background color?
One easy way to make these work together is to use a semi-transparent background color on the module. If you want it to be slightly darker than the section color, use a semi-transparent black. If you want it to be slightly lighter than the section color, use a semi-transparent white. This removes the trouble of choosing cohesive background colors and makes it much easier to update your section background in the future. In these examples I used 25% black and 25% white.
Full Transparency
The Contact Module is a good example of a module that works well with a transparent background color. It even looks great when you use full transparency and add a border using Divi’s new border options. In the example below, I even use a semi-transparent border color so that a bit of the background shows through.
This is what theses settings look like the the Advanced Design Settings of the Contact Form Module.
Add A Transparent Background Color to Help Your Modules Stand Off A Background Image
Often times we want the best of both worlds. Those worlds are often times text and image. Unfortunately these two things don’t always work well together, but thanks to the alpha color pickers, it’s easy to remedy this dilema with a quick module background color. Note that I added 40px of custom padding to each module below so that the content doesn’t crash into the sides of the module.
This use of transparent color can also be really cool when using a parallax effect on your background image.
Let’s Take This Example One Step Further
In the example above, I used the same alpha value for all three modules. Let’s see what happens when I turn this into a fullwidth row, remove the column gutters, and mix up the alpha values.
In this example, I have also set the row and section padding to 0 for a true gutterless look.
Use Full or Semi-Transparent Background Colors In your Navigation Header
You can now add transparency to your navigation background colors. Read more about how to customize your header navigation.
Even Columns Can Have a Background Color!
Giving a column a background color is really convenient if you have multiple modules in a column and you want them all to sit on top of a background color. Rather than giving each module a background color, you can simply customize the column they are in. Given that this post is about transparency, here is an example of how you can use semi-transparent column backgrounds to create a beautiful image overlay.
To achieve this look, I have given the section a parallax background image, added a two column row with a semi-transparent background color on column 2, and placed a simple text module into the right column with a bit of custom padding for extra breathing room.
Making the row fullwidth, removing the column gutters, and give the row/section zero padding values can give this layout a whole new look.
Customize The Gallery, Shop, and Portfolio Module Hover Overlays
Customizing the hover overlay of gallery images, portfolio projects, and shop products is easily doable with the new alpha pickers. Say you want the overlays to match an accent color of your brand, you can now choose a semi-transparent overlay color for your hover state.
The alpha pickers in Divi are yet another small addition that can make a big impact on your website’s design. Combined with all of the new features in Divi 2.4, we are really excited to see what you are going to create next. Make sure to post your own examples in the comments if you’ve already had the chance to deep dive into the update.