Skip to main content

Hover Effects

What a post headline and a button do when the pointer moves over them, and the colours those effects use.

Where: Theme Options > Theme Design > Hover Effects.

Theme Options with Theme Design expanded in the section list and Hover Effects highlighted, beside the Hover Effects panel: the Post Title group with Title Hover Effect on Default (Color & Underline) and its four colour fields blank

Theme Design > Hover Effects: the Post Title group with Title Hover Effect and its four colour fields, and the Buttons & Elements group with Button Hover Effect and Button Hover Animation

Post Title​

A post card on the Signal demo with the pointer over its headline, outlined in orange: under Style 2 (Global Color) the headline turns the site's global colour

  • Title Hover Effect: what a post headline does under the pointer. Eight styles, from Default (Color & Underline) to Style 8 (Opacity). Its default is Default (Color & Underline), the first choice.

Four colour fields go with it. All four are empty by default, which keeps the theme's own colours.

  • Hover Effect Color: the underline, border or background the effect draws. Blank uses the global colours.
  • Hover Text Color: the headline's words under the pointer. Blank uses the global colours.
  • Dark Mode - Hover Effect Color: the underline, border or background, in dark mode.
  • Dark Mode - Hover Text Color: the headline's words under the pointer, in dark mode.

Which colour fields do anything depends on the effect you picked. Some styles draw no border, and some replace the text colour outright.

The colour of a headline before the pointer reaches it is not set here. It is in Typography, under H1 Tag to H6 Tag. The panel's note calls them Typography > H Tags.

Buttons & Elements​

The Join the Waitlist banner on the Signal demo with the pointer over its Join Now button, outlined in orange: the button's background colour swaps and it grows slightly

  • Button Hover Effect: what a button does under the pointer. The choices are Default (Blurry Shadow), Style 2 (Solid Shadow) and Style 3 (Background), and the default is the first. It also reaches the borders and shadows of other elements. That is deliberate.
  • Button Hover Animation: movement on top of the effect. The choices are None, Scale and Shrink, and the default is None.

Button colours are at Global Colors > Button.

Not here: menu hover​

The hover on header menu items is a separate setting: Menu Hover Effect, at Theme Options > Header > Main Menu.