The age old problem. We have masses of content to be integrated onto a page, but how do we do so and retain some semblance of design. The obvious solution, of course, is some sort of tabbed content, or an accordion. Tabs and accordions, however, are not always ideal and seldom look really attractive, on top of which – some visitors don't realise that there is more content hidden behind the tabs, so what about a slider?

JW's Weaver's Space has gained a new stack – Horizon a stack that scrolls content into view when required.
We've seen sliders before, but Horizon is different, it can scroll content horizontally either when your visitor slides the scrollbar (or drags on mobile devices), or automatically. Automatically means that your content can scroll constantly (and pause on hover), or – especially subtle – scroll as the page is scrolled.
If Horizon is set to scroll manually, a badge can be displayed "Scroll Me" (or a text of your choice) so that even the least experienced visitor gets a hint that there's more content available.
Horizon will accept any stack [combination] that you care to throw at it, but it is also TotalCMS-ready, i.e. it has options to add a Blog List, a Gallery, or a Post Gallery.


Stack settings
Horizon Container
Start Position – %
Enable Scroll Hint
Hint Text
Collapse in Edit Mode

Horizon Scrollbar
Scrollbar – Default, Hide, Styled
Show on Hover
Scrollbar Height – Height, Gap (px)
Scrollbar Colours

Horizon Cards
Height – Auto, px, %
Width – Auto, px, %
Width – %
Min/Max – px
Margin
Padding

Animation – None, On Page Scroll, Loop, Loop on Hover

Horizon is a great way to display masses of information and even the most inexperienced visitor can hardly miss that there's more content to view.

Invert. To turn [something] upside down or inside out; to place in a contrary order or direction. When we scroll a webpage, we expect into scroll up/down. Shaking the Habitual's Inverter stack does the inverse of what we'd expect - it scrolls horizontally, rather like a book, but without the page turning. AND, Inverter can do more.

Inverter stack allows for content to be distributed horizontally across a web page. Inverter then 'inverts' the user's scroll action so that instead of scrolling down the web page they instead move from left to right. Inverter allows for any type of content stack to be added and the possibilities for its use are endless. It does lend itself, however, especially well to such uses as timelines and storytelling etc.

Inverter stack also provides the ability to add a parallax background which gives the opportunity to create some really beautiful effects as the user scrolls across the screen.
The background image, foreground image and info blocks scroll across the page at different speeds.

The user should not add too much content to any one Inverter block as anything that does not fit on the page (height-wise) will simply be cropped. This is especially important to bear in mind when designing for mobile. However, a good option is to set some content blocks within an Inverter block to not display on mobile.



Inverter v1.0.1 has just been released (26th May) which allows for even wider Inverter blocks to be added (previously this was restricted to 1500px). This now allows for content such as very wide images to be used. A great example of this use case can be found on the Inverter web page.

Stack settings
Content
Scroll Width
Scroll Speed
Blocks Offset

Background Images (Parallax)
Rear Image
Near Image
Pin To Bottom? – Near, Rear
Image Widths – Near, Rear

Inverter Block
Position / Size
Start Point – Distance from Left in px
Width – px

Block Styling
Colours – BG, Border
Border – px
Padding

Inverter is STH's 3rd stack. With its nifty parallax effect, it goes further than other horizontally scrolling stacks and will be appreciated by many Weavers. If you're interested in purchasing Inverter, there's a 20% discount available until June 8th/18 using the code sth-ninja-inverter.
*Image not historically correct – For demo purposes only.

The one that got away! A fortnight ago, 1LD released a new stack – Feature Slider – that just arrived in my in-box. Not wanting to deny you a review, I decided "better late than never", so here we go:

Feature Slider is a slider that displays a headline, an icon or an image and a short description with a 'Learn More' button and is ideal for product presentation, or portfolios etc.
Let's say that you're advertising real estate, promoting art, or selling an assortment of products; drop Feature Slider into your Stacks' page and you have the perfect vehicle to do so.

