Elementor How To Create A Frosted Glass Background Effect. 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 youer Elementor website. 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
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
My Blog : https://web-design-and-tech-tips.com
———- CODE USED TODAY ———-
.frosted {
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
———- 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
———- 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
———- RECOMMENDED VIDEOS: ———-
Bootstrap 4 Complete One Page Scrolling Website Tutorial : https://www.youtube.com/watch?v=JWmzgixLUUY
Elementor WordPress Builder One Page Scrolling Site In 15 Minutes: https://www.youtube.com/watch?v=CsNmVouqt38
Bootstrap – How to edit a bootstrap template: https://www.youtube.com/watch?v=_yFy5Zw2BQc
Divi Add a live facebook feed to your divi or any wordpress website: https://www.youtube.com/watch?v=4KReMpWdEz8
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: https://www.youtube.com/watch?v=mNDtB86_hGU
Elementor WordPress Builder How To Build A Parallax Section: https://www.youtube.com/watch?v=aXoCtPAJiGk
———- SOCIAL MEDIA ———-
Follow what I’m doing on:
Facebook: https://www.facebook.com/system22.net/
Twitter: https://twitter.com/22ITSolutions1
Linkedin: https://www.linkedin.com/in/jamie-henry-546b7377/
Support the channel: https://paypal.me/system22
Courses I teach: https://www.udemy.com/user/jamiehenry2/
Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q
#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite