How to Use Page Transitions in Elementor [PRO]

Подписаться 340 тыс.

Просмотров 32 тыс.

50% 1

👋🏼 Help us improve by answering this short survey: elemn.to/survey-time
In this tutorial we'll learn how to display a full screen canvas as a transition, upon entrance or exit of pages. And see how to add a preloader with predefined animations, icons or upload your own images.. to create a unique design and deliver the best experience for your users.
The tutorial will cover:
✔︎ Activating page transitions in Elementor experiments
✔︎ Creating and styling page transitions
✔︎ Using a preloader
✔︎ And much more!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro

Опубликовано:

14 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 59

@amirsohel7133 2 года назад

Need Lottie Files option as a preloader

@kolawoleosho 2 года назад

This is a great feature but we also need page transitions just for specific pages or single template pages and there should be a way to leave the transitions timer to default, so when the page load, it should be determined by the time it takes for the website to load, not by us.

@ScissorVixens 7 месяцев назад

Well...I see there was no reply but I was hoping to do the same thing. Only use a page transition for certain pages...not the entire site.

@festivaldocompositor4061 2 года назад

Theres how to set page transitons only for a unique page? For exemplo, only in my blog posts.

@pauserratgutierrez 2 года назад

Not possible

@gad1023 2 года назад

Not yet

@rehansanadi8392 2 года назад

Hi Ziv Does elementor has something to create a smooth slider like Swiper JS is there a widget to create something really smooth I checked out Swiper JS but it's just codes and codes and being an elementor fan I hate coding and love widgeting so is there a widget for this too ?

@happywebsites 2 года назад

Very helpful 👍

@T981978 Год назад

Hi i don’t know why but this function of Elementor PRO doesn’t work properly i think there are some issue with the latest update. The animation never shown on the front-end and they are positioned on the top of the page, not at the center in the back-end. I hop you will fix the problem soon

@Releasly 2 года назад

Hey! Can you also use page transitions just for specific pages?

@derikjmercado1114 Год назад

same here

@user-xv2dl5pi5y 2 года назад

Superb!

@bySterling 2 года назад

SO Awesome!!

@pauserratgutierrez 2 года назад

I don't understand how this works. I guess this is only a fancy thing that applies an artificial and not needed delay. In my opinion the delay should be determined by the page load time not by us.

@u-save5989 2 года назад

Likely for some super old and bad theme unoptimized sites. Or ones not optimized for mobile, but yeah, why the heck make ppl wait more than needed is beyond me.

@gregorioeduardo 2 года назад

what are the practical reason for this? Seems will make readers wait. Many will give up and move to another webpage.

@hyggepress 2 года назад

lovely

@niloofarashrafi9576 Год назад

How can I increase the loading time until the page is loaded? I want the animation to be longer.

@claudiobrites5871 5 месяцев назад

I've been looking for this forever, did you ever figured it out? Thanks.

@claudiobrites5871 5 месяцев назад

How can I make the page transition and preloader last 2 seconds or more?

@akoto8175 2 года назад

when is the container update coming out?

@BGdev305 2 года назад

Exactly!

@MrCohench 2 года назад

How does it effect SEO?

@niloofarashrafi9576 Год назад

how to increase durashion animation in preloader

@harbourdogNL 2 года назад

To me, all this does is imply to a viewer "My web pages load slowly."

@fl1ckzeu 8 месяцев назад

true.

@ScissorVixens 7 месяцев назад

I have given this some thought and I think page transitions overall are a positive. Here's why. No matter how optimized your site is for fast load times...the bottleneck will always be the user's internet connection and if it's slow...the user may click a link to go to another page on the site but be staring at static page waiting for the next page to load. Page transitions give an immediate visual confirmation to the user that the browser has acknowledged a link has been clicked and is trying to load the page. The user won't be sitting there (in case of a slow connection) wondering if he/she has to click the link again not knowing if it's a slow connection or unresponsive link.

@advanced-developers Год назад

Cool

@T1544767 2 года назад

Played around with this this morning and this feature just isn't ready yet.

@bilalmajid8241 2 года назад

❤

@nigeriasongs Год назад

What of using it at Woo Commerce checkout PAGE

@ALESSTIG 2 года назад

Bello

@triryuzaki4948 2 года назад

We need Lottie Files asap!

@kevinlefournis6293 2 года назад

👍🏻

@NoName-br8tb 2 года назад

What about Lottie animations?

@000SilaS000 2 года назад

When are you going to fix the widgets you already have? Your website has below 50 points on Google. Is this really necessary? Do you think we afford animation when even the menu widget has issues? 👎

@priyawurm1144 2 года назад

Don't have the page transition option on my Elementor Pro

@Elementor 2 года назад

Hi Priya, please make sure you've updated Elementor AND Elementor Pro to their latest versions, enable it Experiments: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-diHGX-297p0.html, and it should be there.

@JanneWolterbeek 2 года назад

@@Elementor I can't find it either and have Elementor and Pro (and connected), can't find it in experiments, can't find it in site settings. Nowhere to be found!

@toddhoot 2 года назад

Only seems to work on the main page for me. Its not the entire site.

@gad1023 2 года назад

Its entire website, working with me.

@BGdev305 2 года назад

Actually wish I could have it one ONE page

@harbourdogNL 2 года назад

Clients wanting these treatments are going to become as annoying for web designers as drop shadows are for print designers.

@fabsdesignjp 2 года назад

it doens't work on mobile???

@anthony.keller Год назад

Not working, I setup everything and it is not appearing on the frontend.

@Elementor Год назад

Hey Anthony, if you are a Pro subscriber, you can contact Support from the Elementor Dashboard. my.elementor.com/dashboard-support.

@aleksandarrusev6323 2 года назад

It slows down the speed of the website... looks interesting though

@musicplayer7336 2 года назад

Jaapie!

@asesoriafinancieralee7807 2 года назад

How to setup the page transitions just one time and not every page.

@DrohneschweizCh 2 года назад

do not update elementor, i just did and my website turn down... Elementor please check before release a new version of elementor pro!!

@martinmcshane4487 2 года назад

Lol, is this elementors workaround for slow elementor sites and content shift layout issues... Page loaders are a bit 2008

@u-save5989 2 года назад

Nice tut but why would one wanna keep ppl waiting an EXTRA 3 seconds these days?! They are attention deficit disordered and would leave. Even with my super heavy landers: LiteSpeed [Enterprise] server on Ubuntu hosted on UpCloud Plus WP LiteSpeed Cache plugin, plus LS's cloud services for affordable top-notch [generous free tier] image optimization - all on top of your optimizations and experiments - and even without BunnyCDN my site pages load as fast as lightning. Why RUIN it and annoy folks with that yucky dull screen transition?!

@deanontheinterwebs 2 года назад

I can't think of a worse way to slow down the user's experience than this. Worse, it tells the user the slowness is deliberate and definitely the fault of the website. Google is all about page SPEED... not page bloat. No thanks. It concerns me that Elementor thinks such a feature is actually necessary.