Headliner, Weavium's latest stack, is a news slider. It displays a headline and an image, then slides to present the next headline. When the headline is clicked, the news content opens to display in full-page view with controls to navigate to the next article.
By default Headliner is set to a max width of 600px, meaning that it will scale to fit any container up to this width. But if you need an eye-catching news slider, it also looks good at full-page width and then transforms to look just as good 9or even better) on mobile.
The Item Child will accept any sort of stack that you care to throw at it. The items are configured from the main settings panel, but each can be completely customised via the child settings.
Rotate Automatically (Autoplay)
Rotation Speed – Default 4000ms
Rotat Direction – Horizontal, Vertical
Slider Mobile – Breakpoint
Article Mobile – Breakpoint for child stacks
Padding – Vertical, Horizontal
Headline Shadow – x, y, Blur, Spread
Headline Size – Desk, Mobile
Toggle [Font] Size
Toggle Padding – Vertical, Horizontal
Headlines > Full Page View
Header Height – Minimum px
Content Width – Minimum px
Content Padding – Vertical, Horizontal
Close Icon Size
Headline Size – Desk, Mobile
Image Size – Desk, Mobile
Colours & Fonts
Extensive settings for complete customisation analog to all Weavium stacks.
Item Stack – As already mentioned, each child stack can be customised to override the main stack's settings.
Headliner is another versatile stack from Weavium that I can envisage being used for products and portfolios, FAQs and, of course, news articles. It is one of those stacks that is sure to grab your visitor's attention and ensure that your articles are read.
EDIT: Headliner has been updated to include adjustment of the spacing between the image and the headline, plus an option to set a background image.
Article, when dropped into a Stacks page, displays a black rectangle with a black title, a grey icon and grey text. And whilst black may be the new white, thankfully everything about Article can be fully customised.
Article displays an image, a summary text and, if you wish, author and publishing date. When previewed, you can click an article, it opens up full page to display its contents – which may be any stack combination you please. The author and publishing date may also be replaced with any text you see fit. A feature that I really like is the Child Stack which adds new articles to form a list separated by thin dividing lines.
Once again, 1LDs settings are so extensive that I'll only be showing you a summary of the stack's settings.
Article in its initial state.
Two opened articles
Collapse Content in Edit Mode – Very useful
Truncate Description Text
Mobile [Break] Point
An extensive list of formatting options for the Initial description
Article > Opened
An extensive list of formatting options for the article
Colour options for each of Article's elements.
Article is yet another versatile 1LD stack in contemporary design that many Weavers will find useful.
CutOut is a stack that allows your text to gracefully flow around your image instead of the standard rectangular float that we have become used to. Check out the screenshot below:
The left half of the image displays a regular floating image. The right half of the image displays a floating image when using CutOut. Notice a difference?
CutOut makes use of the new 'shape-outside' CSS definition which is supported by all newer browsers (If you wish to know exactly which browsers take a look here). Shape Outside allows a text to flow around a pre-defined form. The form can be circular or polygonal. Polygonal shapes are highly experimental, but 0% 0%, 100% 0%, 50% 100% for instance, will create a triangular shape. CutOut degrades to a regular floating image on older browsers.
You can drop any Square (i.e. with equal length sides) image into CutOut and your image will automatically be displayed as a circular image which your text will flow around. If you require a more complicated shape, you'll need to search the web for shapes, or experiment.
How it works. Drag Cutout into a stacks page and you'll be presented with a dummy text. Replace the text with your text and drag your image into the image well in the stack settings panel. It's that simple. Of course, CutOut wouldn't be an S4S stack, if it didn't support warehoused images, but you'll also notice that it also has a setting for WebYep CMS images [Teaser]. WebYep2 is nearing release and CutOut already supports the new CMS system (as will a number of other S4S stacks).
Image Source – Drag & Drop, Warehoused, WebYep CMS
CutOut Shape – Circle (default), Elipse, Inset, Polygon
Image Float – Left, Right
Apply Border Radius – Default 50%
Spacing – Space between image and content below breakpoint
Image Width – px
Image Margin – Top, Bottom, Left, Right
Image Width – Below breakpoint
Content Type – HTML, Markdown, Text (default), WebYep Short and Long
Content Padding – Top, Right, Bottom, Left
Packing tons of information into a webpage has always presented a problem. How do you pack reams of text and/or images into a page, yet retain an attractive design? Well, maybe Weavium can help you…
View More is a stack that presents your visitors with a compact teaser and expands when clicked. View More is as highly customisable as we have come to expect in the short time that Weavium stacks have been available and can be configured either to subtly match any other elements on your page. or to jump out at your visitor, begging to be clicked.
In its base form, View More displays a rectangular box (the colour settings are entirely up to you) which, when opened can contain the Encyclopaedia Britannica, if you so wish.
… Well, that's entirely up to you!
Max Width – px
[Corner] Radius – px
Breakpoints – Tablet, Mobile
Header – Extensive settings for the header formatting, including a choice of sixteen web fonts + Custom Google Font and four different icon sets – Font Awesome, Iconic, Linear Icons, Material Icons + Custom
Content Font – as above
Button Text – px
Button Spacing – Spacing between buttons
More Button Text – View More, Close
Action Button Text – Proceed
Section Colours – Extensive colour settings for every View More setting, including diagonal gradients and background images.
Action Button – Hide/Display action button
Displays either Link or text box for script.
Let's just hope that 'Linear Icons' lives longer than other icon sets have in the past, so that we don't have to reconfigure our pages next year.
Mega Menu can contain just about anything you want it to. If you choose the right stack, it will display your main page navigation or, as 1LD's demo shows, Mega Menu can even contain Google Maps.
The fact that it may either be fixed to float at the top or bottom of your page, or displayed inline makes it especially interesting.
The Mega Menu stack can display as many dropdown menus as you wish and the menus can display as many columns as you can fit onto your page – it's all a matter of your column width.
Mega Menu is, of course, fully responsive and on mobile devices it morphs into a practical dropdown that only displays the submenus when they are clicked [tapped].
As with all recent 1LD stacks, you have a wide choice of fonts and icons and, as usual, the stack is highly configurable; once again, with so many options that I shan't be listing them all individually.
Position – Fixed, Inline
Orientation – Top, Bottom
Z-index – Someone went wild here and entered a number that begins with nine sextillion and continues with 21 nines!
Max Width – px
Margin – Vertical, Horizontal
Breakpoint – Point at which the menu collapses as mentioned above
Main Menu – Settings for Font and Icon sizes, Spacing, Padding and Font
Mega Dropdown – Content Alignment, Min Height, Column Padding, Item Padding, Link Size, Title Size, and lots more…
Header – Logo & Title, Toggle Size
Colours – Colour Settings for every aspect of the stack
Mega Dropdown Menu (Child Stack)
Column Size – Equal, Auto
Icon – Google Material Icons, Fontawesome, Ion Icons
Mega Menu Column (Child Stack)
Column Max Width – px
Custom Alignment – [Content] Left Centre, Right
Custom Colours – Colour Override for – Links, Text, Titles, Border, Background
NOTE: Mega Menu uses content overflow. In case you haven't set stacks to overflow before – When you set Mega Menu to 'Inline' your content will only become visible when there is content below the menu – i.e. something for it to overflow!
You can place as many Mega Menu stacks on your page as you wish, without having to bother about stack IDs.
Oh, and the pessimistic Z-index setting of nine sextillion, nine quintillion, nine quadrillion etc. etc. is totally unnecessary and will be ignored by all browsers* – nine will suffice in 99% of the cases. If your page contains that many layers it needs to be seriously examined!
Mega Menu is a great alternative to your default menu and well worth taking a look at.
*The maximum observed Z-index setting is 2147483647 for most modern browsers, and 16777271 for Safari 3 and below. Older Firefox browsers will not display elements with a higher Z-index than the max at all !
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
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?
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.
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