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.
Hey Ian thank you for your feedback! Have you watched all 5 parts of this series? What did you think? th-cam.com/play/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot.html
@@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?
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 TH-cam 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.
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!
@@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.
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.
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!
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?
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
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!
Thank you for the video! Good job! I have a few questions though. Do all the proposed changes result in semantically correct html? Sure merging sections will result in less code and simpler html layout. But doesn't that defeat the purpose of having sections in the first place? Thank you!
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
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.
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)
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 👍
The Call To Action image seems to have a weakness compared to using an image widget. There doesn't seem to be any way to have the image in a Call to Action actively resize the image as the screen size changes like it does in an Image widget. No matter what I do to the spacing and sizing and such there will always be some cropping of the image at some image size. Any way around this? Also it would be nice to have multiple buttons! Great tutorial and I definitely learned a lot!
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)
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...
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
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"?
On the hero section, I notice that you are using a Heading widget and a Text widget separately. As said throughout the video to use as few widgets as possible, is it better to use for ex. an Image Box/Icon Box/Call-to-Action widget and then remove the image/icon/button from the widget? Fewer widgets with an empty placeholder/container.
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.
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
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.
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
Top tutorial! sooo useful!! thanks! Just a quick question. How can I add subtitles to image boxes, for example? a subtitle that is in a different font and color? is it possible?
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.
@@aledianin Thanks, I feel better. Yesterday I gave up redoing my website. Is what it is. I need to talk to Elementor Techs. Have nicely set up Global setting but any time I need to add a section I have to copy the previous one and redo it.
Excellent video, and I've already subscribed to your informative channel though I've only got one complaint. The part where you've used the "call to action" widget, you should've mentioned that this option or feature is only for Elementor Pro. That being said, I did learn a lot from this video. Thanks
I use the product slider and the different images makes it move about and I guess it affects this cumulative shift thing? Or whatever it is? I wonder if there might be a way to counter this?
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
everything is perfect in this video. but I could not find dynamic tags for Headings in Elementor. I have installed the latest version for elementor pro also.
Hi Waseem, thank you for your comment. I recommend posting your question in the Elementor Community Facebook group. You'll be able to share more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
I'm confused. For example, in the "Call to Action" part, if i'm creating that section by myself, i use an image, heading, paragraph and button. So does Elementor. Why the enormous difference in the load time? Does Elementor force me to only use it's templates? Shouldn't i create any section by myself because my load time goes through the roof? What if i want to add two buttons next to eachother in that CTA section? I think what should be happening is, let's say i added the "Call to Action" template, i can customize it like you've shown in the video. BUT, i should have an option called like "decompose" which literally decomposes the whole section and i can delete and duplicate parts however i want. So i can create the same well performing section on my own if i want to. I hope that made sense, i don't know if it's just me but that sounded like a good idea. Anyways, have a wonderful day.
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!
I found lots of good information on this video but it would have been nice to show how you now optomize this layout for tablet and mobile. When I tried to do it with some of the widgets used it was pretty much impossible?
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
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.
Hi Kevin, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
Hi Gideon, thank you for your comment. You would approach this project in the same way. Simplify the sections that can be simplified using widgets, and keep the use of columns / inner columns and widgets to a minimum. Hope this helps!
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.
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.
I’ve used the icon widget to achieve the results you showed, however on some colorful svg icons the colors are shifting when they are selected. How do I avoid this issue? I found that creating this layout from scratch eliminated this issue when selecting them using the image widget, but I would like to optimize this section and use one icon widget. Thanks in advance for any help you can offer.
Optimize for GTmetrix and desktop and optimize for Google Page Speed Insights mobile is totally different story… I ready wish Elementor can optimize further for PSI. Looks like most likely it's not going to happen soon…
Hi Dorian, great catch! Here's a link to to the video: th-cam.com/video/CjdFxKPPikU/w-d-xo.html. We'll add it to the description. Thanks for pointing that out.
Great best practice tut! I´d like to see more of that! Anyhow, when I add the site logo it always stretches out the column automatically so that I cant adjust the height of the column using minimum height. Is there any solution for that? Appreciate your answer :-)
Hi Moritz, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
I have the same problem. On desktop it works as described in the video. But on tablet and mobile it does not work. With a 4 column 25% layout on desktop I set 50% on tablet and 100% on mobile. But it does not change anything?
Please make more advanced videos of this kind, very helpful and informative for web developing process. How about Popup, Theme Builder, Blog Post optimization..
Hi Tri, thanks for your comments. We do have videos on some of these topics. Here are a few to check out: Responsive 101: th-cam.com/video/EqFxeluk4U4/w-d-xo.html Theme Builder Overview: th-cam.com/video/BWx8NQm2hdI/w-d-xo.html I'll be sure to pass your suggestions on to the team for future tutorials.
Hello again. Would it be possible for you to make another video on creating small sections, like an image in 1 column & a heading, text & call to action button in the other (a section with 2 columns) & using the free Elementor version. I know I’m asking for too much, but would really appreciate your help. If you can’t, could u just guide me through 1 or two steps on here & i’ll try to figure out the rest on my own. Any plugin for that? Thank you
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
The tutorial really good. Beginners always make those mistakes. However, would like to point out the network tab testing after the optimization misleading. 20:20 It was loading the asset files from cache that's why showing the Load for 588ms (transferred 8.9kB) 02:17 The original test Load for 2.88s (transferred 5.5MB) Just like other comments, perhaps the mobile lighthouse score can be shown and improved.
Hi Batags, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share more information about this issue, and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314/
![[02] Optimizing Your Images](http://i.ytimg.com/vi/8BqHUx6Zex4/mqdefault.jpg)
![[02] Optimizing Your Images](/img/tr.png)
![โอ้เธอช่าง... - บี้เดอะสกา ft. ต๋อง เทวัญ (Prod. by ป๋าเพชร) [Official MV]](http://i.ytimg.com/vi/zbWhiLFmVL0/mqdefault.jpg)
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.
Hey Ian thank you for your feedback! Have you watched all 5 parts of this series? What did you think? th-cam.com/play/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot.html
@@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?
Exactly. I now have so many old websites to optimize because I was building in the dark
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 TH-cam 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.
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!
i guess Im kinda randomly asking but does anybody know of a good place to watch new series online ?
@Fox Harold lately I have been using FlixZone. You can find it by googling =)
Heather I could not agree more. I’m guilty of column and inner section use. This has been most useful.
@@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.
Wow. No optimalization plugin can beat this. Absolutely great tutorial. Going to be more aware about this in my upcoming projects. Thanks!
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.
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!
But it actually lowered my google page speed and gtmetrix mobile by 50%!
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?
Agreed! I was trying to figure that out too
@@jaxrachel ye I know... It's a great value this Tuto but to me it was not completed
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
@@stevenkiridis thanks for answering. As I thought you just confirm. Appreciate it. 🙌
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!
Just amazing how much cruft you cleaned up by using the single column. I learned so much. Thanks 🙏
This is hands down the best elementor page layout video ive watched so far. Well done
Thank you for the video! Good job!
I have a few questions though.
Do all the proposed changes result in semantically correct html?
Sure merging sections will result in less code and simpler html layout. But doesn't that defeat the purpose of having sections in the first place?
Thank you!
I have this same question.
If only I had seen this before rebuilding a 200-page website. Great information!
almost the same here lol
Been building websites for 20 years.. This one small video convinced be to start using elementor. Cheers
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
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.
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)
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 👍
The Call To Action image seems to have a weakness compared to using an image widget. There doesn't seem to be any way to have the image in a Call to Action actively resize the image as the screen size changes like it does in an Image widget. No matter what I do to the spacing and sizing and such there will always be some cropping of the image at some image size. Any way around this? Also it would be nice to have multiple buttons!
Great tutorial and I definitely learned a lot!
+1
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)
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...
Brilliant. Very well explained. Great speed. Not to fast or too slow. Nice clear commentary. Keep them coming please Elementor.
Thanks for the feedback Just in time!
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
Watched this just before starting to make my website... couldn't be more thankful! Such a helpful video!!
20:26 You are using "DESKTOP" to measure speed. Any reason not to use "MOBILE"?
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"?
Yeah, I'm here. My performance was worse!
On the hero section, I notice that you are using a Heading widget and a Text widget separately. As said throughout the video to use as few widgets as possible, is it better to use for ex. an Image Box/Icon Box/Call-to-Action widget and then remove the image/icon/button from the widget? Fewer widgets with an empty placeholder/container.
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!
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.
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
Wow François I'm happy you found it valuable! Have you seen the whole Optimization playlist? th-cam.com/play/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot.html
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.
@@TimOlukayodeAjayi I think you mean you “couldn’t agree more”, not “less”. 😜
Could you share what's the advantage of using % for the padding vs using px or em/rem? And when do we use em/rem?
Thanks a lot. I have been using Elementor for 3 years, but I learned many new things from this tutorial :)
Wow thank you! I'm happy you found it informative 😊
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
Top tutorial! sooo useful!! thanks! Just a quick question. How can I add subtitles to image boxes, for example? a subtitle that is in a different font and color? is it possible?
MY GOSH....I FEEL LIKE I CAN BE A PROFESSIONAL FROM THIS 22 minute tut!!!!
This was very helpful. If this is the standard practice, why aren't the templates built this way?
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.
This is hands down the best Elementor optimization video I've seen.
Thank you!
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.
I agree, very useful video, but mobile is the real pain, would love more of that!
This is so important and needs to be watched by every Elementor user.
It is a pity you haven't shown all the sections on the mobile version..I was curios to see how this would go...
I may try to do one section as described, and see what it does on the phone
@@JulaWeg I did and the hero section is crap...
@@aledianin Thanks, I feel better. Yesterday I gave up redoing my website. Is what it is. I need to talk to Elementor Techs. Have nicely set up Global setting but any time I need to add a section I have to copy the previous one and redo it.
Best Elementor video I have ever seen. This is freaking amazing!!!
Will there be an updated version of this now that Elementor is using containers in stead of sections and columns?
This one here is the most important tutorial on Elementor ever!
Great suggestion Random, you can give it directly to the development team here elementor.com/help/send-your-feature-request/ .
Excellent video, and I've already subscribed to your informative channel though I've only got one complaint. The part where you've used the "call to action" widget, you should've mentioned that this option or feature is only for Elementor Pro. That being said, I did learn a lot from this video. Thanks
Thank you for your feedback Vin Vin!
Are the blog post templates in Elementor Pro optimized?
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.
Hey Muli, I showed this comment to Ash ( the English man 😉) I'm glad it you found it helpful!
This has to be one of the most helpful and useful videos you guys have created. Absolutely brilliant, thank you.
I'm glad you found it helpful DesignSoSimple 😊
Thank you so much. I have a lot of layout changes to do
Your welcome Kazzem 😊. I'm happy we were able to help you build a better website 😎.
I use the product slider and the different images makes it move about and I guess it affects this cumulative shift thing? Or whatever it is? I wonder if there might be a way to counter this?
I had no idea the image box and call to action widgets were so flexible, awesome!
Thank you! Thank you! Thank you! Lesson learned, before browsing dozens of videos, just go to the source and get right to it!
The most important tutorail for elementor designers . Thank you ❤
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
Probably is a little harder to do right now, let's hope that it will be better in next versions
everything is perfect in this video. but I could not find dynamic tags for Headings in Elementor. I have installed the latest version for elementor pro also.
Hi Waseem, thank you for your comment. I recommend posting your question in the Elementor Community Facebook group. You'll be able to share more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
When should I use PX and when relatrive sizes?
Padding = relative
Margin = PX
In mobile version always px?
Please Help.
I'm confused.
For example, in the "Call to Action" part, if i'm creating that section by myself, i use an image, heading, paragraph and button. So does Elementor. Why the enormous difference in the load time? Does Elementor force me to only use it's templates? Shouldn't i create any section by myself because my load time goes through the roof? What if i want to add two buttons next to eachother in that CTA section?
I think what should be happening is, let's say i added the "Call to Action" template, i can customize it like you've shown in the video. BUT, i should have an option called like "decompose" which literally decomposes the whole section and i can delete and duplicate parts however i want. So i can create the same well performing section on my own if i want to. I hope that made sense, i don't know if it's just me but that sounded like a good idea.
Anyways, have a wonderful day.
Wow ... What an incredible learning resource--THANK YOU! This one is definitely being saved for future reference!
This has definitely improved my websites
Yes!!! That's what I love to hear 🤩!!!
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!
I found lots of good information on this video but it would have been nice to show how you now optomize this layout for tablet and mobile. When I tried to do it with some of the widgets used it was pretty much impossible?
Very usefull for beginners and for advanced web creators. I'll see all video. Thank you.
Thank you Cristian, I'm happy to hear that advanced web creators liked it as well 😊
Excellent. Just what we need. More like this please.
Thanks Erica! Have you seen the whole series? th-cam.com/play/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot.html
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
Hi how did you find out the exact negative value to position the menu (-60) thanks
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
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!
That's what I aim for! Thanks Darren 🤩.
What about the responsive to mobile devices from your "optimal icon box"??
Priceless info and so great to know the motion effects (I’m all about these!) don’t affect the load times
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.
Loved this video! Thank you so much. I just wish you would have shown a more complicated footer.
Will you do a video with the same subject but with flexbox?
But how do we know how many pixels we need to reduce in margins to center the text?
I was wondering how he came to that number my self.
Will you redo these videos with containers?
Hi love this vidéo!
I just have one problème with the first step.
The icone box on mobile doesn’t look good...
Hi Kevin, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
Mind-blowing! 🤯
Why nobody teaches that?!
Thanks a lot! 💙
Wow what compliment Lincon 🤩!!!
Is there a content counter that will give me the number of widgets, columns, and sections on a page?
What if a brand want to display many information and its requires many columns and sections, how do you go about it?
Hi Gideon, thank you for your comment. You would approach this project in the same way. Simplify the sections that can be simplified using widgets, and keep the use of columns / inner columns and widgets to a minimum. Hope this helps!
@@stevenkiridis thanks
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.
Beautiful man!!! already optimizing my website with this tips!!! Thanks a lot!
I'm glad it was useful Nubenegra
@@Elementor no, thank you man!
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.
I’ve used the icon widget to achieve the results you showed, however on some colorful svg icons the colors are shifting when they are selected. How do I avoid this issue? I found that creating this layout from scratch eliminated this issue when selecting them using the image widget, but I would like to optimize this section and use one icon widget. Thanks in advance for any help you can offer.
Well that was simple and smart. Thank you
Optimize for GTmetrix and desktop and optimize for Google Page Speed Insights mobile is totally different story…
I ready wish Elementor can optimize further for PSI. Looks like most likely it's not going to happen soon…
At 5:46, you say, "you can find our dedicated video about "globals" in the description below." Where? It's also not in your playlist, that I can find.
Hi Dorian, great catch! Here's a link to to the video: th-cam.com/video/CjdFxKPPikU/w-d-xo.html. We'll add it to the description. Thanks for pointing that out.
first test on network tab was not using second cache, and after optimzation it was test using cached site.
Great best practice tut! I´d like to see more of that! Anyhow, when I add the site logo it always stretches out the column automatically so that I cant adjust the height of the column using minimum height. Is there any solution for that? Appreciate your answer :-)
Hi Moritz, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314
The best tutorial i've seen.
Good for desktop version but it doesn't works well on responsive version. While I try to increase or decrease the custom with (%) it doesn't work
I have the same problem. On desktop it works as described in the video. But on tablet and mobile it does not work. With a 4 column 25% layout on desktop I set 50% on tablet and 100% on mobile. But it does not change anything?
@@philippbraccini8333 Hi, try changing full width in mobile device. It will work.
Please make more advanced videos of this kind, very helpful and informative for web developing process. How about Popup, Theme Builder, Blog Post optimization..
Hi Tri, thanks for your comments. We do have videos on some of these topics. Here are a few to check out:
Responsive 101: th-cam.com/video/EqFxeluk4U4/w-d-xo.html
Theme Builder Overview: th-cam.com/video/BWx8NQm2hdI/w-d-xo.html
I'll be sure to pass your suggestions on to the team for future tutorials.
Hello again. Would it be possible for you to make another video on creating small sections, like an image in 1 column & a heading, text & call to action button in the other (a section with 2 columns) & using the free Elementor version. I know I’m asking for too much, but would really appreciate your help. If you can’t, could u just guide me through 1 or two steps on here & i’ll try to figure out the rest on my own. Any plugin for that? Thank you
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
How do I get lighthouse, it doesn't appear in the inspection element
Did Adam see this? 😂. Thank you for this. So helpfull!
The tutorial really good. Beginners always make those mistakes.
However, would like to point out the network tab testing after the optimization misleading.
20:20 It was loading the asset files from cache that's why showing the Load for 588ms (transferred 8.9kB)
02:17 The original test Load for 2.88s (transferred 5.5MB)
Just like other comments, perhaps the mobile lighthouse score can be shown and improved.
Hi Lee, thank you for your comments.
Best video on elementor!!!
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!
I couldn't agree more Mike!
This is great. I'd love to see more content like this from Elementor.
Ummmm...like...,.wowwww...this is great stuff...thank you.
I see we left you speechless😆 I'm happy you liked it!
What a great video! You have answered so many questions in just one video. Thanks a lot.
Thank Wood, that is amazing to hear! I'm sure you'll like the rest of the playlist as well 😉th-cam.com/play/PLZyp9H25CboFg7tA0J3ksRf7gjOsrW1Ot.html
Thank you for making this video. This is the best ever useful video I found for elementor.
The part when you show the call-to-action widget, when I view it in mobile everything is squeezed together, please advise
Hi Batags, I recommend posting your question in the Elementor Community Facebook group. You'll be able to share more information about this issue, and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314/
Wow, that's great tutorial.