web counter
RWExtras – Gutenberg & Layerz
My Image

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

Stay up to date with current RapidWeaver developments

RWExtras – Gutenberg & Layerz

Johannes Gensfleisch, better known as Gutenberg, was the German blacksmith/goldsmith who introduced movable type to European printing and is the father of the modern printing industry. Like the scribes before him, he realised that large texts require a smaller printed area if displayed in columns. Type set in columns is also easier to read. What better name, then, for a stack that automatically divides your text into columns?

RWExtras' Gutenberg stack has been completely reworked for Stacks 3. It is as simple to use, as it is elegant, but it also has a wealth of features to render it completely responsive.

Simplicity: Drag Gutenberg onto a page and paste your text into it. Hit command + R to render/preview the page and you will find that your text has elegantly been divided up into four columns of equal height, with dividers between each column.

Could that be any simpler? I don't think so. You'll also find that if you reduce the width of your page, the text automatically reflows to fit the new width. The text content reflows to match the new column heights. Whilst reducing the screen width further the number of columns is reduced until, when finally reaching the mobile width, only one column remains.

Responsiveness: The settings panel contains the magic behind the transition. You will find the panel's settings reproduced four times. Once each for Small Screens, Mobile Screens, Laptop Screens and Desktop Screens, allowing Gutenberg's display to alter for each.

The very first setting is Content Type and can be set to HTML, Markdown, or Styled Text (default). Gutenberg renders each content type equally well.

The display settings that follow allow you to define the Column Count, the Column Gap (otherwise known as 'Gutter') and the Border (otherwise known as 'Divider' and not to be confused with the outer border) Weight and Colour. As already stated, these settings are repeated for each possible device. I found that there is nothing to be said against the default settings, however, if you don't like the dividers, you can set the Border Weight to 0 and reduce the Column Gap slightly.
No further settings are available. The emphasis is placed on simplicity.

Master Gutenberg utilised a number of tricks for one of his first books (The Gutenberg Bible). He implemented justified columns by using Ligatures, variable width Glyphs and Hanging Punctuation. Sadly, on the interweb, these are all things of the future. Whilst justified text is possible in RW, it usually doesn't look very good, so Gutenberg hasn't added it unless you include HTML tags.

The Gutenberg stack presents your text elegantly and highly readable on any device it is displayed on. 10+ forRWExtras!


If you wish to layer multiple stacks, one atop of the other, I don't know an easier way than Layerz.
With the added advantage of Stacks 3, you can even fine tune your layered stacks in RW 7's preview mode.

The simplest application of layered stacks, is to position an image caption over an image, but Layerz allows to to place any stack you wish over any other stack. Heck, you can even place text over text if that is your fancy!

Layerz is a lot easier to use than some layering stacks I've encountered. I remember spending hours for one review, positioning my (two) stacks exactly as I wanted them. Not so with Layerz.

Drop Layerz onto a Stacks page and you'll be presented with a container for your base stack. You can drop any stack you like into this container – it will most likely be an image stack?

Now, lets say you wish to superimpose a caption text. Nothing easier than that! Click the + button below your main content and add a text container of your choice. In the example above, I added Headline Pro from BWD.
Next, you'll want to position the stack exactly where you want it. But let's first take a look at Layerz' main settings panel. There's not a lot that you will need to set here, but you perhaps you want Layerz to be placed inside your Theme Banner or in withinan Extra Content area? If so, you'll need to take a look at the Stack Placement settings.

Now click the Layer stack inside Layerz; there are many more settings available here. I didn't want my rather large headline to obscure the image on smaller screens, so I left the Breakpoint set to 768px. On screens of this size and smaller. my superimposed headline now slides down below the image.

If you wish, you can also rotate your layered stack by setting a value for its Rotation. The z-Index may also be important, depending on which other stacks are in Layerz' vicinity. You can also add a unique ID in case you need to target it with specific CSS formatting.

Now we get to the actual positioning of your superimposed layer. In Horizontal, you can set Left, Right, or Centre. Margin allows you to move the stack away from the edge of the main stack.
The Vertical positioning of your layer is set to Bottom by default, but you may also set Top, Middle, or Transformed Middle. I found that 'transformed' worked best for entering my caption.

By altering the Bottom settings, you can now move the layer up or down – I moved my caption up by 5%. The superimposed layer's width is set to Proportional by default, meaning that on smaller screens it will will retain its proportions in relation to the main stack. Auto, or Fixed may also be set. My caption is set to 70%. The layer's height settings are similar to the width settings, so that you have complete control over the layer size.
If your layer doesn't stand out against the background, you can choose Fill Layer to add a background. In my example, I set 40% (opacity) white. And finally, we have settings for Corner Radius, Layer padding, Text and Link Colours, Font size and Line height.

Want to add more layers? Just click the + button in the main stack and experiment to your heart's content.

As I said, Layerz is really simple to set up and is one of those cool tools for challenging layouts.

blog comments powered by Disqus
Please note that the forum is operated by DISQUS.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.

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?
Nice to meet you, [1-1]. Could you tell me your mail address?
[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.

Thanks for your support, [1-1]. Is there anything else I can do for you?

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

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


I’m sorry to hear that, [1-1]. How may I help you then today?

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

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.



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

AdblockDetector for RapidWeaver
Advertisements on some websites are extremely annoying, they can envelope occasional pages like a ...
Portal - Online Partials for RapidWeaver
Your website has standard Headers and Footers and sometimes contains elements within a page that ...
Soundboard for RapidWeaver
If Weavers wish to add a series of audio clips to their pages, they could obviously use a ...
  • 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.


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

Subscribe to the Ninja Newsletter

You've reached the bottom of the page, thanks for reading.

If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.

Thanks for your subscription

We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.