Animated Elements

Global colors, fonts and scrolling for GoHighLevel pages

A page built from a dozen animated elements has a dozen places to set the same red. Change the brand color and you are opening every one of them. Page Settings is the block that ends that: name the colors once, and every element on the page can follow them.

It is optional and it renders nothing for visitors. It also carries the page-level behaviour the builder does not expose: the fonts every element means by "page headline" and "page body", the border new elements start with, and how the page scrolls.

The elements

In this category

Page Settings

One optional block that sets the page up. Name your brand colors and every color picker in every element offers them; an element that uses one follows it from then on, so changing a brand color here repaints the whole page. It also sets what "Page headline font" and "Page body font" mean, the border new elements start with, and how the page scrolls: a styled or hidden scrollbar, smooth scrolling to linked sections, an eased mouse wheel, a scroll progress bar and the text selection color.

  • page
  • brand
  • colors
  • palette
  • fonts
  • theme
See every variant running live
How to use them

How to set brand colors and fonts once in GoHighLevel

  1. 01

    Add it once, near the top

    Drop Page Settings into the first section of the page. On the builder canvas it shows a card naming what it controls, and it warns you if a second one is on the page.

  2. 02

    Name your brand colors

    Add the colors you actually use. They then appear in every color picker in every element, and an element that picks one follows it from then on.

  3. 03

    Set the page fonts

    Choose the headline and body fonts, including a custom family. Elements set to the page headline or page body font take them from here.

  4. 04

    Decide how the page scrolls

    Style or hide the scrollbar, turn on smooth scrolling to linked sections with an offset for a pinned navbar, ease the mouse wheel, and add a scroll progress bar at the top or bottom.

New to the app? Start with the install and setup guide.

Questions

Page, answered

What happens if I delete Page Settings later?
Nothing breaks. A linked setting carries the color it was picked from as its fallback, so every element keeps painting that color. Nothing on the page depends on the block being there.
Does it add anything visible to the page?
No. It renders nothing for visitors. The card you see is on the builder canvas only, so the block stays selectable.
Do brand colors work on the canvas and WebGL backgrounds?
Yes. Those elements cannot read a CSS variable, so their colors resolve through the runtime instead, without adding anything to the page.
Keep looking
Text & HeadlinesImagesButtons & CTAsSection BackgroundsCards & ContentNavbarsTestimonialsStats & Social ProofFAQsAnnouncements
Get it on the GoHighLevel Marketplace