Card Image mBox
LayoutThe two column gird has an image and a text block with a heading, optional span, text and an optional link.
The image is the trigger to open the modal with an image inserted in two sizes.
ThemeKit Cards
Media Modal Cards
Media Cards
The ThemeKit Card mBox widgets open modals with an image, slideshow, MP4 video and YouTube video.
The card itself has the option to have a slide up in view animation.
The cards have …
- An image for the trigger to open the modal with optional two color gradient background
- A text area with heading, optional span, text and an optional internal/external link
- All images have a lazy loading option
Modals
The modal items have controls to add a border and/or a bottom box shadow. The overlay background has aa control for opacity.
The modal can be closed using the close tab or by clicking/tapping the overlay.
Video mBox
MP4 VideoThe video is lazy loaded and inserted in two sizes for computer and small mobile devices.
Video
Video will is less likely to effect the page download speed if it is offscreen on page load and has a lazy load function.
Video players have a lot of assets which will download even if the visitor doesn't play it unless this is prevented and lazy loading is used.
Video Files
Self hosted MP4 video is much better than using hosted video such as YouTube. On a responsive website video files MUST be inserted in two sies for computer and smaller mobile devices.
The player above uses an HD file 854 × 480px with a file size of 9.7MB. The SD version is 426 × 240px with a file size of 4.9MB.
mBox YouTube
LayoutThe image is shown with the optional two color background gradient and has 20px padding added.
YouTube
Hosted video like YouTube is not the best way to insert video in a responsive website. If it is used it is inserted using a widget with a lazy loading function.
YouTube to MP4
If a video is only available on YouTube, convert it to MP4 using an online converter and download it in two sizes for self hosting.
MENU