EverWeb Widgets

Elements 2

This pack contains more basic widgets required for a simple responsive web page layout.
NOTE: These widgets require EverWeb V2.8 and above and should be organised in a folder separate from those used to create fixed width pages.
Click any widget icon to see the demo …

Responsive Article

The responsive HTML5 article element has options for a single image or two side by side images with alt text and overlay captions.
The text area has options for a heading, text with contrasting span tags and up to three CTA style links. The last link can be configured as an external one.

Banner Navigation

The responsive navigation widget is inserted below the banner on the EverWeb design canvas and appears as an overlay at the top of the image on the published page. It can scroll with the rest of the content or be fixed in position to make it sticky and always remain in view.
The navigation is inline when viewed on computers and switches to a drop down on mobile devices.

Closable Bar

The bar can animate in from the top or bottom on page load and has a text field, close button and the option for up to three CTA style link tabs.
The links can be configured to open internal pages and the last one has an external page option and can open in a new window.

Comments Bar

The bar has options for a phone number which switches to a "Call Me" button on mobile phones on the left and an email icon on the right.
The center icon shows a title on hover when viewed on computers and, when clicked or tapped, opens a modal with a Disqus comments section.

Contact Bar

The contact bar has options for a phone number which switches to a "Call Me" phone icon and mobile phones, a contact icon which opens a contact form in a modal window and an email icon.
The individual icons can be adjusted for color and the contact and email icons have an option to add a title tag whose text shows on hover when viewed on computers.

Overlay Header

The header has responsive width and a fixed height. A separate height can be set for mobile phones or the banner can be set to viewport height to fill the browser or device window no matter what size it is.
The translucent overlay covers 50% of the image when viewed on computers and tablets in landscape mode. It has options for a logo, an h1 and an h1 heading and a CTA style link.

Overlay Banner

The banner has responsive width and a fixed height. A separate height can be set for mobile phones. The banner can set to viewport height to fill the browser or device window no matter what size it is.
It loads a different size of image for each device type - computer, tablet and phone - to improve efficiency and download speed.

Scroll Down Bar

The bar has options for a phone number which switches to a phone tab on mobile phones on the left. The email link is position at the right and has fields for email address and subject and can show a title on hover when viewed on computers.
The centered chevron down icon smooth scrolls down to the next section of the page when clicked or tapped.

Search Bar

The bar has options for a phone number which switches to a phone tab on mobile phones or a contact icon on the left. The email link is position at the right and has fields for email address and subject and can show a title on hover when viewed on computers.
The centered spy glass icon opens a modal when clicked. This has a text introduction and a custom Google search feature which requires a Google custom search ID.

Search Footer

The footer has a spy glass icon which opens a modal when clicked. This has a text introduction and a custom Google search feature which requires a Google custom search ID.
There is an optional smooth scroll to the top chevron with adjustable scroll time to the right.
An auto update of the copyright year is included as an option.

Sidebar vertical Navigation

The Responsive Sidebar Navigation one can be positioned left or right and switches to a location below the image when viewed on narrower screens.
The current page link can be indicated using a contrasting color to the link text.
There is an option to indicate the current page link with a different color.

MP3 Audio Player

This is a conventional style audio MP3 player modified to be suitable for responsive pages. It has a text field for the all important track info and a play/pause button which is large enough for use on touch devices.
The vertical volume control bar popups up on hover on computers and disappears when viewed on mobile devices. The player and descriptive text are enclosed in a styled container for better search results.

SoundCloud

The SoundCloud MP3 player just requires the file path to be entered and can be full width, responsive width with a maximum width or full width and stuck to the bottom of the browser or device window.
The player has an optional text block for track and copyright info and has quite a few styling options including background opacity and border.

SoundCloud Embed

This widget embeds the SoundCloud player in a web page with checkboxes to show/hide all the various features and a control to change the play/pause button color.
A height control has been added since the original doesn't have one for some reason. The player has a container which can be styled with a background color, padding, and a border and/or a box shadow.

© EverWeb Widgets -