andrea egli
andrea egli
  • 117
  • 727 212
GSAP STACKING IMAGES - Elementor Wordpress Tutorial Flex Container
Easy and effective, this effect is the fairy dust you need for your website :)) Jokes aside, this is pretty dope!
CODE: ohwow.club/how-to-create-a-stacking-image-effect-with-gsap-in-elementor/
Timestamps:
00:00 Intro
00:36 Demo
09:23 Outro
Thank you for watching!
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=204254&brand=elementor
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - www.linkedin.com/in/egliandrea/
INSTAGRAM - studio.egli
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
zhlédnutí: 642

Video

MASTERCLASS: OPTIMIZING PERFORMANCE IN ELEMENTOR - It's Not What You Think!
zhlédnutí 1,5KPřed 12 hodinami
Grab a coffee and listen up: we're diving into how to optimize your website from start to finish. Don't skip this-there are some golden nuggets in here, including one I didn't even know about! Timestamps: 00:00 Intro 02:05 The DOM! 04:12 Why use Figma (plan your layout) 04:12 Actionable steps! 06:41 I didn't know this! :)) 07:30 Elementor Element types 08:18 How to flatten the HTML 08:45 Let's ...
GSAP PRELOADER WITH COUNTER & IMAGE - Elementor Wordpress Tutorial Flex Container
zhlédnutí 1,4KPřed 16 hodinami
In this video, we explore making a preloader with an image and counter with GSAP. CODE: ohwow.club/how-to-create-a-preloader-with-counter-and-an-image-with-gsap-in-elementor/ Timestamps: 00:00 Intro 00:48 Demo 12:20 Outro Thank you for watching! 🟠 TRY ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 TRY HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH ME www.studioegli....
STARTING WITH THE BEST MANAGED WORDPRESS HOSTING
zhlédnutí 446Před dnem
In this video, we will look at Cloudways, managed cloud hosting. We are going through a quick intro about the product and how easy or difficult it is to set it up for first-time users. PROMO CODE: andreaegli for $15 free hosting credits Code applied to the signup link below: platform.cloudways.com/signup?id=1737379&coupon=andreaegli&data1=ancwa Timestamps: 00:00 Intro 05:05 Demo 14:08 Outro Tha...
FLOATING BUTTON FEATURE FROM ELEMENTOR
zhlédnutí 2,4KPřed 14 dny
In this video, we will have a look at the new floating button feature from Elementor. You can see it in action here: ohwow.club/ Timestamps: 00:00 Intro 01:43 Demo 17:53 Outro Thank you for watching! 🟠 GET ECOMMERCE HOSTING BY ELEMENTOR be.elementor.com/visit/?bta=204254&nci=5693 🟠 Shoptimizer theme: www.commercegurus.com/product/shoptimizer/ 🟠 Conversion tool for WooCommerce: www.commercegurus...
MOVING IMAGES ON SCROLL - Elementor Wordpress Tutorial Flex Container
zhlédnutí 2,6KPřed 14 dny
In this video I will show you how to make a moving sequence of images on scroll. No code is required, just the Elementor *pro native functionality ;) Timestamps: 00:00 Intro 01:07 Demo 09:47 Outro Thank you for watching! 🟠 TRY ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 TRY HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HE...
OFF-CANVAS WIDGET FROM ELEMENTOR - DEMO INCLUDED - Elementor v. 3.22
zhlédnutí 2,3KPřed 14 dny
In this video, we will look at the off-canvas widget from Elementor. This video includes a demo build of an off-canvas menu. Timestamps: 00:00 Intro 01:46 Guided tour of the off-canvas widget 01:46 Demo building an off-canvas menu 20:11 Outro 🟠 GET ECOMMERCE HOSTING BY ELEMENTOR be.elementor.com/visit/?bta=204254&nci=5693 🟠 Shoptimizer theme: www.commercegurus.com/product/shoptimizer/ 🟠 Convers...
GSAP CLICK ON CONTAINER TO SHOW GALLERY OF IMAGES & VIDEOS - Elementor Tutorial Flex Container
zhlédnutí 2,1KPřed 21 dnem
CODE: ohwow.club/how-to-show-images-and-videos-on-the-container-click-in-elementor-with-gsap/ Timestamps: 00:00 Intro 00:41 Demo 07:40 Outro Thank you for watching! 🟠 TRY ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 TRY HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HERE TOO TWITTER - @AndreeaEgli LINKEDIN - www.linkedin.co...
ECOMMERCE HOSTING BY ELEMENTOR - PLANS REVIEW
zhlédnutí 516Před 21 dnem
In this video, we will have a look at & chat about the eCommerce Hosting by Elementor, specifically their plans. Useful links mentioned in the video: 🟠 GET ECOMMERCE HOSTING BY ELEMENTOR be.elementor.com/visit/?bta=204254&nci=5693 🟠 Shoptimizer theme: www.commercegurus.com/product/shoptimizer/ 🟠 Conversion tool for WooCommerce: www.commercegurus.com/commercekit/ 🟠 GET ELEMENTOR PLUGIN be.elemen...
GSAP LOGO SWAP THE MARQUEE RE-IMAGINED - Elementor Wordpress Tutorial Flex Container
zhlédnutí 2,7KPřed 28 dny
In this video, I will show you how to make a logo swap grid with the grid widget from Elementor and GSAP. This effect is versatile as it can be used to swap images too. Also, the effect is disabled on mobile, there's no need to set up anything in Elementor as this is done in the code itself. Set it and forget it type of thing ;) CODE: ohwow.club/how-to-create-a-logo-swap-grid-in-elementor-with-...
ELEMENTOR NEW ELEMENT CACHING FEATURE - Elementor v. 3.22
zhlédnutí 2,3KPřed měsícem
In this video, we will look at & chat about the new Elementor v3.22 feature update, specifically the element caching. Timestamps: 00:00 Intro 00:11 Short intermission/talk about Elementor hosting 01:15 Talking about the Elementor element caching feature 03:03 How to activate the element caching feature 05:56 Outro Thank you for watching! 🟠 GET ELEMENTOR HOSTING be.elementor.com/visit/?bta=20425...
GSAP STACKING CONTAINERS - Elementor Wordpress Tutorial Flex Container
zhlédnutí 4,2KPřed měsícem
CODE: ohwow.club/how-to-create-stacking-containers-on-scroll-with-gsap/ FONT artist: www.behance.net/rajputraj www.behance.net/rajputrajesh rajputrajesh-448.gumroad.com/ Timestamps: 00:00 Intro 00:40 Demo 09:52 Outro Thank you for watching! 🟠 GET ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 GET HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH ME www.studioegli.com/ ...
IMAGE OPTIMIZER BY ELEMENTOR PLUGIN FEATURES - DEMO INCLUDED
zhlédnutí 1,1KPřed měsícem
In this video, you will learn to optimize images on your WordPress website using the Image Optimizer Plugin, the ultimate solution for faster load times. Timestamps: 00:00 Intro 00:25 Features demo 08:18 Image optimization demo 12:29 Outro Thank you for watching! 🟠 GET THE IMAGE OPTIMIZER BY ELEMENTOR PLUGIN bit.ly/4b8344U 🟠 GET ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 WOR...
SCRAMBLE TEXT ANIMATION ON LOAD/HOVER/INFINITE - Elementor Wordpress Tutorial Flex Container
zhlédnutí 2,3KPřed měsícem
CODE: ohwow.club/how-to-create-shuffle-scramble-text-effect-in-elementor/ Timestamps: 00:00 Intro 00:50 Demo 10:54 Outro Thank you for watching! 🟠 TRY ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 TRY HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HERE TOO TWITTER - @AndreeaEgli LINKEDIN - www.linkedin.com/in/egliandrea/ INS...
ELEMENTOR HOSTING & THE FIRST WEBSITE I EVER BUILT ON IT - STORY TIME
zhlédnutí 641Před měsícem
ELEMENTOR HOSTING & THE FIRST WEBSITE I EVER BUILT ON IT - STORY TIME
GSAP DROPDOWN MENU - Elementor Wordpress Tutorial Flex Container
zhlédnutí 3KPřed 2 měsíci
GSAP DROPDOWN MENU - Elementor Wordpress Tutorial Flex Container
GSAP HERO EXPERIENCE ON LOAD & ELEMENTOR PERFORMANCE IMPROVEMENTS IN V.3.21 - Flexbox Container
zhlédnutí 4,8KPřed 2 měsíci
GSAP HERO EXPERIENCE ON LOAD & ELEMENTOR PERFORMANCE IMPROVEMENTS IN V.3.21 - Flexbox Container
GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container
zhlédnutí 4,5KPřed 2 měsíci
GSAP FULL-SCREEN MENU (OFF-CANVAS) - Elementor Wordpress Tutorial Flex Container
DESIGN COMPETITION - DOORS OPEN FOR SUBMISSIONS!!!! 🥳 WIN PRIZES!
zhlédnutí 1,2KPřed 2 měsíci
DESIGN COMPETITION - DOORS OPEN FOR SUBMISSIONS!!!! 🥳 WIN PRIZES!
GSAP IMAGE TRAIL EFFECT - Elementor WordPress Tutorial Flex Container
zhlédnutí 2,5KPřed 2 měsíci
GSAP IMAGE TRAIL EFFECT - Elementor WordPress Tutorial Flex Container
GSAP CHANGE IMAGE ON HOVER WITH CLICKABLE LINKS - Elementor WordPress Tutorial Flex Container
zhlédnutí 4,3KPřed 2 měsíci
GSAP CHANGE IMAGE ON HOVER WITH CLICKABLE LINKS - Elementor WordPress Tutorial Flex Container
Dynamic Logo Change Using CSS Difference Blending Effect - Elementor WP Tutorial Flex Container
zhlédnutí 2,9KPřed 3 měsíci
Dynamic Logo Change Using CSS Difference Blending Effect - Elementor WP Tutorial Flex Container
GSAP LOGO SHRINK ON SCROLL - Elementor Wordpress Tutorial Flex Container
zhlédnutí 3,5KPřed 3 měsíci
GSAP LOGO SHRINK ON SCROLL - Elementor Wordpress Tutorial Flex Container
GSAP HERO SECTION SCROLL EXPERIENCE - Elementor Wordpress Tutorial Flex Container
zhlédnutí 7KPřed 3 měsíci
GSAP HERO SECTION SCROLL EXPERIENCE - Elementor Wordpress Tutorial Flex Container
GSAP HORIZONTAL SCROLL WITHOUT PLUGIN - Elementor Wordpress Tutorial Flex Container
zhlédnutí 14KPřed 4 měsíci
GSAP HORIZONTAL SCROLL WITHOUT PLUGIN - Elementor Wordpress Tutorial Flex Container
GSAP SCROLL TRIGGER CONTENT WITH PINNED IMAGES - Elementor Wordpress Tutorial Flex Container
zhlédnutí 4,1KPřed 4 měsíci
GSAP SCROLL TRIGGER CONTENT WITH PINNED IMAGES - Elementor Wordpress Tutorial Flex Container
GSAP FLIP GRID CONTAINER TO FLEXBOX ON BUTTON CLICK - Elementor Wordpress Tutorial Flex Container
zhlédnutí 3,5KPřed 4 měsíci
GSAP FLIP GRID CONTAINER TO FLEXBOX ON BUTTON CLICK - Elementor Wordpress Tutorial Flex Container
3D CAROUSEL EFFECT WITH SVG SHAPES - Elementor Wordpress Tutorial Flex Container
zhlédnutí 3,9KPřed 4 měsíci
3D CAROUSEL EFFECT WITH SVG SHAPES - Elementor Wordpress Tutorial Flex Container
EFFORTLESS Landing Page Creation with FRAMER
zhlédnutí 2,9KPřed 5 měsíci
EFFORTLESS Landing Page Creation with FRAMER
SCROLL IMAGE TIMELINE TO SECTIONS - Elementor Wordpress Tutorial Flex Container
zhlédnutí 5KPřed 5 měsíci
SCROLL IMAGE TIMELINE TO SECTIONS - Elementor Wordpress Tutorial Flex Container

