Improve Your Elementor Skills by Avoiding 6 Common Mistakes - Monday Masterclass 

I really like your teaching style, the detail you give and the pace at which you deliver it is perfect for my learning style! I save many of your videos to my own Elementor Tips file.

Thank you. These are the vids I seek before learning new software. Good to know the don'ts before the do's. I hope you don't mind that I watched this on a Saturday.🎉

Not checking elements for mobile view at the same time as you create them. Doing it later always take so much more time.

1:07 using incompatible themes 2:42 Don't use empty elements / use padding or margin 4:28 incorrect use of inner section 5:21 Not disabling cache 7:38 Using wrong sized images 9:00 Not setting default colors

I wanted to add that when I first started to use Elementor Pro I used that spacer a ton but as Elementor has learned, grown, and changed with the technologies (that have changed as well) I found as I got used to Elementor as I went along and educated myself with each release or change on the proper way to use some of the functions that I'm using it less and less and actually going through my pages and correcting all that kind of stuff. I was so shocked at just how many spacers I was using but also in how little difference it made when I removed them. so it had me questioning why I used them in the first place except for lack of knowledge :) Thanks for all the great info and reminders.

A text version of this would be very useful. Thanks.

What would be really cool would be a feature that you could move any element to any place of the page and layering it over or under the other elements

the space widget is actually super helpful for me. I did not know that it can effect your website at all.

Great video. Thank you so much. The question is, how do I know the appropriate image size to use?

yeah great tutorial for everyone. Here I would like to know is, when should we use margin or padding to create spacing between row, what is the difference? and the different between EM and % thanks

**FEATURE REQUEST:** It is sometimes a little bit difficult to forecast, which foto dimensions we will use. Therefore it would be really great to have the possibility to define the size and frame it somehow intuitively inside Elementor. That would be awesome.

Making changes to the size and shape is fine, now having done that what section in Elementor/button, do you add the navigation nfo for when the buy now button is selected. . I use PayPal, i copy the navigation info, go to Elementor, and add it where?

Help! I recently switched my theme to Hello. I set the default colors for my website at the start - YAY! I didn't make that mistake. But Hello isn't picking up the colors for things like buttons - for example in WOOCommerce. I'm getting that (horrible) purple-pink Hello color. Do I have to change the Hello CSS to get rid of that purple-pink and have the theme pick up my brand colors?

I am a new website designer & almost building 99% clients sites with elementor only. The only problem is there are very themes available on internet compatible with elementor pro. Elementor developers should make more themes & place in elementor resources for us website designer to save the time. where as wp bakery has too much themes ready at themeforest.

thanks elementor because if you Im making 4 figures for 3 to 4 days of work most of the time. And my investment was the 40 Dollar Elementor Pro upgrade

The best use case of spacer is when u try to separate a complete section from another one. For that i see it as a better & faster solution than margins. Otherwise, it's better not to be used inside sections.

can you explain please about rtl heb, and breakpoints problems

Needs a summary slide at the end!

How do I prevent full width pages from having content touch the edge of the screen when I’m using full width page settings? It looks fine when I have my browser window in full size, but as soon as I narrow the browser window horizontally, all of my page content begins to touch the edge of the screen and loses the gap that was there. Having to manually add padding to each section of a page is time wasting and annoying. Is there a simpler way to just leave a minimum gap/padding for all content, no matter what size the browser window is?

Space widget is important for making a vertical line

thanks sir

Great tips

Very nicely done, I found this helpful.

You mentijoned getting the image size wrong bu I can't find any mention of recomm neded size on Elementors's web site.

I am facing problem with horizontal scrolling in mobile Version my page is not entact it's juggling help me with it

I often use spacing if I need vertical margin on mobile only.

It is so useful.....

Is there a way to detect, in already created pages incidents of the spacer element or the inner section? I'd love to go through and remove/modify these.

Kindly make video on blogs by element or

If you remove the spacer, how will you show a background image in an "empty" column?

How many of you actually tried Ctrl-Shift-T while watching the beginning of this video, raise you hand if you did ✋

If you guys can produce more tutorials, that will reduce the chance of bad habits or but logics picked up from *other* RU-vid tutorials.

Thank you for this video. HUGe Help! :D

