ThemeKit Podcast

Podcast Scrollbox

Episode [1]

ThemeKit Podcast Scrollbox 1

Layout

Author:
Date:

The scrollbox has and optional header with a scroll down icon.

Episode [2]

ThemeKit Podcast Scrollbox 2

Images

Lazy loading

The images have an alt text attribute and have a lazy loading option.

Episode [3]

ThemeKit Podcast Scrollbox 3

Header

Sticky

The items have optional sticky headers which will remain in view until the next item scrolls to the top,

Episode [4]

ThemeKit Podcast Scrollbox 4

Content

Author:
Date:

The content span has its own controls for font size and color and can run to two or more lines.

Episode [5]

ThemeKit Podcast Scrollbox 5

Links

Internal/External

The optional links can be globally switched between internal and external.
The links can have individual or common link text.

Podcast Scrollbox

Adding images to the list of podcasts will achieve a good click through response but can take up a lot of vertical space.
Using a scroll box with sticky headers allows a much more compact layout and reduces the amount of scrolling required This is important for small mobile device users.
The items can be in view for editing on the EverWeb design canvas by increasing the scrollbox height.
The scrollbox has a height control, a mobile height control and a control to set it to viewport height on phones if required.
Sticky Headers
The optional headers stick at the top of the container to remain in view until the next header reaches the top.
Using the CSS3 position stick allows this without resorting to Javascript.

Options

Although lazy loading is an option it should be used in most cases - particularly when the scroller has a large number of items.
Scrollbar
The vertical scrollbar inside the scrollbox is created by the browser. Since it doesn't do anything much except spoil the visual appearnce there is a checkbox to remove.

Menu