EverWeb ThemeKit
Visit the ThemeKit store …
Address Line [1]
Address Line [2]
City
State/Region
Zip/Post Code
ThemeKit Modals
Location & Map Modal
Location
The ThemeKit Modal Location widget has a two column grid layout with an image and an article element width a heading, text, a spam protected email function and the option to add a phone number which switches to a phone call function on mobile phones
Map Modal
The ThemeKit Modal Map widget has a maximum width setting and displays an interactive map which appears as landscape on all devices and switches to portrait on mobile phones for a better viewing experience.
Modal Text Tabs
The ThemeKit Modal Text Tabs widget is a horizontal bar with action tabs to launch the modals. The bar can have a solid or gradient background with a padding control.
The links have a hover background animation and have a control for border radius. There are controls for adjusting the vertical and horizontal spacing.
In the example below the action tas open two examples of the Modal Content widget. The first shows the responsive image with caption and inserted in two sizes with a lazy loading option.
The second example shows the content with the heading, text, optional list, optional second heading and paragraph.
Modal Content
The modal has controls for background color and opacity, an optional close tab with controls for icon color and background.
At maximum height the panel fills the viewport and any overflow will scroll.
Content
The content has a maximum width setting and is centered on the X and the Y-axis.
The optional image is inserted in two sizes with a caption and has a lazy loading function.
The text area has a heading, text, styled spans.
Modal Content
This example of the ThemeKit Modal Content widget has no image and adds a list with a heading and text below.
The options for the content modal are …
- Optional image with alt text, caption and mobile image option
- Images have a lazy loading function
- The text area has a heading and styled spans
- The optional list has 8 list style types
- List item spacing and inset are adjustable
- Optional h2 heading and text below the list
Editing
All the modal widgets have the function to show the content for editing on the EverWeb design canvas.
Height
The widget height is then reduced to about 100px and the box checked to hide the modal which should be inserted out of the way below the footer widget.