Styled Image

Image Insert

Images are one of the most important items in a website so it is important to prepare and insert them properly. The info links below open pages which describe how to prepare and compress images for the web.
Images
Images need to be inserted in two sizes - one for desktop computers and laptops and the other for smaller mobile devices. The images used in the demo were cropped to 960px - equal to the max width setting - and 720px for mobile devices before importing into EverWeb.
HTML5
The images are inserted in an HTML5 <figure> element using the <picture> element to provide the two sizes and an alt text attribute.
Using the <figure> allows us to insert a caption in the <figcaption> element which lets the search engines know that the descriptive caption is related to the image file.
Caption
The caption is the most important item for visitors just as the alt text is important to the search engines and screen readers and should have descriptive keywords.
The font can be Google hosted with a web safe fallback and the caption can be aligned left, center or right.
Container
The container has options to add padding, background color and opacity, border, border radius and an offset box shadow with controls for X, Y, switch and shadow color and opacity.
Link
The image has the option to be configured as an internal or external link with a new window option.
Since mobile users don't have a hover cursor to indicate an image link there is an option to show an icon at the top right which can display only on hover when viewed on computers.

Image Prep Compression

Round Image

An image is made round or oval by using a border radius of 50%. A square image will then be round and a rectangular one will become oval. The image itself can have a border using the controls for border width and color.

SVG Icon Links

The link bar has a CSS grid layout using auto fit and min-max to control the link width. Icons are added as SVG code for efficiency and to allow the icon size and color to be adjusted.
Each link can have a different background color and a shared hover background color. The hover has an ease-in-out animation.
SVGs
SVGs should replace font icons and PNGs in modern web design for better quality and download efficiency. To insert an icon, open the SVG Icon folder in the widget download folder, find the required icon, double click it it to open it in TextEdit.app or a code editor, copy the code and paste it into the appropriate box in the widget settings.
Email
The optional email link has basic spam protection. The name, domain and domain extension are entered in separate boxes and a jQuery plugin enters the @ and the dot.
Phone
The optional pnone tab can either appear only on phones or appear on all devices. When viewed on computers there is an option to show the phone number on hover using the link's title element.
Position
The links can be positioned relatively anywhere on the page or, by checking a box, fixed at the bottom of the browser/device window.
In this example, the ThemeKit Content Fade widget is inserted below the footer widget ang set to the same height as the link bar. The link bar is inserted below it. Doing this provides a spacer to stop the links covering the bottom of the footer when the page is scrolled to the bottom.