EverWeb Widgets
This diagonal overlay can be positioned at any corner
Previous PageEverWeb Widgets
EverWeb Widgets
This diagonal overlay can be positioned at any corner
Next PageDiagonal Overlay
The full width, fixed height background image has an overlay which is created using an SVG with variable color and opacity.
The overlay is a right angled triangle and can be placed top-left, top-right, bottom-right or bottom-left.
Images
The background images are inserted in two sizes - one for wide browser/device widths and the other for tablets in portrait mode and phones. The images in this example were cropped to 1600 x 800px and 800 x 800px before importing into EverWeb.
Overlay Position
The overlay position is selected from a drop down menu in the widget settings. The text block is then moved in to position by setting its column - 1 or 2 - and its vertical alignment - start or end.
Text Block
The text block has a heading, paragraph and an optional link which can be configured to open inernal or external page and in a new window if required. The link can have an optional double chevron icon which is inserted as a CSS "::after" psuedo element..
The font can be web safe or non web safe or Google hosted with a web safe fallback. The vertical spacing between the items can be adjusted.