Image Card. What does it do? It displays an image with a colour overlay, a text and a link icon.
But it does the above in a unique way.
Supposing you have an image gallery, or a portfolio, or you'd like a navigation grid to other pages…
Drop Image Card into a Stacks page and add an image to it. You can add a colour overlay and a title, or a short text – link is already provided – and you have a cool link box to your new page. It is even animated – the whole card moves up, or down when hovered.
Images scale within Image Card, to fit the longest dimension. But as you are able to set the card's height, you can make adjustments to the image display.
Fill Mode – Percent, Pixel
Alignment – Left. Centre, Right
Image – Drag & Drop
Mobile/Tablet/Desktop Height – px
Margin – Vertical, Horizontal
Padding – Vertical, Horizontal
Overlay Type – Gradient, Colour
Title Font – Choice of 14 Fonts + Custom
Mobile/Tablet/Desktop – Font Size, Line Height
Hover Icon Colour
Shift On Hover
Shift Amount (px)
That's a pretty impressive list of settings for such a simple looking stack and just goes to show how seriously Weavium takes their work.
What's more – Image Card is free!
Gridinator is, as the name implies, 'The Simplest And Most Robust Grid Stack That You've Ever Seen' (taken directly from the developers web page). And it is great stack.
Build a grid with up to 50 (in words – fifty!) columns and fill the columns with whatever you please.
A single column can span multiple grid sections making Gridinator very adjustable. Build just about any page structure that you can imagine.
The page section pictured above was built in just five minutes without having previously read a manual. And that includes the addition of Image Card (left column).
When you drop a Gridnator stack onto your page, you'll see a container for the first column, into which you can drop your stacks. The + button will add a child stack for the next column. The stacks interface is rather interesting – it displays a simplified image that shows how Gridinator will display on a desktop, tablet, and mobile.
Show Edit Helpers – Displays a frame around each column in both edit and preview mode and displays the breakpoints.
No Outer Gutters – Deactivated by default
Columns > Desktop – Number of Columns Per Row
Gutter Width – Left, Right
Column Padding – Horzontal. Vertical
The Column settings are repeated for Tablet and Mobile.
And that's all there is to it.
Weavium has a special introductory offer with 25% off – and the offer includes Image Card. So grab it while its hot. You won't be disappointed.
And about Image Card — I'll be back…
Loaderz is a completely different kettle of fish. It is simple to use, flexible, versatile and comes with 10 different animated loaders.
Flexible? A page loader appears when a page is loading and disappears when it's ready for viewing, right?
Well Loaderz is different. It can, of course, be set up to do exactly what you'd expect it to do, i.e. the above. But what if you've got a video banner on the page that takes an extra second or two to actually play the video? With Loaderz, you can set the length of time that the loading animation should be displayed.
Or let's say that you have a video on your page that's set to display when the page is scrolled down, or a stack that connects with a database and takes some time to load…
… drop Loaderz onto your page, drop your content into it and Loaderz will display an animation until the content has loaded.
Testing – Load Forever (useful for the setup process)
Hide On – Page Load, After Set Time
Position – Fixed, Inline (Wraps Content)
Z-Index – Couldn't count the default number of 0s!
Background – Off, Colour, Gradient, Image
Show Loading Text
Loader Type – 10 animation options – the screenshot above displays 'Android Material' and 'Rotating Circle With Image' You can add your own image, or logo.
Size – Loader Height in px
Max Width – Loader Width in %
Colours – 1,2 and 3
Percentage – Percentage Of Inner Circle
Loaderz is a great option for both page and content loader animations. It is highly configurable and you're likely to see it on one of my next sites.
Expanse is an animated lightbox stack that appears on your page as an info card. What said card looks like is entirely up to you.
If you drag an Expanse stack onto your page, the initial settings display containers for an image, a headline, a subhead and a Stacks container. Both the default width and height are set to 320px. Once you have dragged in an image and added your content, you can check the preview. It will display your image with a plus button which, when clicked, expands the card to fill your page.
Adjusting Expand's initial height will allow more, or less of your content to be displayed below the image – the Header and subheader, for instance, or the first few lines of text.
If we explore further, we find that there are three different card types: Template | Icon Button (default), Custom | Hover & Click and Custom | Button. The two custom cards allow you to create unique layouts for the cards.
Both Custom versions of Expanse have a Stacks container for your content, into which you may add as many stacks as you wish. The difference between the two, is that Custom | Hover & Click displays an overlay with a text – "Click To Open" for instance – when hovered, whilst Custom | Button has a button to open the lightbox.
The first settings are Animation [type] and Speed. There is a choice of eleven different animations for the lightbox display.
Card Type – As mentioned above
Card Width, Card Height, Margin T/B
Header Image – Drag & Drop
Card Colours – Background, Title, Subtitle, Text
Button Colours – Background, Icon, Close Background, Icon
Button Icons – Four different button options
Inherit Link Colours (active by default)
Title Font – (default: Inherit)
Text Font – (default: Inherit)
Truncate Type – Ellipses, Gradient Fade, Clip
Expanded Layout (Lightbox settings)
Expanse is very quickly and very easily set up and can display both your condensed and your expanded content just as you wish. There are a couple of sites that I'd have designed differently, had this stack been available earlier.
The demo page is well worth a look at.
Let's do a quick recap. Hotspots allows you to overlay image areas with live rectangles, or with Fontawesome icons. The rectangles and icons can each be linked to a URL, for instance, or a lightbox.
ImageMapper allows you to overlay an image with rectangles, triangles, hexagons and circles, but more importantly – with a mapped area…
So how do you add something as 'simple' as a circular overlay? You need three coordinates: 1 – the position from the left of the image; 2 – the position from the top; 3 – the radius of the circle – all coordinates are separated by a comma. My tip: In the ImageMapper Area child, choose your shape – Circle, or Rectangle and then adjust the size and position whilst in preview.
For more complicated shapes, such as a triangle, or an octagon, load an image of the shape to begin with; map the shape out with the crosshairs and then copy the coordinates into your final image The base stack provides a square, a triangle, a circle and a hexagon to get you started. The hexagon is already mapped out.
Data Source – Set up your Image maps using either the child stacks, or an HTML image map
Image Source – Dragged and Dropped, or Warehoused
Show Coordinate Inspector – See above
Area Mousover Colouring – Fill Colour, Stroke Colour
Area Title – Title for the tooltip
Custom Area Attributes – add a class to the overlay
So does it make sense to have two similar stacks in the same stables?
Absolutely! ImageMapper is ideal for those more complicated image maps.
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