Scrolling Offset Panels

Scrolling Offset Panels

The article elements with the info are staggered by default and then become aligned center when the page is viewed on iPad and iPhone.
There is a checkbox for selecting the image in each article so that panels can be created with just the heading and text.
Responsive
To make the item responsive down to the width of an iPad in portrait mode, set the content width in the Page inspector to about 780px. To make it suitable for mobile phones, set the content width to 320px.
Header & Navigation
If a header with single level navigation is required, the Responsive Header & Nav can be used. It will switch to a "hamburger" dropdown on tablets and phones.

Fade Out Ad Links

Sponsor Links

Links to sponsors, suppliers and associated web pages can be inserted using the Scroll Fade Out Ads widget. This appears at the bottom of the browser/device window on page load and then disappears on scroll.
The image links can be set to animate on hover . The scroll distance before fade is set in pixels and the fade in and fade out times can be set in milliseconds.

Image Only

Image and Heading

Text Content

Text Content

The panels can show just the heading and text if required.
This section has a coloured background created with a 200px square image. The shape was created in Keynote, a screenshot taken and the image cropped to suitable dimensions.
The image is then inserted in the same way as the full size background images.
Text hyperlinks can be created as shown in the Info section and styled in the widget settings.
The optional footer has auto update of the copyright year and a smooth scroll to the top chevron tab.

© EverWeb Widgets -