How to optimize the layout in Elementor (Widget Stalker)

[@humbertogregorio8092]

Wish Elementor would hire you as a product manager, development consultant or something similar. You hit the nail on the head every time, put your finger in the wound and offer the right solutions.

[@OoohBoi]

Thanks a lot! The only downside of that might be a fact that many people would no longer be able to enjoy the free ride.

[@alokdadapure969]

@@OoohBoi This is exactly why you so good.

[@ajaybanga6086]

This Man is a Genius. Truly the Master of Customisation and Wordpress. Keep on doing great work. Learnt a lot from you. Thanks 😊

[@OoohBoi]

I appreciate that!

[@vhtorr]

This is like the most underrated Elementor content I've ever seen on KZbin, simply game changing in the way we can reduce the amount of columns and sections, keep up this unique content!

[@OoohBoi]

Thanks for the feedback, feel free to spread the word (or share) in order to make it overrated 🤪

[@ocratest]

@@OoohBoi 😁😆 - Touché

[@glencoe1266]

Funny, I have always worked this way to do layouts. I always found dividing a section into two div columns (especially for just a Header and a sub header) a waste of time and redundant when you can easily do it with flex and positioning. All this bloated crap i keep hearing about reminds me of the early days of WYSIWYG editors and how it used to add bloated markup just to move elements around on the page. Combined with newbies who don't now much about HTML and a visual editor we got the bloated code that elementor spits out. And its not elementors fault, its people just not paying attention to proper layout techniques and just duplicating divs around for really simple things. Great video BTW and this should be explained a lot more by elementor.

[@OoohBoi]

Fully agreed Glen, thanks for the feedback!

[@Pert-C]

I don't understand how someone press dislike button when the video offer such great information. And is free. Best Elementor chanel on the youtube whit awesome content. Thank you for the steroids for Elementor plugging to.

[@dannygrio]

Those are haters! They do this with everything in life!!

[@DanielRaghu]

Great tips! I started using in-line styling a lot more in Elementor after I learnt Webflow. Your plugin just makes it so much better and easier - especially the widget order. Thank you! Even your demo designs look so clean and attractive :)

[@OoohBoi]

Great to hear! ...and thanks for watching, of course!

[@DanielRaghu]

@@OoohBoi thank you for all the work that you do!

[@sandrocoelhoo]

Este é simplesmente o melhor canal para quem quer aprender técnicas avançadas do Elementor. Continua postando, não para! Please, dont stop to post man! Ur videos r awesome!! Im learning a lot and will remember forever about ur tutorials.

[@violettaletha]

Stunning! I love your videos 👏 you've answered so many of my questions 🙂 Really grateful to have found your channel, you taught me a few valuable things, thank you for sharing your knowledge with us all 🥺

[@OoohBoi]

I'm so glad, thank you for the feedback!

[@NicholasZein]

Finally someone addressed the elephant in the room. Elementor is only bloated if you don't know how to use it.

[@maxrainheart]

Elephantor.

[@angelabowman7844]

Yes! We will dedicate our May Boulder Elementor Meetup to this.

[@simon_quinn]

Elementor is more bloated if you don't know how to use it.

[@mybcn]

Fantastic information, well presented, as always. Yours are the only new videos on YT I am actually excited about. This because I know I will actually learn something. They are also some of the very few ones I return to watch again. Thank you for the introduction to Flex, as mentioned in another forum I had no clue what it was. Every day is a school day!

[@OoohBoi]

Awesome, thank you for the feedback!

[@coolestnerdever2128]

Great tips. I’ve never thought to use Image box for title/tagline combo. Will definitely do that going forward.

[@manthanadmane7812]

This is 'A' grade content for Elementor professionals. Great job!

[@OoohBoi]

Glad you think so!

[@chrisr1241]

I simply love your videos. Great content! Great Plugins and nice accent... wonderful! Very relaxing...

[@OoohBoi]

Thank you very much, it's feels great to know that!

[@maxrainheart]

Great stuff and concise. Had to watch it twice, pause it time to time. You are always tripping me out.

[@OoohBoi]

Oh, thanks buddy, it's good to know about that tripping part 🤡

[@TimChorlton]

'PLEASE' start charging for your steroids plugin - it is one of the most useful add-ons to Elementor and you should be financially rewarded for such a fantastic tool and all your hard work in putting outstanding content like this together!!

[@OoohBoi]

Isn't it always nice to have something that matters, and it comes without the price tag? Enjoy the free ride buddy, we ain't gonna be here forever...

[@akashbond862]

What's your problem? You can donate if you like, let others enjoy.

