All Collections
Appearance editor
Appearance Editor - Global Styles.
Appearance Editor - Global Styles.

Understand how to change the Brand Color, Fonts and Variations of your site.

Deepa Prabhu avatar
Written by Deepa Prabhu
Updated over a week ago

The Global styles menu in the Homepage editor allows incorporating your council's or organization's Brand colors, Fonts, and styling aspects to the Homepage containers.

To go to the Global styles tab, click on Appearance in the left menu. This will open the Appearance editor where you will see the Global Styles tab on the left menu.

Brand Color

Brand colors have the ability to increase your brand recognition. It is recommended to integrate your brand’s colors across your site. Setting the brand color will reflect on your home and project page elements like headers, buttons, links, icons, and tools; that are frequently seen by participants.

You can enter your brand colors hex code in the given tab and click save to apply the same to the home and project page elements.

Font

The Font tab allows you to choose from traditional to modern font sets that match your brand.

Global Font Family

You can select the font family you want to use on your site for titles and content (including descriptions) from the drop-down.

Font Sizes

One can adjust font sizes of Section titles, Project and Widget titles. You can also change the font size of buttons, paragraphs, and descriptions across the homepage. To maintain consistency, font sizes will remain the same across all projects.

The size can be adjusted by dragging the cursor in the relevant tabs as seen in the GIF below and the changes can be viewed simultaneously in the right tab so that one has an immediate view of the change.

Section Title: Changes the font size of section titles (ideal size 32px)

Project & widget titles: Changes the font size of project and widget titles (ideal font-size 24px)

Content and Buttons: Changes the font size of buttons, paragraphs, and descriptions across the site (ideal size 16px)

Shadows & Corner Styles

You can change the style of the Project cards or any container that has content by adding shadows and rounded corners. The tabs are self-explanatory. Please see the GIF below to view the different style options and their effect.

All the changes made, once saved, can be previewed by clicking the "Preview" button. If you do not want to apply the changes immediately for the Homepage, you may "Save as Draft" and then decide to apply the changes to the Homepage anytime later by clicking "Publish".

Contact our support team if you need any further assistance via chat or email support@engagementhq.com

Did this answer your question?