Hero Links

These widgets create two different types of inline links. The first one uses PNG images with an optional caption and the second example creates CTA style link tabs.
The links are centered horizontally in a full width container which has a maximum width setting to control the spread at wide browser settings. They are also centered vertically no matter what height the widget is set to.
The maximum number of links will depend on the width of the individual links and whether or not the page needs to be responsive down to the width of a tablet device in landscape or portrait mode.
Each link occupies a percentage of the container width and the value depends on the number of links. To make life easier, the widget use the CSS "calc" function to figure this out and it just requires the user to enter the number of links in a box in the widget settings.
If viewing this page on a computer, reduced the browser width to that of an iPad or use the browsers responsive mode. See the Testing page for info about the responsive mode offered by the various browsers.
Scroll To Fix
Both widgets have an option that allows the links to scroll up the page and then fix themselves at a preset distance from the top of the browser or device window. In this example, the PNG links will scroll out of site and the CTA links will scroll and stick just down from the top so that they always remain in view. When this mode is selected, the widget should be set to "Always On Top" using the Arrange menu or the Metrics inspector.
Note that, when the scroll to fix setting is used, the links will apear to move off vertical center by the amount of the distance from the top when viewed on the EverWeb design canvas. They will appear as expected in the published version!
Image Links
Although the images used in this example are PNGs, JPEGs can also be used. There is a control for setting the image width and a checkbox for turning the captions on/off globally.
The images have a hover box shadow function which will be seen on mouse over when the page is viewed on computers. There are controls for setting the box shadow radius and color and a check box to make the shadow conform to round images.
The optional captions have a background color control with adjustable opacity.
CTA Links
These links have adjustable background opacity and can have a border and/or box shadow with radiused corners and a hover font color for when the page is viewed on a computer.
Font Styles
Both widgets can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
Hyperlink File Paths
Since the widgets use the EverWeb widget API's Assets List to create the links and enter the data, the file paths are entered into a box. These can be either relative or absolute. See the Info section for more about file paths.
There is a checkbox to configure any of the links to open in a new window if required.