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.
in its initial state, Icon Menu displays a button on your page. The button can be positioned inline or fixed, with or without an icon. When clicked, it opens up a popup menu or an overlay menu which displays rows of labeled icons. The icons can be linked to other pages, or sections within your page. It can (as yet?) not open any of the lightboxes that I tried.
Icon Menu, as we have come to expect from Weavium, is completely customisable. When initially dropped into a Stacks page, it displays a large, black pill button and the popup window is also black.
Due to the length of the settings panel, here is a summary of the settings available:
Menu Type – Popup, Full Page
Menu Toggle – Show Toggle Icon, Show Toggle Text
Postion – Inline, Fixed
Text Size, Padding, Margin Radius
Toggle Font – 16 web fonts plus Google Font
Icon Size, Icon Spacing, Icon Font (Ionic, Material, Linear Font Awesome, Custom), Icon Code
Z-Index, Max Width (D, T, M), Padding, Radius, Margin, Title Size, Title Spacing, Title Case (Normal, Uppercase)
Close Icon – px
Menu Font – As above
Overflow – Toggle scrollbars on/off
Menu > Items
# Columns – Desk, Tablet, Mobile
Gutters, Padding, Radius, Label Size, Icon Size, Icon BG Size, Icon Radius, Icon Spacing
Menu > Colours
Colour settings for all elements
Icon Menu is well executed and with so many Weavers searching for new menu options, I'm sure it will find wide acceptance.
TippyTitle will turn any title tags into styled tooltips. Red, green, blue; above, or below your tagged text; with, or without a pointer and just about any size that you want. You even get a choice of fifteen different cursors and the tooltip can appear either on hover, or when the linked item is clicked.
TippyPlus allows you to have an info panel open when your linked item is hovered or clicked. The Info Panel can contain just about anything you wish and, depending on the size of your content, can even cover the screen.
And that's not all. The two stacks can be combined and configured so that on hover, you see the tooltip and on click, your info panel will open.
So how does it all work?
Well, TippyTitle is extremely simple to set up. Select the word that you wish to add a tooltip to, click the Add Link button and, in the URL panel – next to Text – add your tooltip text.
You can now take a look at the stack setup panel and configure your tooltip to look exactly as you want it.
TippyPlus is very slightly more complicated to set up. By default it is configured to open your info panel when the stack content is hovered – which is great if you want to add a tooltip to a button, an image or a text snippet – in which case the stack displays two containers – one for your linked content and one for your info stacks.
As simple as the stacks are, there is a whole online manual describing the various setup possibilities. The manual is well worth taking a look at as the Tippy stacks are a lot more versatile than the stack settings would lead you to believe.
The first image above shows TippyTitle in action. The second image displays a TippyPlus info panel when the same link is clicked.
Tooltip for: – Every element with a title tag within this stack, This stack, An element with a custom selector on this page
Keep elements on one line – deactivated by default
Show – On hover, On click
Tooltip size – Small, Regular, Big
Align text – Left, Centre, Right, Justified
Cursor style – 15 options
Flip – Display tooltip on the opposite side when no room is available to display
Distance – px
Offset – x, y axes
Animation – 5 options
Delay – Show, Hide, ms
Duration – Show, Hide, ms
Inertia – Modifies the transition
Show Arrow – Deactivated by default
Width – Tooltip Width – % or px
Custom Settings – Deactivated by default – Black tooltip, White text
When Custom Settings is activated the tooltip may be customised
Custom font size – deactivated by default
Font Family – Theme, Web Safe, Custom
Custom text colour
Use text shadow
The TippyPlus setup panel is almost identical, but includes custom colours for Text, Link, Link underline.
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