Placeholder image and from one to six animated images - round or square - with adjustable animation time and slide display time.
Captions
Captions can be aligned top, center or bottom with vertical adjust.
Refresh
The optional refresh function has an animated action tab.
Autoplay items like banners and slideshows should be avoided - especially on responsive web pages. Autoplay items take control away from the visitor and drain a mobile device's battery.
The ThemeKit Graphic Design Banner uses pure CSS for the animation so it doesn'trequire any battery draining Javascript.
It displays a placeholder image on load and will display up to six more images with controls for animation time and slide display time.
Layout
The banner has a two column grid layout with adjustable relative column widths. Below the breakpoint the text move below the image display.
The images in the demo were sized to 480 x 480px and optimised before importing into EverWeb. The images have the option to lazy load - except for the placeholder.
The optional refresh function allows the visitor to replay the images. The action tab has an SVG icon and a background hover and rotate animation on computers.
The Graphic Biodata Cards widget can be used anywhere an image grid with a link, text info, phone or email functions are required.
Images
The images should be cropped to a suitable size and optimised before importing into EverWeb. They have the option to be lazy loaded.
Links
When the link function is selected an icon appears at the top right and the image is configured as a link.
The inks can be configured globally as internal or external.
Info Section
The info overlays the bottom of the image and has controls for height, top angle and for creating transparent gradient overlay with two colors and adjustable angle.
The overlay has a text block and options to add a phone number/phone call function and a spam protected email function.
Containers
The items have controls for adding a border with radius and a box shadow. A bottom box shadow appears when the item is rotated.
Animation
The images can be rotated in a +ve or-ve direction on the Z-axis and swing upright on hover.
On touch devices, tapping an image will animate it. Tapping another item or anywhere else on the device's screen will return it to its onload position.
Content separation is the key to a successfull responsive web page layout by drawing attention to key information.
This example uses a two column CSS grid and float to create a more interesting layout with the key elements separated.
Image
The image is floated left in the usual waywith a 50% width and a suitable right padding.
On devices with a screen width less than the breakpoint setting the image becomes full width and pushes the text down below it. The image can have a border to define its edges if required.
Wrapping Text
The wrap section can have sub headings be added using a styled span which has controls for font size and color.
Link
An optional CTA (call to action) style link can be added at the bottom. It can be configured to open internal or external pages and has a new window option.
