RGL EZ In Hero Float.ewwdgt

Float In Hero Image
Rotate Option

EverWeb Widgets

Logo Navigation Heading

The item can be placed anywhere in the stack of widgets on the page. In this case, it is inserted below a hero item on the EverWeb design canvas and made to overlay it at the top when the page is published by checking a box. Checking another box makes it sticky by setting its position to fixed.
The widget has options for a logo and/or a heading and there is a "hamburger" icon on the right to open the navigation.
Since this is a grid layout, all the items are easily self centered vertically without any fancy CSS.
Rows
If all the items are selected, and the logo image is wide, the navigation can be set to have two rows on mobile devices.
In thise case, the navigation height is automatically doubled, the logo occupies row 1 and the heading and navigation icon are on row 2. The break point at which this happens is selected from a drop down menu.
Logo
The logo has controls for setting the image width and mobile width and for setting its distance from the left edge. The logo image can be configured as an internal link and there is a text field for entering a title if required.
Heading
The h1 heading is centered and can use a websafe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, mobile size, style, weight, color and for letter spacing and mobile letter spacing.
Icon Tab
There is a slider to adjust the relative size of the icon and controls for color, hover color, background color and its opacity, border radius and the position in relation to the right.
Navigation
The navigation drop down is open so that the links can be added and styled. It is then closed by checking a box prior to publishing.
There are controls for setting the drop down width, link size, color and hover color, background color and its opacity and the separator width. The separator inherits the font color.
There is a checkbox for turning on the option to show the current page link in a different color.

Animated Float In Hero Image

The image animates in from the center out and has an overlay with a centered h1 heading. The images are inserted in two sizes - one for computers and tablets in landscape mode and the other smaller one for tablets in portrait modde and mobile phones. The large image doesn't really need to be any wider than about 1200px and the smaller one can be 800px or less.
Animation
The various animations are turned on by checking boxes and each one has controls for setting the animation time and delay in seconds.
The overlay has controls for setting the background color and its opacity.
The heading animates in from the top and has a soft bounce landing.
The image scales up from the center but can also have a rotation animation for a more startling efffect. There are controls for setting the rotation angle and for reversing the direction. The larger the angle - the greater the effect.

© EverWeb Widgets -