[@sgo7806]

Best Elementor Vids!!! Thank you! Still waiting for a online course from you ;-)

[@OoohBoi]

Thanks, buddy!

[@connectadnan4669]

Something different as always 🔥🔥, the only man on the KZbin sharing some extra ordinary stuff

[@OoohBoi]

I appreciate that buddy, thank you!

[@connectadnan4669]

@@OoohBoi I am also a wordpress developer from India, I am following you since you started your channel. You are helping a lot of beginners ,hats off man

[@connectadnan4669]

Why are you not active on Instagram, you should upload short clips there, your content is amazing man. I hope everyone would love that

[@ashikurrahman3977]

I love your videos! It's very informative and always there is something to learning new. Thank you so much for creating videos for us. Love from Bangladesh!

[@OoohBoi]

You are so welcome! Greets to the awesome people of Bangladesh!

[@ludovicverbeeck]

thank you boi! amazing as always! any thoughts about the responsive breakpoints? i got a them thats has 5 different and it helps me a lot!

[@OoohBoi]

Thanks buddy! Not sure about the responsive breakpoints tho, we'll see...

[@KariposTheOne]

We need you in the Bricks Community!

[@juarang]

You are a complete Genius Bro!!!

[@КонстантинК-ю1м]

Thank you! It's really interesting new point of view about the optimization, never thought about it

[@OoohBoi]

Glad it was helpful!

[@gexslide]

you are a very good teacher!... i don't know why i'm not subscribe to the channel yet... well, i will fix it now!. Great work!

[@OoohBoi]

Welcome aboard!

[@tobisalami]

Thank you so much for this. Please let me know, are you using PowerPoint for this presentation? And how did you go about it to make it so smooth?

[@OoohBoi]

No, I'm using iMovie, that's all.

[@adminaccount3304]

I try to avoid using plugs, is there a way to accomplish this with the default elementor pro? If not does the new plug affect performance at all?

[@MattyPod27]

Learning new stuff every videos. Thanks a lot !

[@OoohBoi]

My pleasure!

[@Acemoddz]

How does this compare with the new flexbox containers?

[@jaagaaaaaan]

As always neat and awesome tutorial and plugin feature Ooh Boi! Would love to see in the future video if possible some additional and overall optimization tips for websites esp. sites using wp / elementor/ Oooh Boi steroids (gtmetrix and speedinsights grades)! Keep Safe man!

[@OoohBoi]

Thanks! As for the "optimization tips", I believe that Steroids for Elementor offer more ways to optimize your website (layout) than any other Elementor plugin out there. What exactly is your concern?

[@jaagaaaaaan]

@@OoohBoi Thanks for the reply Man! Yah I agree that your plugin was one of the best for Elementor, was thinking and curious if by any chance you can show maybe some more speed optimization practices, like best plugin combinations, themes based on your experience for website launching. Thanks man!

[@NicholasRobb]

this is so useful thanks for this video. can I ask, what is the advantage of using "Widget Stalker" over "advanced > positioning > inline"?

[@NicholasRobb]

doh. nevermind at 12:40 you explain this.

[@vingogyq1287]

Wow.... Just amazing, super practical!

[@OoohBoi]

Glad it was helpful!

[@susanngigi7599]

I have a problem with the widget stalker, when I set the mobile size at 100% and I choose units or flex it always shows it at 50%. Please help with this.

[@osherfreeman6189]

The best! Thanks you so much for these videos! 🙏 We will be very happy to see videos about the other steroid options, like the one in the video, there's so much to do with them!

[@OoohBoi]

Thanks! More is coming soon...

[@marekgabik2898]

Amazing content. But not just this one, this whole channel is video bible for Elementor. Can I ask you if you use any optimalization/cache plugin and what is your favorite?

[@OoohBoi]

Thank you buddy! WP Rocket would definitely be my choice.

[@marekgabik2898]

@@OoohBoi thank you for answer 🙂

[@1Deduced]

Great tutorial, thank you for your teachings. Could you use 'Call to Action' widget instead of image box? then you get the button as well

[@oscarfuso1552]

Thank you for all that supreme content. I have a question. Is possibile to control the space after the last paragraph in the text editor? Thank you

[@OoohBoi]

