ThemeKit Block Slider
A responsive module with gradient background, responsive slideshow and an info block with heading, text and an optional link.
Block WidgetsSlider & Video
Slideshow
Using a layout like the above for displaying a slideshow has two main advantages.
The actual image size can be a lot less and there is no need to innsser smaller image files for mobile devices.
In terms of SEO (search engine optimisation) slide images must be inserted in an HTML5 <figure> element with a caption and alt text. Adding a heading and text to describe the slideshow content in the same container allows the search engines to index the page content more comprehensively.
Many website designers seem to forget that relevant descriptive text is the key to success with SEO. Images and videos MUST have a text description in the same container.
Product Picker
The first image is inserted twice - for the stage and in the widget API Assets List.
InfoTabs have adjustable size, color, hover color and active color and can be made round.
InfoThe optional links are inserted top right and can open internal or external pages.
InfoThe optional separator has controls for border width, color and style - dashed, dotted or solid.
Info
In this example the layout has been switched and the relative column widths are set at 4:3
This example is showing color options so the links and the separator have been removed.
The images can have a border if required.
The image files must have the same aspect ratio. The images in this example are 480 x 600px.
The tabs have been made round by checking a box, their size increased to make them an easier target for mobile device users and the border with increased to 2px.