Exploring Divi 2.4: How To Use Semi-Transparent Colors Creatively Throughout Your Website

Posted on June 25, 2015 by in Resources | 64 comments

Exploring Divi 2.4: How To Use Semi-Transparent Colors Creatively Throughout Your Website

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.

Learn All About Divi 2.4 Here

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);

transparent-color-picker

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.

transparent-rgba-diagram

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.

transparent-slides

This is what the background color picker looks like in the context of an individual slide

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?

transparent-cta-bg

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.

transparent-cta-bg2

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.

transparent-contact-form

This is what theses settings look like the the Advanced Design Settings of the Contact Form Module.

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.

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.

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.

nav-example-1

nav-example-2

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.

transparent-column2

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.

transparent-column

Making the row fullwidth, removing the column gutters, and give the row/section zero padding values can give this layout a whole new look.

Live Demo

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.

transparent-hover-overlay2

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.

64 Comments

  1. Absolutely beautiful!!! Thank you so much for breaking down all this info … the Divi update is really something special! Nicely done guys!!!

    • I’m going to ask a really stupid question to other members… please bare with me. 🙁 Is the only way to add a button through the “Call to Action” module??
      lol… I might be completely overlooking something! 🙂 Thanks.

      • Yes, you can use html code when you add text but use “text” instead of the “visual” editor or use the brand-new “code” module. The code will be like this: Click Me!
        or like this:

        Continue
        …. check form in html resources to see other options,

        • sorry this form does not allow to insert code

      • Hi Janet!
        It’s not a stupid question at all! 🙂
        “Call to Action” module is one of the ways you can add a button to your website. It really depends where that button goes on your website. There also options to add CTA buttons within the Standard/Full-width Slider Modules.

      • there’s an “add ET button” using text module or other modules where you can add content, hope that helps too 🙂

        • Yeah but they are awful looking, look nothing like the theme. Can anything be done about that?

      • I also miss the opportunity to make single buttons

      • Regarding buttons…
        Thanks everyone for your input, much appreciated! 🙂

    • You explained how to make a transparency in the photos. I would be grateful if you explain how to make a video slider “similar”.
      The problem is that the video is too light and it would be desirable shade.
      Of course it would be possible to
      handle the video.
      But if I have the opportunity to apply a transparent layer mechanisms Divi, then why not. Thank you in advance for your reply

      • Even I am looking for this. Can anyone reply if that is possible. Else I have to look for options to do external tools.

  2. FYI, there’s a mistake with the Live demo link.

  3. I love the new background colors and transparency settings! I ESPECIALLY love the Background Color Overlay option in header images. It makes it SO nice and easy to add a splash of color without having to fire up Photoshop every time I need to make a small change.

    I would love to see it spread to other modules. Anything that has a Background Image/Color should have the Background Color Overlay option as well.

    Amazing work with Divi 2.4. You should all be very proud.

    • YES! YES! … The background color overlay is fantastic. It would be great to have it available on pretty much everything.

  4. Seems New Divi 2.4 is a colorful package for all wordpress needs.

  5. Is there a possibility to add several menus? Have two upper menus?

    • You could create a child theme and a special template file that will allow you put DIVI in the header.

      Then you can have any number of full width menu modules you want…

      • I tried this but there’s a conflict between the transparent color setting of the Fullwidth Section and the transparent color setting of the Fullwidth Menu Module.

        The transparent color set in the Module overlays the (transparent color) Fullwidth Section so you see the Module background show up as a darker color.

        I’ll post this in the forum:

        https://carpetcleaninghaddontownship.info/forum/viewtopic.php?f=187&t=441662

  6. I love using semi transparency in my designs. Being able to do it within the theme as opposed to Photoshop will make life easier and open up many new possibilities.

  7. I cannot wait to set aside some time to play with this. I used to find the me customisation time consuming and cumbersome. Thank God ET and of course Divi 2.4.

    Keep up the great work.

  8. What if I want 3 different pics in slider and still have semi transparent background for whole slides? Is this possible right now?

  9. Where are the instructions to make the transparent header? I didn’t see them on the linked site.

  10. always been a fan of full/semi transparency backgrounds..;)

  11. The first thing I tried was the transparent overlay in my slider as per your example….

    “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.”

    It does not work for me. It seems like if the background color were on top of the background image and I set the alpha to 100%, I wouldn’t be able to see the image. Am I missing something here?

    Thanks for the great theme and new version 2.4!

    • That’s the point of this post. Your background colors do not need to be 100% visible. You can make them semi-transparent, letting the background image show through.

      If you set the alpha slider to 100%, then nothing will be visible behind it.

      • What I was trying to say is it does not work for me. If I set the background color to rgba(43,132,209,0.5) all I see is the background image with no color overlay. If I take out the background image and leave the background color at .5 alpha I can see the the transparency over the body background color (#fff) so it just looks like a light blue.

      • Hi Nick,
        What I was trying to say is it does not work for me. If I set the background color to rgba(43,132,209,0.5) all I see is the background image with no color overlay. If I take out the background image and leave the background color at .5 alpha I can see the the transparency over the body background color (#fff) so it just looks like a light blue.

      • Sorry I did not mean to reply twice.

      • When I follow the instructions in this blog for creating a transparent overlay on top of a background image in a slider, the transparent color does not appear in Chrome, Safari or Firefox.

        Thank you for your patience and help.

        • The BG image is applied to the section, not the slider. Is that how you set it up?

          • Okay…Got it.

            Thanks! I Love the effect!

            • I could be confused here but what I think people want to know is can we make a semi transparent layer over top of slider images?

              I’ve been using the following CSS to add areas for the Title & Body text on a slider.

              .et_pb_section {
              padding-top: 0;
              padding-bottom: 0;
              }

              .container::before {
              display: none;
              }

              /* Set the semi-transparent background color */
              .et_pb_slide_content,
              .et_pb_slide_description h2,
              .et_pb_more_button_wrap {
              background-color: rgba(0,0,0,0.5);
              }

              /* Hide the content area if empty */
              .et_pb_slide_content:empty {
              visibility: hidden;
              }

              /* Add 30px of padding to the background */
              .et_pb_slide_description h2 {
              padding: 30px 30px 10px !important;
              margin-top: -30px;
              margin-left: -30px;
              margin-right: -30px;
              }

              .et_pb_slide_description .et_pb_slide_content,
              .et_pb_more_button_wrap {
              padding: 0 30px 30px !important;
              margin-left: -30px;
              margin-right: -30px;
              }

              @media only screen and ( max-width: 479px ) {
              .et_pb_slide_description h2 {
              padding-bottom: 30px !important;
              }

              .et_pb_more_button_wrap {
              display: none;
              }
              }

              /* Give the background rounded corners */
              .et_pb_slide_description h2 {
              border-top-left-radius: 15px;
              border-top-right-radius: 15px;
              }

              .et_pb_slide_description h2 {
              border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;
              }

              @media only screen and ( max-width: 479px ) {
              .et_pb_slide_description h2 {
              border-bottom-left-radius: 15px;
              border-bottom-right-radius: 15px;
              }
              }

          • I’ve tried too.

            In the slide parameters, I’ve added a background image and a background color with transparency and it doesn’t work.

            The color is “under” the image, so we don’t see it.

            Thank you for your help.

    • I don’t understand the point of a slider if every slide has the same background image.

      It would be better if each slide can have a separate image, and then a color overlay (maybe even the same dark color) can be applied to all slides and actually overlay the individual background images.

  12. Every thing is just amazing at ET.

    Can anyone let me know which tool is used to create gif images (above)?

  13. Hats off. Take a bow. Roses into the ring. Kudos.

    The Divi upgrade has changed the game for me. Just when I was considering hiring someone to do what the Divi upgrade now allows me to do for myself.

    My favorite thing isn’t the theme itself, it’s the company. The read me guides and videos are priceless. I LOVE LOVE LOVE that you include design concepts in the vids, not just how to configure each module. Learning creative ways to use these tools will expand the already immense value of this theme.

    I will def shout Carpetcleaninghaddontownship from the rooftops and have already spread the word to my local web community.

    THANK YOU!

  14. I love the new semi-transparent backgrounds, and have already started working with this. There is one thing I am having trouble with though and would appreciate if anyone has any thoughts on how to accomplish this.

    I have created a 4 column section, with image backgrounds. I then inserted blurbs into the columns, made them equal height and it looks fantastic. However, there is one problem, the content of the blurbs is not equal height so the semi-transparent overlay does not completely overlay the blurbs at certain resolutions, due to the varied content of the individual blurbs.

    Anyone know how to force the blurb overlay to fill the height of the columns in this scenario? If anyone cares to check it out look at the four blurbs near the bottom of jamesturner.xyz

    I would love to have the semi-transparent background of the blurbs fill the entire column.

    One thing I have found that works is setting a minimum height and using only three columns, because the responsive break points seem to work just fine in this scenario.

    • Hi James,

      Our support team is available to offer advise for these kind of questions. If you could, please open a new ticket in the forum and we’ll be happy to assist you 🙂

  15. Hi Nick,

    There is a bug with Primary navigation bar when transparency is being used.

    When I choose black and transparent it ends up being grey (white background comes up behind it). If you choose blue, red or any other colour it will end up being a lighter shade.

    Just wanted to see if you were aware of it and if you have any idea when it will be fixed.

    Cheers,

    Shane

  16. Great post. Learn lots of new things from the post. Keep it up.

  17. My language (Estonian) is not supperted, thats why I always work with the .po file. This time there are some issues, can you please (double) check those files.

    Some phrases dont “translate”, like contact form and post comment meta data.

  18. Great post about a great theme!

    But it’s kind of frustrating but I can’t figure it out, how to make a section as described above, with a green parallax background image with a two column row and with a semi-transparent background color on column 2.

    For me, the transparent text area cannot be made with a non-transparent margin surrounding it. Or how to achieve this? I tried following the instructions below the image, but no.

    Help is much appreciated…

    • Sorry about that. Two seconds later I solved it… 🙂

  19. Above article probably should have noted the Text Module DOES NOT support transparency (by design??). However, Blurb, Call To Action, etc. DO.

    Once I realized that, then yes all of the above gorgeous effects became possible!

  20. Is there a way to add the Transparency affect to “Specialty Sections”? The Background colour doesn’t appear to have an Alpha variable.
    I have been adding the effect to other areas throughout the site, but can’t seem to add it to my main section, as its using a Specialty configuration.

  21. I would like to see a code option (with the color picker) to be able to use anything from RGB and hex to full gradients. I’ve already been using RGBa and gradients by not setting any color (Divi 2.0) and adding css classes.

  22. How’s the “MIX & Match” effect achieved here (half way down)

  23. I love the transparent background on slides that “overlays” the background image. I was doing this before with custom CSS, and I’m glad that this is now baked in. Once I updated Divi I noticed that my CSS for this was “broken” and so I was really happy to see that there is an easy way to achieve this. However, I followed the instructions in the article above and my background images are not “tinted” as they should be by adding the transparent background color. What am I missing here? I’d like to get my site back to what it was before the upgrade. TIA

  24. I admit, after the first vision of the theme DIVI updated I did slati of joy, but then using it and trying different implementations for my new websites I am a bit ‘stopped.
    Several modules do not work perfectly and some are in conflict with them.
    For example: if I do fullwide slide in full screen, then all slide make the same dimension. maybe I would get on the same page with different heights slide. Or if I change spaces and line spacing of a text they change all and some even overlap or have different spacings. Maybe this appear only to my desk, but I try with different website where DIVI work.
    In short, the idea is great but is a little bit confused.
    I think it’s bettter to create a blog, a page, where you indicated the css for each different function (at least the ones in frequently use).
    I until now, thanks to your perfect service, I have always done so and I was perfectly . Then, in this way you could change the css of each item or page, so as to be completely independent.
    Your work is great and very important and your theme and your support timely and accurate. Keep it up, you are great. Thanks

  25. Great post… I am learning so much with these tutorials! Keep up the great work ET.

  26. It sure would help if you would include screenshots for these setups. Thank you

  27. How do I change the color os the SHOP products Hover?
    I see I can change on the Portfolio and on the Gallery. But for the Shop Module Customizer it doesnt show the ICON / BACKGROUND color option…

    Thanks, Divi is getting better and better!

    • Nathan B. Weller

      Hey Caju, I’d recommend asking specific customization questions in the support forums or in a group like Divi Help and Share on Facebook or Divi Theme Users (also on Facebook).

  28. hallo!
    A little error in image transparent-rgba-diagram.jpg?
    rgba (0,0,0.0.3) > rgba(0,0,0,0.3)

  29. Hallo!

    In image “transparent-rgba-diagram.jpg” there is a small error.
    It is written rgba (0,0,0.0.3). Should be written rgba (0,0,0,0.3).
    Comma, no point.

  30. Hi,

    Is it possible to add Semi-Transparent Background to Divi Slider Text? Can we do it using the “custom css” options?

    Thank you.

  31. We are having an issue with setting up the background for the Contact Us Form with transparency. We also trying to figure out how you cut out the logo for the cafe sample? Is there a tutorial on this or some sort of guidelines to follow? Please and thank you

  32. Yep you can, look at this link for the CSS code.

  33. Am I correct that I can’t use semi-transparent BG colors with unique “slide” BG images? (i.e. if I had three slider “slides”, each with a unique image, I cannot apply a semi-transparent BG color overlay?)

    I’ve seen a few people who’ve asked this, but not sure there is a firm answer that it isn’t possible.

    • Nathan B. Weller

      You cannot add a single background overlay to all slides in a slider. You can however, use the same overlay settings on each individual slide.

  34. It looks like a good article, the images on this post are not displaying so I cannot understand the article and effects

  35. Hey there,

    Does anyone know how to set the header settings to look like the second example above? (the one where the header starts fully transparent, then has a dark semi-transparent background on scroll?

  36. Hi There
    I would like to place a semi transparent background color over the full width map module. My client loves the map as a header but wants to fade it a bit. Thought I could do this by placing a semi transparent color over it. Not sure if I can do this with CSS?

500,591 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