The following CSS should work with Elementor PRO and the Custom CSS panel... selector .elementor-text-editor p { margin-bottom: 10px !important; /* or any other value/units */ } This is how it gets global (use the Site Settings, Custom CSS)... .elementor-widget-text-editor .elementor-text-editor p { margin-bottom: 10px !important; /* or any other value/units */ } ...and this should be OK for the WP Customizer's "Additional CSS" panel... .elementor-widget-text-editor .elementor-text-editor p { margin-bottom: 10px !important; /* or any other value/units */ } ...in case you want to be more specific when it comes to the particular Text Editor... div[data-id="3d00fb1"] .elementor-text-editor p { margin-bottom: 10px !important; /* or any other value/units */ } (of course, you'll have to take a look at the page source code to read out element's data-id)

[@adminaccount3304]

Also how does this compare to the new flexbox containers experimental option for elementor performance wise, they target reduced DOM

[@fluttersheesh8884]

Hey, i just clicked this video (again, already watched in on upload) to comment, that im absolutely grateful for your WP-Plugin, with the new update its like steroids squared. I love it. there is one thing that bothered me recently in Elementor, because i dont understand it. You can use your global color set for basically everything but not for box shadows. Its weird.

[@OoohBoi]

Oh, that sounds like another Site Settings bug. I've got a few of them already detected...

[@guilhermesampaio5318]

Great video, dude! I'm actually trying to make some sites faster and this come just in hand. Thank you.

[@OoohBoi]

Glad I could help!

[@SuleymanAkhundov]

Very nice and smart as always, Oooh boi! A very timely video given all this commotion related to the expected Google algorithm update in May this year. I wonder if you are planning on releasing some content element addons to Elementor. For example, just like you were talking in this video, an improved heading or image box element that includes the button for an even higher degree of functionality merging within one element, or something along these lines. I would love to some a theme from you in the future which is based on all or most of your tricks and takes full advantage of your current plugins. Perhaps, it is time to start building your own ecosystem for Elementor, a smarter and more efficient "Crocoblock" if I may say so. )

[@OoohBoi]

Thanks! Creating another Heading widget would be counterproductive bcoz that's how I create yet another *widget*. Besides, that new widget would use Elementor's "infrastructure" anyway, and there's nothing to be improved at the end.

[@eddier.6749]

Thank you! Always great tutorials.

[@bySterling]

I just bought 11 of your widgets/json and zip files! Oooh Boi! If I may say I def think you should have your own WP designed kick a$$ website (instead of the gumroad one), for a way more impressive modern and visually appealing user experience and an all in one amazing showcase of your insane talents and design skills (like HappyForms and Premium AddOns kinds of sites but your's would be Next Level!)

[@OoohBoi]

Thanks for the support, buddy! I wish I had more time for something like that... maybe when I get retired... I'll put that on my to-do-when-retired list.

[@dannygrio]

ANother great video! You should have millions of followers! Maybe you can do your tricks with dynamic content, such as crocoblock! :)

[@OoohBoi]

Maybe one day! Thanks buddy!

[@nikarose]

How do I set up these elements to rearrange in Mobile. I put 4 elements next to each other in one column like this but now they look bad on mobile

[@zipitrik1]

Another one , Another one , Another one , Another one of my problem solved. You rock !

[@OoohBoi]

That's was nice to read, buddy!

[@AntGeezer]

On top of the game as always 👍

[@DeanSuhrMLD]

I noticed that as the HTML and nested elements size shrunk, the load time almost doubled from 810ms to 1,440ms ... so did we reallly gain?

[@OoohBoi]

That's definitely something I dare to call a phenomenon.

[@rahadianputra3745]

This information is masterpiece, love your channel and your plugin too, thanks a lot

[@OoohBoi]

Glad you enjoy it!

[@iballmedia]

So fricken CLEVER!! Love your videos ...

[@danplumadore647]

Amazing as always. Not to mention timely! You have a knack for making us mortals improve every time. Thank you for your generosity.

[@OoohBoi]

Wow, thank you, my pleasure!

[@patrickbell9117]

I have(had) two columns - header and navmenu at top of first col and an image in right column. Using Widget stalker I successfully deleted the right column but now my header is vertically centred and the navmenu at the bottom. Every setting I can find set vertical alignment to top. Is there a better way than negative top margins to align them as I want?

[@OoohBoi]

I can't picture that situation buddy... In general, you can use "Align Self" option for any isolated vertical alignment.

[@camerafamilyikinderfotogra6808]

Thank you so much! Do you also have a tutorial how I can optimize the pictures for beginners.

[@OoohBoi]

Yes. You can go to compressor.io , it'll do the magic.

[@camerafamilyikinderfotogra6808]

@@OoohBoi thanks for the link. I would be great to see what pics you use. Like... here in this example I use 350 x 250 pixel.... or does this make wordpress for us to make it in the right size?

[@daniilk9666]

