Skip to main content

Posts

Showing posts from December, 2022

How to Add Vertical Text in Elementor 2023 | Elementor Tips and Tricks 2023

Video Tutorial CSS Snippet for Vertical Text 1 selector .elementor-widget-container{ transform: rotate(-90deg); } CSS Snippet for Vertical Text 2 selector { word-break: break-all; }  

How to Make 3D Tilt & Glare Effect using Elementor FREE 2023 | Elementor Tricks 2023

Video Tutorial Javascript Snippet for 3D Tilt & Glare Effect <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js"> </script> <script type="text/javascript"> VanillaTilt.init(document.querySelectorAll(".effect"), { max: 16, speed: 500, scale: 1, glare: true }); </script>  

How to Create Card Slide-Down Animation On Hover with Elementor 2023 | Elementor Tricks 2023

  Video Tutorial CSS snippet for Card Slide-Down Animation selector{ height: 480px; transition: all 0.4s ease-in-out !important; } selector:hover{ height: 630px; } .text{ margin-top: -300px !important; transition: 0.30s ease-in-out; transition-delay: .1s; } selector:hover .text{ margin-top: unset !important; }

How to Create Animated Scroll Down Icon/Button in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial CSS snippet for Scroll Down Animation selector .elementor-button-text { position: relative; top: 3px; width: 3px; min-height: 8px; display: block; background: black; border-radius: 5px; -webkit-animation: 1.2s ease infinite wheel-up-down; animation: 1.2s ease infinite wheel-up-down; } selector .elementor-button-icon{ display: none; } selector a:focus{ outline: none; } @-webkit-keyframes wheel-up-down { 0% { opacity: 0; } 30% { opacity: 1; } 100% { -webkit-transform: translateY(18px); transform: translateY(18px); opacity: 0; } } @keyframes wheel-up-down { 0% { opacity: 0; } 30% { opacity: 1; } 100% { -webkit-transform: translateY(18px); transform: translateY(18px); opacity: 0; } }

How to Add Blured Background Image in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial CSS Snippet for Blurred Image selector:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 1; } selector .elementor-container{ z-index: 1; }