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

Showcase for RapidWeaver

A few years ago, I decided to add a portfolio slideshow to my homepage – a MacBook Pro with sliding images. I literally spent hours layering Image stacks and sliders until I had the result that I wanted. The main problem, of course, was that I wanted the portfolio to be responsive. A couple of months later, I got the feeling that a developer had taken a look at my page because suddenly a stack became available that was almost identical to my slideshow. The stack was quickly followed by an iMac version.

At the end of December RWExtras released Showcase Ultra, a stack that takes the idea to the next level and adds a versatile slideshow to a choice of (if I counted correctly) fifty-two (52) different background images ranging from popular devices to office background settings. And I'm not just referring to the versatility of the backdrop images – there is a choice of nine different transition effects. The aforementioned stacks (which shall remain nameless) offered just a simple fade transition.

So how does it work? Drag Showcase Ultra onto a Stacks page, add child stacks with your local, or warehoused images, choose a backdrop and publish!
If you're not happy with the provided backdrops, you can add your own (warehoused) frame. You then get optional settings for the size and positioning.

Showcase Ultra – RWExtras

Stack settings
Hide Images In Edit Mode
Transition Effect – Nine ttransitions
Slide Order – Normal, Random, Reverse
Interval – set in ms
Transition Speed – in ms
Tile Count – Number of tiles, if 'tiles' has been set as transition
Frame – Choose from 52 backdrops
Image Scale – Scale your images to fit the backdrop
Maximun Width – Width of the backdrop
Float Alignment – Left, Centre, Right

Showcase Ultra is a cool stack that takes the graft (hard work – for those of you across the pond) out of presenting a responsive portfolio within a homogenous background.

Comments

Simple Tabs in RapidWeaver

Off the top of my head and without taxing my Stacks library, I can think of half a dozen tabbed stacks for RapidWeaver. Some morph into accordions on mobile, some don't. Did we need another tabbed Stack? Of course we did! If only for the sake of diversity. Simple Tabs from One Little Designer.

Simple Tabs – 1LDSimple Tabs, as the name implies, is a stack that will simply add tabbed (the tabs may also be buttons) content to your page. The tabs change to buttons on mobile, but can be neatly arranged into columns.
The setup is – simple – and the results are attractive.

When you drag Simple Tabs onto a Stacks page, you get a container with two child stacks into which you can drop your content. Each of the child stacks has a tab at its upper edge that contains an Ion Icon and a text area for your title.
All you need to do, is add some content, change the icons and decide on a colour scheme. As usual with 1LD, you get a wide choice of both icons and of fonts. The tab sizes can be easily adjusted to suit and there are a couple of neat features that I don't recall seeing elsewhere – the already mentioned 'stacked' buttons, for instance…

All in all, I find Simple Tabs to be quite impressive and I'm sure that it will find a home I'm many Weavers' libraries.

Simple Tabs – 1LD
Stack settings
Floating Pill – A setting that allows the active button to slide across the tabbed panel when the next tab is clicked
Connect Tabs – When active, the tabs are connected to the content window. Otherwise the tabs appear as buttons
Max Width – The max width of the tabbed and the content area
Active Tab – The tab that is automatically displayed when the page is loaded
Font Family – The standard 1LD choice of 13 web fonts, plus Custom

Tabs
Vertical Position – Top/Bottom. When 'Bottom' is set, the tabs appear as buttons
Alignment – Left, Centre, Right
Text Size
Icon Size
Spacing – Vertical, Horizontal
Padding – Vertical, Horizontal
Radius – The bottom radius is deactivated when 'Connect Tabs' is active
Text Colour
Background – Off, Colour, Gradient, Image
Border – The tab/button border
Active Text Colour
Active Background – as above
Border – as above

Tabs > Responsive
Breakpoints – Tablet, Mobile
Columns – Tablet, Mobile
Hide Text
Hide Icons

Content
Padding – Vertical, Horizontal
Radius
Text Colour
Background – As above
Border

Experimental – Match content bg to tab colour

Simple Tabs Tab Child
Icon Font – Standard 1LD choice of 3 – Oops! – 4 Icon Sets – FontAwesome5 is included!
Custom Colours

The next time that I need tabbed content, I shall seriously consider using Simple Tabs. I especially like the fact that the tab borders allow you add a neat contrasting border at the top (or bottom) of the button; I also like the slide effect when a new tab is clicked.
Check out the 1LD product page to find out more.