I use the space widget all the time ... so does that affect the seo ?!?!?!?!

finaly a good video again ! with good infos !

Great

adding margin to the space widget

I use the spacer..and i want to keep it

yes we use space widget

It's unclear what those default colors correspond to.

Hello, update elementor Version 2.7.0, at the time of applying Motion Effects the contents of columns and images disappear, they are only visible in the editor, when viewing these they do not appear. Please help.

Hi. Great video again. Is there a way to add a post slider in the home page please using elementor? Thanks

I always use the spacer widgets just to frame my website.

For those of us who have used the Spacer widget quite a bit, having the widget suddenly removed will wreck our layouts. We didn't know we shouldn't be using the Spacer until you put out this video. Having it available to use along with the other widgets implies that it's safe to use (there's no disclaimer or warning in the editor saying not to use it or that it will be phased out). Elementor also suggests using the Spacer in other instructional videos on this channel.

WE NEED A GOOD COOKIE CONSENT TOOL!!! a Proper well-made cookie consent tool. Yes I know you can make a banner with accept - decline but this is not AVG. We need a modular cookie consent option that scans / autoblocks all tag scripts from loading, that works with caching and minification Why like this? Some ways of implementing analytics have you use plugins that try to add your analytics code them selfs. Something like Woocommerce facebook pixel addon this plugin will add woocommerce data to Facebook pixel. Yes I know you can setup GTM but still sometimes its a must, if you don't want to code. this will bypass most cookie banners because they want you to add the tag code to there plugin, and toggle it that way. and this is without the problems of caching getting in the way by resetting a cookie to allowance ON. I even tried using google tag manager to make exceptions if cookie: cookieconsent=falce this way you can load in google tag manager. But you can control what tags are fire based on a or multiple cookie states. that way you can even say I want to track pageviews with anonymiseip at all times (because the personal data is anonymized, you are free to track the user) then if someone gives consent you can track more information. Or give people the option to only be tracked by Google and not by facebook. this way you can make cookie consent highly modular + you have the best of both worlds. You still get your analytics without consent. and with consent you get all your analytics. But anyways I think cookie consent needs some major upgrades for how big this problem is. EU and/or US based sites NEED this! And for that, I think it's very much underdeveloped

Correct me if I'm wrong but: 1. SEO is NOT impacted by space/spacers. It simply ignores them (like other code), so shouldn't impact your site ranking, and Google have not made any indication otherwise. 2. Spacers are used when you need the same spacing on desktop and mobile formatted sites. Margins and padding are fine, but they can throw out your alignment between shifting screen resolutions (mobile/desktop/4K desktop/tablet). 3. Elementor v2.7 Beta has renamed SPACER to DIVIDER and you are putting a lot more effort into spacers/dividers it seems. The really annoying bug is white text editing with the left hand side editor. Impossible to see the text.

0:43 This alone made this video worth watching! I did not know that either!

Thanks for that video! I am using the spacer a lot, but I also was wondering why it exists, caus there are margin and padding for that. Since I know, that it possibly bloat my markup, I have a better feeling now to return back to good old margin and padding to position my elements. Keep up the great work! You Rock! I am forced right now to use another, VERY confusing PageBuilder (WPBakery) and I could cry every day. I started learning Elementor first and now have to work with a dinosaur!

Please dont remove that spacer widget. Just dont

Came here for Elementor, liked for the CMD+SHIFT+T tip. Rocked my world...

I am guilty of image sizes. But I don't get, how can I know what would be the most appropriate size for the images I use on my website. Help?

Good call on the spacer widget. I had not thought of the SEO aspect of this.

+1 for the hobbit joke !

So many important lessons learned. I really like your teaching style, the detail you give and the pace at which you deliver it is perfect for my learning style! I save many of your videos to my own Elementor Tips file. Since i started using Elementor (now Pro) I rarely get overwhelmed any more while creating, so my creativity level remains at my highest! Thanks Elementor for the BEST creative toolbox in the world today!

I use the spacer for quick vertical alignment fixes and margin/padding for all else.

