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!
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.
Back To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.
Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Offset – Page scroll before active
Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border – Normal/Hover
The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.
Without a doubt, a useful stack to have in your collection!
A FAQs page immediately comes to mind, but Table Of Contents [TOC] can be used to build a complete page with article navigation.
TOC consists of two stacks and is simple to set up. Table Of Contents, the main stack, contains the complete setup for all TOC Article Child stacks, with the exception of the content type. The Content Type is individual for each child stack and can be set to Text (default) HTML, Markdown, or Stacks.
Once you've dragged the TOC 'master' stack onto your page, you can add title to the stack, then either drag in new content stacks from the Stacks' library, or simply click the + button to add a child stack. The TOC Content stack has a header area and a content area. When entering a header, it is automatically added to the contentlist.
The Content stacks may be dragged up or down inside the master stack, if you decide to change the order of your articles – the content list is then corrected accordingly.
It is possible to have more than one TOC stacks on your page.
When one of the Articles from the content list is clicked, TOC automatically jumps to that article and displays a progress bar at the top of the page. As you move down, reading the article, the progress bar indicates how much of the article has been read.
The clever thing about the progress indicator is – when you click the plus button at the top of the article, it opens the content list which now shows you which articles you have read and which articles you have yet to complete.
Once more, you will find an endless list of settings for TOC.
Suffice it to say that all aspects of the stack may be set to suit your preferences.
Background Colour, Icon size and colours, Header and Text Size and Colours, Line Height, and the list of Fonts that has become usual for 1LD stacks.
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