Spotlight

The spotlight beam spreads out across a full width, fixed height background image. The text section is vertically center and is positioned relative to the 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 720px and 800 x 720px before importing into EverWeb. The smaller image was cropped out from the central area of the larger one.
Spotlight
The spotlight triangle has controls for the background color and its opacity. The height at the left side is set using a control named "spread". The value entered is doubled and them subtracted from the item's height. Don't worry if you are not an expert in math. The calculations are made in the CSS code!
In this example, the main container is set to a height of 800px and the spread amount is 275px. This makes the height of the left sized of the triangle 550px and the distance from the top to center it vertically is figured out in the styles using CSS Calc..
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.
All the items are aligned left and their position can be adjusted in relation to the left - on this case by 100px.

Spotlight

EverWeb Widgets

Spotlight

Column Footer