EverWeb Widgets
Action Hero Switch
Hero image switches from fixed height on computer to responsive height on tablets and viewport (fullscreen) height on mobile phones.
Responsive Heading Anchor
Animated Box Links
Animations that draw the outline of the item look really cool and aren't too hard to implement if using code insertion.
Nowadays this effect is very often created using SVG animation which is fine for irregular shapes but is rather complicated for non-coders.
This animation is created using CSS animation with keyframes.
On Hover & On Page Load
The animation takes place on hover when viewed on computers and on page load when viewed on touch devices like the iPad and iPhone which don't do hovers.
The on load animation time needs to be longer the one set for the hover animation time so there are controls for setting each one in milliseconds.
If viewing this page on a computer, reduce the browser width to see the change in amimation type.
Setup
The widget adds links using a modified version of the Widget API Assets List - up to a maximum of 24.
To add a link, click the Add button and then select the entry in the list and enter the data in the boxes below.
Select the entry in the list again and it will become editable to give it a unique name or number.
File Path
The URLS are entered as relative or absolute file paths. Click the "File Paths" link below to find out more about this.
Position
The widget can be positioned anywhere in the stack of widgets on the page. It can be placed below an item like the Hero image on this page and then be made to overlay it at the top by checking a box. It can then be fixed in position as the rest of the page content scrolls beneath it by checking another box.
Wrapper
The link wrapper has controls for its background color and opacity and a vertical spacing control for spacing it away from the items above and below it.
As alway, make sure the page content height is set to zero before publishing the page.
This Page
The main feature in this page's content was created using the RGL Action Hero Switch widget. Follow the link below for more info.
Scroll Down Link
Any links can be used as a smooth scroll down in conjunction with a suitable anchor widget. In this example, the Responsive Heading widget - marked in red - is used to create the anchor by checking the "Create Anchor" box and entering an ID number - in this case the number is 1.
The ID - #1 - is entered into the URL box.
The "Create Scroll Down" box is checked and the scroll time in milliseconds entered.
Both the Responsive Heading and the Responsive Theme Break widgets in the Responsive Elements widget pack can be used as anchors.