Feature Slider may be configured to display as compact sliders in multiple columns, e.g. to present your staff from multiple departments, or as a full-page slider to present a portfolio. In its base configuration, Feature Slider displays an icon, but is readily set to display an image. The 'Learn More' button can then open a new page (or lightbox) to display more information about the product advertised.

As with all recent 1LD stacks, Feature Slider is fully customisable and the settings panel is a cubit long. Via the child stack settings each slide is individually customisable.

Stack settings
Autoplay – Deactivated by default
Active Slide – Slide that is displayed on page load
Max Width – px
Max Height – px
Radius

Slides
Hide Titles
Hide Descriptions
Hide Icons
Hide Titles
Hide Buttons
Title Font
Description Font
Button Font
Settings for all font, image and button sizes
Settings for all colours

Feature Slider is yet another 1LD stack that is not only timeless but versatile. I can envisage multiple uses for it. I'm sure you can too.

Sliders. There are dozens of them available as RW stacks. A slider can be an image slider, it can be a stack slider, it can be a combination of both; so who would have thought that a developer could come up with something new? Well, 1LD certainly has. 50/50 Slider.

50/50 Slider displays a title, a caption text, a button and an image – now you're thinking "Yeah, so do many other sliders!", but this is where the name 50/50 comes into play; one half of the stack displays your text content, the other half displays your image. When you click the stack's navigation button, the text content slides from left to right to reveal the next content – 50/50.

50/50 Slider will fill any container that you drop it into and by adjusting its max width and min height, it can easily fill your screen. On mobile 50/50 transforms to display your image above the text content.


As we have recently become accustomed to with 1LD stacks: the settings panel reveals a plethora of configuration options, making 50/50 Slider completely customisable. So here's a condensed version of the…

Stack settings
General – Max Width, Min Height, Mobile Point, Radius, Content Align
Slides – Hide Titles, Hide Text, Hide Buttons, Title Font, Text Font, Padding, Title Size, Title Spacing, Text Size, Text Spacing, Button Configuration, Mobile Height for Image
Slide Navigation Configuration
Slide Colours

Slider Item
Image Container
Action Link
Custom Slide Colours

The main stack settings are for the global appearance of the slider, however, each slide child may be customised individually.

1LD has once again produced an innovative stack that is both modern and timeless. This is an effective slider that is simple to configure and will find great popularity.
The only thing that I could wish for is an option to swap the image/text positions…

An eon ago, I purchased cleanQuotes from One Little Designer. I used it for a while, but then decided to build my own quote slider which, with variations, I've used ever since. cleanQuotes is getting a little long in the tooth. It was built for Stacks 2 and while cQ is quite versatile, the interface reflects its age. 1LD has just taken another look at cleanQuotes and decided to revitalise the stack. The result is a fresh new stack – Testimonials.

Testimonials is a crisp new take on quotes. A slider with a thousand options that allow you to present your quotes exactly as you want them. There's not a single design aspect that can't be altered. Take a peek at the stack settings and you'll see what I mean. You could spend the whole day tweaking and refining!


When you drag the stack into an RW Stacks page, you are presented with a single child stack that contains your first quote. The default quote is a black and dark grey design. Perhaps not appropriate for every site, so you're going to want to change the colours of the background, decide on your font format and colour (the usual 1LD collection of 13 fonts, plus custom are available), set the format and size of the quotation marks, or hide them top and/or bottom (again, there is the choice of 13+ fonts for the quotation marks).
Further, you can choose the font (13+) for the name, or hide the name entirely and you can choose between star ratings, or hearts, or hide the rating. Finally you can display an Icon above, or below the slider. In the child stack settings, you can replace the icon with an image of your choice…
… Oh and then there's the slider buttons which can also be hidden if you only have a single quote, or have set Testimonials to 'Autoplay'.

Stack settings
No, absolutely not. I refuse! If I list all of the possible settings, I'll still be here next week and this post would be three feet long. Suffice it to say, they are endless!

Testimonials is a great replacement for cleanQuotes and if you previously purchased cQ, you can expect a special upgrade offer to land in your inBox very soon.