Create A Frosted Glass Background Effect With Elementor Page Builder

by | May 7, 2021 | Elementor Page Builder, Web Design

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

Create A Frosted Glass Background Effect With Elementor Page Builder

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.

Create A Frosted Glass Background Effect With Elementor Page Builder

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.

Create A Frosted Glass Background Effect With 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: http://bit.ly/GetElemrntor

Create A Frosted Glass Background Effect With Elementor Page Builder

Add a background color to the row

———- CODE USED TODAY ———-

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

Create A Frosted Glass Background Effect With Elementor Page Builder

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

 

Create A Frosted Glass Background Effect With Elementor Page Builder
Create A Frosted Glass Background Effect With Elementor Page Builder

Result

For our readers, get any of the below courses for just $9.99 each. Just contact me with the course name and I’ll email you the discount coupon.

Subscribe To Our Newsletter

Join the System 22 mailing list to receive the latest tech tips, deals and updates from our team.

We will never spam or share your email!

You have Successfully Subscribed!

Pin It on Pinterest

Share This