Create A Frosted Glass Background Effect With Elementor Page Builder

Create A Frosted Glass Background Effect With Page Builder. Elementor is a great free WordPress page builder plugin. There is a free version as well as a paid version of Elementor.

In this series of videos, we will be building some great elements on our WordPress website with the Elementor builder. In this video we are going to create a section with an image background. A row with a single column, this will be used as the background for the frosted glass effect. On top of the row we can place any module to display your message on top of the background. This a very eye-catching effect to have on your Elementor website.

Add an icon module

There is a small bit of coding involved today to build this feature. Any code I write I will put below for you to use as you need. So, follow along and see how easy it is to create a frosted glass background to a row on a page built with the awesome free version of Elementor page builder.

Add a button

For more information on the Elementor page builder plugin check out our Elementor playlist below.

My Elementor Video Playlist : https://www.youtube.com/watch?v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q

Elementor Hover Effects Playlist: https://www.youtube.com/playlist?list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2

Get Elementor From Here:

Add a background color to the row

———- CODE USED TODAY ———-

 .frosted {
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}

Add frosted effect CSS code

———- VIDEO CHAPTERS ———-

00:00 Intro

00:57 Create New Section

01:11 Add An Icon Box Module

01:22 Add A Button

01:49 Set Background Image

02:45 Add Section Padding

03:14 Style Icon Module

05:29 Style Button

06:37 Add Column Background

08:01 Add CSS Code

09:03 Code For Elementor Pro

12:48 Code For Elementor Free

13:32 Result

Add CSS code to the theme customizer for Elementor Free Version

———- RECOMMENDED PLAYLISTS ———-

Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB

Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco

WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e

Result