Pure Perfection
If you want …
- Sun
- Sea
- Seclusion
- Sand
- Surf
- Sailing & Windsurfing
- Scuba Diving & Sea Angling
ThemeKitBox 2-1-2
At wider browser widths the item shows two pairs of images separated by a text block.
On tablets in portrait mode the images sit together with the text either above or below them.
On mobile phones in portrait mode the items stack with the left pair above the text and the right pair below.
As can be seen from this demo, the image icon links and the captions can appear on hover on computers and the images have an optional hover opacity effect.
ThemeKit Box Hero
This is a completely new way to create a hero image to over come the problems of the fixed height. Rather than specify a height for the container, the height of the content determines the overall height.
Adding more content to the text area will increase the overall height as will increasing the percentage width of the overlay images.
Background Images
These images are inserted in three sizes. The ones used in this demo were reduce to 1200 x 800px, 720 x 480px for computer and tablet and 9:16(375 x 666px) for mobile phones in portrait mode.
Overlay Images
These images can be reduced to about 400px wide before importing into EverWeb but the actual size will depend on the setting for the maximum width of the images.
Text Area
The text block has a maximum width setting which can be adjusted to suit the content. This has a heading and text with an optional list and CTA style intermal link.
In this example, the Google hosted font Stint Ultra Expanded has been selected along with the fallback font Helvetica. The heading uses a different font by checking a box and entering the Google font's name - in this case it is Russo One.
The optional list can have up to 48 items and there are controls for font sie and item spacing. The list items inherit the line height set for the paragraph text.
List Markers
The list items have a custom marker which is created by inserting the CSS equivalent of any of the hundreds of HTML sybols available.
To select a symbol, click the button in the widget settings panel to open the web page with the symbol. Double click it and then select the CSS code. Copy this and insert it into the box in the widget settings.
The markers have controls for adjusting their size and color.
Animation
The optional animation is very simple. It is turned on by checking a box and has a control for setting the animation time in seconds.
The animation delay for each item is preset do that they animate in in the order of text, top image and then bottom image.