Responsive Overlay Header

EverWeb Widgets

Responsive Overlay Header
Viewport Height

Responsive Banner
Contact Form

Overlay Header

The header has responsive width and a fixed height. A separate height can be set for mobile phones. In this case, the header is set to viewport height to fill the browser or device window no matter what size it is.
It loads a different size of image for each device type - computer, tablet and phone to improve efficiency and download speed.
Overlay
The translucent overlay covers 50% of the image when viewed on computers and tablets in landscape mode. It has options for a logo, an h1 and an h1 heading and a CTA style link. The link can be configured to open internal or external pages and in a new window if required.
The overlay can be switched to the right hand side of the image if needed and becomes full width when viewed on tablets in portrait mode and mobile phones.

Contact Bar

The contact bar has options for a phone number which switches to a "Call Me" phone icon and mobile phones, a contact icon which opens a contact form in a modal window and an email icon.
The individual icons can be adjusted for color and the contact and email icons have an option to add a title tag whose text shows on hover when viewed on computers.
The contact form has fields for name and email and options to add a phone and an adjustable height text field. The form can be given a name if required.
The contact bar background color has an opacity slider which can be used when the box is checked to make it overlay the bottom of the item above.

Article Image One
Image [1]
Article Image Two
Image [2]

Responsive HTML5 Article

The widget consists of an HTML5 article element with options for one or two captioned images, a heading, text and up to three CTA style links.
Images
The images have alt text for the search engines and an overlaid caption. When there are two of them, they sit side by side when viewed on computers and tablets in landscape mode. On tablets in portrait mode and mobile phones, they sit one above the other. The images are inserted in an HTML5 figure element which can have padding added to space out the images.
The caption background can be adjusted for color and opacity.
Text Content
As can be seen from this example, the text content can have spans with a contrasting color and a different font size and style. Follow the External Link below to find out more about using spans.
Links
There are options for three CTA style link tabs. The first two can be configured as internal links and the third one can link to internal or external pages and open in a new window if required.
Container
The container background color has adjustable opacity and a control for overall padding. There are controls for border width, color and radius. A checkbox reduces the overall width slidgtly when a box shadow is added. The vertical spacing control should be set to a value greater than the shadow radius.

Internal LinkExternal Link

© EverWeb Widgets -