How To Create A Mobile App Menu On Elementor

mobile app menu

https://youtu.be/7iJz3km-nwM Create Your Glass Effect Here: glassmorphism.com Mobile Section /*Mobile section*/ selector{ position: fixed; width: 100%; bottom: 0px; background: rgba( 0, 0, 0, 0.85 ); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); } Icon Box selector{ background: rgba( 0, 0, 0, 0.35 ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); […]

Create A Glass Flip Box On Elementor With CSS

elementor glass flip box

https://youtu.be/uTF3vlRlhqU Create Your Glass Effect Here: glassmorphism.com Front Side .elementor-flip-box__front{ background: rgba( 255, 255, 255, 0.20 ); backdrop-filter: blur( 3.0px ); -webkit-backdrop-filter: blur( 3.0px ); border-radius: 10px; border: 1px solid rgba( 255, 255, 255, 0.18 ); padding: 30px; } Back Side .elementor-flip-box__back{ background: rgba( 255, 255, 255, 0.20 ); backdrop-filter: blur( 3.0px ); -webkit-backdrop-filter: blur( […]

Add A Glass Effect To Your Header On Elementor

Glass

https://www.youtube.com/watch?v=7oLmhU-34N8 Create Your Glass Effect Here glassmorphism.com Elementor Pro Add this code in your header section CSS selector{ position: fixed; width: 100%; background: rgba( 255, 255, 255, 0.10 ); backdrop-filter: blur( 2.5px ); -webkit-backdrop-filter: blur( 2.5px ); } Free Version Of Elementor 1. Add this css class to header section css classes sticky-header 2. Add […]

Elementor Pro Single Product Page Tutorial | Custom Woocommerce Shop #2

maxresdefault

Make sure to watch my previews video to have a better understanding. Elementor Pro Shop Page Tutorial & Ele Custom Skin | Custom Woocommerce Shop #1 CSS: /* Product Gallery*/ .woocommerce div.product div.images img { display: block; width: 70%; height: auto; box-shadow: none; margin: auto; } .woocommerce div.product div.images .flex-control-thumbs { position: relative; margin: 50px […]

Elementor Pro Shop Page Tutorial & Ele Custom Skin | Custom Woocommerce Shop #1

Elementor Pro Shop Page Tutorial Ele Custom Skin Custom Woocommerce Shop

Download Images & Fonts: Download Now Plugins Used: Ele Custom Skin Advanced Custom Fields Product Info: CSS: .woocommerce div.product.elementor .quantity .qty { display: none; } #1 Leather Watch 42 MM, Silver New Model 2021 Price: $200   #2 Rose Gold Watch 43 MM, Rose Gold New Model 2020 Price: $400     #3 Silver Watch […]

Elementor WooCommerce Menu Side Cart

Elementor WooCommerce Menu Side Cart

CSS: /* Floating cart quantity bubble */ .cc-compass-count { background-color: #fe3b21; /* Bubble color */ } /* Floating cart icon */ .cc-compass .licon::before { font-family: “Font Awesome 5 Free”; font-weight: 900; content: “f07a”; font-size: 25px; /* Cart icon size */ } /* Header cart quantity bubble */ span.cc_cart_count { margin-left: -20px; margin-top: -20px; background-color: #fe3b21; […]

Elementor Pro Slider Widget Custom Styling

Elementor Pro Slider Widget Custom Styling

CSS: /*Box Slider*/ .swiper-slide-contents { background-color: #000000AD ; /* Box Color*/ padding: 100px 100px 100px 400px; } h3 { /* Slider Sub Heading*/ font-size: 25px; font-family: “Roboto”, Sans-serif; font-weight: 500; padding-bottom: 20px; } .eicon-chevron-right { background-color: white; /* Right Arrow Background Color*/ padding: 10px; margin-right: 20px; } .eicon-chevron-left { background-color: white; /* Left Arrow Background […]