Це відео не доступне.
Перепрошуємо.
Improve Your Elementor Skills by Avoiding 6 Common Mistakes - Monday Masterclass
Вставка
- Опубліковано 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/...
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/...
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.
0:43 This alone made this video worth watching! I did not know that either!
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.
Came here for Elementor, liked for the CMD+SHIFT+T tip. Rocked my world...
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 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!!!
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...
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.
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...
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!
The spacer is a throw-back to the Horizontal rule rarely used
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.
Good call on the spacer widget. I had not thought of the SEO aspect of this.
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
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.🎉
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
I use the spacer for quick vertical alignment fixes and margin/padding for all else.
Or when you need a clear:both;
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.
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.
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
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..
I really needed this guys, I was asking and the universe and you guys where listening!
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 .
Very helpful even after a year of using Elementor. Thank you.
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.
A text version of this would be very useful. Thanks.
Personally, I use the spacer widget for managing animated background transitions etc - it would be handy to keep it for these cases.
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 :)
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!-
I do like using the spacer and I hope that you keep it around for awhile.
the space widget is actually super helpful for me. I did not know that it can effect your website at all.
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
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 UA-cam.
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.
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 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.
Thanks for these now I can work better I've been doing these mistakes not knowingly
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
wonderful class .... love you guyzz
Very very useful tips.. Thanks team
Thanks for a great lesson. I do use spacer - it's much quicker than playing with too many numbers
Thank you! This video was really helpful for me. I was doing wrong almost all of the listed examples :)
Me too!
A great Monday Masterclass for a Friday morning! Thanks. I'll have to put my hand up for overusing the spacer >.
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
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?
Great! Informative video. I did the 2nd mistake over the year. Now time to correct my mistake.
still an amazing video in 2021, thanks for the advice!!!! my mistake?...using lots and lots and lots of spacers elements.
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.
**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
many thanks for very useful information
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
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.
DO NOT get rid of the spacer! I use it to create background coloured boxes for decoration. I find it very useful.
Never!
An absolute masterpiece , this video. Thank you, Simon💕💕
The only issue I encountered using Hello Theme is Woocommerce extra plugins compatibility.
That's why I stick with Astra.
cmd + shift + T OMG i love you man ,, this will save my life hahahah
I just learned cntrl + shift+ t as a bonus 😂 very knowledgeable content
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?
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.
This is a great video. I hope to see more. Great teachings.
Which theme should we use for woocommerce ?
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 :)
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?
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
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.
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.
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 ;-)
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?
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, 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.
Spacers are always useful when and if needed. Leave the option available please.
Been an Elementor user almost from the beginning and an Envato customer for years and not one sticker.
I do use the space widget very often.
Can you do another one of these videos? I found this to be very helpful.
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
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?
Try a simple Google search with this question...
@@GyamfiBediako OMG! The most helpful answer ever!
www.foregroundweb.com/image-size/
seowebdesigns.com.au/google/image-optimization-page-speed/#image-orientation
Tks. Very useful Video. Well Explained. Please make further such good videos.
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
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.
Great lesson, i have problem with padding and margin where would be zero and where delete
Is there a recommended size and format for images?
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?
Suggestion for a Monday Masterclass: how to convert an existing site from "legacy themes" to an "Elementor site" (producing your new Elementor theme on the flight).
Video starts at 1:03
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.
YES I DO USE THE SPACER WIDGET!!
great! thank you!!
can you explain please about rtl heb, and breakpoints problems
Very nicely done, I found this helpful.
Thank you
hi guys..may I ask how to match the lay out sizes of Adobe xd to elementor??base on mock up they give??
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.
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!
You helped solve my issue! Thank you
You mentijoned getting the image size wrong bu I can't find any mention of recomm neded size on Elementors's web site.
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!
You know it’s kind of difficult to guess your image sizes . What I do is I will Optinize my images and compress first in photoshop then input them in my webpage as designing . I’ll go to run a speed test in Gt metric and then what happens is if my images were sized wrong it will give me what they are setting at . I can take those exact dimensions and reset three size kf the image and place in website . Someone else May have a way of you are an expert and do the same size sections all the time . But for me this works best
@@humanactivated1017 hey James, thank you for your explanation. I read so much about this and how some people like to use sketch or figma or adobe ux to do the wireframe using Macbook pro screen size as a guide, but I guess I miss this tutorial here and specialy when working with Elementor. As a beginner, is always hard to get the proper workflow. Therefore, thank you very much for sharing yours.
The only time I ever use a spacer is if I have an otherwise empty column that has a background image. The image is not displayed when there is no content inside a column, and a spacer is the only element that adds such "content" while being invisible.
Thanks You very much
Needs a summary slide at the end!