Hero Video

The video shows a poster image on page load and can be either fixed height or full height to fill the browser/device window. The overlay can animate in and has controls color and opacity.
The text block has a heading and options for a paragraph. a list and a link. It can be positioned left, center or right. The text block is centered when the screen width of the viewing device falls below the width set by the break point control.
Video
The MP4 video file and the poster image must have the same aspect ratio. The video has controls for autoplay. loop and plays inline on iPhones. When autoplay is selected, the sound track is automatically muted.
Play/Pause
The optional Play/Pause button has fields to enter different text and can be positioned top or bottom and left or right with controls for fine tuning the position on the X and the Y axis.
Scroll Down
The optional scroll down tab scrolls down to the next section and doesn't require an anchor. The scroll time is adjusted in milliseconds.
Text
The heading, text and list share the same controls for font color and the container can have a background color which has an opacity slider. There is a control for adjusting the vertical spacing of the items in the text block.
As can be seen from the example on this page, the text can be a Google hosted font with a web safe fallback. The heading has controls for font size, font size on phones and text align,
The text has controls for font size, text align and line height.
List
List items are added using the EverWeb Widget API Assets List and there are controls for list style and inset, There is a checkbox to turn on the function to use CSS code to create a symbol rather than one of the default list styles. In the example, the checkmark is used.
Symbols
Symbols are available in various guises - unicode, hex code, HTML entity and HTML code. The HTML code version can be converted to CSS or Javascript code.
Click the "Get Symbol" in the widget settings to go to the web page to browser for a symbol. Double click the required symbol and copy the CSS code. Paste this into the box in the widget settings.
There are controls for adjusting the font size and color of the symbol.
Link
The optional link can be configured to open internal or external pages and has a new window function. The controls for color, hover color and background color are applied to the link, play/pause button and scroll down tab.
Animation
The animation is a simple fade in of the overlay and its contents and there are controls for animation time and delay set in seconds.
Position
The position of the item can be relative so that it scrolls with the rest of the page content or it can be fixed in position so that the content below scrolls over it.