Banner
This diagonal banner is both rotated and skewed. The background image is optional and a solid background color can be shown by increasing the opacity of the overlay.
When an image is rotated it will extend out of its container. To prevent it overlapping the content above and below it is given a is given a left/right margin expressed in viewport width units and equal to the angle applied.
The skew angle is equal to the angle of rotation and this keeps the ite's left and right edges parallel to the browser/device window. The angle is adjustable from zero to 10°.
To prevent the text content being skewed and distorted it is skewed by an equal ammount in the opposite direction.
Images
The optional background image is inserted in two sizes - one for computers and the other for mobile devices. The images used in this demo were cropped to 900 x 600px and 600 x 400px before importing into EverWeb.
Spacer
The banners shown above would overlap if left to their own ddevices. There is a checkbox in the widget settings to add a spacer in this situation. The value of the spacer is expressed in viewport units and is automatically set using CSS cal.
Background Color
The banner below has no background image. The overlay color is set to bright red with 75% opacity.
Width
The banners can either be full width or centered with a maximum width. The text content has a percentage width setting.