EverWeb Widgets

More/Less QA FAQ Lightbox Image Grid Accordion Header Slider Email Me Tel: 012 345 6789

Header

The header has an optional logo, an h1 heading for the website name and a menu icon which opens and closes the navigation.
The navigation links are set in in auto columns. The number of columns switches from 3 on computers to two on tablets and one on mobile phones.
The navigation links can be configured to open internal or external pages and have a new window option.
There is an option for adding an email link and a phone link. The phone link displays the phone number when viewed on computers and tablets. It switches to a phone icon on mobile phones which calls the number when tapped.

Image [1]

Image [2]

Image [3]

Image [4]

Image [5]

Image [6]

Image [7]

Image [8]

Image [9]

Image [10]

Image [11]

Image [12]

Image Grid

The responsive grid can show just a few images on page load and then load more in steps until all the images are loaded.
The number of images per row can be set for each device type. The number of images to show and the number to load on click can be set for both computer and mobile.
Images
These should be cropped to a suitable size before importing into EverWeb and then they can be dragged altogether onto the Assets List in the widget settings panel.
The images can have a caption which has the option of being displayed on hover when viewed on computers.
Links
Image links can be turned on globally. The links can be configured to open and internal or an external link by entering relative or an absolute file path and can open in a new window if required.
Lazy Loading
The images are lazy loaded so that only the images in view are downloaded at page load. More images are downloaded each time the "Load More" button is clicked. This really speeds up the page download time - especially for mobile device users.
Animation
When viewed on computers, the images can have an optional scale animation applied as well as having the caption animate in.
Grid
The grid can have a different color of background from the wrapper and both have an adjustment for background opacity.
The grid spacing can be adjusted from zero upwards.

Responsive More Characters

The container is an HTML5 <article> element and has an optional image, a heading, text block and a CTA style link.
In this example, the image is floated left with a width of 50% so that the text can wrap it. When the page is viewed on a mobile phone, the image becomes full width.
Text Limit
The amount of text displayed on page load is determined by the "Character Limit". This can be set at a high value so that the content is visible for editing and then reduced to show only the text required at page load.
More/Less Tab
When the character limit has been reached, the More/Less toggle tab appears. This is positioned at the bottom right and, when clicked or tapped, reveals the remainder of the text. The label text changes to indicate that clicking it will close the extra text. The text for both states of the tab can be customised for meaning and language.
There is an option to hide the tab in the "more" state so that the visitor cannot return to the "less" state if this is required for any reason.
Setup
When the character limit is set to a large value so that text can be seen when viewed on the EverWeb design canvas, the More/Less tab is hidden. Once the text has been entered, reduce the character limit to reveal the tab for editing.
The tab can be styled for color, background, border radius and positioned at the bottom left or right.
Ellipsis
When the character limit is reach, the script inserts an ellipsis (…)
This is created in the javascript rather than using the HTML (…)
If the ellipsis is not required, it can be removed by checking a box in the widget settings.
Image
Make sure the image is cropped to the maximum size that it will appear on the page before importing into EverWeb.
For a full width image, set the width slider to 100%.
For text wrap, reduce the image width and it will float to the left. Check the box if the image is required to be floated right.
Link
The optional link can be configured to open an internal or external page and in a new window if required. It can have a different background and color from the More/Less link.
Spans
Spans can be inserted as shown in this example. The spans can be styled for font size and color. Click the link below left to find out how to creates spans in widgets.
Entering Text
While entering text, set the character limit to several thousand so that the text can be seen on the design canvas. Before publishing, reduce the limit to the required amount.

Spans

Footer

The footer has the copyright info with auto update of the copyright year and a triangle icon which opens and closes the navigation.
In this example, the navigation is set to be open on page load. It can be closed on page load by checking a box in the widget settings.
The navigation links are set in auto columns. The number of columns switches from 3 on computers to two on tablets and one on mobile phones.
The navigation links can be configured to open internal or external pages and in a new window if required.
There is an option for adding an email link and a phone link. The phone link displays the phone number when viewed on computers and tablets. It switches to a phone icon on mobile phones which implements the call when tapped.

Accordion Header More/Less FAQ Email Me Tel: 012 345 6789