ThemeKit Combo Hero
The text and image can switch positions, the bottom clip can be left, zero or right and the clip angle adjusted.
The CTA style link shown below is an option and opens an internal page.
ThemeKit Combo Header
ThemeKit Combo Hero
The hero item has a two column grid layout with a text block in one column and an image in the other. The items can be switched and the column relative widths can be adjusted.
Container
The container can have a solid color or a gradient background with adjustable angle. The bottom edge can be horizontal or clipped left or right with a control to adjust the clip angle.
Content
The text block has a heding and text and an optional internal link. The background has an opacity slideer and there is a setting for maximum width.
The image - in this case a PNG - also has a setting for maximum width.
The image used in the demo has its file size reduce to 600px and optinise using ImageOptim before importing into EverWeb.
Scroll Links
The ThemeKit Combo Scroll Links creates links that will smooth scroll down to anchors. There are options for a link to the home page using an SVG icon and a smooth scroll to the top with a chevron up icon. Botht the scroll down and scroll to the top functions have a control for animation time set in milliseeconds.
Sticky
The links can be inserted any where in the stack of widgets on the page. It will then scroll up with the content and stick at the top to remain in view using the CSS position property set to "sticky". The distance from the top can also be set if it is required.
Container
The container can have a solid color or gradient background with adjustable angle. It has a maximu width setting and the links are centered.
Links
The links have their own control for background color and its opacity as well as controls for font size, coloe and hover color. There is a control for adjusting the horizontal spacing.
The chevron down icons are created using a CSS ::before selector with the content being the CSS equivalent of the HTML icon.
Mobile
On screen widths below the break point, the links disappear to be replaced by a chevron down icon on the right. Tapping this opens a dropdown with the scroll links.
The dropdown has its own controls for background color and opacity, position X and for vertically spacing the links.
Spacer/Anchor
The ThemeKit Combo Spacer/Anchor widget is use on this page to create the anchors for the scroll down links.
The spacer has controls for height and for a solid or gradient color background with adjustable angle.
Checking a box creates an anchor and the ID number is selected from the dropdown.
Anchors
The ThemeKit Combo widgets include some that double as anchors and one that doubles as a scroll down link and/or an anchor.
Anchor Widgets
- The ThemeKit Combo Spacer has a checkbox to turn on the anchor function and a box to enter the ID number.
- The ThemeKit Combo Heading can be used as anchor and/or a scroll down link.
- The ThemeKit Combo Pro Slider widget can be used as an anchor. Click this link to see it in action
- This item is the ThemeKit Combo List with 16 different custom marker types.
Content Fade In
The ThemeKit Combo Fade In widget is inserted below this text module. It allows the page content to loaded smoothly by adding a short delay. This gives a little extra time for items like a hero image to load and gives a smooth, professional touch to the user experience.
It has controls for a solid or gradient color background with adjustable angle, height for use as a spacer , a checkbox to turn on the animation and a control for setting the animation time.
In this application it is not being used as a spacer so the height is set at 10px.