EverWeb Codebox logo

EverWeb Widgetbox 3

Mobile Hyperlinks

Mobile Sticky Tab Links Widget
Mobile Link Button Widget
Mobile Icon Link Button Widget
Mobile Image Widget

The Widgets

These widgets are designed to create user friendly links to replace text hyperlinks on a website for touch devices such as the iPad and iPhone.
There is a CTA (Call To Action) style button link, a button which can use any of the Font Awesome Icons, an image link which has an option for turning a square image to round and set of sticky tab links which fix themselves to the botton of the browser/device screen.

Mobile Anchor Tabs Widget

Mobile Links

Hyperlinks for use on web pages that will be viewed on a touch device need to be a minimum of 40px wide by 32px in height.
The examples shown below use the Link and the Icon Link widgets to create button hyperlinks.
Follow the "Icon Types" link to see the range of Font Awesome icons.

Icon Types

Widget Settings

Both of these widgets have similar settings and can link to either an internal page using the "Link to:" control or to an external page or file by checking the box and entering a URL.
The link widget has options for a gradient background while the Icon Link has a solid background with an opacity option.

Image Links

Image links are used a lot more on websites designed for touch devices for obvious reasons.
The Image Link widget can link to either an internal page using the "Link to:" control or to an external page or file by checking the box and entering a URL.
It has a number of styling options including a checkbox for turning a square image round or a rectangular one oval.

Sticky Tab Links

Tab links which stick to the bottom of the device window are a good way to provide fingertip size hyperlinks where button links would compromise the layout.
They can also be used for a back to the top function, email button and links to external pages such as a blog and social media sites.

Mobile Stick Tab Links Widget

Sticky Tab Settings

The tabs can be arranged in a single line or in rows depending on the number of links and the page content width. Adjust the widget width using a drag handle or the Metrics inspector to achieve the desired result.
Set the font family, size, color, background color and background opacity.
Set a minimum width if all the tabs are to be the same size.
Adjust the padding to suit, make sure the top/bottom padding value is enough to give the tabs a minimum height of 30px.
Adjust the value for horizontal spacing. If the tabs extend to two or more rows, use the vertical space control to separate them.
The first six list items are for internal links.
Enter the tab text, choose the "Link to:" page and check the box to display it.
Tab seven is for an "Email Me" button. Enter the tab text, the email address and subject and check the box to display the tab.
Tabs eight and nine create either internal or external links.
For an external link, check the box and enter the URL.
If the tabs are being used on the full version of the website, the option to open the link in a new window can be used.
The last item is a " Back To The Top" tab. Enter the text and check the box to display the tab.
Set the distance of the tabs from the bottom of the browser/device screen and check the box to fix it.
Finally, using the "Arrange Menu", set the widget to "Always On Top"

Mobile Stick Tab Links Widget

This widget is included in the Mobi widget pack.