EverWeb Widgets
Parallax Scrolling Image
Parallax Image
The image is inserted in the background and has responsive width and a fixed height. There is a setting for changing the image height when it is viewed on a mobile phone.
Image
The widget displays different sizes of images on the various devices - computer, tablet and phone. When creating pages with parallax images it is essential to keep the file size to a minum and crop them to suitable aspect ratios before importing them into EverWeb.
For example, the images used in this demo are 1600px, 1200px and 800px wide respectively.
Image Overlay
Header VersionOverlay Styles
The overlay covers the whole image and has controls for color and opacity which can be adjusted to suit the image content to to make the text visible.
The overlay has an h1 heading by default with options to add an h2 heading and a CTA style link.
The overlay content can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The h1 can be styled for font size, color, font style and weight and letter spacing and the h2 for font size.
Link
The link has controls for setting the font size, color which is inherited by the border color, border width and hover color.
It can be configured as internal or external links and to open in a new window if required.
The link above opens the page with the demo of the header version of the parallax scrolling image widget in a new window.