Skip to main content

Posts

Showing posts from October, 2022

How to Add Glass Reflection Effect in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Text Reflection CSS  Snippet selector { -webkit-box-reflect: below 1px linear- gradient ( transparent, transparent, rgba ( 0 , 0 , 0 ,. 5 ) ) ; } Rotation Effect CSS  Snippet selector{ -webkit-transform-origin: center; transform-origin: center; -webkit-transform: perspective(800px) rotateY(-25deg); transform: perspective(800px) rotateY(-25deg); -webkit-transition: 0.8s; transition: 0.8s; } selector:hover{ -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg); -webkit-transition: 0.8s; transition: 0.8s; }

How to Highlight Text in Elementor (Without Plugin) 2022 | WordPress Tutorial 2022

  Video Tutorial Text Highlight Snippet <span style="background:yellow; color: unset"> Your Text Here </span>

How to Add Text Stroke Slide Animation in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Stroke CSS Snippet :root{ --myText : 'Text Stroke Slide'; --textColor: #00FFBD; --textStroke: 1px; --anDuration: 8s; } selector{ -webkit-text-stroke: var(--textStroke) var(--textColor); display: table; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; text-align: center; margin: 0 auto } selector .elementor-heading-title::before{ content: var(--myText); color: var(--textColor); position: absolute; top: 0; width: 0%; height: 100%; text-align: left; overflow: hidden; white-space: nowrap; border-right: var(--textStroke) solid var(--textColor); -webkit-animation:animateX var(--anDuration) linear infinite; animation:animateX var(--anDuration) linear infinite; } @-webkit-keyframes animateX{ 0%,10%,100%{ width:0%; } 70%, 90%{ width: 100%; } }

Add Water Wave Animation on Text in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Heading Stroke CSS selector{ -webkit-text-stroke: 2px #03a9f4; } Wave Animation CSS selector{ -webkit-animation: water 4s ease-in-out infinite; animation: water 4s ease-in-out infinite; } @-webkit-keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%); } 50%{ -webkit-clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); clip-path: polygon(0 80%, 15% 81%, 31% 75%, 41% 68%, 51% 59%, 64% 53%, 79% 53%, 92% 64%, 100% 80%, 100% 100%, 0% 100%); } } @keyframes water{ 0%, 100%{ -webkit-clip-path: polygon(0 80%, 9% 61%, 22% 51%, 41% 53%, 55% 63%, 65% 72%, 76% 78%, 90% 81%, 100% 80%, 100% 100%, 0% 100%)...

How to Add Angled Image Card Hover Effect in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Image Box Widget Code snippet selector{ transform: translateY(-50%); } Image Hover Effect Code Snippet selector{ --width: 2px; --color: #00F1FF; --angle: -7deg; } selector .elementor-widget-divider .elementor-widget-container{ overflow: hidden; transition: all 0.3s ease-in-out; } selector .elementor-widget-divider .elementor-divider, selector .elementor-widget-divider .elementor-widget-container{ position: relative; } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after, selector .elementor-widget-divider .elementor-divider:before, selector .elementor-widget-divider .elementor-divider:after{ content: ""; position: absolute; background: var(--color); } selector .elementor-widget-divider .elementor-widget-container:before, selector .elementor-widget-divider .elementor-widget-container:after{ height: var(--width); width: 100%; ...

How to Add an Overlapping Text Shadow Effect in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial JavaScript code snippet < script src= "https://code.jquery.com/jquery-3.6.0.min.js" >< /script > < script > var $ = jQuery $ ( document ) . ready ( function (){ $ ( '.shadow .elementor-heading-title' ) . each ( function (){ $ ( this ) . html ( $ ( this ) . text () . replace ( /\S/g, '<span>$&</span>' )) }) }) < /script > Text Reflection CSS selector { -webkit-box-reflect: below 10px linear- gradient ( to bottom, rgba ( 0 , 0 , 0 , 0 . 0 ) 0 %, rgba ( 0 , 0 , 0 , 0.1 ) 100 % ) ; }

How to Add Long Image Scroll Effect in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Image Scroll CSS selector { height: 400px; overflow-y: scroll !important; overflow-x: hidden !important; } ScrollBar Color CSS selector::-webkit-scrollbar { width: 4px; background: #777777; } selector::-webkit-scrollbar-thumb { background: green; }

Add 360 Degree Image Rotation in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial JavaScript Code Snippet <style> model-viewer{ width:100%; height: 100vh; } @media (max-width: 1024px) { model-viewer{ height:600px; } } @media (max-width: 767px) { model-viewer{ height:350px; } } </style> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.1.3/webcomponents-loader.js"></script> <model-viewer src="ADD_GLTF_FILE_URL_HERE" shadow-intensity="1" disable-zoom camera-controls auto-rotate > </model-viewer> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

How to Add Rotating Circle Text in Elementor 2022 | WordPress Tutorial 2022

Video Tutorial Code Snippet selector svg{ animation: rotate 20s linear infinite; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

How to Add Reveal Entrance Animation in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial CSS Code Snippet selector{ --speed: 1s; animation: none !important; } selector > *{ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition: all var(--speed) ease-in-out; } selector.animated > *{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }

Add Zoom in Effect on Profile Images in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial JavaScript Code Snippet selector{ overflow: hidden !important; } selector .elementor-background-overlay{ -webkit-transition: all 0.7s !important; transition: all 0.7s !important; -webkit-transform-origin: left; transform-origin: left; } selector:hover .elementor-background-overlay{ -webkit-transform: scale(1.75); transform: scale(1.75); } selector .elementor-column{ opacity: 0; -webkit-transition: all 0.80s !important; transition: all 0.80s !important; } selector:hover .elementor-column{ opacity: 1; }

How to Add Show / Hide any Section on Click in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial JavaScript Code Snippet document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $('.showsection').each(function(i){ $(this).click(function(){ $('.hidesection').eq(i).show(); $('.showsection'); }); }); }); }); </script> <style> .showsection{ cursor: pointer; } .hidesection{ display: none; } </style> }

