Expandable Grid allows you to build a grid with as many columns as you feel is practical on your page, with each row set to a height of your desire. Each of the grid sections can contain icons or images alongside a title. When the section is clicked, it expands to the full width of your grid to display whatever you dropped inside it. The rows below the expanded section slide down and the inactive sections gracefully fade with a white overlay
As we have come to expect from Weavium, the stack is highly customisable and I fell in love with it immediately.
Colours & Fonts – What did you expect, but all the default Weavium customisability?
Once again, each of the child stacks is fully customisable via its own Stacks' settings panel.
Expandable Grid – a brilliant stack that's effortless to configure and makes it a pushover to design attractive product catalogues, portfolios, FAQs, etc. in confined spaces.
When first inserted into a Stacks page, Panels displays a single panel 1000px wide. The panel contains an icon, a title and a stack container into which you can insert the expanded content. The panel may be configured to have a flat colour, gradient (via the Panels item settings) or an image. The Icon – from a choice of four icon fonts – may be replaced with an image.
By adding item child stacks, the panel is divided into two, three, four etc. panels which either have the max width you've set, or fill the container that they are in. When one of the Panels is hovered it expands, the icon gently bounces and a text e.g. 'Read More' slides up into the panel. When clicked, the panel expands to fill the full width of its container and displays the container stacks.Stack settings
Max Width – px
Max Height – Vertical Mode, Horizontal Mode
Mobile Point – Breakpoint px
Icon BG Size – Initial, Active
Icon Size – Initial, Active
Icon Radius – Initial, Active
Title Size – Initial, Active
Title Spacing – Initial, Active
Help Text Size
Hover Stretch – Desktop, Mobile
Colours & Fonts
Title Font – 18 options plus Custom
Content Font – as above
Icon Colour – Icon, BG
Content – Header, Text, Links
The item stack settings allow you to set the individual Icon or image plus a background image and allows the override of all colour settings.
Weavium's expanding stacks are amongst the best available. Panels is no exception and is a highly flexible way to display additional information within a confined space.
NOTE: Ion Icons have just been upgraded to version 4 with which Panels is not yet compatible. If you wish to use Ion Icons, I recommend you download the cheatsheet for version 2 which is 100% compatible.
Album is a lightbox stack and I'll say right from the start that I'm rather taken with it.
Album displays a stylised stack of photos which. when clicked, open up a grid of images which, when clicked, open to cover the screen. You can then scroll through the images using the navigation buttons. Both the photo stack.and the main lightbox window display a title alongside a description and each large image displays a caption.
As mentioned above, the stack settings panel is a mile long, so I'm not going to go through the settings here. Just take my word for it that you'll be able to set everything just to your liking, beginning with the size of the photo stack which can fill the page or be thumbnail sized – that's entirely up to you.
So how does it work? Drop an album stack onto your page and begin by configuring the initial album display. Then add a child stack for each of the images in your gallery. You can now go about configuring the gallery page, i.e. decide how many columns you wish to have displayed for each device, title overlay colour, page overlay colour, caption overlay colour and gallery font sizes etc.
It will take some time to set up Album exactly as you want it, but I guarantee that the effort will be well worth it. Be sure to take look at the demo project that comes with the stack!
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 !
The idea of letting text flow into newspaper-like columns of equal height isn't a new one, I have three or four stacks in my arsenal that will do just that, some older, some newer. Define the number of columns (with more recent stacks for multiple devices), drop in your text and watch it reflow.
Tabloid is a completely new approach to the idea.
When you drag a Tabloid stack onto your page, you'll see an empty stack with a reminder that you are working with columns, simply drop your preferred text stacks, drop in any other stacks and watch everything reflow into columns of equal height and a predetermined width when you hit preview.
The predetermined width is the key to the stack's responsiveness, if you set a column width of, say 250px, an average-width website can display three columns in desktop view, but a tablet in landscape mode can not. In such a case, Tabloid expands the column width to fit the viewport and will display two columns. This relieves you of the necessity of setting the number of columns for each device.
Column Width – px
Spacing – Gutter Width in px
Dividers – Colour
And that's all there is to the setup.
As simple as the setup is, Tabloid is a very effective stack that effortllessly reflows your content into equal width / equal height columns – any content.
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