The full width, fixed height background image has an overlay which is split and angled. One side has adjustable background color and opacity and the other is transparent.
The overlay has a two column grid layout and the text block is positioned in column one and is vertically aligned in the center.
At screen widths below the break point, the overlay becomes full width.
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 1200 x 600px and 800 x 400px before importing into EverWeb.
Overlay
The split overlay has its angled adjusted using a slider. This has a range of 30° to 90°. The left side is 10% wider than the right to make sure that the text doesn't run out of the transparent section.
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.
The background linear gradient is set with two colors - each occupying 50% of the area - and an angle which is adjustable from horizontal to vertical.
Next PageThe full width container has a split two color background which can be angled at the meeting point in the center. The angle can be adjusted from zero - horizontal - to 90° - vertical.
There is an overlay with a grid layout which contains an image and a text block. The positions of the items can be switch by checking a box.
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.
Image
The image is inserted in an HTML5 figure element with alt text and an optional overlay caption. It has a maximum width setting and controls for border width, color and radius and box shadow radius and color. For most purposes, the image can be cropped to about 600px wide before importing into EverWeb.