My only reason to believe that there is a problem with Pedro is that Disney and Pedro haven't come out and squashed the rumors. The idea that the president of Lucas Film was banned from the set is ridiculous. Also, the idea, that the Mandalorian character isn't in the back half of season 2 is crazy since Pedro doesn't even have to be there to do it.

Once again, elementor makes a video of instruction, and in it, whizzes through the bits where they are making menu choices. Why do you do that? Don't you understand that the VIEWERS need to discover what you are suggesting they do, what you are clicking on; but, you zip through those video frames so quickly, NO ONE can see what you are clicking on. Just another case of developers making instructions assumedly believing the VIEWERS 'already know this'. Think about it for a moment..... If in fact they 'do already know it', .... Why in the hell would they bother to watch your video??? Lesson learned for this VIEWER.

I have a question about which element in the hierarchy I should put margin and padding on. Sometimes I go back and I have to click on everything in navigator trying to locate the one I adjusted. Also, the reason I often use columns for spacing is that layout cleans up much more nicely in mobile version. Tips on adjusting for other screens might be nice too.

We get it Spacer Widget is not much useful BUT it helps sometimes PLEASE DO NOT REMOVE SPACER WIDGET !!!!

Spacer is still necessary in this case: when you have an empty column with a background image, the margin and padding settings do not affect. Only when you put something in the column, eg a spacer, then they are effective. It hurts SEO though. Verson 3.8.1

The only issue I encountered using Hello Theme is Woocommerce extra plugins compatibility. That's why I stick with Astra.

You have some great things to share but hard to follow your instruction. It would be VERY helpful if you slowed it down... way down. I'm new at this website design biz and found it difficult to keep up with what you were saying and doing with the mouse. If you are trying to instruct, I do not think you will find any objections if the tutorial is 16 or even 20 minutes as opposed to 10:44 minutes and rushing through things.

this is insulting at best., First you should tell people why there is no theme. Then you should tell them you have to "rent is for life and use their crappy hosting" and the rest of the scheme/scam. Then you should drop the party attitude and get to business and show new user actually working. Shame

if you fix column setting for PC like in tablet or mobile view you will optimize code, why? when we create many sections code increase if use settings for column we get possibility to arrange content 2 column, 1 column after 3 column or more in 1 section. You can calculate this, and will see, that solution offer possibility to optimize better your code. And second options add option for text settings - Paragraph spacing. This settings offer possibility for better typography on site and reduce code for any press enter on keyboard and create in code

Your point about search engines .. dead wrong. I agree don’t use columns etc.. but google won’t drop your rankings for this kind of thing. Please don’t spread myths!

why is your plugin breaking all of my sites with the latest Wordpress Version?

Spacer widget usefull: when i make a website for a client i usually include some videos how he can self add blog, change stuff in elementor etc... What I did discover is that explain the spacer is much easier then padding and marging .

Global Fonts stopped working and default to original theme fonts. No fix available other than to change the theme fonts in Dashboard or reinstall theme and start over. I believe it's an error between Global fonts vs the original theme fonts. Please fix this bug.

One of the things I want to see added is a transforming header button You can see it on our company site galileo-academy.nl its the contact button o the top. basically want I want is a static menu. On scroll however we want part of the menu turns into a hamburger, and keep some menu items as buttons. Where is this useful? Mainly Shop and Contact button. So when you scroll down you still have a fast way to access your small burger menu because it is on-scroll so it sticks to the top of your screen. But the most important menu buttons you can leave big so it attracts more attention, something like your shop. Or a shopping cart. What is the hard part and almost impossible without CSS: When you go from the full top menu to the scroll menu, it's very hard to line up the button, so it feels as if only the contact button is on-scroll, yet the rest of the menu items transform into a burger menu.

Please don't delete spacer widget. There are some creative responsive tricks I've developed for showing background images on different size devices that have been aided by the spacer widget.

Why is the image size an issue? The img tags has the sizes and srcset attributes. There's also the CSS object-fit property with can be used with the img tag in a similar way to a background image?

Hi Element team, I am not able to use the tool bar at the left of the screen to edit my home page, I don't know what mistake I made. COuld you please help? Basically the menu bar is idle. Thanks

The Navigator only show the elements' types on the page which makes it quite difficult, for example, to change the order (i.e. if one needs to reverse the order in which the elements appear) - is there a way to add a heading text / a first line of text to the heading / text elements?