Comments

Quick 'n' Dirty Sections in RapidWeaver

I have a softspot for stacks that save me time and save me from having to think. I'm a graphic Designer (at least, that's what my diploma says) but sometimes it's nice to be able to just drag a stack onto a page, drop in an image and some text and then move on to the next section. Quick 'n' Dirty! And that's exactly what the new Section stack from Weavium allows me to do…

Section is a free stack that allows me to switch off for a while. Full width sections with header and caption text and a bare minimum of design possibilities. All I need to do is decide on a colour for the background and contrasting colours for the Header and caption. Once I've done so, I can drop in my content and move on to the next section.

Section Weavium

I recently built a site that contained just such sections containing price information for various services. Had I had Weavium's Section, I'd have had the page finished in half the time (and could still have charged the same price!).

Stack settings

General
Padding T,B,L,R. Default 100,100, 20, 20px

Menu
Background [colour] None, Solid, Gradient, Image.

Section Title
Colour
Size – Desk, Mobile, Tablet
Space Below – Desk, Mobile, Tablet
Max Width
Font – 15 popular web fonts plus custom
Font Weight – Bold (default), Normal

Section Description
Same options as above.

Section is a soft release, so you can expect a few changes to appear in the very near future e.g. customisation of the color and sizing of header tags, text, and links within the content.
This is a neat little stack, made all the more interesting by the fact that is's free.

Comments

Designing Every Element in RapidWeaver

Marten Claridge is a gifted designer and if you watched his contribution to this year's Weavers' Space Conference 'Design Every Element', or if you've downloaded any of his creative stacks, you'll know exactly what I'm taliking about.

During the WSC, Marten built a very attractive page using only Big White Duck stacks. There were comments during the conference that Marten's feature was slow, but hey! Designing Every Element is a slow process.
At the end of the presentation, however, a chorus of voices shouted "I want to be able to do the same."

Well, if you digested what Marten explained, you can.
If you found it too complicated, Marten promised at the end of his talk to deliver the project module he created online.
He's kept his promise, but instead of delivering a single module, he's submitted 154 (one hundred and fifty-four) of them!
Sadly, this means that you'll never again have to design a page section on your own — ever!

Maximal Design Style Modules. Subtitled Duck Soup – using Marten's own words "the design modules solve a common problem for Weavers struggling to stay relevant in a highly competitive market: how to quickly and easily add real professional style to a project to make it stand out from the crowd."

Duck Soup is a bundle containing five packs for Foundation users: Chico, Harpo, Groucho, Gummo and Zeppo. Each pack is duplicated based on the universal Blank Theme (included with the project) for those that don't use Foundation.
Each pack is a project file containing five stacks pages of uniquely designed modules. Each project page contains Multiple modules. And each of the modules contains perfectly paired combinations of Google Fonts for the headers and content.

Maximal Design Modules – Duck Soup


To use one of the modules in your project, simply copy it from the Duck Soup project, paste it into your own page and replace the text and images with your individual content.
Quick, simple, awe-inspiring results are guaranteed!

Of course, the modules don't necessarily need to be utilised 'as is', but can be used as a schematic to jumpstart your new project. Adjust a few settings here and there and with just a few minutes work, you have your very own module.

The 'Universal' modules should work with virtually any theme, but given the large number of old and new themes out there, this obviously can't be guaranteed. Depending on the responsive theme of your choice, the settings may require a little refinement.

Marten has obviously spent many hours studying his collection of BWD stacks and he puts them to use expertly. Some of the effects he achieves are quite amazing and a lot of thought has gone into designg each and every element.

Stacks used

Big White Duck Stacks:
Sections Pro
Sections Box
Paragraph Pro
Header Pro
Button Plus 2
Chroma
Blueprint
Bevel

It goes without saying that you will also need RW 6+ and Stacks 3+

Each of the five project packs is available as a separate purchase, or you can buy the complete bundle collection with a 25% reduction – that's less than 50¢ per module.

Trivia: How did the modules get their names? Duck Soup was a film made in 1933. Chico, Harpo, Groucho, and Zeppo – The Marx Brothers – were the stars of this film while Milton 'Gummo' Marx was the four brothers' manager. What better name then, for a series of projects featuring BWD stacks exclusively, than Duck Soup?

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

  • 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?

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