ThemeKit Image Info
Insert an image in two sizes with or without the animated overlay on hover or click
Optiona; separator line and link to open internal/external pages.
Image Insert
If an image is inserted at content width on a responsive page it needs to be able to load a smaller image file for mobile devices. The images are inserted using the HTML5 <picture> element with alt text for the search engines and screen readers.
The image can have a border and/or an offset box shadow. The example image has a dark grey 1px border to sharpen up the edges.
Overlay
The overlay can be seen on the EverWeb design canvas for editing and then hidden prior to publishing. It appears on hover when viewed in browser widths wider than the break point . On mobile devices an info icon appears which will reveal the overlay on click or tap.
The overlay has a heading, optional line separator, text and an optional link. The link can open interna; or external pages and has a new window option.
Logo Nav [2]
The navigation is inline when viewed on wider screens and switches to a "hamburger" icon on touch devices. The navigation can have up to eight top level links and the last one can be set to open an external page and has a new window option.
It can have one or two directories - each of which can have up to eight links.
Logo
The navigation links can be aligned left, center or right. The optional logo which can be configured as an internal link is positioned left so the links should be aligned right when it is present.
Links
The links can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color, hover color, background color and opacity, minimum width, drop down width and for setting the separator width.
The "hamburger" icon has controls for setting the icon color, background color and opacity and its position relative to the top and right. There is a drop down menu for selecting the break point at which the navigation switches from on type to the other.
Position
The navigation can be placed anywhere in the stack of widgets on the page or positioned below a hero item and made to overlay it at the top by checking a box.