Elementor Global Settings Explained - How to Correctly Set up the Site Settings for a Great Workflow
HTML-код
- Опубликовано: 3 дек 2024
- Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW: • Elementor Units Explai...
Get Elementor: be.elementor.c...
Hosting I love and recommend for most clients and for those on a budget: www.hostg.xyz/...
🧙 Wizards of Webcraft - A series where I’ll be reviewing your websites - www.reialesa.c... Apply now!
How to Choose a Good Body Font for Your Website: • How to Choose a Good B...
A good workflow depends on automating whatever you can and making it as easy as possible for yourself. Global settings in Elementor are there for that exact reason. They're also known as site settings. But not all of them are created equal and you don't need to set everything up. Some things likely won't even impact your website at all. And what's the deal with Global Fonts and Typography? Isn't that the same thing?
No, it's actually not. But it is confusing. However, let's start with the easiest thing first - global colors. Global colors are colors that you can use and reuse on your website with just a couple of clicks. If you change a global color in the site settings, it's going to change anywhere it's applied. So, you can pretty much change the entire color scheme of your website in a few clicks.
Global Fonts work the same way. Global fonts is where you should add in and style any fonts you plan to use throughout your website. So, all of the font families, the sizes, the weights, the line heights. And, as is the case with global colors, once you change a global font, it's going to change anywhere it's applied. Just make sure you make them responsive. You can do that the same way you make anything responsive in Elementor, just enter the tablet or mobile mode and change what you want to change.
Under Typography, you're going to see H1, H2, H3 and so on. These are HTML H tags. And their only purpose is SEO. They have nothing to do with how your fonts actually look. These tags essentially tell search engines what your website is about and how it's structured. The H1 tag is the most important and you should only use one H1 tag per page. But the heading the H1 tag is attached to doesn't have to be bigger than others. In fact, I'll often use smaller, more descriptive text with my more important H tags, because it's better for SEO. So it's about finding a balance between how your users read your website and how search engines read your website.
So, under typography, just change out the colors of the links. This will affect the links you add in your text editors. Otherwise, I recommend you leave everything else alone.
For your buttons, images and form fields, you can set up some basic styling in the site settings. I usually don't, I just ignore these settings, because for these less common elements, I just copy and paste the style from one I already created. It's easy and fast either way, so you can ignore these and not feel bad about it.
The same thing goes for the header and the footer. I always create my own headers and footers from scratch by using the theme builder, so these settings don't even apply to them. Feel free to skip these entirely. When it comes to the site identity, these are the same settings WordPress gives you by default. Just set up your site name, description, logo and favicon. In Elementor, the site logo widget uses the logo you set here.
Under Layout, I recommend you set up the Content Width. Whatever amount you set here, that's how large containers that are set to ''Boxed'' will be by default. I also definitely recommend you set up the Container Padding if you're unsatisfied with the 10 pixel padding that your containers have by default. Setting up the Gap between elements is a good idea as well. Just make sure your padding and your gap between elements are responsive if you need them to be.
The rest of the settings are not needed often. I rarely, if ever, use them and I don't think you'll be using them much yourself. I don't use the Custom CSS feature under Site Settings either. I prefer adding my CSS directly into my admin bar by pressing ''Customize'' and then ''Additional CSS'.
#elementor #globalsettings #sitesettings
Get in touch:
www.reialesa.c...
Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.
Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!
Thank you! This helped me understand why I was having challenges. Setting up headings like H1 and H2 is also important for disability accessibility. It tells screenreading devices the hierarchy or order in which to read the text out loud to the person who is blind or has a learning disability.
That's great to hear, thank you for your kind words! 🙏 That's a very interesting and important point. I honestly didn't know about that. That's another reason why using H tags as a styling tool is, not always but often, a misguided approach. Thank you for pointing this out. 🙌
finally a clear and concise video that explains Global settings from A - Z. I appreicate you. Keep going, your videos are awesome!
It's great to hear that I'm on the right track when it comes to keeping things short, valuable and to the point. Thank you very much for your supportive and kind words, I appreciate it immensely! 🙌🙏
Great tutorial! Gave me a much better understanding of Global Settings. Thank you. :)
That's great to hear and I'm very happy the tutorial was valuable to you. Global settings can indeed be confusing. Thank you for your kind comment, I appreciate it! 💪
Are global settings on a page individual for that page?
Thanks a lot for your work and the sharing ! 👍
Hey there. Just a heads up on the advice about the h1. A h1 is for the heading not a summary. That paragraph should be the meta description tag in SEO. Google may well penalise if you put a paragraph as a heading. Obviously you can have a long title at a different font but that's not a heading which should be similar to the page title. Headings are semantically breaking up the content which is in paragraphs. Google will cut that paragraph in the search results as around 60 characters.
In a snippet checker your h1 would look like this in Google:
I'm specialised in branding, website design and development ...
Thank you so much this video and some of your others have been a game changer for me. I am so grateful.
I'm very glad to hear that you found my videos helpful. I really appreciate your support, thank you! 🙏🙌
I tried using the methods used in two other videos on this topic but had a lot of problems. Well, you nailed it.👋 New subcriber here :)
That's awesome, I'm very happy to hear that my video helped you out. Thank you for subscribing and for your support, I really appreciate it! 😁🙌
Great video man! Thank you :)
I'm very glad you liked it! Thank you for your support, I appreciate it. 😄
oh for fucks sakes. I was looking everywhere for this and never in a million years thought the only way I can get to the site global settings was in the actual fucking page. GOD DAMN IT ELEMENTOR WHY DO YOU SUCK SO BAD. Quite possibly one of the most bizarre UX choices I have ever seen in a builder.
Thank you you saved me I was about to throw my computer out the window hahah.
thanks, man, this is an awesome guide.
I'm really happy to hear that, I hope it helps make your work a little easier. Thank you for your support, I appreciate it! 🙏🙌
Your videos are super helpful. Currently have an issue where global colors are not working? Any color i choose has no effect on what i see in the editor. Ever come across this issue or possibly know any fixes?
I figured it out nevermind!
Thank you very much, I appreciate it! Ah, that's awesome, I'm glad you managed to fix the issue. I assume it had something to do with the cache or ''Regenerating Files & Data''? 😃
This is amazing, I could say perfectly explained as well..!!! I wish you a Happy New Year and 500.000 subscribers until the end of the year :) I just became one !!!!
Thank you so much🙂🤗!!
I'm very happy to hear that. I'm a little late but I hope you have a great 2024 as well. Thank you for joining our little community, I appreciate your support! 🙌🙏
Elementor has a feature to set up font styling for H1 , H2, H3 etc in the Typogrophy settings but it doesn't ever seem to use the styling from this section. Rather it uses the styling from Global fonts so what does these settings actually do?
Great question - and like I explained in the video, I recommend you just ignore these settings entirely. In my opinion, the way it's set up currently, Typography is a very confusing and even unnecessary part of the Site Settings. As far as I'm aware, they can also get mixed up with the Global Fonts in certain situations.
When I create websites I use the Hello theme. This theme is really a blank slate there's no theme typography set. So I use the styling options for h1, h2, h3 etc - If the HTML class of the title widget is set to one of these H tags it will style the heading according to how it's set up in the global settings.
Setting a style to these H tags is also important as I use gutenberg for adding blog posts - this will then inherit the H styles I have set in elementors global settings for the title tags I choose in the post.
These Typography settings can still be overridden by changing the widget's settings directly on the element when editing.
I just wanted to share this, as personally I've found the typography settings very useful for ensuring consistency throughout my site designs when using the Hello theme.
@@lewisbrown2227 thank you. I use kits and hello elementor. Maybe the kits are not configured to use the h1, h2 stylings etc from the typography settings
@@oaooaoipip2238 that makes sense! I’ve never used kits before. I try to set most bits from scratch. I imagine the kits will have their own typography settings already set then ☺️
Great point! That's a good example of when styling these H tags actually matters - for blog posts, created with the classic or Gutenberg editor. I usually create blog posts in Elementor directly, which means the H tags have nothing to do with the style and I just use the Global Fonts. But if you don't need highly customizable blog posts, this makes a lot of sense. Thank you for sharing. 🙌
Otherwise a great video and spot on with the global fonts. No wonder people use the tags wrong when they give a global typography to make your website bad for SEO.
I have just watched another video on the same topic and the information is conflicting. From the other video, I learnt that we should set the typography, and global fonts should be used only in places where we want a special font (which should be set to global font). Well...
Your h1 should be at the top. I've never seen anyone set it up like that.
Actually it can be anywhere, it's just for SEO
@@kennyconfidence7567 you don't understand seo clearly. Look it up, it's how search engines read the page and figure out what the page is about. Any real seo would agree.
None of them say you can put your h1 in the middle of the page in a non prominent spot and it be best practices.
Also seo is about the user just as much as it's about the search engine.
There is hierarchy for a reason.
H1
- h2
-- h3
--- h4
- h2
-- h3
- h2
-- h3
--- h4
Not
H2
- h3
-- h1
--- h4
Makes no sense
Did help at all. I just want to know how to control text without css