some experts say to use columns and some advice using only 1 column with many widgets. who to believe? both the 2 experts are from elementer.

hi guys..may I ask how to match the lay out sizes of Adobe xd to elementor??base on mock up they give??

I use spacer with background image. My replacement for using the image widget. Just works better sometimes

I really needed this guys, I was asking and the universe and you guys where listening!

Please don't remove the spacer module it is very useful as I can use it instead of margin and padding and I don't have to change padding or margin for every screen size.

Two thing slowing me down with elementor: 1. Scroll bar. I use a pen mouse and the scroll bar is so skinny that I can't grab it. 2. Can't scroll elementor by grab. I use a pen tool and it would be exciting if I could tap on elementor creation area and glide to scroll like a regular browser page. This slows me down and makes customizing frustrating. Elementor is amazing though.

Hi... if possible, could you do as part of your tutorial a section that shows how to load the navigation info for a buy now button on a web site.. for instance a Paypal button info

how can I prepare the size of my images in advance as stated here? Can someone help me out? I am new to this and I am trying to learn, so please excuse me. I already understand about the size weight of the images and how it needs to be small etc. What I struggle most is setting the width of images for a website. As per the video I was wondering how more experienced designers do their workflow regarding images for the upload to Wordpress. Any help would be great! thank you!

I just learned cntrl + shift+ t as a bonus 😂 very knowledgeable content

Thanks soo much - Its nice for you to confirm the need or ( lack of ) requirement for the spacer - I stopped using the spacer after realising its less efficient especially when tweeking layouts between screen sizes.. plus, setting the site colours up front, way more efficient.

You are a legend, mate! I never knew I had to disable cache whilst editing my site and it was causing me so many issues! Great video!

Thanks for these now I can work better I've been doing these mistakes not knowingly

You missed not using templates! This saves so much time

I do like using the spacer and I hope that you keep it around for awhile.

Spacers are always useful when and if needed. Leave the option available please.

I used the spacer for responsive design. I have on the desktop 2 elements that are next to each other (but separated by 50px), but when I switch to mobile I want them vertically separated a litte bit. To get that spacing I would have to add left and right margins on the desktop/tablet and reset the margins on the mobile. Then, on the mobile I would have to include top and/or bottom margins respectively to get the correct vertical spacing. Instead, I put a third column in with a vertical spacer and set the column width and spacer height as necessary. At the time it felt like a cleaner and easier solution, but it seems I should take the time and do it correctly! Edit: I started playing with doing it right and the first problem I've encountered is that I had a column background - which allowed for the two elements to be the same height. Now, when I do a element background, the elements are different sizes and therefore the background (box) stops earlier on the right side. This is not the look I want. (I copy/pasted the elements between the pages so the settings would be the same - then I started changing the margins/backgrounds to try and get the same results without the added column/spacer). I was looking for a "Minimum Height" (It's the "Posts" widget) but not having any luck so far...

I guess you meant to say that the solution for mistake #1 is to use COMPATIBLE themes (not incompatible as the label says). ;-) thx

control h"" shows all of your search history since last cleared in chrome..

Personally, I use the spacer widget for managing animated background transitions etc - it would be handy to keep it for these cases.

No no, please don't remove spacer from elementor future updates. It's immensely helpful

Is there a recommended size and format for images?

What exactly am I uploading the license?

Great video you guys. Good to know that most of the tips I was aware of with the exception of the cache clearing piece. I was completely lost during that portion of the video but will jump into that rabbit hole later this week to see what I need to do to get this squared away on my sites. Thanks so much for the amazing work + have a great week!-

Gosh.. I think I suffer from all these mistakes!

dont fucking remove the space widget.

Very very useful tips.. Thanks team

While spacers might almost not useful at all, but sometime it does come in handy, for example: I know this may sound silly... When we build a blank column with an image as a background, but without any widget, so we can put spacer inside it, and play with the amount of spacer, and voila, there you have it, an image as the background :D For beginners, this spacer widget is very useful, since the most of them don't understand with margins and paddings yet (well unless you guys make it easy, so we can adjust the space between widgets, columns and section only by using our mouse (by dragging it like divi and oxygen)