EverWeb Widgets

Media Header iFrame

Media Header iFrame

This header can give access to additional information created on another page of the site or from another website using an iframe. The iframe is opened in a modal window by clicking/tapping the centered info button.
The responsive header has a full size background image which can be set to a fixed height. There is the option to set a different height on mobile phones or both can be set to viewport height.
Images
The widget loads different sizes of images for each device type - computer, tablet and phone - for increased efficiency and faster download times on touch devices.
Header
The overlay header has an h1 heading and an optional logo and has adjustable height. The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It can be adjusted for font size, color, style and weight and letter spacing. The background color has an opacity slider.
Logo
The optional logo is positioned top left and has controls for adjusting its size and its position relative to the top and left.
Info Button
The centered info button has options for changing the color, setting the hover color and showing a title on hover when viewed on computers.
h2 Heading
The optional h2 heading overlays the bottom of the image. The text is centered and it inherits the font family, color and background color from the main heading. The font size is adjustable computer/tablet and there is a separate mobile setting.

iFrame

The iframe content page is referenced using the "Link to:" control to select an internal page or by checking a box and entering the URL for an external page.
The iframe is responisve so it makes sense that the content page should be responsive too. The iframe has a percentage width with a maximum width setting. It can be given a border using the controls for border width and color.
iFrame Height
The height is determined by using an intrinsic aspect ratio. This defines the ratio of the width to the height. The ratio is set using a slider which has a range of 50% to 150%.
The example of this page has a ratio of 75% which equates to a width to height ratio of 4:3 when viewed on computers.
A setting of 100% will give a 1:1 ratio and 125% will give 3:4 ratio.
The content page can be any height and the overflow will scroll.
Two more sliders are used to change the ratio when the page is viewed on a tablet in landscape mode and a mobile phone where ratios of 1:1 and 3:4 may be more appropriate.

© EverWeb Widgets -