Elementor Pro Parallax Tutorial - Including Before / After Speed Test Comparison
Вставка
- Опубліковано 18 жов 2024
- In this video, I will go through the 5 new Parallax modes in the upcoming Elementor Pro 2.5 release. Also, start the Elementor tutorial with a speed test and a comparison speed test at the end.
Want free access to my $199 Elementor Accelerator course?
Visit www.wpcrafter....
Also check out Astra www.wpcrafter....
Oh here are links to the speed tests:
Before tools.pingdom....
After tools.pingdom....
*not sure how long they keep them available.
The host I used for the test is Cloudways www.wpcrafter....
There was no caching on the website and varnish was disabled on the server.
Methodology for the speed test was to install a fresh Astra Site, install Elementor Pro, perform speed test. Then in the video, we added some parallax effects, saved the page, then retested the site.
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.... (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.... (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.... (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.... (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.... (SAVE 10%)
Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter....
🟡 Elementor -- www.wpcrafter....
🟡 Beaver Builder -- www.wpcrafter....
🟡 Divi -- www.wpcrafter.... (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter....
🟡 Cloudways -- www.wpcrafter.... (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.... (SAVE 75%)
🟡 NameHero -- www.wpcrafter.... (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.... (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link.
Great video Adam. Good to see that it didn't change the speed/requests/size by adding them effects.
Thanks for being so on top of your videos when features come out
Thank you and I am going to try to put more emphasis on performance.
Another great tutorial ... Always learn something new and your views are really helpful. Elementor just keeps on getting better and smarter!
Thank you Erica! And yes it just keeps getting better and easier to use.
These scrolling effects are very cool. Been seeing more and more of this type of animation on websites lately.
Yea they are super easy to add via CSS, of course, this makes it way easier.
"These scrolling effects are very cool." Or very annoying. Depends on the age group of your audience. The rule of thumb for good clean design is, less is more.
@@harbourdogNL That's a bit over reaching. Sure less can be more. But if you want a website to be more of an experience, now you have that as an option.
@@WPCrafter True indeed, but I find a lot of these bells and whistles-when not used sparingly- take away from the message/content, rather than add much to it. It's like in the days of print when young designers would have 8 or 10 typefaces in a piece...that's just wrong.
@@harbourdogNL I totally agree. Been in graphic design for over 25 years myself and more recently web design.
It is all too easy for a new designer to add all and sundry to their page designs in an attempt to use the most recent trends.
It's good though to break up some otherwise static elements on some pages using this method.
Great video tut as always Adam. Cool features keep coming our way, but I think I would have been more impressed with the ability to skew images!
Yea it will be nice when they add that like how Divi just added it. I am sure it will come, hopefully sooner than later.
WPCrafter.com WordPress For Non-Techies - Adam I played with Divi’s on a desktop dev. There are some cool features, but they have some serious issues to resolve like when using the page builder and hovering over an item you may have changed is all jittery and still some issues to resolve when taking it to the mobile design level!
Yeah it's weird they seem to have all sorts of jittery issues.
Interesting parallax effects. I agree with you and in the past have not been very positive of using the effect ‘just for the sake of using or as a ‘cool’ trick. Too much coding and and weight added for bells and whistles. However, a theme and page builder inbuilt tool - I have some use case ideas for specific marketing tasks. I’m thinking of WooCommerce product pages. Elementor gave us the ability to fully customize the product page and I’m thinking the parallax effect inbuilt in Elementor will allow for some great branding and highlighting elements of individual product pages or one page website individual product pages that are in a flow by CartFlows. If it’s all under the roof of Elementor, WooCommerce, CartFlows, and an Elementor friendly theme (Astra)... with no coding and less weight. Well that’s very cool.
A lifesaver - I spent quite an amount of time on my top post and when I added other posts below, the scrolling of the text carried it's way all throughout the page. It was supposed to be just for the top background image.
I now see that I am to have the scrolling for the Style only and not Advanced. The hiccups I've been having the past 4 days is unreal, but not Elementor's fault - just here learning.
It would be good though, on Elementor's Official video for the Parallax Effect to mention this.
This is one I had to come back to. It'll add a little something extra. Thanks!
Really interesting to see them introduce features that I’m not really needed. Refining some of the features introduce in the last year or would’ve been a better route to go
Love those effects. Thanks for the information! I was trying Elementor Pro and it was giving me a headache.
Great info, timely, thanks!
Cool! I've been hoping Elementor would come out with an easy Parallax feature. Those other plugins that offer Parallax were driving me crazy trying to get them to work.
Looks like they were listening to you Rich.
Thank you for the amazing lesson, Lord Varys..
You're welcome Chandra Isyanto.
omg cant wait the 2.5 is out!
My guess is that it will be out in two weeks or so.
May I ask how do you have the first image staying still while scrolling? I can't seem to find that option in Elementor Pro
Section -> Style -> Background -> Attachment : fixed
Adam, You know I like this!
Yes it's the closest working to get to web flow.
Adam, I bought Elementor Pro on June 3rd 2019 through your link (as per instruction) and emailed you the receipt. I am still waiting to hear anything back on how I can access the courses you advertise and promise with this purchase. A few days ago I also got Astra Pro license (also through your link) and waiting also for this to hear back from you. I tried with emails, messenger to get hold of anyone on your team. Would appreciate some sort of reply.
These effects don't add any weight because they are loaded by default. It's how Elementor works, everything is loaded, even if you don't use them.
I wish they didn't do that. It's not that hard...
Not sure that’s fully accurate. I did the same test before upgrading, and it was the same. So even the version without the new features had the same requests and the same page size. Point being that the size difference is such a non issue.
@@WPCrafter The code is located in the JS file frontend.min.js. It's always loaded. Each time they add a new feature, the file gets bigger.
It's not that huge, so you won't see a big difference for sure. Before the beta version, the file was 80KB big. Now it's 100KB. It's not necessarily an issue but it's good to know how it works.
Thank you!
Awesome, this is one less plugin on my dashboard :)
Thank's Adam
Pretty soon all we will need is Elementor.
Yes, this is what I am hoping for... :)
These new things are .. Waooo 😍😍😍 i really love these effects 😍
Yes when used together you can do some pretty neat stuff.
@@WPCrafter yup😍
Great video man. Please I got the Elementor PRO from your link few weeks ago but am yet to receive the training course.
If you sent in a copy of your receipt it would have been responded to. The instructions are on the contact page on my website.
(Yup, it was a very weird picture!) Excellent tutorial, thanks!
Please put the subtitles in every video, i really like yor channel, very helping me
Good videos man
I love the fact that these parallax effects will now be able to be shown on any device, and not just desktop computers. Adam, thanks for this early information. Always grateful for what you do for the WordPress community and beyond.
Yes I was impressed by that as well. Usually you don't get the option to carry them over to a mobile device.
Is Elementor Pro available on month to month payment cycle as opposed to a yearly payment for Elementor Pro? Please share a link where Elementor Pro can be baught for a month.
Nice post! Still waiting on your personal Cloudways set up video though.. Can't wait!" Best, Nate
Hey Adam, quick question - which cloudways servers do you prefer and why?
Thanks for the video by the way! Always great content.
You really can't go wrong with any of their options. I have used all of them and they're going to be pretty comparable. I am personally using Vultr but I could just as easily used any of the others.
Adam nice job, in time video
Thank you, I try to be quick with these things.
that's cool
LOL! Recognize the name and the face. Can't wait to see what you and everyone else there at the Elementor office do with this.
WPCrafter.com WordPress For Non-Techies Sure , but i'm not in elementor anymore , but in my chanel i will upload some cool stuff for sure ;) .Thanks for show this , you doing amazing job.
Is the Motion Scroll effects available only in Elementor Pro?
Hi Adam, great video!
Could you do a video on designing a website for a client using Elementor adding roles and/of restrictions. Curious to know if sites stop working when deinstalling a free of pro Elementor plugin.
Yes I should make a video on the role manager that comes with Elementor.
I have Elementor Pro and do not see parallax options
In the first part of the video I explained how this is a new beta that was just released and the features will come to Elementor Pro in about two weeks or so.
WPCrafter.com WordPress For Non-Techies thank you
Thanks so much for your videos. Top stuff. I would love a video on CSS customization in Elementor. We want to make a top hero section using css transitions just like the @t home
page. If you look at that top hero and inspect the css, you wonder to yourself, "how can a billion dollar business NOT have a responsive site?" If you size it down to mobile view, it doesn't !! Real weak for such a big-time industry website.
great tut... like button 👌
nice video the best i see
Great Adam! You managed to really mess up that template lol
Yup that was fun.
:D@@WPCrafter
great video always adam
may i ask if i use visual composer, is there a way u can share to use split testing function?
I'm not sure visual composer has a split testing option.
the vertical scroll is not smooth - it jumps when the page stops
💓 Can you make a video about how we can create login page and profile for the users?
Yes I have that on my list of videos to create.
Sir, tell me which hosting provider you are using !
To be really accurate you might want to repeat the test and clear the CDN cache, and any wordpress cache sometimes this makes a difference.
Sure if there was a CDN being used which there wasn't. No CDN, no caching.
is pralax effect in free version
I am the third!
With Parallaxeffect need a Laptop more CPU-Power. That is a problem for the accu range.
That would be something interesting to test. I wouldn't be surprised if the older methods of accomplishing it were more CPU intensive than they are today.
WPCrafter.com WordPress For Non-Techies I noticed that when my tool failed on my MacBook. For example, if there is no power supply, the higher power consumption can be very disturbing. that's why I usually do without these things. These effects are very cool, but unfortunately they cost a lot of energy.
Use it sparingly!
100% right, very sparingly and strategically.
Agreed.
And if you don't have Elementor Pro, get it NOW! I don't know if they'll be raising prices but $199 for unlimited sites is a bargain.
I'm sure the keep this price for a bit longer. However they do need to increase the price and I wouldn't be surprised if we saw that next year.
Video starts at @3:34
SO UHMAZINGGGGG!! THE PARALLAX ELEMENTS WORK ON MOBILE VIEW!! 🙌🏻💥📱💪🏻🌎🎶👏🏻The only issue is if elements are sliding out of view then the horizontal swipe scroll kicks in and it's a bit messy. #GRATEFUL100!! Hopefully that will get fixed and then it's ON 2019 MOBILE Parallax Global View POW!$!
Yeah you just have to be careful with it. But still amazing nonetheless.
I am the second!
You ruined the website XD. Would have been better if you showed us the viewports etc.