web counter
RapidWeaver Stacks, PlugIns, Themes ...
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Feature Section For RapidWeaver

How do I introduce a stack that looks so simple, but is as feature rich as 1LD's Feature Section? All Feature Section does is to present a card, or a selection of cards that feature your business, or your products. But Feature Section has so many setup possibilities that I can almost guarantee that it will never look the same on any two websites.
Feature Section - 1LD

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.

Feature Section - 1LD
Stack settings

General Settings
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

Cards
Background – None, Colour, Gradient, Image
Padding
Radius
Borders – Off, On
Border Width
Border Colour
Shadow – Off, On

Card Icons
Alignment – Left, Centre, Right
Icon Size
Icon Colour
Hide Inner Icon
Background Size
Background Colour
Padding
Radius

Card Content
Text Alignment – Left, Centre, Right
Padding
Title Font – 13 standard fonts plus Custom
Title Size, Title Spacing, Title Colour
Content formatting as above

Hover Effects
Transition Speed
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 Shadow
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.

Comments

Flexible Grid Stack For RapidWeaver

"I'll be back…", he said. And here he is as Gridinator! You may already have heard about Weavium – they are a new stacks developer with currently four stacks in their lineup. They're so new (a couple of months), that they aren't even listed on RapidWeaverCentral yet (shame on you Marten…) and little is known about them/her/him.
Weavium announced two stacks yesterday 'Image Card' and 'Gridinator'. More about Image Card at a later date.

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.

Weavium Gridinator

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.

Weavium Gridnator
Stack settings

Trouble Shooting
Show Edit Helpers – Displays a frame around each column in both edit and preview mode and displays the breakpoints.
General
No Outer Gutters – Deactivated by default
Max Width
Tablet Break
Mobile Break
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…

Comments

Expanding Content in RapidWeaver

There are numerous ways of adding extensive content to RapidWeaver without disrupting a page's design. One Little Designer recently added Expanse to their lineup; a clean and efficient solution to the age-old problem.

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.

1LD Expanse
Stack settings

The first settings are Animation [type] and Speed. There is a choice of eleven different animations for the lightbox display.
Card Layout
Card Type – As mentioned above
Card Width, Card Height, Margin T/B
Card Styles
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)
Border Radius
Shadow
Title Font – (default: Inherit)
Text Font – (default: Inherit)
Truncate Type – Ellipses, Gradient Fade, Clip

Expanded Layout (Lightbox settings)
Content Width
Margins
Padding T/B
Padding L/R
Z-Index

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.

Comments

Image Mapper for RapidWeaver

In June of this year, I reviewed HotSpots Pro from S4S. A few days ago Will re-released an updated version of the one-time Tsooj Media stack ImageMapper – also as a Stacks4Stacks product. Hot Spots; Image Maps — potentially the same thing, so does it make sense to have two stacks that, essentially, do the same thing housed within the same stables?

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.

S4S Hotspots
ImageMapper allows you to overlay an image with rectangles, triangles, hexagons and circles, but more importantly – with a mapped area…

S4S ImageMapper


… And I was astonished to find that it's easier to add a polygon form than it is to add a simple circle, or square.
So how does it work? First, obviously, you drag ImageMapper into a Stacks page and add an image to the image well. The image may be dragged and dropped, or warehoused.
Adding a polygonal area to your image is simple – Activate Show Coordinates Inspector in the stack settings panel and switch to preview. With the crosshairs that are now available, click around the area that you'd like to highlight, clicking on the starting point a second time to close the polygon, just like Photoshop etc.
Below the image, you will now see a list of your coordinates. Copy the coordinates, paste them into the ImageMapper Area child stack, deactivate Show Coordinates in the main stack and switch back to preview.
Now when you hover over the enclosed area, it will have a highlighted overlay with a tooltip. You can add a Link to the ImageMapper Area stack, which you can set to open a URL, open a lightbox, or to a link somewhere else on the page – product details, for instance.
In the screenshot above, I have superimposed four different image maps. They appear one at a time, of course.

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.

Stack settings

ImageMapper
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
Fill Opacity
Stroke Opacity
Stroke Width
Fade Speed

ImageMapper Area
Area Title – Title for the tooltip
Area Link
Area Coordinates
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.

Comments

Stacked Images in RapidWeaver

I'm not in my office today. In fact, I'm not even in the country. Nevertheless, I just took a quick look at Tommy Hansen's iStack (DeFliGra, for those not familiar with the name) and while my design results are not terribly inspiring, iStack is.

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.

DeFliGra iSTack

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.

Stack settings

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

DeFliGra iStack

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.

Comments

Show more posts

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

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

My Image

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

Contact Information

rjh logo

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—17

Powered by rjh-design

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

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required