What about the responsiveness of this solution? You haven't shown how it will reflect on the mobile version of the site.

[@piwozero]

Is it event worth to do? It's not really much to have noticeable speed improvement in my opinion. Still seems to be faster approach in building layout.

[@OoohBoi]

I guess it's OK if you don't mind the difference, but in the other hand it's not that bad to keep on mind what's going on "behind the scenes" if you don't.

[@pistolpete19761]

Thank you very much, as always very helpful. Elementor should pay you for this, since not much has been done for performance. I was using columns a lot in the past. For me columns have the advantage of equal background colour. Is there a way to achieve the same result without columns???

[@OoohBoi]

Thanks! Well, if it's all about the background color then the sacrifice must be made. However, you can always have only one top Column (having the background-color), while everything else inside that column gets optimized in the best possible way.

[@ljubov_studio]

Čoveče koliko muke i patnje da bi se zakrpio osnovni Elementor i tek malo smanjio DOM. Što jednostavno ne pređeš na Oxygen prijatelju?:))

[@synriser6742]

Great tip. Can you do a video on how to organise the page layout regarding H1, H2, div etc. Basic structure. Thanks for your great content.

[@OoohBoi]

Thanks for the feedback! As for how to organize the page layout HTML-wise ... not sure if that might help more than many already existing articles on that topic... did you try to see what Google has to say about?

[@synriser6742]

@@OoohBoi I will have a look.

[@kevinroberts3789]

Thank you. That was very enlightening!

[@OoohBoi]

You are so welcome Kevin!

[@shaolin60]

what effect will this have on mobile devices? I mean ease of adaptation using your widget? Thank to awesome video!

[@OoohBoi]

All of the settings are responsive (settable per device), and I don't see a problem here at all.

[@shaolin60]

@@OoohBoi thank, that was preuse question. Wish good health)

[@sachucoinage3533]

I know you are best. no confusion about that. i just want to know when will an explanation video about all widgets of ooohboi plugin coming, not just for knowledge purpose but also to help us promote your plugin at different places. no goodwill, its just that you deserve it.

[@OoohBoi]

They are coming, no worries. I know I'm a tad late but I also have things to do for living...

[@MrFiversen]

You're incredible and always given so much god information and ideás about how to do the things right but there is one thing i have to say and that is that i get motion sickness when i watch your videos because the mouse goes around up and down again and again. It is very distracting and "spoils" the fun a bit

[@caminoansare]

hello, how can I change the order of the elements within a column only in the mobile version

[@OoohBoi]

There's an option named "Column Order" to the "Breaking Bad" extension, it works in a responsive fashion so you can use it for that purpose. You can also change the order of widgets inside the column by using the "Widget Stalker" extension - if needed.

[@caminoansare]

@@OoohBoi Thank you very much, I solved it with Widget Stalker :)

[@bySterling]

Oh wow right away I didn’t know Firefox so awesome for developer tools n with those pie chart html weight stats Always love your vids 100 boiiiii!

[@OoohBoi]

Happy to help!

[@KariposTheOne]

Wow, you are genius!

[@thegamingbug3770]

hello ooohboi, I've used widget stalker in one of my column with 3 widgets inside it. but it seems the last widget leaves more space in bottom. how to overcome that.

[@OoohBoi]

Try to "Align self" to ""Baseline" instead of auto

[@thegamingbug3770]

@@OoohBoi Thank you so much, but the row still has extra space below widgets

[@KevsGuide]

thankyou, can it be done with the free elenmentor BTW?

[@KevsGuide]

DO you have this for containers pls ?

[@DjMika012]

Really nice ! Thanks for sharing

[@OoohBoi]

Thanks for watching Michael!

[@alipiogabriel7416]

LOVE IT. LIKE IT. I SHARE IT

[@Phoenix_Arise_J]

loved it ❤

[@sophie-you]

Thanks a lot, just offered you a coffee 😉

[@serverland]

You'r our hero man! thank you.

[@OoohBoi]

Glad it helped!

[@safiraibrahim9310]

Thank you so much this was really helpful

[@OoohBoi]

You're welcome!

[@rashidnawaz5634]

Thank so much for the information.

[@OoohBoi]

You welcome, buddy!

[@teuccio73]

It is always a pleasure

[@joewebdev]

easily the best Elementor channel on youtube

[@AndresBurbano]

Great. Thank you!

[@OoohBoi]

Glad it was helpful!

[@bonchucan]

nice tutor bro... can you give a tutorial about audio in Elementor that can autoplay in a mobile browser and change the audio icon

[@OoohBoi]

