Your aim: to present your business, or your products. Feature cards with snippets of information about your company, your employees, or the services you offer. Feature Section is a great way to do just that in a professional manner –
An animated (or not) grid of cards that present your product with an Icon, or an image – an employees portrait, for instance –above each card (or not) and a short, informative text.
Each Feature Card has a container for a headline, plus a container for your text. As you can see in the example on the left, you can also add HTML to the text section – the image in the example was positioned with a link to a warehoused image.
So how does it come together?
When you drop a Feature Section stack onto your page, you'll be presented with a grey card, a centred smiley icon, a Feature Title and a text. In preview mode both the card and the icon already change their colours when hovered.
Format the first card by leaving the Feature Section stack active and altering the background colour, the icon colour and the Icon position. Then change the background and Icon colours for the hovered state.
Once you have your first card formatted, you can drag copy it to duplicate it, or add a fresh card by clicking the + child button; then decide how many columns your grid should have on each viewport. You can then set about adding hover animations to your cards – if you wish.
The settings within the main Feature Section stack are global settings that determine the appearance of all the cards within the grid.
The Feature Card stack simply has settings for the icon, or inset thumbnail image and has settings for a link.
Max Width – Determines the max width of the grid
Card Alignment – Defines how the cards are aligned. Top, Centred, Bottom, Stretch. With 'Stretch' each of the cards in a row has the same height
Desktop Cols; Tablet Cols; Mobile Cols – The number of columns to be displayed below each breakpoint
Gutters – Horizontal, Vertical
Background – None, Colour, Gradient, Image
Borders – Off, On
Shadow – Off, On
Alignment – Left, Centre, Right
Hide Inner Icon
Text Alignment – Left, Centre, Right
Title Font – 13 standard fonts plus Custom
Title Size, Title Spacing, Title Colour
Content formatting as above
Hover Scale – 0—1.5
Rotate (Icon) – -360—360º
Translate – -50—50px (distance the card moves up/down when hovered)
Hover BG Ripple – Card colour change on hover (default)
Ripple Origin – Top Left, Top Right, Centre, Bottom Left, Bottom Right
Ripple Colour – Card colour on hover
Hover Icon Background
Hover Icon Colour
Hover Title – default
Hover Title Colour
Hover Text – default
Hover Text Colour
My personal opinion: Because Feature Section has so many customisable options, it is a great way to present product details, short biographies, or company details. Each card can be linked to another page, or page section and make Feature Section an extremely versatile stack. I like it!
If you need inspiration, open up the demo file that comes with the stacks – it has numerous examples.
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…
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.
iStack allows you to superimpose images, stacks and a caption over a background image. There are, of course, other stacks, or stack combinations that will allow you to do the same, but iStack drastically reduces the amount of work necessary for such a combination. All you need to do is drop your background image into iStack, add the second image and decide whether, or not you require an additional caption and stacks content. The standard stack settings make sure that you already have a perfect composition, but there's also room for creativity.
So, using one of the 62 (sixty-two) stickers that Tommy has thoughtfully provided as a design aid, let's take a closer look:
Drag iStack (I hope Apple won't contest the name) into a Stacks' page and in the stack settings, you'll find an image well for the main image and for the overlay (all images can be warehoused).
Once you've added an images into each of the image wells, you'll need to activate Show Front Image, otherwise iStack functions as a simple caption stack. You can now switch to preview and you'll find Tommy's sticker positioned in the middle of your image and a caption at the bottom right.
Returning to the Settings Panel, you'll also find options to deactivate the caption and to Add a DropZone. You can add any stacks of your choice to the drop zone.
The first options are Layer Images (active by default) and Switch Front/Back
Link And Hover – Add Link, Hover Opacity, Hover Hue, Scale (back img)
Back Image – Show Back Img (active by default) Image Resource, Fill Width, Greyscale
Front Image – (not activated by default), Image Resource, Width Settings, Margin Settings, Adjust Left/Right Margin, Opacity, Hue
Edit / Publish Crop (container) – Crop, Max Height, Adjust Margin
Caption – (activated by default), Note (caption container), Font Size, Line Height, Colour background/text, Shadow settings, Border, Position Settings
DropZone – (not active by default) When activated – settings for size, position and shadow.
Breakpoint – Settings to adjust size and position of Front and Back images, Caption size and position and the DropZone size and position below a breakpoint
As is usual for DeFliGra's stacks, advanced CSS settings are available for each of the containers.
iStack is ideal for superimposing two (or three) images and a caption, or two images and a text and is really simple to use.
Combining iStack with GoGrid (see Tommy's combined offer), a product page for multiple items with superimposed price or special offer is child's play.
The two examples above each have a background and front image, plus caption and stacks content.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Subscribe to Ninja News
or ask a question
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
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?
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—17
Powered by rjh-design
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.