EverWeb Widgets
Responsive Banner
Responsive Banner
The banner 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.
It loads a different size of image for each device type - computer, tablet and phone - to improve efficiency and download speed.
Overlay
The banner has a 100% overlay which can be adjusted for color and opacity. It has options for a logo at the top left and a horizontally and vertically centered heading and text.
Animation
The overlay, the heading and the text can animate in. Each item has controls to turn on the animation and to set the animation time and delay in seconds.
Scroll Or Fix
The image can scroll with the rest of the page content or, by checking a box to fix it and allow the overlay and the content below to scroll over it.
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 opened and closed by tapping a "hamburger icon when viewed on mobile devices like the iPad and iPhone.
The links can be spaced out as show above or grouped together and have a colored separator. They can have transparency added using the opacity slider.
The mobile navigation is vertical and can have backgound transparency and a separator.
The navigation can accomodate up to fourteen links. The last two links can be configured to open internal or external pages and in a new window if required.
Active Link
There is an option to indicate the current page link with a different color. Selecting this option inserts a jQuery plugin to add an active link class to the existing navigation.
Search Bar
The full width search bar is inserted below the banner - and the navigation if present - on the EverWeb design canvas. It can appear below the image or, by checking a box, overlay it at the bottom.
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.
Responsive Audio Player
This audio MP3 player is much more suitable for responsive pages than the EverWeb default one. It has a larger play/pause button to make it easier for touch device users and the popup on hover volume control disappears on mobile devices.
The audio file is prevented from preloading so two or more can be placed on a page without effecting the page download time.
The container is responsive with a maximum width setting and has a text field for the track titlte/artist name.
There are options for autoplay and loop but it should be realised that autoplay is pretty much redundant since this is now prevented on all Apple devices - including computers.
Track Title - Artist Name
SoundCloud Embed Player
This widget embeds the SoundCloud player in its original rather ugly form and just needs the SoundCloud Embed ID inserted to create the player.
The player is responsive width with a maximum width setting. There is a setting for height since the SoundCloud embed code doesn't provide this - or anything much else.
There are checkboxes for turning the default controls on/off. These are autoplay, hide related, comments, visual, reposts and teaser.
The SoundCloud Player has a nasty orange play/pause button. This can be changed in the widget settings using a list of color names. A standard EverWeb API color chooser can't be used because the SC player code is non complient.
The player container itself can have a background color which is exposed when padding is added. Note that the height should be increaed to allow for any padding. It can have a border using the controls for border width, color and radius and/or a box shadow by adding the shadow radius and color.
Responsive SoundCloud Player
The SoundCloud player just needs the share link inserted to create the player.
The player can either be responsive width with a maximum width setting or full brower/device width. There is a checkbox for sticking the player to the bottom of the browser/device window like the example on this page.
In this mode, the Full Width setting must be used. The player should be the last item on the page and a spacer - equal to the height of the player - should be placed above it. In this example, the Responsive Theme Break widget was used to create the spacer and set to a height of 110px.
The player has an optional text area for adding copyright and track info.
Styles
The player can use a web safe or a non web safe or Google hosted font with a web safe fallback. The track title in the info text can be styled for font size and color. The player background color also has an adjustment for opacity and the player itself can have a border using the controls for border width, color and radius.
© Roddy McKay - All Rights Reserved