Improve Your Elementor Skills by Avoiding 6 Common Mistakes - Monday Masterclass
VloĆŸit
- Äas pĆidĂĄn 8. 09. 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/ - Jak na to + styl
![[01] Layout Optimization Best Practice](http://i.ytimg.com/vi/vBAKGupM0co/mqdefault.jpg)
![[01] Layout Optimization Best Practice](/img/tr.png)
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!đ
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.
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.
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.
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!
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!-
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 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 really needed this guys, I was asking and the universe and you guys where listening!
0:43 This alone made this video worth watching! I did not know that either!
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.
Came here for Elementor, liked for the CMD+SHIFT+T tip. Rocked my world...
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.
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!!!
Good call on the spacer widget. I had not thought of the SEO aspect of this.
A great Monday Masterclass for a Friday morning! Thanks. I'll have to put my hand up for overusing the spacer >.
Very helpful even after a year of using Elementor. Thank you.
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.đ
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...
An absolute masterpiece , this video. Thank you, Simonđđ
Thanks for a great lesson. I do use spacer - it's much quicker than playing with too many numbers
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.
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...
This is a great video. I hope to see more. Great teachings.
The spacer is a throw-back to the Horizontal rule rarely used
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.
Thank you! This video was really helpful for me. I was doing wrong almost all of the listed examples :)
Me too!
Great! Informative video. I did the 2nd mistake over the year. Now time to correct my mistake.
Very nicely done, I found this helpful.
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 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
still an amazing video in 2021, thanks for the advice!!!! my mistake?...using lots and lots and lots of spacers elements.
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 use the spacer for quick vertical alignment fixes and margin/padding for all else.
Or when you need a clear:both;
You helped solve my issue! Thank you
the space widget is actually super helpful for me. I did not know that it can effect your website at all.
wonderful class .... love you guyzz
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 :)
Tks. Very useful Video. Well Explained. Please make further such good videos.
Thanks for these now I can work better I've been doing these mistakes not knowingly
many thanks for very useful information
Great tutorial, thanks.
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.
Can you do another one of these videos? I found this to be very helpful.
Very very useful tips.. Thanks team
finaly a good video again ! with good infos !
Personally, I use the spacer widget for managing animated background transitions etc - it would be handy to keep it for these cases.
Great lesson, i have problem with padding and margin where would be zero and where delete
A text version of this would be very useful. Thanks.
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..
cmd + shift + T OMG i love you man ,, this will save my life hahahah
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.
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.
Thank you for this video. HUGe Help! :D
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
Indeed it was a fascinating, interesting and helpful masterclass. Thanks.
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
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 .
great! thank you!!
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.
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!
Thank you
Perfecto como siempre
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
Thanks You very much
I just learned cntrl + shift+ t as a bonus đ very knowledgeable content
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 CZcams.
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.
It is so useful.....
Great tips
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.
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.
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
thanks sir
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?
This is all very well for Elemenor pro, but what about people who can't find templates to suit their theme?
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.
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!!
I do use the space widget very often.
can you explain please about rtl heb, and breakpoints problems
Which theme should we use for woocommerce ?
Sections?
Should Sections be focused on content or does it matter much?
It seems that unless you need a section's background to be unique a whole page could be built with one section.
I'm getting the feeling that this isn't necessarily the best way to go for content organization, page flexibility and that there may be SEO reasons to build a page with multiple sections. .... on the flip side does the use of addition sections add to page bloat... more than a single section would?
So even if there is no background or any other margin or padding changes should a unique section be used to design the page for each subject/focus i.e. First Section: subject heading, sub-heading, subject content, Second Section: subject 2 etc, etc, etc., Third Section: subject 3 etc, etc, etc.?
Thank you and great video... (removing spacers now ;-)
i use the spacer, but only as a quick temporary tool--when an element's selection tab becomes covered up and unselectable, i pop a spacer in front of it--but it is never used as an element in the public facing design.
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.
YES I DO USE THE SPACER WIDGET!!
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?
The only issue I encountered using Hello Theme is Woocommerce extra plugins compatibility.
That's why I stick with Astra.
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?
**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.
@Simon Shocket That must be the solution! Thanks Simon, not only your tutorials are impressively informative and onspot, but also your answers are very precise. As a Scrum Product Owner for my company, I do the creative part. Elementor helps a lot, based on your great videos! Congrats and best regards from Cologne Germany
Very informative, thank you. You have a good voice, if you don't also do voice-work you should consider it. Now, my sole criticism: white desk, blank background-it's very antiseptic, to the point of distraction. Consider some type of background-you could change it up for each episode, just for fun.
@Simon Shocket Hi Simon, all the videos are most helpful, thanks!
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?
thanks
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.
Kindly make video on blogs by element or
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
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?
What about self size adaptability thumbnails for e-commerce pages? Some images doesn't self adapt and get cut on the margins
Sometimes we found the border settings in the style tab and sometimes in the advanced tab. Why?