Thanks, buddy! I tried to wrap my head around your question/request but I don't think I can picture it... 🤯

[@nidaa3233]

Hey Ooh Boi, I recently updated your plugin which I use in my wordpress website. and it showed fatal error in some file of inc folder line 121. Please help me here.

[@OoohBoi]

Updated!

[@nidaa3233]

@@OoohBoi Thank you so much. You are just amazing.

[@WIThEMaN2]

Oh boi this is a great informational video like always.

[@OoohBoi]

Glad you enjoyed!

[@dimMx]

Thanks again for another awesome tutorial. However I think that a good server and the minimum sections and elements in elementor, make the whole difference. It's a waste of time trying to optimize elementor for each and every section and see gtmetrix and pagespeed tests. If you know what I mean! At last users and Google have the last decision of what to with a website's content! :)

[@OoohBoi]

Thanks for the feedback! I can understand the point, however, it's always nice to keep things tidy. Not everything is happening on the server side, the browser also likes smaller bites, right?

[@dimMx]

@@OoohBoi yes indeed :)

[@Relax-ls1xi]

Super. Really super.

[@nadeemshabudin556]

Where do we get the widget stalker from?

[@OoohBoi]

This is one of the extensions of a bigger package, "Steroids for Elementor" add-on. Just ask Google, it's the smartest machine ever made...

[@heikodietze4983]

Thumbs up, very cool and canny! 👍🏻👍🏻

[@OoohBoi]

Thank you for watching, buddy!

[@phantomlight2636]

woww very helpful sir. but if js file is big how to reduce/minify it mr Ooh boi ?

[@OoohBoi]

You'll have to use the minifier, however, you can't minify JS that gets enqueued with Elementor.

[@phantomlight2636]

@@OoohBoi thanks mr Ooh boi

[@KieranMcCarthy]

Thank you.

[@OoohBoi]

You're welcome! Thank YOU for watching!

[@baliflorent6971]

Thanks you !

[@heavylog1c]

I'm missing the point here. At the begining of the video your page loads 810 ms. And at the end it loads 1440 ms. The whole point of Elementor is to let people with 0 knowledge about HTML to edit their sites. And if you use some common properties, styles and plugins on blocks, then you also have to explain those people how all this works and how to add more blocks without breaking stuff. With inner sections you don't have to explain anything, you just upload a project and people can do fine by their own, it's pretty intuitive. So was it really worth saving 15 Kb here?

[@abereowoseyifunmi9607]

Ooohboi is the best as always....

[@sarmadali77771]

Wow great effort 🙌

[@OoohBoi]

Thanks a lot buddy!

[@dronetechaz]

why is your video flickering green?

[@OoohBoi]

What?! Where?! Any one else got that noticed?

[@cheveznyc]

So I'm new to class. And heard svg instead of png. How when and why. Video.. please.

[@OoohBoi]

I think that Google might provide the most complete/perfect answer to that question!

[@m.t.b]

You can do the most of things in this video with Elementor(free) without a plugin by going to the advanced tab and going down to the Positioning section

[@OoohBoi]

That Positioning thing is a little bit limpy..

[@JayaLove]

How does it look in mobile?

[@OoohBoi]

Download the training file and give it a shot - for your own convenience.

[@yingqiliang1473]

YOU ROCK!!

[@ufo069]

Just wow!!!

[@conorfahy7356]

Legend!

[@jeanlagarrigue9620]

Great, great, great… and awesome !!! :-)

[@OoohBoi]

Thanks a lot!

[@aequitas7483]

Once again, you nailed it. Thank you so much for dedication.

[@OoohBoi]

My pleasure, glad to know that you enjoyed!

[@wayniesinclair]

You are the best... I want your patreon

[@OoohBoi]

Thanks, buddy!

[@samwoods6990]

Great tutorials thank you so much! I had a question if you get advanced header sections where eg you have to create one section to make the background colour one colour then another section to make the background another colour eg www.namecheap.com/ see how the top section is dark and the second is light and the third is transparent, is there any way to create this effect with multiple sections without multiple sections? Again thank you!

[@OoohBoi]

Well, you could use the background overlay! There's one of the extensions of "Steroids for Elementor" named Overlaiz and it helps you manage that precious "hidden" element.

[@samwoods6990]

@@OoohBoi thanks very much for your response if you want these columns to be full width like you can do with a section, eg stretch section, how is this achieved with Overlaiz? I tried 100% and its does not cover the full screen.

[@digwillhachi]

Jesus, you are so good. I love everything you put out!!!

[@OoohBoi]

Oh thanks, that's nice!