Cool GSAP Scroll Effect In Elementor | Rounded Edges On Scroll
https://youtu.be/rQErAwH_Exw Javascript Code
GSAP Text Stroke Animation In Elementor Pro
https://youtu.be/iuoO4XYdNRM Make sure to add the class load-container to your section. HTML Code WordPress CSS Code /* Adjust for desktop*/ .loader text { font-family: Spartan; font-size:5rem; font-weight: bold; word-break: break-all; stroke: #000; stroke-width: 2px; line-height: 7rem; } .loader svg { width: 480px; height: 110px; } /* Adjust for tablet */ @media(max-width:1024px){ .loader text { font-family: […]
Elementor Button Hover Fill Effect With Custom CSS
https://youtu.be/bh_lASwY3UY IMPORTANT! – Make sure your button is set to inline positioning and has a class of my-btn CSS Code /*Fill box*/ .my-btn .elementor-button::before{ content:”; position: absolute; background: black; /*
Shrink Section On Scroll With GSAP & ScrollTrigger In Elementor Pro
https://youtu.be/QkYJM-hbqw0 Source Code
Elementor Icon Box Hover Effect | WordPress Hover Card CSS
https://youtu.be/i91NyzjIZ38 Regular Hover Card /*icon box border radiues*/ selector .icon-box{ border-radius: 10px; } /*icon box circle style*/ selector .icon-box .elementor-icon:before{ content: ”; position: absolute; background: #4054B2; /*
Hide Product Prices For Users On WooCommerce
https://youtu.be/4_xiZdE_No4 PHP Code // Hide prices add_action(‘after_setup_theme’,’magik_activate_filter’) ; function magik_activate_filter() { add_filter(‘woocommerce_get_price_html’, ‘magik_show_price_logged’); } function magik_show_price_logged($price) { if(is_user_logged_in() ) { return $price; } else { remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 ); remove_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 ); return ‘Login to order’; } } //Option Two (If you decided to use Option One then don’t add the following […]
Elementor Background Overlay On Mobile & Tablet
https://youtu.be/lmO1xAs7NBc CSS Code – Elementor Pro Version /*Tablet background Overlay Elementor Pro*/ @media(max-width:1024px){ selector.elementor-element > .elementor-background-overlay { background-color: transparent; background-image: linear-gradient( 80deg, #000000 20%, #F2295B00 80%); opacity: 0.79; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; } } /*Mobile background Overlay Elementor Pro*/ @media(max-width:767px){ selector.elementor-element > .elementor-background-overlay { background-color: transparent; background-image: linear-gradient( 180deg, #000000 20%, #F2295B00 […]
Add Icons To Your Elementor Form Fields With CSS
https://youtu.be/8qHZfpG2z-s Font Awesome fontawesome.com CSS Code /*placeholder spacing*/ selector form.elementor-form .elementor-field-group-email input, .elementor-field-group-name input, .elementor-field-group-phone input, .elementor-field-group-message textarea{ padding-left: 50px; } /*Icon box settings*/ selector form.elementor-form .elementor-field-group-email::after, .elementor-field-group-name::after, .elementor-field-group-phone::after, .elementor-field-group-message::after { position: absolute; left: 5px; top: 28px; bottom: 0px; width: 40px; height: 40px; background: #000; content: “”; z-index: 99; } /*Icon size & position settings*/ […]
Elementor Carousel & Slider Glass Effect
https://youtu.be/vhaJZw2d1E4 Create Your Glass Effect Here: glassmorphism.com Testimonial Carousel CSS .elementor-widget-testimonial-carousel .swiper-slide { 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 ); } Review Carousel CSS .elementor-widget-reviews .swiper-slide{ background: rgba( 255, 255, 255, 0.20 ); backdrop-filter: blur( 3.0px […]
Create A Portfolio Scroll Image Effect On Elementor | No Plugins | Javascript
https://www.youtube.com/watch?v=yDRD4PvCYrE CSS Classes: Image Class: website-img Box Container: website-box CSS: /* box container */ .website-box { height: 300px; overflow: hidden; } /* website image position */ .website-img img{ object-fit: contain; object-position: 0px 0px; transition: object-position 6s ease; } Javascript
