EverWeb Widgets

Hero Image Text Overlay

A full width, fixed height image width a maximum width setting and a text overlay.
The overlay is 50% wide when viewed on computers and increases to 100% on tablets.

Hero Image Text Overlay

The image is full width, fixed height with a maximum width setting to control the overall width at wide browser settings. The overlay occupies 50% of the image's width when viewed on computers and can be positioned left or right.
If viewing this page on a computer, reduce the browser width to see the layout change or use the browser's responsive mode.
The description use the Responsive Sidebar widget with built in footer to create a fully responsive page.

Widget Setup

The image should be cropped to proposed maximum width setting and the actual height required. The image can be made full width id required by settung the maximum width to about 2400px.
All three items in the text overlay can be turned on individually using checkboxes so any combination can be used.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The heading can be adjusted for font size, color and text align.
The text has controls for font size, color, text align and line height.
The CTA link has a transparent background and can be styled for color, border width and radius and hover color. The link is configured to open an internal page.
The overlay background color and its opacity are adjustable.
Responsive Settings
The first control sets the vertical spacing between the heading, descriptive text and the CTA link.
The first slider controls the percentage width of the text block when viewed on a computer and the drop down sets the overlay on the left or right half of the image.
The break point can be set to 1059px for tablets in landscape mode or 799px for portrait mode.
The slider sets the percentage width of the text block below the break point.

© EverWeb Widgets -