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 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.
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 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!!!
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!
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 ;)
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
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 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.
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. 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 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.
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
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 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
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 :)
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.
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?
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!-
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?
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?
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.
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 .
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?
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?
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 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
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
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.
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 :)
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!!
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 added background color to the section But which is not showing in the live page when I open in other or same browser it's showing background color only while editing kindly help me to come out of this
**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
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
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 :)
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 ;-)
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.
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!
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
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.
Great video, the virtual kick up the butt I needed. I've been guilty of not setting up my default fonts and colours first, which creates a massive amount of work tweaking elements on the go. Making a new September resolution to set the defaults and picker colours first, and save a bundle of design time going forward. Thanks for sharing.
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.
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.
![[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!😅
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.
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!
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 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!!!
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!
Came here for Elementor, liked for the CMD+SHIFT+T tip. Rocked my world...
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...
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
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.
The spacer is a throw-back to the Horizontal rule rarely used
Good call on the spacer widget. I had not thought of the SEO aspect of this.
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.
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 use the spacer for quick vertical alignment fixes and margin/padding for all else.
Or when you need a clear:both;
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 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.
Very helpful even after a year of using Elementor. Thank you.
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
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.
Great! Informative video. I did the 2nd mistake over the year. Now time to correct my mistake.
Is there a recommended size and format for images?
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 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
Which theme should we use for woocommerce ?
A text version of this would be very useful. Thanks.
I really needed this guys, I was asking and the universe and you guys where listening!
How was that image you can scroll in the background of 7:55 onwards done?
Set the background type to Classic, select an image, and set Attachment to "Fixed."
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
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. 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
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.
wonderful class .... love you guyzz
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?
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!-
the space widget is actually super helpful for me. I did not know that it can effect your website at all.
Personally, I use the spacer widget for managing animated background transitions etc - it would be handy to keep it for these cases.
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?
cmd + shift + T OMG i love you man ,, this will save my life hahahah
I do like using the spacer and I hope that you keep it around for awhile.
A great Monday Masterclass for a Friday morning! Thanks. I'll have to put my hand up for overusing the spacer >.
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
still an amazing video in 2021, thanks for the advice!!!! my mistake?...using lots and lots and lots of spacers elements.
Thanks for these now I can work better I've been doing these mistakes not knowingly
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?
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.
I just learned cntrl + shift+ t as a bonus 😂 very knowledgeable content
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 .
Thank you! This video was really helpful for me. I was doing wrong almost all of the listed examples :)
Me too!
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?
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?
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.
Can you do another one of these videos? I found this to be very helpful.
An absolute masterpiece , this video. Thank you, Simon💕💕
Great lesson, i have problem with padding and margin where would be zero and where delete
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
This is a great video. I hope to see more. Great teachings.
Tks. Very useful Video. Well Explained. Please make further such good videos.
many thanks for very useful information
can you explain please about rtl heb, and breakpoints problems
What about self size adaptability thumbnails for e-commerce pages? Some images doesn't self adapt and get cut on the margins
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
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.
hi guys..may I ask how to match the lay out sizes of Adobe xd to elementor??base on mock up they give??
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 :)
Does Elementor have "Blocks" facility to avoid these mistakes?
YES I am using them more and more.
If you remove the spacer, how will you show a background image in an "empty" column?
transparent PNG :)
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.
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.
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!!
The only issue I encountered using Hello Theme is Woocommerce extra plugins compatibility.
That's why I stick with Astra.
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'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?
I created a page on Elementor and in the menu list, it is listed as invalid. Why it labeled it so and how to resolve.
I added background color to the section But which is not showing in the live page when I open in other or same browser it's showing background color only while editing kindly help me to come out of this
**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
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
What exactly am I uploading the license?
What about typography ? Is there a way to set up typography on hello theme?
I am facing problem with horizontal scrolling in mobile Version my page is not entact it's juggling help me with it
Very nicely done, I found this helpful.
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 :)
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 ;-)
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.
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!
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
Video starts at 1:03
Sometimes we found the border settings in the style tab and sometimes in the advanced tab. Why?
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.
Great video, the virtual kick up the butt I needed. I've been guilty of not setting up my default fonts and colours first, which creates a massive amount of work tweaking elements on the go. Making a new September resolution to set the defaults and picker colours first, and save a bundle of design time going forward. Thanks for sharing.
I can't find the list of compatible themes
You mentijoned getting the image size wrong bu I can't find any mention of recomm neded size on Elementors's web site.
You helped solve my issue! Thank you
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.
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.