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.
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!).
Padding T,B,L,R. Default 100,100, 20, 20px
Background [colour] None, Solid, Gradient, Image.
Size – Desk, Mobile, Tablet
Space Below – Desk, Mobile, Tablet
Font – 15 popular web fonts plus custom
Font Weight – Bold (default), Normal
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.
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.
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.
Big White Duck Stacks:
Button Plus 2
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?
Your client runs a chain of Restaurants with branches in every shopping centre in town ('mall', if you live across the pond), plus a couple of select locations. With Locator, site visitors will not only be able to see which branch of the restaurant is closest to his adobe, but also call up directions and view the restaurant in Street View for optical identification.
All your visitor needs to do is enter his ZIP code into the (optional) search field and submit. If your server has SSL certification, geo location can be automated!
A seemingly unlimited number of locations can be added to Locator via Google Earth KML files, XML files, or, if you've previously added locations to WordPress, or similar, via JSON import.
The simplest method is, of course the Google Earth solution. You will, however, need to download the Google Earth app first. The online version doesn't export the .klm data required by Locator.
Open up Google Earth; add a folder for your locations; drop in place pins and save them to your location folder; set a description for each location. Add further details, such as contact information and opening times. Once you've added all of your locations save the whole folder as a KML file and either drag the file into your RapidWeaver project resources, or upload it to your server.
In your Locator stack, you can now link to the .kml file, switch to preview and call up all of the locations you've added. As simple as that!
If you'd prefer to have a more easily editable location list, then an XML file is recommended. You can download examples of all file formats from the product page to see which best suits your purposes.
Google API key – Will has Kindly left his API key in the stacks so that the demo data functions.
You should, however, visit the Google Developer's site and acquire your own key. It's a painless process.
Data File Type – Google Earth KML, JSON, Sample Data, XML
Formatting for the location search
Distance Alert – (set to -1 to deactivate)
Zoom – Base map magnification
Standard Google Maps options (10 settings)
Start Map Open
Default Location Latitude/Longitude
Locator List Settings
List Position, plus colour formatting
Translations for non-English websites.
Programming a store locator would normally be a very expensive undertaking. Locator not only simplifies the task, but makes it affordable.
And if you hurry, the S4S page still has a 50% Black Friday price reduction. That's a helluva-lotta-stack for a small price.
Responsive Timeline isn't the first timeline stack for RapidWeaver, I've reviewed two in the past, but it is the first timeline stack that will allow you to scroll your timeline horizontally. The result: Your Italian assassinations still take up a heck of a lot of space, but there is still room on your page for a lot more content!
And the timeline can be made to look very attractive – there's an example on 1LD's homepage that displays a full screen image with the first date visible. Then, when you scroll vertically, further dates fade in. This is the default appearance for Responsive Timeline – the first date appears on the left of the screen, accompanied by a button at the top of the screen, inviting you to scroll right. When you do so, the next dates are revealed with a fade-up animation. With the timeline set to horizontal, Responsive Timeline automatically reverts to vertical below a defined breakpoint.
… if you have Responsive Timeline set to vertical as you scroll down the page, a single date will appear, then the next and the next, as you scroll further
So about that button. It says Scroll and has an arrow pointing to the right. As horizontal scrolling is not yet the expected behaviour on a website, I clicked the button and nothing happened. Currently nothing will happen and that is the only complaint that I have with Responsive Timeline – it has a scroll button that doesn't.
Use Animations – When deactivated the timeline is static
Orientation – Horizontal (default), Vertical
Item Max Width
Line Thickness – Joining line in px
Content BG [colour]
Content Font – 14 font options
Triangle size – connector in px
Shadow – deactivated by default
Icon Size – Desktop, Mobile
Icon Text Size – Desktop, Mobile
Icon Margin – Desktop, Mobile
Shadow – deactivated by default
Text Size – Desktop, Mobile
The Responsive Timeline Item Child has options to set the Date, the Icon Font and the Icon, plus an option to add an icon image just in case you can't find the weapon of choice for your assassinations…
If you need a timeline on your website, you now have a choice of three. Two of them are the more traditional, vertical timeline and 1LD's interesting space saver – Responsive Timeline – I know which one I would choose for longer publications.
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.
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