- 151
- 1 033 181
andrea egli
Germany
เข้าร่วมเมื่อ 17 พ.ค. 2022
Hey guys! I'm Andrea and we're building cool stuff here, pushing the limits of Elementor for the most part :))
Elementor, code, Figma...we have it all, come join us!
This channel is ever-evolving so stay tuned for more cool stuff!
Elementor, code, Figma...we have it all, come join us!
This channel is ever-evolving so stay tuned for more cool stuff!
How to FIX & PROTECT a Hacked Website with MalCare
Grab a coffee and let's have a chat about how MalCare, a WordPress security plugin can save your website from attacks and if infected with malware, how to clean it. EASY-PEASY! :)
Timestamps:
00:00 Intro
02:06 Demo
11:40 Outro
Thank you for watching!
🟠 GET MALCARE
www.malcare.com/AndreaEgli/
🟠 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
Timestamps:
00:00 Intro
02:06 Demo
11:40 Outro
Thank you for watching!
🟠 GET MALCARE
www.malcare.com/AndreaEgli/
🟠 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
มุมมอง: 386
วีดีโอ
GSAP 3D MODEL IMPLEMENTATION ON A MINIMAL LANDING PAGE - Elementor Wordpress Tutorial Flex Container
มุมมอง 2.5K12 ชั่วโมงที่ผ่านมา
In this video, I'm showing you how to add a 3D model to your Elementor landing page I think I forgot to mention it. I used a plugin called file upload types from wpforms to add my custom file type .glb and then just uploaded the file to the media library. It worked like a charm ;) Downloadable: ohwow.club/template/ Timestamps: 00:00 Intro 00:02 Elementor E-comm Hosting Core overview 01:32 Showi...
GSAP MINI PORTFOLIO ON ELEMENTOR HOSTING - Elementor Wordpress Tutorial Flex Container
มุมมอง 1.7Kวันที่ผ่านมา
Grab a coffee and let's build this cool GSAP mini portfolio on Elementor Hosting. TEMPLATE: ohwow.club/template/ Timestamps: 00:00 Intro 01:05 The walkthrough of the build 13:36 Saving it as a template 14:24 Importing the template in Elementor Hosting & working it 25:36 Steps to follow to finish your project in Elementor Hosting backend 28:35 Outro Thank you for watching! 🟠 GET ELEMENTOR HOSTIN...
Building an Interactive GSAP one-page website with Elementor, Powered by Cloudways
มุมมอง 3.1K14 วันที่ผ่านมา
Grab a lot of coffee for this one - Ladies and Gentlemen, this is an overview of my design process *sometimes when I need to get things done super fast. Template: It will be ready next week between *04.11-10.11. Check back here! 🟠 GET CLOUDWAYS PROMO CODE: andreaegli for $15 free hosting credits Code applied to the signup link below: platform.cloudways.com/signup?id=1737379&coupon=andreaegli&da...
GSAP SPLITTING TEXT ON SCROLL - Elementor Wordpress Tutorial Flex Container
มุมมอง 1.4K21 วันที่ผ่านมา
heeey! Today we're building another cool GSAP feature inspired by this website: bennettandclive.com/ Have fun! CODE: ohwow.club/how-to-split-two-logo-columns-on-scroll-in-elementor-with-gsap/ Timestamps: 00:00 Intro 00:52 Demo 15:31 Outro Thank you for watching! 🟠 TRY ELEMENTOR be.elementor.com/visit/?bta=204254&brand=elementor 🟠 TRY HOSTINGER hostinger.com?REFERRALCODE=1ANDREEA61 🟠 WORK WITH M...
The Ultimate WordPress Security: How BlogVault Protects Your Site with Reliable Backups
มุมมอง 28621 วันที่ผ่านมา
Today, we're looking at what BlogVault has to offer and that is backups and security and you know I'm a huge fan of both :) so, let's get into it! Timestamps: 00:00 Intro 01:03 Pricing breakdown 04:00 Demo of the Blogvault dashboard & setup 14:13 Outro Thank you for watching! 🟠 20% PROMO CODE - GET BLOGVAULT HERE: blogvault.net/AndreaEgli/ 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HE...
ELEMENTOR AI, IS IT WORTH IT? - Elementor Wordpress Tutorial Flex Container
มุมมอง 99328 วันที่ผ่านมา
Ok, we never talked about Elementor AI, do you think it's worth it? Timestamps: 00:00 Intro 00:26 The prompt library 04:11 Pricing 05:25 Testing & demo 17:38 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 LIN...
How to Launch a Website with Elementor E-Commerce Hosting - Elementor Wordpress Flex Container
มุมมอง 1.1Kหลายเดือนก่อน
Are you curious about what's behind Elementor's e-commerce hosting? Well, we're having a look today, so grab a coffee, and let's begin Timestamps: 00:00 Intro 00:32 Pricing 01:28 Sell Pro plan 01:34 Getting a FREE domain 03:08 Demo 15:23 Outro Thank you for watching! 🟠 GET E-COMMERCE HOSTING BY ELEMENTOR be.elementor.com/visit/?bta=204254&nci=5693 🟠 Shoptimizer theme: www.commercegurus.com/prod...
GSAP IMAGE & VIDEO SMOOTH SCROLL TRIGGER WITH LENIS - Elementor Wordpress Tutorial Flex Container
มุมมอง 3Kหลายเดือนก่อน
Grab a coffee and let's build this cool GSAP Lenis image scroll trigger effect. CODE: ohwow.club/how-to-create-a-buttery-smooth-scroll-trigger-image-video-effect-with-gsap-lenis/ Timestamps: 00:00 Intro 00:38 Demo 13:56 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.studioe...
NEW PLUGIN FROM ELEMENTOR - SITE MAILER
มุมมอง 2.1Kหลายเดือนก่อน
In this video, we will look at how Site Mailer plugin works. Timestamps: 00:00 Intro 00:06 A little intro to eCommerce hosting from Elementor 01:02 Let's talk about the Site Mailer plugin 02:41 Demo 11:22 Outro Thank you for watching! 🟠 GET ELEMENTOR ECOMM HOSTING shorturl.at/UPym6 🟠 GET ELEMENTOR PLUGIN shorturl.at/C4gob 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HERE TOO TWITTER - @...
Speed up your site for FREE with one click with AirLift!
มุมมอง 1.2Kหลายเดือนก่อน
Grab a coffee and let's have a chat about how airlift, a free performance optimization plugin :) Timestamps: 00:00 Intro 00:48 Checking PageSpeed Insights first 01:23 Let's get into airlift - setup and optimization demo 11:16 Outro Thank you for watching! 🟠 GET AIRLIFT HERE shorturl.at/mnm2L 🟠 WORK WITH ME www.studioegli.com/ 🟠 YOU CAN FIND ME HERE TOO TWITTER - @AndreeaEgli LINKEDIN - www.link...
ELEMENTOR HOSTING vs SITEGROUND vs HOSTINGER - WHICH ONE SHOULD YOU GET?
มุมมอง 558หลายเดือนก่อน
Grab a coffee and let's have a chat about how Elementor Hosting compares to Hostinger and SiteGround Timestamps: 00:00 Intro 00:20 Comparing Performance: Speed, Uptime, and Server Technology 03:48 Comparing Security: Protecting Against Cyber Threats 05:47 Comparing Ease of Use: User Interface and Support 08:11 Comparing Pricing: Plans and Included Features 10:02 Comparing Elementor Integration:...
LET'S BUILD A GSAP WIDGET WITH WDESIGNKIT - Elementor Wordpress Tutorial Flex Container
มุมมอง 3Kหลายเดือนก่อน
In this video we are looking at how you can build a widget with WDesignKit, an All-in-One Solution for freelance web designers. Download the widget here: ohwow.club/template/ Timestamps: 00:00 Intro 00:30 A quick look at WDesignKit 02:44 How much does it cost? 04:15 How to install WDesignKit 02:44 How to access the widgets in WDesgnKit 05:53 How to import a widget 06:23 How to create a widget 0...
Unlock the Secret to a Faster Freelance Web Design Workflow in Just 10 Minutes with InstaWP
มุมมอง 1.3Kหลายเดือนก่อน
In this video, we are testing out InstaWP and I think you guys will find it helpful. Timestamps: 00:00 Intro 00:03 The 5 painpoints of every freelance web designer 02:27 Walkthrough InstaWP 05:49 Create a new staging site on InstaWP 11:45 Upload a site on InstaWP 11:45 Create a template from the site uploaded on InstaWP 15:35 Create a new staging website from the template created on InstaWP 15:...
GSAP HERO EXPERIENCE BUILT ON ELEMENTOR HOSTING - Elementor Wordpress Tutorial Flex Container
มุมมอง 2.3Kหลายเดือนก่อน
GSAP HERO EXPERIENCE BUILT ON ELEMENTOR HOSTING - Elementor Wordpress Tutorial Flex Container
LET'S BUILD A MARQUEE WITH THE FLOATING BARS FEATURE FROM ELEMENTOR 3.24 UPDATE
มุมมอง 2.3Kหลายเดือนก่อน
LET'S BUILD A MARQUEE WITH THE FLOATING BARS FEATURE FROM ELEMENTOR 3.24 UPDATE
LAUNCH AN ECOMMERCE STORE ON ELEMENTOR HOSTING IN UNDER 10 MINUTES - Tutorial Flex Container
มุมมอง 659หลายเดือนก่อน
LAUNCH AN ECOMMERCE STORE ON ELEMENTOR HOSTING IN UNDER 10 MINUTES - Tutorial Flex Container
GSAP HORIZONTAL HERO SCROLL EXPERIENCE - Elementor Wordpress Tutorial Flex Container
มุมมอง 3.9K2 หลายเดือนก่อน
GSAP HORIZONTAL HERO SCROLL EXPERIENCE - Elementor Wordpress Tutorial Flex Container
WHY SHOULD YOU EVEN WANT A HIGH-PERFORMANCE WEBSITE?
มุมมอง 4772 หลายเดือนก่อน
WHY SHOULD YOU EVEN WANT A HIGH-PERFORMANCE WEBSITE?
GSAP BLUR TEXT REVEAL ON SCROLL - Elementor Wordpress Tutorial Flex Container
มุมมอง 3.1K2 หลายเดือนก่อน
GSAP BLUR TEXT REVEAL ON SCROLL - Elementor Wordpress Tutorial Flex Container
Get Your Online Store Live Using Cloud Hosting and Elementor Pro in 10 Minutes
มุมมอง 4572 หลายเดือนก่อน
Get Your Online Store Live Using Cloud Hosting and Elementor Pro in 10 Minutes
UNICORN STUDIO WEBGL AND ELEMENTOR - Elementor Wordpress Tutorial Flex Container
มุมมอง 4.4K2 หลายเดือนก่อน
UNICORN STUDIO WEBGL AND ELEMENTOR - Elementor Wordpress Tutorial Flex Container
LIVE SEARCH WIDGET - Elementor Wordpress Tutorial Flex Container
มุมมอง 2.3K2 หลายเดือนก่อน
LIVE SEARCH WIDGET - Elementor Wordpress Tutorial Flex Container
LINK IN BIO BY ELEMENTOR - Elementor Wordpress Tutorial Flex Container
มุมมอง 1.8K2 หลายเดือนก่อน
LINK IN BIO BY ELEMENTOR - Elementor Wordpress Tutorial Flex Container
FlyWheel vs Kinsta vs WPEngine vs Cloudways. Best Managed WordPress Hosting?
มุมมอง 4.3K2 หลายเดือนก่อน
FlyWheel vs Kinsta vs WPEngine vs Cloudways. Best Managed WordPress Hosting?
GSAP TEXT EFFECT ON LOAD - Elementor Wordpress Tutorial Flex Container
มุมมอง 4.3K2 หลายเดือนก่อน
GSAP TEXT EFFECT ON LOAD - Elementor Wordpress Tutorial Flex Container
PERFORMANCE FOCUS IN ELEMENTOR HOSTING - Why is it important?
มุมมอง 1.4K3 หลายเดือนก่อน
PERFORMANCE FOCUS IN ELEMENTOR HOSTING - Why is it important?
GSAP HIGHLIGHT TEXT ON SCROLL - Elementor Wordpress Tutorial Flex Container
มุมมอง 6K3 หลายเดือนก่อน
GSAP HIGHLIGHT TEXT ON SCROLL - Elementor Wordpress Tutorial Flex Container
GSAP MAGNETIC BUTTON - Elementor Wordpress Tutorial Flex Container
มุมมอง 5K3 หลายเดือนก่อน
GSAP MAGNETIC BUTTON - Elementor Wordpress Tutorial Flex Container
Migrating Your Site to Elementor Hosting - Migrate Guru
มุมมอง 2.9K3 หลายเดือนก่อน
Migrating Your Site to Elementor Hosting - Migrate Guru
can you explain where you did the animation? I miss this in the video … if i see it correctly, yours is animated from the beginning. Thanks :)!
it would be good to have the grid lines as well, just the internals, how you showed in that preview image
Might just be me, but how do you upload the file to wordpress? I've tried changing the .htaccess file and other methodes to try and upload the .GLB, but it doesnt work. (I hope you havent said this in the video.. I would be embarresed.. btw I love your videos!)
No, it's not just you :))) I think I forgot to mention it. I used a plugin called file upload types from wpforms to add my custom file type .glb and then just uploaded the file to the media library. It worked like a charm ;)
Instead of images, can i also use a container with elements inside?
I think there have something wrong on the code with viewport settion. It's working fine with short height page but not working on any long page
Thank you so much, Mam! This is exactly what I'm looking for
This tutorial is a life saver. Thank you so much!
Hehe, nice, happy to hear it was helpful 😉
can i use it as a navbar text?
Thank you for that CSS the lag in the auto scroll was driving me crazy!
You’re welcome! Same here 🤣 I had to fix it!!! So it’s working good on all browsers for you?
The content is great but how do you create the 3d model like which platform ?
You skipped the part where I was talking about that, watch the beginning of the video 😉
Zero explanation WHAT is it connecting TO initially???
did you actually watch the whole video?
I absolutely love your content! Have you considered creating a dedicated series on this topic? It’s in high demand right now, both in the company I work for and in my freelance projects. I’d love to explore it further and discover new aspects I might have missed. Your hard work and videos could gain even more traction with such a series!
Thank you so much! On the topic of 3D? I might because this video did very well, I was actually testing the waters to see if it's worth going a bit deeper on the subject cause I love it too ;)
@@andreaegli You're welcome! Yes, on the topic of 3D, It’s such an exciting area with so much potential! I think a series would be a hit, especially since you’re passionate about it. The demand is definitely there, and your approach could make it even more accessible and inspiring for people like me. Looking forward to seeing what you come up with! 😊
And is there really malware, when they say there is? Doesn't offer your hosting free malware scans for a second opinion?
Yup, the website I demoed was injected with a malware script, a real one. Not sure I understand what you mean...
Just another great video from your end, always learn a lot from you, If there's anyway my company and my subordinates can help you out it would be my pleasure to return the favour.
Much appreciated!
Can you please create a tutorial on Lenis smooth scrolling in elementor
She did already
Will this one-pager come as an elementor kit template by any chance?🤞and would love to see a mobile optimized version as well!
I love your work!! Can you make a video to make it responsive for mobile devices?
Thank you 🙏 I have a template for it here ohwow.club/template/
Hi Andrea. Very nice effect and great tutorial. I have a question. If I download a 3d model with animation from sketchfab, it won't show the animation. For example, a hummingbird in flight will appear on the web as a static 3D object. Can you please advise me if I need to modify the code or if it doesn't work in elementor? Thank you.
Hey! Thanks 😊 you need to download the file in .gib format and then upload it to the medial library in Wordpress. From there you can copy the file path and add it to the code snippet 😉 how this helps
@@andreaegli Hi Andrea. Understand, but elementor doesn't support native glb files. I uploaded it through the WP file manager plugin. Then I enter the path to the file, it displays it, but without the animation, as if it only loads the first frame. I don't know how to give him the play keys, or if there is anything else that needs to be added.. 🤷
@@marianturcek1867 ah, yes! I used file upload types plugin. This is the code snippet for the 3D model: <script type="module" src="unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <model-viewer src="replace with your own .glb file path" alt="A 3D model" auto-rotate camera-controls disable-zoom style="width: 100%; height: 100vh;"> </model-viewer> this worked for me, without looking at your setup, I can't tell why is not working....
@@andreaegli autoplay animation-name="Running" and it works. Thanks Andrea. with this tip of yours, websites will have a completely different life. :) Have a nice day.
@@marianturcek1867 wooohhoo!!!! awesome! same to you ;)
Do you know by any chance if this is also possible for custom classes / headings? Because to use this on every H2, or H1 is a bit overkill for me! :) Great vid again.
Yes BUT you will need to re=style the spans created dynamically. I've added the class of heading here but if you leave it like that, you will notice that your text is no longer styled. span { font-size: 3rem; ...... ..... whatever else you want to add } might affect other spans you have on the page tho...this is just a quick example, needs adjustment on a full blown site document.addEventListener('DOMContentLoaded', function () { gsap.registerPlugin(ScrollTrigger); // Function to split text into spans function splitTextIntoSpans(selector) { const elements = document.querySelectorAll(selector); elements.forEach(element => { const text = element.innerText; element.innerHTML = ""; // Clear existing content text.split("").forEach(char => { const span = document.createElement("span"); span.style.display = "inline-block"; span.style.opacity = "0"; span.style.filter = "blur(8px)"; span.style.transform = "translateX(-100px)"; span.innerText = char === " " ? "\u00A0" : char; // Non-breaking space for spaces element.appendChild(span); }); }); } splitTextIntoSpans(".heading"); document.querySelectorAll(".heading").forEach(heading => { gsap.fromTo(heading.querySelectorAll("span"), { x: '-100%', filter: 'blur(8px)', opacity: 0, }, { x: '0%', filter: 'blur(0)', opacity: 1, duration: 1.5, ease: "power4.out", stagger: 0.05, scrollTrigger: { trigger: heading, start: "top 90%", // Adjust if necessary end: "top 20%", // Ensures animation completes toggleActions: "restart none none reset", scrub: 1, markers: false }, }); }); });
@@andreaegli Yes, so if I understand correctly, I have to CSS style a specific class (span in this case) to maintain the styling of the heading before?
@@Zi0nneBLoeM correct!
@@andreaegli Thanks for the quick responding, I'll try it out :)
Nice 🎉🎉 please tell me are you writing your code by chatgpt if you write with chatgpt please make tutorial for us how to write prompt for code❤❤❤
Ok I will try
very very Amazing Thank you
Thank you too!
Apart from having programming skills, it turns out you are also a very talented artist
keren sekali, love it
Very nice! Love it
Thank you! 😊
If you want all the images from a page to open in the same lightbox add an Attribute for each image, ex: "my-art" and then using Code Snippets or smth similar add in your footer the following script: <script>document.querySelectorAll("a[data-elementor-open-lightbox='yes']").forEach(function(item) { item.setAttribute("data-elementor-lightbox-slideshow", "my-art"); })</script>
Andrea, I tried the fix you uploaded for Lenis Scroll, but the CSS html { scroll-behavior: auto !important; } breaks the anchor links, it scrolls directly without smoothness
Spectacularis !!
😅
Great! What is the effect for the text "Collectible works....." ? Its not "HIGHLIGHT TEXT ON SCROLL", or?
thanks! this one here: th-cam.com/video/h8wa_qABv-o/w-d-xo.html
This isnt GSAP, its 3.js .. GSAP cant render out models, you have to create the canvas , cameras , lights as well as their positioning , color casting and atmospheric elements .. it's all done in 3.js .. The assets are all game / VfX models and you have to use glb because its the smallest size for this models , the 1k texture packs are the smallest these can go to. A guy here on TH-cam created the scripts in his video a little while back and made the assets load asynchronously as well for websites.
Are you referring to the example I showed? If so, I know it's three.js I already said that I'm working on smth similar but it takes time, I'm not a seasoned dev. Could you share the name of the guy with us?
Can you please make a video for the mobile version also... Btw thank you for the video It helps me a lot...
Andrea....How cool your smile.
great tutorial - it's a pity that the size of .glb files practically eliminates the point of using them on mobile devices...
Thanks 😊 I’m sure there are workarounds to that, we just have to think outside the box 😀
Hey, how it's going?
Great 😊
Lots going on the screen in the final output demo to grasp whts happening for the average visitor...
What is GSAP ?
Great video! Love videos of redesign. Wish to see more on this.
As Always!🤩 would love to see lightbox gallary next!😊
😉 not sure what exactly you mean, could you share an example because that’s very broad
@@andreaegli like a portfolio where we can showcase our work😊
Love your videos Andrea! I added the glass effect to my header container with success. But now I also want to add it on my wordpress menu dropdown, but it does not work while I have it on the header container. Im using this to the dropdown: selector { backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); }
Thank you!
Wow extremely cool! Thank u! ❤
You are very welcome & thank you for the kind words!!!
Can i use it for my portfolio website with some changings ofccourse
feel free to do so ;)
Tooooo much cute you are 🎉🎉🎉
Video easy to understand loop carousel, post type with cool hover effect button. ❤
The GSAP legend with great content. Much love from Nigeria.❤
😅 thank you so much, back at you!
Thank you for the wonderful video. I have a question regarding specialization: Do you think it would be more effective to focus on building landing pages and smaller sites (1-3 pages only)? In your opinion, would it be better to specialize in WordPress with Elementor, or to explore newer platforms like Framer? Based on your experience, which platform would offer more valuable skills for providing services to clients?
You’re welcome ☺️ don’t box yourself, build the websites you can now and grow into it. Stick with Wordpress and Elementor.
@@andreaegliThank you. I mean, I focus only on building websites for clients and landing pages on WordPress and elementor with your experience, and I do not look at new platforms because the strong foundation is in WordPress. Did I understand correctly? framer + webflowI don't think about them, right?
This is beautiful 🤩
Thank you 😊
nice👍
Thanks 🙏
Your LinkedIn profile please what to follow
I’m not active on there 😉
Hi Andrea, thanks very much for your work. Lenis stopped working on all the sites where I installed it on Wordpress with Elementor, did this problem happen only to me?
Hey Umberto! Yeah, no idea what happened, could be an Elementor or WP update that messed it up :( I didn't have a lot of time to work on this but I think for now it should work: ohwow.club/lenis-smooth-scroll-in-elementor-hotfix/
Hi, Thanks for this awsome tutorial. But I don't have the spaces you have between the nav's item, after the CSS code. They're all touch each other. How to add space between nav's items.