EverWeb Widgets

Responsive grid row header with navigation and text block.

Hero Header

The hero image has an overlay with a vertical navigation and a text block width a heading and an optional paragraph.
Image
The images are available in three different sizes - one for each device type. The images used in this page were cropped to 1600px, 1200px and 800px respectively before importing into EverWeb.
Overlay
The overlay uses a CSS grid layout to position the navigation and text block. When viewed on wider screens, there are two columns. On mobile phones, the layout switches to one column, the heading positions itself across the top and the optional text is hidden.
The overlay has a maximum width setting to prevent the navigation from being too far to the left when viewed on large screens at wider browser widths.
Text Area
The text block has a heading and a paragragh. It is vertically centered in the right column when viewed on computers and tablets.
The font can be web safe or non websafe or Google hosted with a web safe fallback. There are controls for the font size, color, padding and text align.
The background has controls for adjusting the padding, color and opacity and the border radius.

Navigation

Each navigation link consists of a PNG icon image and link text with a background that is adjustable for color and opacity and border radius.
The links are inserted using the EverWeb widget API Assets List except for the optional Email and Phone links which can be added at the bottom if required.
Images
The images used in the demo are icons created in Keynote, cropped to 64px square with background removed in Preview.app. Any images can be used but their size should be reduced to about 64px before importing into EverWeb.
The widget has controls for adjusting the image size and for adding a border and/or a box shadow.
Links
Links can be added by dragging all the images onto the Assets List and then sorting their order by dragging or by selecting them one at a time using the "Choose …" button.
Select each image file name in turn to add the link text and the file path.
External links can be inserted by using an absolute file path. Follow the link below to find out about file paths. Links can open in a new window if required.
Spacing
There are controls for adjusting the vertical spacing of the links, the inset from the left and for setting a minimum width to make all the links equal in width.

© EverWeb Widgets -