Links
The image links are set up by entering a relative file path for an internal link and an absolute file path for an external link. Follow the links below to find out about relative file paths and how to test pages in the iOS Simulator.
EverWeb Widgets
Corner Tab Grid
Tab Grid - Optional Hover Animation
Each grid item has an image with alt text which can be configured as a link to internal or external pages and open in a new window if required.
NOTE: The images in this example are NOT hyperlinks.
The caption can use a websafe font or a non websafe or Google hosted font with a web safe fallback. The background color has an opacity slider.
The optional top caption can made visible on a per slide basis by checking a box. It has its own controls for font color and background.
The corner tabs have a control to adjust their size. This control also adjusts the height of the caption containers. The color is set as RGBA so they can made to disappear by setting the opacity to zero.
The grid items can have a border and/or a box shadow if required and there are controls for adjusting the grid gap, left/right padding and vertical spacing from the items above and below it.
The container background can be adjusted for color and opacity and is full width so that it can scroll over any fixed items.
The optional scale animation on hover when viewd on computers has a checkbox to turn it on and controls for setting the animation time and the scale amount.
Items are added and their data entered as described below …
- Crop all the images to the same size, give them file names with sequential numbers and store them in a folder.
- Select all the images in the Finder folder and drag them all together and drop them onto the Assets List in the Widget Setting panel
- Change the order of the images if required by dragging them up or down the list
- Select the first image in the list, hit the Tab key and enter the alt text for the search engines
- Tab again and enter the caption
- Check the box to add a top caption and enter the data
- Enter a relative or absolute file path into the URL box and check the box if it is to open in a new window