Elementor How To Create A Frosted Glass Background Effect 👍👈👈👍
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 : • Elementor WordPress Plugin Full Width...
Elementor Hover Effects Playlist: • Elementor Hover
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: • Elementor Ecommerce Store Woocommerce...
Divi Snippets: • Divi 4 Snippets Divi Theme Overview 👍
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store Theme Setup An...
Bootstrap 4 Basics: • Bootstrap 4 Basics Index Page and Ext...
Elementor: • Elementor Wordpress Builder Install A...
WordPress Tips: • Wordpress 2020 Theme Customize The Pa...
--------- RECOMMENDED VIDEOS: ---------
Bootstrap 4 Complete One Page Scrolling Website Tutorial : • Bootstrap 4 Complete One Page Scrolli...
Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: • Elementor Wordpress Builder One Page ...
Bootstrap - How to edit a bootstrap template: • Bootstrap - How to edit a bootstrap t...
Divi Add a live facebook feed to your divi or any wordpress website: • Divi Add a live facebook feed to your...
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: • Divi 4 Theme How To Build A Multi Pag...
Elementor Wordpress Builder How To Build A Parallax Section: • Elementor Wordpress Builder How To Bu...
--------- SOCIAL MEDIA ---------
Follow what I'm doing on:
Facebook: / system22.net
Twitter: / 22itsolutions1
Linkedin: / jamie-henry-546b7377
Support the channel: https://paypal.me/system22
Courses I teach: https://www.udemy.com/user/jamiehenry2/
Subscribe: / @system22
#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite
