Тёмный

[01] Layout Optimization Best Practice 

Elementor
Подписаться 341 тыс.
Просмотров 204 тыс.
50% 1

In this lesson, we'll learn the most efficient ways to create your pages layout with Elementor.
Watch the full Website Performance Optimization course here: elemn.to/optimizationcourse
This lesson will teach you how to:
✓ Reduce the number of elements on a page
✓ Test your website's pages speed
✓ Improve your page accessibility and rankings
✓ And much more!!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com/​
Get Pro: elementor.com/pro
Global Colors & Fonts: • How to Use Elementor's...

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

 

24 апр 2021

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 284   
@iwbowden
@iwbowden 3 года назад
Arrrgh! Where were you two or three years ago?! This is simply one of the most helpful Elementor instructional videos I've ever watched - and I've watched a lot! Like any complicated and infinitely-configurable product, Elementor has been lacking a series of "best practices" videos such as this one, showing us the optimal way to build pages made to load more quickly. I've viewed dozens of tutorials by other Elementor users who've demonstrated a number of techniques which I've adopted and are actually all very bad habits. Please keep these coming! The more you demonstrate how to get more out of your product the more educated and informed - and loyal - your customers will be.
@Elementor
@Elementor 3 года назад
Hey Ian thank you for your feedback! Have you watched all 5 parts of this series? What did you think? ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@unclesocial186
@unclesocial186 3 года назад
@@Elementor Please don't stop at 5 parts! Best practice for every single Elementor Widget would be great, perhaps best practice for nagivation layouts and common pages like Contact would be good too?
@vnikyt
@vnikyt 2 года назад
Exactly. I now have so many old websites to optimize because I was building in the dark
@frankstone
@frankstone 3 года назад
I wanted to THANK YOU for this tutorial. I'm new to WordPress, however I do manage 6 websites. Coming over from Adobe Dreamweaver has been the right move. Over the past year, I've watched several different RU-vid tutorials that have helped in my transition. This is the first one I've seen that specifically looks at "layout" optimization techniques. Your presentation was just what I needed.
@heathercunningham9514
@heathercunningham9514 3 года назад
Thank you! This is possibly one of the most useful tutorials on Elementor ever! And should be the first video watched after installing Elementor. I've got some work to do!
@foxharold1053
@foxharold1053 3 года назад
i guess Im kinda randomly asking but does anybody know of a good place to watch new series online ?
@cyrussamir724
@cyrussamir724 3 года назад
@Fox Harold lately I have been using FlixZone. You can find it by googling =)
@riazbudree2481
@riazbudree2481 2 года назад
Heather I could not agree more. I’m guilty of column and inner section use. This has been most useful.
@emmaoakley690
@emmaoakley690 2 года назад
@@riazbudree2481 And me! I actually asked myself this question the other day and then thought nothing more of it. I feel very seen with this tutorial! Haha.
@casperpost2557
@casperpost2557 3 года назад
Wow. No optimalization plugin can beat this. Absolutely great tutorial. Going to be more aware about this in my upcoming projects. Thanks!
@eduardopereira-fr5nw
@eduardopereira-fr5nw 3 года назад
You finally nailed it!!! Image that I was so frustrated with Elementor regarding the speeding performance that I was ready to switch to Kadence Blocks. this video is a game changer for us!!!! Love Elementor.
@andonisr
@andonisr 3 года назад
Excellent guide on such a useful topic. It's always frustrating trying to reduce page load times and requests. You've shown us some excellent tips - which I'd never thought of implementing. Now I know what to do for each one of my websites!! Thank you so much Ash!! Please do more in the future as Elementor evolves so we can be updated on best practises!
@Ateens97
@Ateens97 3 года назад
Please update Template Elementor Libary with optimize layout. So that beginer can easy insert template then have more speed. Another reason, it can educate how User use elementor. More and more web made with elementor loading fast.
@dustindauncey
@dustindauncey 3 года назад
@@TimOlukayodeAjayi I think you mean you “couldn’t agree more”, not “less”. 😜
@brianb225
@brianb225 3 года назад
If only I had seen this before rebuilding a 200-page website. Great information!
@thegarden5798
@thegarden5798 3 года назад
almost the same here lol
@vx-petia
@vx-petia 3 года назад
This video cleared up so much for me. I tried it out and was able to move 3 sections (1 mobile only) and 12 columns all into one! From 2.5+ seconds to 680ms. Thank you so much!
@vx-petia
@vx-petia 3 года назад
But it actually lowered my google page speed and gtmetrix mobile by 50%!
@keywikiwi
@keywikiwi 2 года назад
This is hands down the best elementor page layout video ive watched so far. Well done
@mrfgm
@mrfgm 2 года назад
MY GOSH....I FEEL LIKE I CAN BE A PROFESSIONAL FROM THIS 22 minute tut!!!!
@_HMCB_
@_HMCB_ 3 года назад
Just amazing how much cruft you cleaned up by using the single column. I learned so much. Thanks 🙏
@nzwebtech1915
@nzwebtech1915 3 года назад
This full of excellent advice - nice work! Changing multi-columns to a combo of better choice widgets and using size/position more effectively is going to keep me busy for a while...
@randymurray934
@randymurray934 3 года назад
Been building websites for 20 years.. This one small video convinced be to start using elementor. Cheers
@0xfrans659
@0xfrans659 3 года назад
This was the most profitable 20 minutes of this week ! Thank you Ash and all the team for this kind of tutorial. So much values and good advices to be even better ! Can wait for news videos, i'm addicted to hahaha
@Elementor
@Elementor 3 года назад
Wow François I'm happy you found it valuable! Have you seen the whole Optimization playlist? ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@robertturner1550
@robertturner1550 3 года назад
Best Elementor video I have ever seen. This is freaking amazing!!!
@tara0029
@tara0029 2 года назад
Watched this just before starting to make my website... couldn't be more thankful! Such a helpful video!!
@Justtellmetheanswer6910
@Justtellmetheanswer6910 3 года назад
Brilliant. Very well explained. Great speed. Not to fast or too slow. Nice clear commentary. Keep them coming please Elementor.
@Elementor
@Elementor 3 года назад
Thanks for the feedback Just in time!
@spydergs07
@spydergs07 2 года назад
This is hands down the best Elementor optimization video I've seen. Thank you!
@rajavanya
@rajavanya 7 месяцев назад
ohhhh my god! this should be the first thing shown to every elementor creator! I've gone years without knowing these. feels wasted. I can see from comments below that I'm not the only one.
@frontweb9984
@frontweb9984 3 года назад
Thanks a lot. I have been using Elementor for 3 years, but I learned many new things from this tutorial :)
@Elementor
@Elementor 3 года назад
Wow thank you! I'm happy you found it informative 😊
@frontweb9984
@frontweb9984 3 года назад
I didn't know that defining global fonts and global colors improves performance. After your video, I did it on a website, and the loading time improved around 2 seconds. Thanks a lot
@rebekahspahn2638
@rebekahspahn2638 2 года назад
Wow ... What an incredible learning resource--THANK YOU! This one is definitely being saved for future reference!
@americascuisine
@americascuisine 3 года назад
If elementor really wanted to help improve our PSI scores, they would include an option to remove the 99% unused CSS and JS that gets thrown into our pages. I noticed in this video they didn't show this pages coverage report... I wonder why
@andrei_olariu
@andrei_olariu 3 года назад
Probably is a little harder to do right now, let's hope that it will be better in next versions
@riazbudree2481
@riazbudree2481 2 года назад
I’m guilty of column and inner section use. This has been most useful. Nice pacing, great examples and well explained. I appreciate this. Thank you.
@RealWorthStocks
@RealWorthStocks Год назад
This video is just great: really clear and actionable insights as to how to make a much simpler layout with Elementor. I keep coming back to it when I am building new pages: thanks for the awesome content!
@rukonahmedeimon3263
@rukonahmedeimon3263 3 года назад
That's not only great but more than that... I have been using 3rd party plugin since a long for optimisation. That's so cool than any other. Thank you. Keep up the good work
@designsosimple2269
@designsosimple2269 3 года назад
This has to be one of the most helpful and useful videos you guys have created. Absolutely brilliant, thank you.
@Elementor
@Elementor 3 года назад
I'm glad you found it helpful DesignSoSimple 😊
@bySterling
@bySterling 2 года назад
I had no idea the image box and call to action widgets were so flexible, awesome!
@mulisaurus
@mulisaurus 3 года назад
FINALLY!!! An actual tutorial that is helpful. This needs to the 101 video once you start with Elementor. Thank you for the presentation English man.
@Elementor
@Elementor 3 года назад
Hey Muli, I showed this comment to Ash ( the English man 😉) I'm glad it you found it helpful!
@frits1463
@frits1463 3 года назад
Did Adam see this? 😂. Thank you for this. So helpfull!
@tomtom7712
@tomtom7712 3 года назад
Hello - Thanks for this video. The lighthouse test is for desktop version, but this is often not the problem. Please show an example of the optimization of a "mobile" version.
@LogologicsNl
@LogologicsNl 3 года назад
I agree, very useful video, but mobile is the real pain, would love more of that!
@EricaDyson
@EricaDyson 3 года назад
Excellent. Just what we need. More like this please.
@Elementor
@Elementor 3 года назад
Thanks Erica! Have you seen the whole series? ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@loganhoneycutt5398
@loganhoneycutt5398 2 года назад
This is so important and needs to be watched by every Elementor user.
@rkardos4220
@rkardos4220 3 года назад
Well that was simple and smart. Thank you
@UdithaMelanMahindarathna
@UdithaMelanMahindarathna 2 года назад
The most important tutorail for elementor designers . Thank you ❤
@odedtalmon904
@odedtalmon904 3 года назад
Great video! The part about the image carousel is incorrect in my opinion, it loads an extra js that you don't really need, you can just use image widget with auto position and custom width like you did in the beginning of your video
@digiperth1689
@digiperth1689 3 года назад
Wow, that's great tutorial.
@wesellplaces2796
@wesellplaces2796 3 года назад
Just what I need... Excellent.
@kpitonak
@kpitonak 3 года назад
This one here is the most important tutorial on Elementor ever!
@Elementor
@Elementor 3 года назад
Great suggestion Random, you can give it directly to the development team here elementor.com/help/send-your-feature-request/ .
@bySterling
@bySterling 2 года назад
Priceless info and so great to know the motion effects (I’m all about these!) don’t affect the load times
@taichigoodness1798
@taichigoodness1798 3 года назад
Thank you! Thank you! Thank you! Lesson learned, before browsing dozens of videos, just go to the source and get right to it!
@mario.carvajal
@mario.carvajal 3 года назад
20:26 You are using "DESKTOP" to measure speed. Any reason not to use "MOBILE"?
@tandlauer
@tandlauer 3 года назад
Amazing video !!! Thanks !
@LudovicCharlier
@LudovicCharlier 3 года назад
Wow, so much great information in one video. Thank you so much !
@jennygao7542
@jennygao7542 2 года назад
I am very lucky to cross your video. I am just starting to make my web. This saved me loads of rework! Thank u thank u thank u
@DarrenStarr
@DarrenStarr 3 года назад
This is amazing. Just hwen I thought I had Elementor nailed and now you raise the game again. Thank you! 🙏🙌👍 Back to learning it is!
@Elementor
@Elementor 3 года назад
That's what I aim for! Thanks Darren 🤩.
@kazeemquadri01
@kazeemquadri01 3 года назад
Thank you so much. I have a lot of layout changes to do
@Elementor
@Elementor 3 года назад
Your welcome Kazzem 😊. I'm happy we were able to help you build a better website 😎.
@klaasdevries1947
@klaasdevries1947 3 года назад
Very clearly and very useful! Great work! Thank you very much!
@thepurpleufo
@thepurpleufo 3 года назад
Ummmm...like...,.wowwww...this is great stuff...thank you.
@Elementor
@Elementor 3 года назад
I see we left you speechless😆 I'm happy you liked it!
@Eastie_
@Eastie_ 2 года назад
This is great. I'd love to see more content like this from Elementor.
@violetozer7558
@violetozer7558 3 года назад
hey, tnx for the tutorial, very helpful!! one problem... when i try to make the widgets mobile responsive its not looks good on mobile!! there is no many options. how to make it mobile responsive? (for example the call to action widget, its hard to adjust to mobile)
@Teuser737
@Teuser737 3 года назад
Brilliant!
@WilhelmCazimirovici
@WilhelmCazimirovici 3 года назад
Great tutorial! Thank you!
@FernandoHStahelin
@FernandoHStahelin 2 года назад
The best tutorial i've seen.
@JulaWeg
@JulaWeg 3 года назад
Very good, clear tutorial. I wonder how your website will look on phones or tablets. I thought that sections are designed to make the website accessible on any size of equipment. Let me know
@cristianocortonesi8935
@cristianocortonesi8935 3 года назад
Best video on elementor!!!
@adhas
@adhas 3 года назад
Thank you for this tutorial! Looking forward to more 👍
@Elementor
@Elementor 3 года назад
Thanks Aiesha! Have you seen the whole playlist yet? ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@tugumisirizebarnabas211
@tugumisirizebarnabas211 Год назад
Thank you so much for this initiative.
@JeremiahAmaukwu
@JeremiahAmaukwu 3 года назад
Thank you sooo much for this,
@earthsystemdata6940
@earthsystemdata6940 3 года назад
Great video!
@cristiansfetcu6493
@cristiansfetcu6493 3 года назад
Very usefull for beginners and for advanced web creators. I'll see all video. Thank you.
@Elementor
@Elementor 3 года назад
Thank you Cristian, I'm happy to hear that advanced web creators liked it as well 😊
@Mumont
@Mumont Год назад
great! these are some of the most helpful videos for nocode web designers. Even to understand in code form how to structure a website better. With my experience I think it is very useful to always use globally the colours, typography and some sections well optimized. It is a great help to start like this.
@katy.boykin
@katy.boykin 3 года назад
This was very helpful. If this is the standard practice, why aren't the templates built this way?
@omtechofficial
@omtechofficial 3 года назад
Thanx for such nice tutorial, 🔥🔥 really helping
@RobertLeitinger
@RobertLeitinger 3 года назад
Great!
@TroyDettwiler
@TroyDettwiler 3 года назад
So helpful.
@MrPlasticfruits
@MrPlasticfruits 2 года назад
Very very Good !
@linconyudi3388
@linconyudi3388 3 года назад
Mind-blowing! 🤯 Why nobody teaches that?! Thanks a lot! 💙
@Elementor
@Elementor 3 года назад
Wow what compliment Lincon 🤩!!!
@SmithyProductions
@SmithyProductions 3 года назад
How do you know exactly the number to put in for width? What's the best way to find out how much space a widget is taking? Thank you!
@tribowp
@tribowp 3 года назад
Savion, the complete space of the line is 100%, so you can divide the columns according to your needs. As he had 4 widgets, he placed each one to occupy 25% of the space. If there were 3, you could put 33% for each widget. Hope this helps. Sorry my English.
@markr.
@markr. 3 года назад
Hi, thanks so much for this it's been very informative and helped a lot. I understand the overriding message to simplify where possible and minimize containers but the section with the icon boxes would not work on mobile as they'd be too small. It's the columns that enable elements to cascade under each other unless I'm missing something here. Please let me know if I'm wrong as this would be helpful also. Thanks again.
@wgm247
@wgm247 3 года назад
This has definitely improved my websites
@Elementor
@Elementor 3 года назад
Yes!!! That's what I love to hear 🤩!!!
@odesenvolvedorwebelementor527
Simplesmente um vídeo perfeito! Muita coisa nova foi aprendida vendo esse vídeo e com certeza salvarei! Começarei a ensinar essas práticas no meu canal.
@yuxiwan8917
@yuxiwan8917 3 года назад
It is just like magic!!!
@togetherenglish8654
@togetherenglish8654 3 года назад
Great, it very helps me!
@geraldo8585
@geraldo8585 3 года назад
Great video. Please make more like this one.
@kshitizkhanal2630
@kshitizkhanal2630 Месяц назад
Thank you it helped a lot
@danabaedke2698
@danabaedke2698 3 года назад
Fantastic! Thank you :)
@shaunazar
@shaunazar 3 года назад
Great video! I started using flexbox with the steroids for elementor but your video helps me see how I can achieve same results with absolute position and make page even more light weight.
@federer129
@federer129 Год назад
best tutorial ever!
@nishantpatel5901
@nishantpatel5901 3 года назад
Thank you for making this video. This is the best ever useful video I found for elementor.
@SupernovaSites
@SupernovaSites 2 года назад
Loved this video! Thank you so much. I just wish you would have shown a more complicated footer.
@hridjatripathi7655
@hridjatripathi7655 3 года назад
Thank you. this was very helful
@nubenegra809
@nubenegra809 3 года назад
Beautiful man!!! already optimizing my website with this tips!!! Thanks a lot!
@Elementor
@Elementor 3 года назад
I'm glad it was useful Nubenegra
@nubenegra809
@nubenegra809 3 года назад
@@Elementor no, thank you man!
@woodinlays3627
@woodinlays3627 3 года назад
What a great video! You have answered so many questions in just one video. Thanks a lot.
@Elementor
@Elementor 3 года назад
Thank Wood, that is amazing to hear! I'm sure you'll like the rest of the playlist as well 😉ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@tonibui317
@tonibui317 2 года назад
Thank you for your tutorial
@StevenMadar1
@StevenMadar1 3 года назад
What an amazing video! Thank you for sharing…
@maiducanh
@maiducanh 2 года назад
Thank, this very great
@jesusenmanuelbarreto844
@jesusenmanuelbarreto844 3 года назад
Great Tuto! Only one thing so how do you suppose to invert widgets now? Because when I invert columns it works perfectly but now without columns it does not invert widgets! Any suggestions for it?
@jaxrachel
@jaxrachel 3 года назад
Agreed! I was trying to figure that out too
@jesusenmanuelbarreto844
@jesusenmanuelbarreto844 3 года назад
@@jaxrachel ye I know... It's a great value this Tuto but to me it was not completed
@stevenkiridis
@stevenkiridis 3 года назад
Hi there, thank you for your comment. Widgets like Call to Action offer change of the layout on responsive mode, but you could still use a second column if you find a limitation. Just try to keep the use of widgets, columns and inner sections to a minimum. Hope this helps
@jesusenmanuelbarreto844
@jesusenmanuelbarreto844 3 года назад
@@stevenkiridis thanks for answering. As I thought you just confirm. Appreciate it. 🙌
@JuliaVicentiniWebDesign
@JuliaVicentiniWebDesign 3 года назад
Great Tutorial! 👍
@mmb811
@mmb811 3 года назад
EXCELLENT TUTORIAL, Well presented and clear, concise, and to the point. THANK YOU, and WELL done, you are a major asset to the Elementor team!
@Elementor
@Elementor 3 года назад
I couldn't agree more Mike!
@peacetoall1858
@peacetoall1858 3 года назад
Thank you so very much for this. It helped me tremendously.
@Elementor
@Elementor 3 года назад
I'm happy to hear! Thank you 🙌!!!
@DenisMcCaul
@DenisMcCaul 3 года назад
If under Advanced > Positioning > Width > Custom you can set a widgets width % to position widgets beside each other and optimise for width on Desktop, Tablet, Mobile, rather than stacked, why would you need to use inline auto. (Wondering what would be a use case for using Inline Auto instead of Custom)
@stevenkiridis
@stevenkiridis 3 года назад
Hi Denis, I gave this answer to your previous comment but I am repeating it in case more users have this question. The inline (auto) option will be similar to display:inline. This means that a widget takes automatically its actual width. Setting the width to custom is like deciding manually what the width of a widget is, whether it's less or more than its actual width. Hope this helps 👍
@meshtarua
@meshtarua Год назад
thank you so much
@irinanoorman8685
@irinanoorman8685 3 года назад
I have done all steps like adviced. But the loading time increased from 1,75 sec to 2,23 sec. The number of requests increased from 77 to 95. Lighthouse Performance decreased from 33 to 24. So in all points it was disadvantagous. Is it possible that a complex widget like the "Call To Action" loads slower than four simple widgets like "Title", "Text", "Picture" and "Button"?
@kaygeen4548
@kaygeen4548 11 месяцев назад
Yeah, I'm here. My performance was worse!
@BestMLMDXN
@BestMLMDXN 3 года назад
Dear Sir, Thank you so much for this wonderful tutorial. This will indeed help us in improving our website performance. Sir , please make a detailed video on PODS integration with Elementor and Elementor Pro to extend wordpress - create awesome Custom Post Types, Taxonomies and Custom Setting Pages with Pods and use them with Elementor and Elementor Pro. Please keep uploading such wonderful tutorials. With warm regards, Vivek Kumar
@aurematic
@aurematic 3 года назад
That was impressive.
@267don8
@267don8 3 года назад
Very helpful. Who knew.
@elmoonezazan3144
@elmoonezazan3144 3 года назад
what a great of tutorial! this made me wanna go check all the other videos on this channel to see what other gems you been hiding!
@Elementor
@Elementor 3 года назад
Thanks Elmoonez! There is a whole treasure chest of them in this series💎 ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@damianmigaa7474
@damianmigaa7474 3 года назад
Amazing, we want more!
@Elementor
@Elementor 3 года назад
Hey Damian, have you seen the whole playlist yet? ru-vid.com/group/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot
@nguyenthehoadesign
@nguyenthehoadesign 10 месяцев назад
Thanks🥰
Далее
[02] Optimizing Your Images
22:00
Просмотров 69 тыс.
WE COOKED A SHRIMP KEBAB  #recipe #barbecue #food
00:21
Просмотров 441 тыс.
아이스크림으로 체감되는 요즘 물가
00:16
Why is THIS the Perfect Homepage?
14:21
Просмотров 514 тыс.
The REAL Way to Optimize LayOut Exports
12:56
Просмотров 14 тыс.
I found a way to never use Pixels again in Elementor
15:07
The Basics of Dynamic Content in 15 Minutes
18:16
Просмотров 174 тыс.
6 Mobile Section Layouts and Examples You Must See
13:01