Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Expandable Grid For RapidWeaver

Hide your content, Weavium wants it! Their latest stack, Expandable Grid, is a yet another attractive new take on the age-old accordion – reams of information within a confined space.

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.

Expandable Grid – Weavium

Stack settings
General Columns – Desktop, Tablet, Mobile
Column Height – px, Desktop, Tablet Mobile
Column Gutter – px
Breakpoint – Tablet, Mobile
Max Width – px

Items
Hide All Icons
Hide All Titles
Vertical Align – Top, Centre, Bottom
Horizontal Align – Left, Centre, Right

Radius
Padding – Vertical, Horizontal
Title Size
Title Weight
Icon Size – Background, Icon
Icon Radius
Icon Spacing
Content Padding
Content Width
Inactive Opacity
Hover Move
Hover Grow

Colours & Fonts – What did you expect, but all the default Weavium customisability?

Extendable Grids – Weavium
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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Panels for RapidWeaver

Panels is Weavium's latest contribution to the Stacks scene. Full page animated panels that expand, when clicked, to display whatever you care to drop inside.

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.Panels – WeaviumPanels – WeaviumStack settings
General
Max Width – px
Max Height – Vertical Mode, Horizontal Mode
Radius
Mobile Point – Breakpoint px

Section Panels
Icon BG Size – Initial, Active
Icon Size – Initial, Active
Icon Radius – Initial, Active
Title Size – Initial, Active
Title Spacing – Initial, Active
Title Weight
Content Width
Content Padding
Help Text
Help Text Size
Hover Stretch – Desktop, Mobile

Colours & Fonts
Title Font – 18 options plus Custom
Content Font – as above
Icon Colour – Icon, BG
Title [colour]
Help Text
Content – Header, Text, Links
Overlays

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.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Album for RapidWeaver

Weavium builds stacks that are highly configurable. Album is one of those stacks. The Album settings panel is so long that it took me an hour to go through each setting and even then, I may have missed one or two.

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.

Album – Weavium

Album – Weavium

Album – Weavium

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!

Comments

1LD Mega Menu for RapidWeaver

Over the last twelve months, One Little Designer has produced a number of menu stacks for RapidWeaver. A continuation of the theme is the new Mega Menu which may be displayed inline, or fixed on your page.

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.

Mega Menu – 1LD
Stack settings
General
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
Icon Code

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 !

Comments

Tabloid for RapidWeaver

Someone recently commented that Gary at Doobox is on a roll. Well, just to prove the fact, he released yet another new stack a few days ago. Tabloid – a new take on columnised content.

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.

Tabloid – Doobox
Stack settings
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.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.