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

SVG Stack For RapidWeaver

I recently read a plaidoyer on one of the forums that argued that warehoused images are unnecessary – most RapidWeavers don't take advantage of the function. Well here's proof that the statement just can't be true. The new SVG stack from Doobox is targeted specifically at warehoused SVGs, now giving us a choice of three stacks that can display an SVG.

The name SVG stack is slightly misleading. The stack will also load warehoused jpg, png and gif files and can display an alternate image on hover. The latter function is interesting especially as it allows you to mix formats.

SVG – Doobox


Stack settings
SVG Image – Set Link
Alternate Text – Default 'Missing Image'
On Click – Do Nothing, Link To URL
On Hover – Do nothing, Show Alternate Image
Max Width – Desk, Tablet, Mobile
Position – Left, Centre, Right – Desk, Tablet, Mobile
Breakpoints – Standard, Custom

The fact that SVG has an option to display an alternate image on hover is a neat trick, which many will find useful.

Comments

Bar charts in RapidWeaver

Bar charts are a simple way to display statistical data. The new Bars stack from Weavium is a great way to make those boring bar charts pop and look really interesting.

Bars can display your statistics both vertically and horizontally, the stack is animated so your bars slide into view as the stack is within the viewport and the bars are able to increase in value, or decrease. Bars can be formatted globally, or each bar can have its own custom formatting.
Bars formatting options are almost endless, so there is only a short summary below.

Bars – Weavium
Stack settings
General – Chart Range, Fill Direction, Animation Speed, Sizing
Header – Sizing, Orientation
Bar Items – Global formatting – Sizing, Alignment, Font (15 Otions plus Google font)
Bar Titles – Sizes, Spacing, Alignment, Icon Position, Font
Colours & Backgrounds – Fonts, Bar Background (flat, or gradient) Bars (flat, or gradient), Background (off, flat, gradient, or image)
Show Rule – Size and Colours

Bars Item Stack
Bar Value
Icon Font – Ion Icons, Fontawesome, Material Icons, or Custom
Custom Colours

A lot of thought has gone into creating Bars and the result is a very attractive way of displaying otherwise boring statistics.
If you need to display statistics, grab Bars now!

Comments

AnimateIt – One of the Original Animation Stacks for RapidWeaver

There are numerous animation stacks available for RapidWeaver. AnimateIt from Tsooj Media was one of the first to appear. Originally a couple of different stacks (trigger, stacks container and, if I remember correctly, a separate stack to animate stacks that had been assigned an id.

Since Stacks 3, this kind of 'suite' has become obsolete. Instead we have either stacks Childs, or an option within the settings panel to change a stack's function.
And that is exactly what the S4S AnimateIt update brings you – a single stack with all the options that the previous suite presented, a much cleaner interface and code that has been optimised.

Whilst I was able to view a pre-release version of the new AnimateIt stack, I hadn't realised that, in the meantime, it has been released. So I apologise for the delay:

AnimateIt is a stack that, as the name implies, animates any content placed within it, or can animate any stack with a specific ID. There are six different triggers for an animation – On Pageload, When In View, etc. fourteen different effect types and nine different animation types – which, when combined, result in over 50 (fifty) different animation possibilities.

The animation speed may be set and the animation may also be set to Loop Infinitely.

I've had AnimateIt in my Stacks' library for some years now and it's good to see that it has been updated for Stacks 3.

Comments

RapidWeaver Twerks Again!

If you purchased ShakeIt fron Tsooj Media, now is the time to update! Will Woodgate just released a new version of ShakeIt. The interface is now cleaner and – more importantly – ShakeIt is now pure CSS, so it's 100X faster!

ShakeIt is one of those attention-grabbers that I personally am not fond of. That, however, is my own humble opinion and should not influence you if you need to Shake, Rumble, Vibrate or Pulse any element on your page

ShakeIt does exactly what the name implies — it causes a stack to wobble about and beg for attention. It can shake, or pulse a stack, or a set of stacks (using CSS ids) either constantly, or upon interaction with the mouse, i.e. when hovered. There are ten different animations to choose from.
The animation is endless – so I personally would confine the effect to display only when hovered. But again, that's just personal taste.

If you intend to animate an image stack with ShakeIt, some of the animations will cause the image corners to be cropped when moving. To avoid this, make sure that your image has enough padding.

Stack settings

Shake – Stacks (default), Custom CSS Selector(s)
Shake Trigger – Shake Constantly (default), Shake Constantly, Pause on Hover, Shake on Hover
Shake Effect – Ten options – ranging from subtle (Little) to totally Crazy!

Don't let yourself be influenced by my personal taste. If ShakeIt is the stack that you need, to grab your visitor's attention, go for it!
If you are prone to epileptic seizures, you might prefer to avoid the demo page!

Comments

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

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.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!

As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.

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 to hear 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.

  • Stacks Image 76789
  • Stacks Image 76774
  • Stacks Image 76776
  • Stacks Image 76783
  • Stacks Image 76791
  • Stacks Image 76787

Looking for Inspiration?

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

The Latest & Greatest

Panels for RapidWeaver
Panels is Weavium's latest contribution to the Stacks scene. Full page animated panels that expand, ...
Album for RapidWeaver
Weavium builds stacks that are highly configurable. Album is one of those stacks. The Album settings ...
1LD Mega Menu for RapidWeaver
Over the last twelve months, One Little Designer has produced a number of menu stacks for ...
  • 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?

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.

By clicking 'Submit', you are agreeing to receive emails from Ninja News

Our newsletter is distributed via MailChimp, who is also responsible for maintaining our mailing list. You can read their privacy policy here.

Subscribe to the Ninja Newsletter

* indicates required