The relative column widths are adjustable and the layout can be switched on browser/screen widths above the break point. Below the breakpoint the text can appear above or below the image.
Link
The optional link has lots of styling options. It can be aligned left, center or right and open internal/external pages and has a new window option.
The ThemeKit Reveal Content widget has a grid layout with 2 columns and 3 rows.
An image is inserted in one column and an <article> in the other. The position of these items can be switched and, below the break point, the text can be above or below the image.
The upper section can have a gradient background color with adjustable angle.
The lower section can be a solid color or have its opacity set to zero to show the browser background
Angle
The angle is formed by a triangle created using the border property and a pseudo element. The slope of the angle can be adjusted viewport height units so that it remains constant with varying browser/device width.
The vertical position of the angle can be adjusted using a control to set the column span of the upper section with the gradient background.
Items
The relative width if the image and the article can be adjusted by changing the relative widths of the left and right columns - in this case the ratio is 2:3.
Both have a maximum width setting and can be spaced using the grid gap control.
The items can have a border and/or a bottom box shadow.
Link
The optional link can be styled as a text link or a CTA (Call To Action) and aligned left, center or right. It can open internal or external pages and has a new window option.
Animation
The slide up animation is optional and there are separate controls for the animation time and delay for each item.
The animation can be set to fire once or every time the item enters the viewport. By default the animation is turned off when viewed on mobile phones but can be turned on for these devices. by checking a box.
A grid layout header with an adjustable angle.
The overlay is a two column grid.
This section is an <article> with a heading, text and an optional link in column two.
The relative column widths are adjustable and the layout can be switched.
The ThemeKit Reveal Nav Bar was designed to put the action tab in the most convenient place for those using mobile touch devices who make up over 60% of the visitors.
The nav bar has controls for smooth scroll down, navigation action tab and smooth scroll top the top.
The links slide up on click or tap and are centered horizontally in the browser/device window. When the nummber of links excedes the height of the browser/device window any overflow will scroll into view.
Smooth Scroll
The scroll down chevrom tab scrolls the page down by the viewport height on each click or tap. The scroll down and scroll to the top functions each have their own control for scroll time set in milliseconds.
Setup
The nav bar has a fixed position so it can be inserted last on the page belwo the footer widget.
The links are in view on the EverWeb design canvas for setup and styling. They are hidden prior to publishing by checking a box
Bar Styling
The bar itself has a control for background color and opacity. In the example on this page the background opacity is set to zero.
The tabs have controls for setting the background color, icon color and hover color. Their spacing is adjusted using the maximum width setting.
The reveal animation has controls to turn it on and to set the animation time and delay.
Nav Styling
Both the nav container and the links have controls for background color and opacity. The hover and current page links are indicated by a change in background color. The hover animates in/out to add a smooth, professional touch.
The links have controls for top/bottom and left/right padding, text align and link vertical spacing.
Note that the ThemeKit Gradient Spacer widget is used to create a space below the footer so that the navigation bar doesn't cover part of it when the page bottom is reached.
The footer has a three column grid layout when viewed on browser/screen widths greater than the break point. It collapses to two columns and then a single column as screen with is decreased.
Left Column
This has a heading, text block and an optional phone number which changes to a phone icon to place the call when viewed on mobile phones.
Center Column
This has a heading and text which is aligned center in the example. The email function is spam protected.
Right Column
The heading is followed by a navigation which can have several links to internal/external pages with a new window option.
The smooth scroll to the top function has a control for setting the scroll time in milliseconds.
© Notice
The copyright notice spans all three columns and has a function for automatically adding and updating the copyright year.
Animation
The animation rotates the footer on the X-axis. The control for transform origin determines type of effect …
Top swings the footer in and down
Center rotates it in with the rotate point at vertical center
Bottom swings it in and up from the bottom