ThemeKit Header Info
This overlay can show on page load or on click.
The info overlay has a heading, text and an optional link which can open internal or external pages.
The image can have a border and/or an offset box shadow.
Header Building blocks
The header on this page is composed of three widgets stacked vertically - ThemeKit Logo Header Nav, ThemeKit Header Info and the ThemeKit Shape Wavese. All three widgets have their background gradient colors set the same so that they appear as one item when viewed in the browser.
Header Info
The image is insert in two sizes using the HTML5 <picture>element so that the image can have alt text for the search engines and screen readers. The images in the demo were resized to 1200px and 720px wide resoectively before importing into EverWeb.
The overlay can be seen when viewed on the EverWeb design canvas and is closed prior to publishing by checking a box.
The container has three controls for padding - top, left/right and bottom since these need to be adjusted when using an offset box shadow and/or a bottom shape.