How to Add Sound Effect on Button in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Sound Effect JavaScript Snippet <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() {   //Audio 1 Starts   var audio1 = new Audio('')   $(".click-sound").mousedown(function() {     audio1.load();     audio1.play();   });   //Audio 1 Ends    }); </script>

How to Add Dark Mode Google Maps In Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial CSS to Add in Section selector:before{ content: ""; position: absolute; width: 100%; height: 100%; background-color: #ffffff; mix-blend-mode: difference; pointer-events: none; }

How to Add Ripped Paper Effect in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial CSS to Add in Widget selector{ position: absolute; width: 100%; height: 100%; mix-blend-mode: lighten; filter: brightness(1.2); }

How to Add Background Music in Elementor 2022 | WordPress Tutorial 2022

  Video Tutorial Do you want to add background music in Elementor? This Elementor tutorial will show you how to add background music in Elementor. Learn how to add background music in Elementor | WordPress Website 2022 JAVA SCRIPT Code Snippet <iframe style="display: none;" src=""></iframe> <audio id="myaudio" autoplay="autoplay" loop="loop" controls="controls"> <source src="**paste url here**" type="audio/mp3" /> </audio> <script>   var audio = document.getElementById("myaudio");   audio.volume = 0.2; </script>

Click Button to Change Image in Elementor Pro 2022 | Elementor Tips and Tricks

  Video Tutorial CSS to Add in Section selector{ position: absolute; width: 100%; height: 100%; mix-blend-mode: lighten; filter: brightness(1.2); } Button Attribute data-showme|IMAGE-ID-NAME Image Show/Hide JavaScript Snippet <script src= "https://code.jquery.com/jquery-3.6.0.min.js" ></script> <script> var $ = jQuery $ ( document ) . ready ( function ( ) { $ ( '[data-showme]' ) . on ( 'click' , function ( ) { var showme = $ ( this ) . attr ( 'data-showme' ) $ ( '.img-all' ) . hide ( ) $ ( '#' + showme ) . show ( ) } ) } ) </script>