ThemeKit Graphic
Headline

Gradient Headline

The ThemeKit Graphic Headline widget can have two or more lines with centered text on a solid color or two color gradient background. The text size and line height can be reduced for mobilr phones.
Gradient
Color gradients in text use the CSS property "background-clip" set to "text" and the text-fill-color set to transparent".
The widget has controls for a two color gradient and an option for a third color.
Each has a control to select the color and adjust the color stop.

Heading Type

The widget creates h1 through h3 headings …

  • h1 is used for the website name
  • h2 is used for the page's subject hading
  • h3 us used to denote a section or change in subject

Bottom Shadow

Note that the optional bottom box shadow is not visible on the EverWeb design canvas, It has a z-index control to set its position in the stacking order above the item below.

Navigation

Menu

Access to the page navigation should be available idependent of the scroll positiom with the action tab fixed at the top right = or left if there is a section menu and a page menu.
The navigation should appear in an overlay - front and center - with the links aligned vertically.
Graphic Navigation
The menu appears in an overlay with the links in one or more columns. The links have a background hover animation and the current page link can be indicated using a different background color.
Designer Style
The overlay has controls to adjust the background color and its opacity. For a more unique look thee overlay can have an image.
The image is inserted in three sizes for the various devices and has an alt text attribute and a lazy loading function.

Links

Menu

Since a responsive website should never have links in text it is useful to have a link bar to insert below text with mobile compatable links.
The ThemeKit Graphic Links widgets creates a row(s) of link tabs which can open a combination of internal or external pages.
Style
A well crafted link design with unique features can add interest and nelp to make the visitor experience more memorable .
The link bar has …

  • Chevron icon to double chevron on hover
  • Hover scale and hover bottom shadow options
  • Link min width control
  • Horizontal and vertical spacing controls
  • Solid color or two color gradient background