GLAS Angels - logo
GLOBAL Color Palette
Neutral Lite#F1F0F1
Neutral Mid#CBCBCF
Neutral Dark#656566
White#ffffff
Brand Color #F05323
Accent Hover#050076
Primary#18181A
HEADER SIZE STYLES (Does NOT affect SEO)
Heading Style "Title 1"
Heading Style "Title 2"
Heading Style "Title 3"
Heading Style "Title 4"
Heading Style "Title 5"
Heading Style "Title 6"
Heading Style "Title 7"
Heading Text - "Subheading"
TAG HEADERS (Affects SEO)

Heading Text H1 **Note** No more than ONE (H1) per page

Heading Text H2

Heading Text H3

Heading Text H4

Heading Text H5
Heading Text H6
Heading Text DIV
Heading Text SPAN

Heading Text P

Heading (H2) "Title 2" Style with Default Color

“Body” (Default) Text Style: This is an example of standard Body Style. There are three paragraphs using placeholder text so that you can see the visual size and weight of a block of text content with paragraph spacing applied to each new paragraph (using standard hard return key on your keyboard). 

Below is what an unordered (bullet) list looks like:

  • Lorem ipsum dolor sit
  • Amet, consectetur adipiscing
  • Ut elit tellus, luctus nec 

Below is what an ordered (number) list looks like:

  1. Lorem ipsum dolor sit
  2. Amet, consectetur adipiscing
  3. Ut elit tellus, luctus nec 

This is what a chunk of emphasized (italics) paragraph text
looks like with a “soft return” [keyboard Shift + Return]
being used to create specific breaks in the text.

Here is the second paragraph with additional placeholder text content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Here is the third paragraph with additional placeholder text content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Heading Text H3 (with Global Color Applied)

“Body Big” This is an example of the “Body Big” text style. This style is useful to call attention to a block of text that needs some prominence. Use this style sparingly to have its desired effect. Example use case for this style would be a pull quote, …which can also be set in italics for emphasis.

“Body Small” This is an example of the “Body Small” text style. This style is useful as text that needs to be referenced on the page but doesn’t carry as much importance as the body copy that is supports. Example use cases may be photo credits, footnotes, etc.

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

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 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.

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 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 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.)

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 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

Link color 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 color 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.)

Connect With Us
@GLASAngelsInc

Opportunities to Serve.
Make a Difference!