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 Update on the bottom left.Site Logo
Click on [ ] in the top left and then [ Site Settings ], [ Site Identity ]. Under “Site Logo” click [ ] and upload the provided company logo. Once complete click Update on the bottom left and then click [ BACK TO EDITOR ] in the popup or click the [ ] in the top right of the Site Settings. The image below should now show the Site Logo automatically.
Global Colors
Click on [ ] in the top left and then [ Site Settings ], [ Global Colors ]. Click on the color boxes to the right of the HEX color 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 colors not needed. Once complete click Update 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 colors are used.)Buttons
Click on [ ] in the top left and then [ Site Settings ], [ Buttons ] to make changes. Changes will appear in real time on this page. Once complete click Update on the bottom left. Below are the three button styles for this theme that we will use going forward. One of them is the default. The secondary one is outline. The third one is icon button, no outline. The icon button must have the icon after the text. Be sure to add the CSS class style reloop-icon to the widget.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 Update on the bottom left.5. Typography
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 Update 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 colors for links as needed in any affected widget. Typically I only change the link color 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
There is a link here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet this is a link, 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 Light
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
There is a link here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet this is a link, 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. Custom Padding
To maintain consistent spacing throughout the website, this theme includes a set of custom padding utility classes. Rather than manually adjusting padding values within individual Elementor widgets, use the predefined padding classes available in the CSS Classes Field.
These utility classes provide options for applying padding to all sides, top and bottom, or left and right. They can be applied to any Elementor widget that supports padding, including text elements, containers, images, buttons, and other content blocks.
Using these standardized classes ensures design consistency across the site and allows global spacing adjustments to be managed centrally through the CSS stylesheet, eliminating the need to update individual widgets when spacing requirements change.
