How To Create the Glass Effect in the Divi WordPress Theme With 4 Steps

April 5, 2022

Tory Barber

Glass Effect in Divi

Before We Begin

In case you missed it in the title, this tutorial will be using Elegant Theme’s Divi. I’d recommend purchasing this theme before you begin.

Full disclosure, I am an affiliate with Divi. There will be links through this article (and many of my others :p) that will help you purchase the Divi Theme if that is what you’re interested in.

These links are what allow us to provide you with awesome tutorials every week, and when you make a purchase through them it really helps to support the website.

Ok, back to the tutorial 🙂

1. Create the structure

  • Add a section to your page
  • Add a row inside the section
  • Add the elements you’d like in that row
Basic Structure for Divi Glass Effect

2. Style your elements

Ensure you add a section background. 

The glass effect is only as good as its background

Ensure you add colour to your row’s background. 

    White is the traditional choice, but this will work with any background colour

    Stylized Elements

    3. Add an opacity to row’s background

    Adding Transparency to Row

    4. Add CSS blur effect to row’s custom CSS

    • Navigate to your rows settings.
    • Click Advanced > Custom CSS
    • Add CSS blur effect
    [et_pb_dmb_code_snippet code=”LXdlYmtpdC1iYWNrZHJvcC1maWx0ZXI6IGJsdXIoNXB4KTsKYmFja2Ryb3AtZmlsdGVyOiBibHVyKDVweCk7″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_dmb_code_snippet]
    Add Blur CSS
    Tory Barber Headshot Thumbnail

    About Me

    Hi I’m Tory!I’m a Graphic Designer, Web Developer, and AI OBSESSED artist from good ol’ Canada, eh!I record all the things I learn as I dive deeper into the Generative AI rabbit hole so I can teach people like you!

    Follow Me

    Prompt Inspo In Your Inbox!

    Latest Articles

    Latest Posts

    Dall-e 3 Announcement Breakdown

    Dall-e 3 Announcement Breakdown

    OpenAI just announced that they will be releasing Dall-e 3 in the fall. Learn when you can get access and what Dall-e 3 improves on the latest model.