Improve Your Elementor Skills by Avoiding 6 Common Mistakes - Monday Masterclass
HTML-код
- Опубликовано: 8 сен 2019
- 𝟮𝟬𝟮𝟮 𝗨𝗣𝗗𝗔𝗧𝗘: While using the Spacer widget to add space around elements is not recommended as the best practice use of it, Spacers DO have many other creative uses. Watch these videos to find out more:
How To Use the Spacer Widget tutorial: • How To Use the Spacer ...
Create Vibrant Gradient Backgrounds: • Create Vibrant Gradien...
Learn to avoid common mistakes and improve your workflow in Elementor: elementor.com/blog/most-commo...
In this Monday Masterclass, you'll find out about the most common mistakes users make:
- Using incompatible themes
- Adding spacers and columns for positioning and styling
- Placing inner-sections instead of columns
- Editing your website without clearing cache
- Not optimizing images
- Not setting default colors
Read the full post and find out how to solve these common mistakes.
Get Elementor: elementor.com
Get Elementor Pro: elementor.com/pro/ 
Хобби
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
Hero
Thanks for this summary!😅
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.
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.
Quite true on all counts! After YEARS of suffering through elementor's lack of communication skills, I can only chalk it up to either incompetance, short-sightedness, non-caring; or all three. It's like no one tests all this stuff before sending it out in to the marketplace. It really doesn't cost much in either time or money to hire a few users of varying skill levels to come into their offices, allow those people to use the new rev, take notes and understand where the questions arise, AND DEAL WITH THEM, THEN, BEFORE LAUNCHING. This happens over and over and over again.
@@richardc8129 And 3 years after this video was released, the Spacer is still available and hasn't been removed yet.
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!
Not checking elements for mobile view at the same time as you create them. Doing it later always take so much more time.
I thought it's fluid for any screen size.
@@virginmethod1761 It is but he is talking about fixing the layout, for example.
True
I would like to see all those explanations, showed on mobile for a second, because sometimes on mobile doesnt show the same way
@@virginmethod1761 it might be fluid but that doesn't guarantee that you will like the layout on mobile as much as a desktop.
0:43 This alone made this video worth watching! I did not know that either!
Came here for Elementor, liked for the CMD+SHIFT+T tip. Rocked my world...
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 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.
I really needed this guys, I was asking and the universe and you guys where listening!
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!-
Good call on the spacer widget. I had not thought of the SEO aspect of this.
I use the spacer to add in images, please do not take it away!!! It is amazing for adding in images that don't look good when using the image widget! I add the image as the background of the spacer!!!! I learnt this technique from watching your tutorials as you guys do this alot!!!
Very helpful even after a year of using Elementor. Thank you.
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!
I used the spacer tool just the other day all while ignoring the fleeting sense that there was probably a better way. Good to know I'm not alone. Here's to continuing education Shanti ;)
The spacer tool is so much faster than messing around with the stupid padding or margins. thats why i use it. have to check the seo thing though...
Thanks as always, Simon! I use spacers when setting background images on columns. I find that if I want to add a border radius to a column with a background image then it won't apply unless there is some kind of content within that column. By adding the spacer this overcomes this issue. Also, when optimising the height of columns with backgrounds on tablets/phones, I cannot set the column height without a spacer inside. Keep up the Monday Masterclasses :)
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.
Maybe if they had provided accurate and adequate instruction upfront at those earlier times for you, you might not have wasted all that (billable??) time.
An absolute masterpiece , this video. Thank you, Simon💕💕
A great Monday Masterclass for a Friday morning! Thanks. I'll have to put my hand up for overusing the spacer >.
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.🎉
This is a great video. I hope to see more. Great teachings.
wonderful class .... love you guyzz
figuring everything out on your own kinda makes you realize that all the frustration has paid off :D i love elementor, when the business takes off i will go pro guys
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...
Thanks for a great lesson. I do use spacer - it's much quicker than playing with too many numbers
Very nicely done, I found this helpful.
The spacer is a throw-back to the Horizontal rule rarely used
You helped solve my issue! Thank you
many thanks for very useful information
Very very useful tips.. Thanks team
Great! Informative video. I did the 2nd mistake over the year. Now time to correct my mistake.
Thank you! This video was really helpful for me. I was doing wrong almost all of the listed examples :)
Me too!
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.
Making more than one major change at a time: This was a mistake I made when I first started using elementor, as everything seemed so easy to change and move around, but moving too quickly also means that it can be difficult to track down any errors afterwards. So I recommend a step-by-step approach.
A text version of this would be very useful. Thanks.
Great tutorial, thanks.
I use the spacer for quick vertical alignment fixes and margin/padding for all else.
Or when you need a clear:both;
Thanks for these now I can work better I've been doing these mistakes not knowingly
the space widget is actually super helpful for me. I did not know that it can effect your website at all.
Tks. Very useful Video. Well Explained. Please make further such good videos.
cmd + shift + T OMG i love you man ,, this will save my life hahahah
still an amazing video in 2021, thanks for the advice!!!! my mistake?...using lots and lots and lots of spacers elements.
great! thank you!!
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.
finaly a good video again ! with good infos !
Thanks You very much
10000 time thank you.
Also I use the spacer widget
I do like using the spacer and I hope that you keep it around for awhile.
Thank you
Can you do another one of these videos? I found this to be very helpful.
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
I just learned cntrl + shift+ t as a bonus 😂 very knowledgeable content
Personally, I use the spacer widget for managing animated background transitions etc - it would be handy to keep it for these cases.
Thank you for this video. HUGe Help! :D
Personally I loved the idea of Space Widget :) It just feels so easy and nice to use. Very good experience for me, but didn't know it will affect the site in any way, thanks for letting know :) If the feature makes a technical problems, even best ux won't save it :)
I use the spacer in two different scenarios the first being testing backgrounds on columns and sections, the second is relatively the same sometimes the minimum height feature is a pain using a spacer in a section makes it easier to use across mobile and tablet view.
The biggest mistake I made for the first 6 months was making the header and footer on the page and importing a template. Now I use the template builder and set the site wide settings
Great tips
It is so useful.....
Great lesson, i have problem with padding and margin where would be zero and where delete
Perfecto como siempre
I use spacer with background image. My replacement for using the image widget. Just works better sometimes
I also used spacer a lot in same case.( Background image simplify the resize of image.)
Prince Prakash why not just make your images sized correctly, then have their size as “full”?
@@CookeAaronJ more work then just putting a spacer in i guess.. i use it too..
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)
@Simon Shocket Thanks a lot for providing these monday masterclass, they are really helpful and adding my knowledge quite often, please keep them coming :D
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 .
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.
Indeed it was a fascinating, interesting and helpful masterclass. Thanks.
Humbled! I learned a ton. Anyone else ever managed to not connect the dots that the photo sizes in the XD design comp are literally the sizes you need to crop images to for the site? doh.
thanks sir
Great video, but solve the issue "connect and activate". It doesn't work! Or enable manual activation again. I don't want to share my site credentials!
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?
YES I DO USE THE SPACER WIDGET!!
I do use the space widget very often.
Which theme should we use for woocommerce ?
Is there a recommended size and format for images?
Great video. Thank you so much. The question is, how do I know the appropriate image size to use?
I always use screen capture and take it into photoshop
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?
thanks
can you explain please about rtl heb, and breakpoints problems
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?
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
You missed not using templates! This saves so much time
Exactly, but buyer beware....I just recently experienced a downside of using pre-made templates though so you do have to watch what your using. I started using quite a few to save some time from one plugin that was providing them as a bonus and found that every single widget in the template had images sized incorrectly, usually 2-3 times the size they should be so that immediately put a load and bogged down the site. On my editor screen I have something called detect scaled images that puts a cute little dotted line around the image to alert you that you have an incorrectly sized image so you can resize and compress to help. I find that is so so helpful and really also helps me know what size I need to resize to. After working with WordPress for a while now it seems you kind of learn what the typical sizes are so you can plan ahead. So I guess what I'm saying the mark of a great template designer is to not have one filled with cute little dotted blue boxes around the images :)
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
I have issue on the space on top and bottom of the row. I can't seem to remove them even if I use the theme builder.
First of all, I say Thank you to Elementor for the ease you provide in the Page Building.
But I have a special point about Elementor, that a specific widget that Elementor not provide their user's without cost.
That widget is Menu Widget, I know that it is provided in Elementor free version, but it has a very less styling & designing options.
But on the other hand, in the Elementor Pro Version, this Menu Widget has a great styling & designing options available in Pro Version.
So, it's a Request to Elementor Respective Community that not only Provide this Menu Widget with all options, but also Provide different Widget's that are available in Pro Version.
THANK YOU ELEMENTOR !!
Hey Saud, having the pro version helps us sustain our business model. Do you build websites for a living? We tried to be as generous as possible with our free version, but I would really recommend you consider spending the 49$ a year cost of the pro version.
@@Elementor I am confused sometimes why people find it hard to invest 50 bucks for a plugin that will change and improve their workflow so greatly, if you were a mechanic you would go buy that wrench no problem. This isn't directed to you personally just an observation I see a lot of people complaining about certain things not being in the free version but if you are using a tool for your business it's worth the cost and investment and believe me....I've owned my own PCs since 82 consistently...$50 is cheap cheap cheap, remember when Microsoft Office was $500? or Windows $600?, I used a wrench as an example but could have very well said sewing machine. Using pro versus free sometimes is that big of difference in comparison of hand sewing versus using a machine that works.
In my opinion, the problem is that's it's an yearly fee! I'd rather charge my client a fixed amount that they pay.
I use the empty spacer widget only at the end of the page to separate footer, as we dont want to include any empty space margin into footer, or force anyone to remember to add bottom margin to every ending widget, and also, in the editor, it is easier to see a separate spacer widget st the end
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?
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?
hey
of ive written out a whole blog post how do I add images under sections of texts throughout the page? I use the image widget and it just uploads a large image art the top of the page which cannot be moved!?? help!!
This is all very well for Elemenor pro, but what about people who can't find templates to suit their theme?
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.
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
You can. There's an option in the Custom Positioning section under Advanced (I think), that you can use to manually place the item, then adjust the Z-value to have it above or below other objects. There are tutorials on RUclips.
You'll have to edit the responsive views (mobile/tablet) separately to get a result that you want. It might still not be 100% perfect with all the different screen sizes and resolutions out there now.
@@garthy4u I know it already but thanks. I mean like that when you hover an element and the small editing symbol comes on that you can grab the element and put it anywhere
@@amoryblaine2123 ok, so more like using Photoshop or illustrator, then? It would be a great feature if we could design intuitively like that, and Elementor's back-end handles the code to make it work. Would be truly a designer's dream then.
@@garthy4u Yes thats what I mean
@@garthy4u I agree also with what someone said earlier it would be great if we had better opitions to edit the photo on the page or in the media gallery better, right now it's confusing and cumbersome if you forget or don't want to resize prior to uploading. Would be great as well if there were more hover options that actually show the photo sizes or kbs no matter where you are at. I waste a lot of time trying to find photo sizes and adjusting.
What about self size adaptability thumbnails for e-commerce pages? Some images doesn't self adapt and get cut on the margins
I'm having issues where my website looks properly spaced and sized on my 4k monitor but not so on monitors of lower resolution. How do I avoid this?
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 only issue I encountered using Hello Theme is Woocommerce extra plugins compatibility.
That's why I stick with Astra.
Sometimes we found the border settings in the style tab and sometimes in the advanced tab. Why?
Great
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.
a problem i see is, on button icon, it's not align in 1 line.
icon on button, not align correctly
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.
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