Hero Header
The logo and h1 heading are placed at the bottom to allow for the 2 level Top Nav to overlay at the top.
EverWeb Widgets
Product Gallery
Product Description
When viewed on computers, the product image gallery is positioned to the left with the thumbnails below. The description is to the right and has a heading and a paragraph for describing the product. This text can be aligned at the top, center or bottom.
Hovering a thumbnail opens the larger image in the gallery stage.
The slideshow stage is set to a percentage of the maximum width - in this case 50% - and the text occupies the rest of the space.
Mobile
On mobile devices, the gallery is full width, responsive and the description slides below it.
Images are opened in the stage by tapping the thumbnails.
The number of thumbnails per row can be set and there is an option to set a lesser value when the item is viewed on a mobile phone.
Both the stage image and the thumbnails can have a border to separate them from the background if required.
Slide Up Grid Items
Grid Layout
The grid shows four items per row on wider screens reducing to two and then one on narrower devices.
Grid Items
Each item has an icon link with optional scale animation, a heading and text.
Animation
Each item has a slightly longer delay than the one on its left to stagger the slide in.
Iteration
Animations can be set to fire once or every time they enter the viewport and defeated on mobile phones if required.
Animated Badge Links
Page Layout Widgets
If viewing this page on a computer, reduce the browser width to see how the layout changes. More realistic results can be obtained by opening the page in both an iPad and an iPhone in the iOS Simulator.
This page is created using these items…
- The Hero Header uses three different images - one for each device type - for faster downloading. The heading is align right at the bottom an has the option to add a logo to the left
- The 2 Level Top Nav is placed below the header on the EverWeb Design canvas and the overlay control is checked. The navigation can have up to 8 single level links and 3 directories each with up to 6 links. The mobile version of the navigation is sticky and fixes at the top right.
- The product slider occupies an adjustable percentage width when viewed on computers with the product info to the right. It switches to full width on touch devices where the slides are opened by tapping rather than hover.
- The Responsive Heading Widget is used with the maximum width setting and the text aligned left to create section dividers and the anchors for the scroll down links
- The slide up tabs can have the icons configured as links if required. The animation can be set to occur only once or every time they enter the viewport. The animation can be removed on mobile phones if required
- The Animated Badge links are created using JPG images inserted in a circular container which has options for adjusting the size and adding a border and/or a box shadow.
- This list is created using the Responsive Styled List widget which has options for a heading and text and controls for setting the list style, position, inset and spacing
- The footer is the basic Responsive Auto Footer which has options for auto update of the copyright year and a smooth scroll to the top chevron