Site Assets Guide
Notes
Follow steps 1-7, in order, to correctly build a theme to your design needs.
Make sure Hello Elementor is set as the active theme.
You must disable Elementor's Default Colors and Fonts. From the Admin Dashboard look under Elementor - Settings - General and make sure both Disable Default Colors and Disable Default Fonts are both Checked, then click Save Changes. Disabling them will also stop a redundant CSS file from being loaded on the front end.
Click on [ ] in the top left and then [ Site Settings ], [ Layout ]. Under Layout Settings find ot option for Default Page Layout and set it to Elementor Full Width. Once complete click on the bottom left.
1. Site Logo
2. Site Favicon
Click on [ ] in the top left and then [ Site Settings ], [ Site Identity ] Under "Site Favicon" click [ ] and upload the provided Favicon. Once complete click on the bottom left and then refresh the page. The Favicon should now show in the browser tab.
3. Global Colors
Click on [ ] in the top left and then [ Site Settings ], [ Global Colors ]. Click on the colour boxes to the right of the HEX colour codes to bring up the Color Picker. Here you can edit the HEX code and or the transparency. You can also click on the names like "Default 3" to rename them. Be sure to remove any Custom colours not needed. Once complete click on the bottom left. (The boxes below will show any changes in real time except for the names, you can click on each box and label it correctly if you would like. There is no need to remove any boxes below if not all custom colours are used).
Default 1
Default 2
Default 3
Default 4
Custom 1
Custom 2
Custom 3
Custom 4
Custom 5
Custom 6
Custom 7
Custom 8
4. Background
Click on [ ] in the top left and then [ Site Settings ], [ Background ] to make changes. Making changes will show in real-time on this page. Once complete click on the bottom left.
5. Typography (Default)
Click on [ ] in the top left and then [ Site Settings ], [ Typography ] to make changes. Making changes will show in real-time on this page. Once complete click on the bottom left. (Not all headings need to be set and can be left as Default. If you adjust the Link styles, be aware it can mess with menus, buttons, and more. Be sure to set the colours for links as needed in any affected widget. Typically I only change the link colour per column when building by selecting the column and setting it under the Style tab).
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Link colour and type found within the text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
5.1 Typography (Alt or Dark BG)
If needed; after adjusting the Typography settings use the HTML widget below to make any ALT classes. Save the Styles to the Elementor Custom Code called "Custom Styles" under the line /*Custom Typography Styles*/. Be sure to add "alt-h1", "alt-p", etc, as needed for each widget under Advanced - Class of widgets as you build Pages and Templates.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Link alt colour and type found within the text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
6. Button (Default)
Click on [ ] in the top left and then [ Site Settings ], [ Buttons ] to make changes. Making changes will show in real-time on this page. Once complete click on the bottom left.
6.1 Button (Alt or Dark BG)
If needed; after adjusting the Button settings use the HTML widget below to make any ALT classes. Save the Styles to the Elementor Custom Code called "Custom Styles" under the line /*Custom Button Styles*/. Be sure to add "alt-btn" to each Button Widget under Advanced - Class as you build Pages and Templates. This will work with any Elementor Widget that has a button, like the Form Widget for example.
7. Form Fields
Click on [ ] in the top left and then [ Site Settings ], [ Form Fields ]. Making changes will show in real-time on this page. Once complete click on the bottom left. (Please note that some settings can only be changed per form in the Form Widget itself).