What is Elementor?
elementor 3.0 global styles not working
How to Use Astra?
You’ll notice three icons in the middle of the page (two if you haven’t downloaded Astra): the plus sign allows you to create columns, the folder sign which allows you to collect Blocks and Pages, and the Astra icon (if you have it) which will show pre-built theme templates. (In theory you could import this and change a few things to have a website). To install any of these, click on Import Template and it’ll display itself.
On the left-hand side panel, you have all the widgets (contact forms, text, blocks, buttons, videos etc.), that you can drag into the sections to build your website. And to the right of this is where you’ll see edits being made. If you click on a section in the main panel on the right, in the left panel you will see three options: Content, Style and Advanced.
Site Settings- Elementor 3.0 Global Styles & Site Settings
On the top left panel, you have three horizontal lines (show image). Click on this. Select Site Settings, this will take you to a whole host of editing options. Under Design System you’ll see Global Colours and Global Fonts: these settings will help you to give a uniform look to the whole website in one place. This is something that’s worth setting up at the beginning of creating your website so you can easily add or change fonts and colours as you go.
Disabling Default Colours and fonts
Anything that has the global style and setting applied to it, no matter the number of pages, will keep the setting you’ve selected across the website. You can overwrite individual elements if needs be. If you notice your changes aren’t taking effect you can fix this by going into Elementor, Settings on the Dashboard and check the boxes for Disable Default Colours and Disable Default Fonts.
Under Global Colours you can change the colours across the website. You can add new colours under Add Colour, and rename them if you like so they’re easier to find later on (to do this simply click on the current name and type the new one).
To come back to main Elementor section, exit Global Colours and Save. To edit text or section colours, click on what you’d like to change, and select Style from the left-hand panel. Under Text Colour you’ll see a globe icon which will display the colour options that you’ve just created. Choose one of these by clicking on the box with the colour or entering in the hex value (the specific number of a colour – you can Google it to find out), will change the colour of the text you’ve selected.
Global Colours and fonts
Now, let’s say you wanted to change the whole colour scheme of the website; you can do this easily in one go! Go to the three horizonal lines in the top left-hand corner, click on Global Colours, choose a new colour for whichever you need to and all the text colour from that selected one will automatically change as well. This feature will really save you time and energy!
The same feature exists for fonts under Global Fonts. Selecting this, you’ll see different options for Headers, Fonts, Text, Accent etc. Click on the blue pencil next to one of these, e.g., Header, and you can change the font style, size etc. This will change the font of every header across the website. Remember to select Update at the bottom of the panel to save these settings.
Headers
Coming back to the main editing page, you can apply your new global settings. Select on some text, and open the Style section in the left panel. Under the global icon next to Typography you have the option to click on Headers, which will change the text according to your global header setting that you set before.
Typography
To further edit fonts, go to the Typography section in Site Settings. Displayed here are options to change Text (this refers to the main body text, so any paragraphs or longform writing), Link colours, and H settings (H1, H2, H3, H4 etc.). H settings refer to the headers across your website. It’s a way of formatting different titles and works well with SEO. You can change the colour and font of these using the icons next to each.
If you want to add one of these Typography settings to your global settings, you can do so by clicking the plus icon in the top right corner under the blue pencil icon under Typography. It’ll come up with Create New Global Font and you can name it here. Once you’ve made it into a global font you can call upon it anywhere to add in – clicking on the global icon next to Typography on each H setting it will show you the option of your newly added font setting.
Buttons
If you want to change the settings across the board, you can apply the same steps as before in Global Colours to the Global Fonts section.
Another feature under Site Settings is Buttons:
If you have a template set up, there will be default buttons here, but you can overwrite them: select the button, choose the global icon next to Background Colour in the left panel, and select the colour you’d like. You can also change the Border Radius to give your button a more curved edge, by entering in different numbers into the boxes below Border Radius.
You may notice that it doesn’t apply this feature to all of the buttons. This is because, if you’re working off a template, the template code may be overwriting your code with its own. To change this: hover over the button and select the blue pencil icon, this will take you to the Style panel on the left. You’ll notice that the Border Radius has a default value of 0 – by deleting this value it will revert to the global setting on Border Radius that you applied before. You’ll also see that the colour is pre-defined. To change this, click on the blue pencil next to Text Colour and choose the clear option (the reload icon, first in the row of three icons in the top corner of the colour picker).
You can overwrite the global settings on individual buttons (and text etc.) by editing them directly via the blue pencil icon as you’ve just done. You can also edit the Hover settings under Text Shadow in the Style panel, so that your button changes colour when your mouse hovers over it.
You can also do the same for Images under Site Settings and edit Border Radius, Border Type, Opacity etc. And for Form Fields too: this refers to any forms you might display on your website that people fill out.
Site Identity- Global Styles & Site Settings
Further down in Site Settings (the three horizontal lines icon) you have Site Identity. This includes:
- Site Name (the name of your website)
- Site Description
- Site Logo (to add select the plus icon, Upload files, Select Files or choose from your Media Library).
Favicon (the small icon next to your web address in the top address bar)
Lightbox
The Lightbox setting allows you to select and image and it’ll pop up as a larger image with slider options etc. You can edit the appearance of this (background colours, hover colours, text colours) through the Lightbox settings: you can turn off zoom options, sharing, icons etc. by clicking on the on/off blue button next to each. You can also choose what text appears underneath the image on Lightbox setting by clicking on the Image in the left panel and adding Caption and changing other information on the image itself.
Custom CSS
Custom CSS allows you to change the code of the site.
Additional Settings takes you back to the Dashboard and lets you edit the Elementor Settings.
The best way to learn is to have a play around with test sites in Elementor! Enjoy
Elementor 3.0 Global Styles & Site Settings
Elementor 3.0 Global Styles & Site Settings
