EverWeb Widgets
Use the best and you won't have to try rest!
Hero Image + Logo Nav + Toolbar
Shown above are the Hero Fixed Image, the Logo Nav and the Toolbar. The toolbar is inserted below the image on the EverWeb design canvas and appears as an overlay at the bottom of the image.
The navigation is inserted as the last item on the page. It has a fixed position to make it stay in view and overlays the top of the image on page load.
Hero Image
The image is inserted in three sizes for the different devices - computer, tablet and phone. It is full width responsive with a fixed height and becomes 100vh on mobile phones to fill the screen.
The images are inserted using the HTML5 <picture> element rather than in the background so that they can have an alt text attribute for keywords for the search engines.
The image has a full size overlay which can be adjusted for background color and its opacity.
The overlay has a centered h1 heading and optional text which can be separated from the heading by a line if required.
Animation
The overlay can fade in with controls for animation time and delay set in seconds.
The h1 heading animates in and down with settings for animation time in seconds and distance in pixels.
The line animates from the center out and has controls for time and delay.
The text fades in and has controls for time and delay.
When all three items are visible their vertical spacing can be adjusted.
Toolbar
The toolbar has options for a phone number which switches to a phone icon on mobile phones, a scroll down chevron and an email icon. The scroll down and email icons can show a title on hover when viewed on computers if required.
Styles
The text for the phone number can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It has controls for font size and color.
The icons share the same color as the text and can have a hover color to display when viewed on computers.
The icons can display a border if required and this inherits the font color and hover color.
Email Spam Protect
The email address has basic protection to stop spammers from harvesting it using data mining software.
This requires the name, domain and domain extension each to be entered into separate boxes.
Logo Navigation
When viewed on computers, the navigation links can be centered or aligned right if the optional logo is inserted.
It has controls for top/bottom padding to adjust its height and left/right padding to inset the links and the logo. The background colorcontrol also has an opacity slider to adjust the transparency when used as on overlay or sticky nav.
The links can use can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color and hover color and the link spacing can be adjusted
Current Page
By checking a box, the navigation can show the current page link in a different color with an animated underline.
Mobile Navigation
The break point at which the navigation switches to the mobile style has four options. The "hamburger" icon can be adjusted for icon color, background and border radius. There is an option for setting a hover color for the icon if the break point is set to its maximum value.
The dropdown has controls for overall width, background color and opacity and for separator width and color.
Logo
The optional logo can show an image and an optional text field. The logo container width is adjusted to suit the text when present and the relative size of the logo image is adjusted using a slider. The text inherits the navigation's font family and has controls to adjust the size and color.
The image - and the text if present - can be configured as a hyperlink to open internal or externals pages and in a new window if required.
Navigation Position
The navigation can be positioned in three ways …
[1] Relatively positioned and inserted where it is required to be.
[2] Inserted below an item like a hero image and be positioned as an overlay at the top.
[3] Fixed in position at the top. In this case, the navigation MUST be the last item inserted on the page.
The mobile navigation can be fixed in position even when the main naviagtion is not.