The header has an optional logo, an h1 heading for the website name and a single level navigation. The navigation can have up to 14 links - the last two of which can be configured as external links and open in a new window if required.
When viewed on computers and laptops, the navigation is inline at the bottom of the header. On mobile devices, it disappears and is replaced by a "hamburger" style navigation icon which opens/closes a drop down.
The responsive heading widget shown above can be configured as an h1 through h4 heading to separate items and/or sections. It has many styling options and can be set up as a container with background opacity and a border and/or box shadow.
The heading can also be configured as an anchor. When used in combination with a suitable link widget, it provides smooth scrolling to the various sections of a long page.
For best results, a responsive image needs to have a maximum width setting and the ability to load different sizes of image file for the various devices.
All website images need an alt text attribute for the search engines and a caption for the visitors. The image above is inserted in an HTML5 figure element with a caption inserted using the figcaption tag.
Images
The image has its maximum width set to 1000px so this determines the width of the large image file. The medium size image is 800px wide and the small one is 400px.
The images should be prepared before importing into EverWeb. Make three copies of the original image and give them appropriate names which indicate which are small, medium and large.
Open each file in Preview and adjust the image file width using Tools -> Adjust Size.
Drag all three into the EverWeb Assets and select them from the controls in the widget settings.
Styling Options
The caption can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are options for styling it with padding, a background color with opacity, a border and a box shadow.
When the box shadow is used, the image percentage width is reduced slightly and the vertical spacing should be set to at least the same as the shadow radius to allow the shadow to be displayed properly.
The text module has an optional heading and text and can be styled with a border and/or a box shadow. It can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are options for styling span tags and text links if these are inserted as HTML.
Since text links are out dated - and pretty much useless for mobile devices - there is an optional to add up to three CTA style links which can open an internal or external page and in a new window if required.
The footer is full width and can accomodate several lines of centered text using the HTML <br> to create returns.
The © symbol is created using ©
There is an auto copyright date function which uses javascript to create the copyright year and update it automatically.
The footer incorporates a smooth scroll back to the top chevron and there is a control for adjusting the scroll time which is set in milliseconds.