EverWeb Widgets

Tel: 012-345-6789

Combo Header

The header has an h1 heading, logo, phone number and a nav icon to drop down a navigation menu. The grid has three columns and two rows and the container has controls for background color and opacity, top/bottom padding and for setting the height above and below the break point.
Heading
The heading is centered and can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It spans rows 1 and 2 and then switches to row two below the break point and moves to the right to clear the logo and phone icon.
Logo
The logo has controls for width, mobile width and position relative to the left. It can be configured as an internal link by checking a box and choosing the "Link to:" page.
The phone number sits below the logo in row two and switches to a phone icon "Call Me" button on mobile phones.
Nav Icon
The tab has controls to position it relative to the top and right of the header. It inherits the font color and hover color set for the navigation links. The size of the icon can be adjusted using a slider.
Navigation
The navigation links are added using a modified version of the EverWeb Widget API Assets List and they can be configured to open internal or external pages and files.
There are controls for font size, color, hover color, separator width and color, dropdown width and for the background and its opacity.
Current Page Indicator
The current page can be indicated by checking a box and using a different color for the current page link.
Hide & Fix
The navigation menu drop down is open so that the links can be seen when viewed on the EverWeb design canvas. There is a checkbox to close it prior to publishing.
Two checkboxes are available to fix the position of the navigation and to fix the position of the header to make them sticky.

Breadcrumbs

Breadcrumbs are used to navigate larger sites with directories and sub directories rather than using a navigation menu with two or three directories which leave the visitor lost and confused.
This navigation uses the grid layout so that the tabs maintain equal width despite varying amounts of text.
Links
Links are added using a modified version of the EverWeb API Assets List and can be configured to open internal or external pages using relative or absolute file paths.
They can use a web safe font or a non web safe or Googlee hosted font with a web safe fallback. There are controls for font size, color, hover color, current page color and for the background color and opacity.
Layout
The links are inline when viewed at wider browser/device widths and then stack vertically on narrower screens. They are centered with a maximum width setting. This is calculated in the CSS from the minimum tab width and the number of links. The minimum tab width is adjusted to suit the amount of text.
Chevrons
These are created using the CSS ::after pseudo element and switch from chevron right when the links are inline to chevron down when the links are stacked vertically. They inherit the font and hover colors.
Wrapper
The wrapper has its own controls for background color and opacity and the break point at which the layout changes is selected from a dropdown.
The breadcrumbs navigation menu can be relatively positioned anywhere in the stack of widgets.

File Paths

Auto Footer

The RGL Auto Footer widget is used to finish off this page. It has a control to add bottom padding to accommodate the sticky toolbar which is fixed to the bottom.
This extra padding allows the visitor to scroll the toolbar down far enough to see the footer content and use the smooth scroll to the top function.

Round Icon Toolbar

The toolbar has inline block links with a centered icon. The links are centered on the page with a maximum width setting.
The width of each link is automaticlly adjusted with changes in browser/device width. The link container has a grid layout and the columns are set to repeat, fill the space and have a minimum width of 32px.
The links have an option to display a title on hover when viewed on computers. They can be configured to open internal or external pages and in a new window if required.
The toolbar can have an email link added. This has basic spam protection. The email name, domain and file extension are enter into separate boxes and the @ and dot are then added using Javascript. This prevents spammers using scraping software from harvesting the email address.
The optional Share tab creates a "share by email" link with fields for tite, subject and the email body content.
Follow the link below to find out about creating links with relative and absolute file paths.
Position
The toolbar can be relatively positioned anywhere in the stack of widgets or, by checking a box, made sticky and be fixed to either the top or bottom of the browser/device window.

Link Info