You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.
Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.
Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.
Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.
Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.
Note: I haven't actually been able to test Typed for myself, so I'm unable to say what the final setting Detach does.
Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.
Listify is a set of three stacks that will help you build professional lists within your Stacks pages. The basic stack, Listify, is a container for individual List Items. You can either click the stack's + button to create a List Item child, or drag in a List Item stack. The third stack is Listify Group; a container that allows you to create groups of list and automagically builds responsive columns to contain them.
The clever thing about Listify is that you can drop anything into it that you please…
Lets take a basic list. Drop Listify into a stacks page and add a List Item.
The List Item Displays an Icon and a Text Field. Enter your text, add a new List Item – as many as you need – and you have bulleted list.
If you need a headline, you can either enlarge the text in the first Item (see the image below), or you can add a container to the Item and drop in a Header stack (hover over the image below). You can, of course drop in an image, or a button into the List Item Stacks and switch off the default icon and text display.
Each List Item may be formatted individually, or – by leaving the default settings – the completed list may be configured as a whole. Once you've studied the settings panel you'll find that the configuration is really simple.
Tip. If you wish to set up individually formatted List Items, begin with one Item. Once you have finished the basic formatting, duplicate the Item and then reconfigure. You'll find it a lot easier than setting up each Item from scratch.
The basic Listify stack provides the settings for the overall look and feel of your list. The List Fill Mode determines the width of your list – either Full Width (of the container it is placed in), or Pixel Width. The List Radius is set to a default of 5px whilst with the List Padding and the List Margins are set to 10px T, B, L & R.
The Background is set to Off by default, but may contain a solid Colour, a Gradient, or an Image.
Both the Borders and the Shadow are Off by default.
List Items (Shared Styles). The following settings will affect every List Item within the Listify stack:
Indent Direction (Left/Right), Item Indentation (px), Align Content (Left. Centre, Right, Separate (Icon & Text)), Item Spacing (default 5px), Item Radius (default 5px), Item Margin, Background and Border.
List Item Fonts gives you a choice of 13 standard Google Fonts, or (just to prove that 1LD listens to their customers) Custom. Text Size (px) and Text Colour.
List Item Icons (Shared Styles). Here you get to set the standard formatting for the icons: Vertical and Horizontal Positioning, Icon Padding and Spacing, Icon Radius and Icon Size. The Icon Background can once more contain a solid Colour, Gradient, or Image. Oh, and the Icon Colour itself, of course!
The default Icon is a Google Material Icons star. The icons are set individually for each List Item, with a choice of GMI's, Font Awesome, or Ion Icons.
Listify Item. The individual Items may be Linked to an external source. The next setting is Item Level. Each Item may be set to up to 10 (in words TEN!) Sub Levels! Excuse the overuse of exclamation marks (points if you're American) but this is amazing!
Next you have the option to Override Shared Styles. If this option is activated, each List Item may be individually styled. With the exception of Custom Stack Content and the Icon setting, the list of formatting options that follows is identical to those already listed above, including the individual visibility settings for the three screen sizes.
Finally, we come to the List Group stack.
As already stated, if you drop two, three, or more individual Listify stacks into a Group, your list is automatically columnised.
The List Group Stack also has some interesting features, though.
The List Alignment is set to Centred by default, but may also be set to Top, or Bottom. Then you'll find a setting Wrap List for Mobile Tablet (Portrait) and Desktop. Then there are settings for the group's Background – again None, Solid Colour, Gradient, or Image, Group Radius and Group Padding. The whole group may, of course be hidden at different screen sizes.
Hover over the image above, and you'll see just how flexible Listify really is – and that's without having added button stacks, or images!
Kool, or wot?
'Velvet' refers to the velvety smooth transition that Velvet Video displays when transitioning from thumbnail to full screen view. It is really smooth.
There are two Velvet stacks – the Velvet Base stack that enables Velvet's functionality and Velvet Video – the thumbnail/video container. Once you have placed a Velvet Base stack on your RapidWeaver page, you can add as many Velvet Video stacks to the page as you please.
Velvet Video's flexibility is quite distinguished. You can place multiple thumbnails in a multi-column stack, or in a Foundation grid, or you can drop the Velvet Video stack into a slideshow of your choice. The stack is Mobile First, so when a thumbnail is clicked on a mobile device, the video will play 'in place' whilst on a desktop or tablet display it will smoothly open a full screen lightbox.
As you already know, I am not a fan of online videos, but I do have clients that require video implementation on their sites. Velvet Video is an ideal solution if you have multiple clips to present.
First you'll need to add a Velvet Base stack to your page and configure it.
Because Velvet Video is Mobile First, the first setting is Direct Play Break – the breakpoint at which the video will play in place and not open a lightbox. The next setting is Player Shadow. The default is set to 4px, but as the default Zoom Overlay – the lightbox background – is set to dark grey, the shadow won't be immediately discernible. However, the Opacity and the colour of the Zoom Overlay may be set individually, after which the subtle shadow comes into its own light.
The final Velvet Base Settings are optional Autoplay and Full Screen Zoom and Force Loading. The latter will force load the videos so that they may be previewed at responsive sizes.
The Velvet Video stack itself has two or three more settings. First, you should add a thumbnail image for your video. Next, you need to add either the YouTube, or the Vimeo ID.
Prevent Video Zoom doesn't yet have a text tip and I was unable to see a change between active and inactive states.
Play Icon Style offers a choice of six different icon overlays for the thumbnails. I like the fact that the Play Icon Position has a multitude of options and that the Play Icon Offset can be set between 0 and 30px. The Play Icon Size may be set between 0 and 30px too and the Play Icon Colour has options for both static and hovered states.
Also quite unique are the Thumb Overlay [colour] settings which may also be set individually for both static and hovered states.
Pricing Tables is so simple to set up that if you have your content prepared, your first comparison table will be complete within mere minutes – you just need to work your way down the stack settings! The example below took less than five minutes to set up.
When you drop a Pricing Tables stack onto your RapidWeaver page, all you'll see is a box with a logo inside it.
Oops! 'What did I do wrong?' Was my first thought.
However, when I switched to preview mode, I discovered the same Pricing Tables on my page, as demonstrated on the RWtuts website.
Huh? I didn't do anything yet!
So let's take a look at the settings:
Columns Styling. Pricing Tables is set up to display the 'standard' three options that we see online on a daily basis. No amount of juggling will allow you to add just a single price table, or compare four options – it's "take it, or leave it". So after choosing a Font from a choice of ten options (the dreaded Comic Sans is also included), your next option is the column width, set in percentage of the container stack.
The next setting is Space (in px) and governs the spacing between the columns.Next up – Border width, BG Colour and Border Colour.
Header Styling. Set the Header Colour for Headers 1 through 3, the Font Colour and the Font Size.
Price Styling. Price Colour (actually the background colour which also formats the background behind the submit button) and Font Size.
Button Styling. Button Colour, Font Colour and Font Size.
Once you have your formatting set up, you can add your content. Moving down the settings panel you will find containers for the contents of each panel.
These include Title, Price, Descriptions 1 through 6, Button Link and Button Text.
Once you've added this content, you can go proceed to publish – your setup is complete already.
Pricing Tables is a minimalistic stack that takes the work out of building a flat comparison table. There are no bells, or whistles, with the exception of the fact that the column that your visitor hovers over grows a subtle shadow. The setup is simple and the results will suffice in many situations.
It's Easter Monday and Tommy has just placed an Easter Egg on his Stacks Page. Tivoli. And it's free.
Actually, this is a stack that I wanted a long time ago after seeing the effect on a web page. However, the developers that I spoke with didn't seem to be interested in the idea so, not wanting to bother myself with the necessary CSS, I abandoned the idea.
The page in question was a page consisting mainly of text and it very slowly – almost imperceptibly – changed colour as you were reading.
And this is exactly what Tivoli will do for your RapidWeaver text blocks.
Drop the stack onto a stacks page, drop in some text content and set the colours that you'd like.
When you visit Tommy's demo page, you'll find that the examples he provides are a bit stark. He has to emphasise the stack's possibilities.
But think "Pastel Colours" and the possibilities of Tivoli become more obvious.
A text bock with a pale yellow background imperceptibly morphs into pastel blue, whilst the text slowly changes from blue to teal. Your visitor's eyes will automatically be drawn to this block of text – your CTA can no longer be ignored, that button just yearns to be clicked!
Tivoli is a work in progress and Tommy promises future updates.
If you want more than one block to change colours, you'll need to set a unique ID for each stack.
Ani Flow has the cryptic settings Lunch Break and Running. To be perfectly honest, I've been unable to discern what the setting does.
Timing and Delay set the length of time that the colours are displayed and the transition time – the settings are in seconds. The higher the settings, the more subtle the effect, but be my guest, set the minimum of 1 in each case and have your CTA flash like a neon sign.
You can set the base colours of the stack and its text content and then you can set four colours for each to transition through.
Further, there is a setting for an Inner Shadow. If your text block is rather small – like the example above – I would advise against using a shadow; with any of the available settings (small, medium, large) it's rather imposing.
And last, but not least – Tommy's usual Custom CSS settings.
I like Easter Eggs – even when they are not made of chocolate!
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16