Komentáře

  • @ThomasTilahunp
    @ThomasTilahunp Před 5 hodinami

    always you are hero b/c always you are my solution🎉❤❤❤❤❤❤❤

  • @mudasirazhar
    @mudasirazhar Před 7 hodinami

    "Stay in Column" i have not this option Then how I can fix

  • @ThomasTilahunp
    @ThomasTilahunp Před 7 hodinami

    thank you very much

  • @gaetanosorangelo4550
    @gaetanosorangelo4550 Před 8 hodinami

    I tried to play with this new feature but I don’t understand why if I chose WhatsApp, in the frontend when I click on start a conversation it opens WhatsApp desktop app instead to write in the floating chat box!

  • @wp-web-love
    @wp-web-love Před 8 hodinami

    ❤ andrea egli beautiful i love you. My Deaf ❤ like your teacher. I am learning

  • @user-ip4wd2qx6q
    @user-ip4wd2qx6q Před 11 hodinami

    hey, i tried this and it works but once you refresh the page its static again and wont stack while scrolling

  • @JMT1227
    @JMT1227 Před 11 hodinami

    Thank you!!! I've been trying to find a code that actually worked for hours. I modified it to fit my needs and it works exactly as I hoped.

  • @prokassim
    @prokassim Před 13 hodinami

    Thank you for awesome tutorials, and hope to see more of them.

    • @andreaegli
      @andreaegli Před 13 hodinami

      You are very welcome! Every week ;)

  • @BurakKhan-j5x
    @BurakKhan-j5x Před 14 hodinami

    Hi, Love your content. Can you make some videos related to API integrations and how to use different APIs in WordPress with Elementor.

    • @andreaegli
      @andreaegli Před 14 hodinami

      Thank you so much 😊 that’s actually a great idea, will do! Any APIs you have in mind?

    • @BurakKhan-j5x
      @BurakKhan-j5x Před 13 minutami

      @@andreaegli Like Rest API, Fetching data ones etc. Custom. Also please make more full website tutorials like you have made before, its amazing.

    • @BurakKhan-j5x
      @BurakKhan-j5x Před 11 minutami

      @@andreaegli Also some core WordPress custom coding with Php with Jquery.

  • @AmitBhardwaj-n9c
    @AmitBhardwaj-n9c Před 15 hodinami

    Hey I tried what you mentioned in the tutorial but that dosen't seems to be working for me.

    • @andreaegli
      @andreaegli Před 14 hodinami

      Get the json file from the link in my bio: ohwow . club/templates

  • @NicoRenner-w3i
    @NicoRenner-w3i Před 17 hodinami

    The link to the Header is not in the description :(

    • @andreaegli
      @andreaegli Před 16 hodinami

      Here you go: czcams.com/video/sYD1GtxgLfM/video.html

    • @NicoRenner-w3i
      @NicoRenner-w3i Před 16 hodinami

      @@andreaegli Thank you :)

  • @user-je8nu5er7c
    @user-je8nu5er7c Před 17 hodinami

    yes! new vid

  • @teuccio73
    @teuccio73 Před 17 hodinami

    Come on Girl !!!!

  • @andrescarrizo9480
    @andrescarrizo9480 Před 18 hodinami

    I love u

  • @rajivsharma4221
    @rajivsharma4221 Před 20 hodinami

    Can you explain how we can use any video to scroll UP & Down when we use slide bar from mouse

    • @andreaegli
      @andreaegli Před 14 hodinami

      You need a JavaScript code snippet

  • @medvin5370
    @medvin5370 Před dnem

    great idea for cardss didi.....!!!!!!!!

  • @gabrielanulak9897
    @gabrielanulak9897 Před dnem

    That's one wonderful tutorial! Super duper helpful. How do I make the edges fade though.. I've been trying soooo many different code snippets and can't get anything to work. Do you have any idea? I'm using this function to display companies I've worked with, but the abrupt cut off where the container ends doesn't look too good.

  • @edgarlacson
    @edgarlacson Před dnem

    Thank you. Amazing work you have!

  • @EliasLopezXD
    @EliasLopezXD Před dnem

    love it (me encanta)

  • @vishalsolanki5807
    @vishalsolanki5807 Před dnem

    loved it thanks 👌

  • @dovenobertinca4029

    Hi, first thanks for this amazing feature. But I have a question if thats will be ok, I have already a builded website and when I apply this all the buttons will be disable after that, I'm not able to click for the nexts steps. I have already a preloader and what you think that can be a problem. Thank you in advance!!

    • @andreaegli
      @andreaegli Před dnem

      You are very welcome! Hmm, can't see why this code would disable buttons. What other preloader do you have, is it custom coded, do you have that running while this one is running too? There could be so many things causing this issue...

  • @rafaelmoura910
    @rafaelmoura910 Před 2 dny

    👍👍👍

  • @wp-web-love
    @wp-web-love Před 2 dny

    ❤ andrea egli you love Smooth Scroll Custom Scrollbar Gsap js code I am new video waiting. "Screen refresh rate 120 Hz like smooth"

  • @ferrywap
    @ferrywap Před 3 dny

    Please i have a request, ive been working on a project and I'm having different giving cards/inner child container a gradient box shadow and a gradient border. i have a parent container>child container>4 inner child container (cards). please can you help with a solution?

  • @AS_DESIGNSTUDIO
    @AS_DESIGNSTUDIO Před 3 dny

    can you make a tutorial on how to create a functional custom contact form in elementor?

    • @andreaegli
      @andreaegli Před 3 dny

      Not sure I understand what you mean by that? Fully coded or…?

    • @AS_DESIGNSTUDIO
      @AS_DESIGNSTUDIO Před 3 dny

      @@andreaegli i mean a Contact form in elementor where i can costumize the style for example of the input box, border, background... not fully coded. i tried Contact form 7 but its not so free to costum

  • @user-je8nu5er7c
    @user-je8nu5er7c Před 3 dny

    im collecting some of your vids so that I can use them :)

  • @wp-web-love
    @wp-web-love Před 3 dny

    ❤ hello andrea egli you love my deaf gsap js code beautiful learing thanks 😊😊😊

  • @wp-web-love
    @wp-web-love Před 3 dny

    ❤ hello andrea egli you love my deaf gsap js code beautiful learing thanks 😊😊😊

  • @wp-web-love
    @wp-web-love Před 3 dny

    ❤ hello andrea egli you love my deaf gsap js code super learing thanks 😊😊😊

  • @wp-web-love
    @wp-web-love Před 4 dny

    ❤ hello andrea egli you love my deaf gsap js code super learing thanks 😊😊😊

  • @SubhanQasid
    @SubhanQasid Před 4 dny

    Subhan is here

  • @SubhanQasid
    @SubhanQasid Před 4 dny

    Hi Ma'm ❤

  • @mtsgmedia
    @mtsgmedia Před 4 dny

    Love your vids, by far the best explained on CZcams! Keep the GSAP vids coming! lol

  • @sm786
    @sm786 Před 4 dny

    Hi andrea need thumbnail designer at cheap rates?

    • @andreaegli
      @andreaegli Před 3 dny

      It at the moment, thanks

    • @sm786
      @sm786 Před 3 dny

      @@andreaegli welcome

  • @tareknnassar
    @tareknnassar Před 5 dny

    You can also offload media to 3rd party location like object storage s3 from Amazon or r2 from cloudflare

  • @nabaa_ataib
    @nabaa_ataib Před 5 dny

    you are the best thnx , i follow you from algeria

  • @samwillun
    @samwillun Před 5 dny

    My current plan is to separate the front and back, use object storage and CDN, all the images before uploading are losslessly compressed into webp format, the container does not exceed 4 layers, the animation is almost not used, the localization of Woff2 fonts, according to the architecture of wordpress, either use all the features of the theme, or follow the style of the editor, can not be opened at the same time, and can almost achieve a speed of more than 96 score

    • @andreaegli
      @andreaegli Před 5 dny

      While I agree with this strategy to some extent you cannot apply it to every project. I have clients who want heavily animated projects. We need to find a balance in all of this madness 😄 we definitely cannot go to building websites like in the early 2000s just because we cannot hit a score of 90. It’s definitely a lot harder to build amazing website than it was a few years ago

    • @samwillun
      @samwillun Před 3 dny

      ​@@andreaegli So currently, to achieve animation that is dynamically friendly and lightning-fast, we can only use the Astro + TailwindCSS + Headless WordPress method. I believe this will also be the biggest trend in the future. Let’s work hard together, my dear.🥰

  • @user-je8nu5er7c
    @user-je8nu5er7c Před 5 dny

    this is very useful

  • @arnaudduthoit9886
    @arnaudduthoit9886 Před 5 dny

    I think there is a problem for downloading the JSON file... I've got a blank page for every order on lemonsqueezy

  • @thenewyorkean
    @thenewyorkean Před 5 dny

    After I touched Breakdance, Elementor became automatically a very very disturbing past I want to forget.

  • @user-je8nu5er7c
    @user-je8nu5er7c Před 5 dny

    Done

  • @kamessytta
    @kamessytta Před 5 dny

    Bravo! 😊👏👏👏🥰

  • @thewebstylist
    @thewebstylist Před 5 dny

    SO looking forward of course to seeing your amazing latest Andrea, I was literally just going to bed 3am here in Pasadena/LA Cali fyi not the ideal live time for us in the US/West Coast but luv ya 100 and your amazing talents… ok I have to be up in 5 hours so clockin out 100, will look forward to this vid post when happens Wonder Woman!

  • @lauvtyler9146
    @lauvtyler9146 Před 5 dny

    First ❤

  • @AdityaSingh-ni7vn
    @AdityaSingh-ni7vn Před 5 dny

    Make a video on adding custom preloader with own logo animation

  • @Hzenny
    @Hzenny Před 6 dny

    hi, im late and idk if ill get a reply from you but.. how do you make those popups? i am confused if its some code or a lightbox, is there a guide i can check out for that effect? Also great work!

  • @martinnorton5091
    @martinnorton5091 Před 6 dny

    I love this solution, thank you so much, I have been wrestling with methods to achieve this all afternoon! Also I have added to it with a bit of css to remove the outer borders entirely (to suit my project): .elementor-loop-container { position: relative; overflow: hidden; } .elementor-loop-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 2px white; z-index: 1; pointer-events: none; } .elementor-loop-container > * { position: relative; z-index: 0; }

  • @fabiannavarro-h1j
    @fabiannavarro-h1j Před 6 dny

    Hi Andrea, I love this, however, when implementing it and browsing the page in the same session, returning to the home page loads the preloader again. Is there a way to only show it in the first session?

  • @nabaa_ataib
    @nabaa_ataib Před 6 dny

    please without music

  • @cyriellegeralda3935

    I was searching for it and ive done it and love it Thank you so