Gradient Overlay

The widget creates a hero image with these functions …

  • Overlay with background color opacity from 1 to 0
  • Opacity direction can be switch to the right with the content block
  • Optional bottom clip angle - left or right
  • Variable clip angle
  • Optional list
  • Custom list markers
Info Link

EverWeb Widgets

Gradient Overlay Hero Image

The hero image (full width, fixed height) has become so popular that it pays togo for something a little different. This one has a couple of features which separates it from the rest - a linear gradient from left to right with varying opacity from 1 to 0 and a bottom edge clip.
Overlay
The transparency is automatically set although the color is edtable. The effect is turned on using a checkbox and automatically reverses when the text content is switched to the right.
Clip
The clip is created using a polygon clip path. The angle can be adjusted using a slider and it can be switched from left clip to right clip by checking a box.
Background Images
These images are inserted in three sizes. The ones used in this demo were reduce to 1200 x 800px, 720 x 480px for computer and tablet and 9:16(375 x 666px) for mobile phones in portrait mode.
Text Area
The text block has a maximum width setting which can be adjusted to suit the content. This has a heading and text with an optional list and CTA style intermal link.
In this example, the Google hosted font Stint Ultra Expanded has been selected along with the fallback font Helvetica. The heading uses a different font by checking a box and entering the Google font's name - in this case it is Russo One.
The optional list can have up to 48 items and there are controls for font sie and item spacing. The list items inherit the line height set for the paragraph text.
List Markers
The list items have a custom marker which is created by inserting the CSS equivalent of any of the hundreds of HTML sybols available.
To select a symbol, click the button in the widget settings panel to open the web page with the symbol. Double click it and then select the CSS code. Copy this and insert it into the box in the widget settings.
The markers have controls for adjusting their size and color.
Animation
The optional animation fades in the text contact. It is turned on by checking a box and has a control for setting the animation time and delay in seconds.

Shuffle Gallery

The gallery grid has controls for setting the number of items per row for each device type. There are options to add captions and lightbox icons which can show on hover on computers.
Slideshow
The lightbox slider has captions and a slide counter. Images are navigated by arrow tabs or grab and drag on computers and swipe on touch devices.
Shuffle
The shuffle option is turned on with a checkbox control and rearranges the thumbnail image order every time the page is loaded or refreshed.