Image Sector allows you to create new, shapable background images for RapidWeaver like seldom before. And without the hassle.
SVG Scalable Vector Graphics. Images that can be incredibly tiny, but can scale up (or down) to any size without losing their crisp edges.
For some time now, we have had the possibility of adding SVG images to RapidWeaver and nowadays even MS browsers are able to display said images.
Obviously SVG is ideal for use as section masks or section dividers and 1LD resolves the problem that those little grey cells may have when trying to work out how to implement said masks.
What do we need? Image Sector and some page sections…
The simplest transitions (obviously) are those that divide a page horizontally.
Image Sector's delivers ten different shapes by default, plus the option to add your own custom shape. The latter, of course involves the use of Adobe Illustrator, Affinity Designer, or the included free shape tool. With just a few mouse clicks, you can divide your page just as you wish. The added advantage is that each of the SVG masks that you use can be used as an image frame. Your text floats over a masked image and looks incredible!
Image Sector delivers more than 30 pre-designed presets, plus over 600 icon paths. With the added advantage that you can design your own masks anything is possible!
And – if you're stuck for an SVG and the image that you have in mind is too complicated, you can also use an image (ideally a png) to mask your section. If you use the appropriate colour combination, your content may even run into and over the image and still look good.
And JW's updated Target is new. Having been rewritten from the ground up, it's much simpler to use, it's easier to understand and it offers completely new options.
The old Target stack was sometimes a little difficult to use. The options weren't always 100% understandable and you could sometimes play around for… well, let's say longer than necessary to get your positioning just right. With Target's new options, experimentation is a thing of the past, your main concerns are now limited to Margins and Padding!
As before, Target offers options to pin its content to the top, or to the bottom of the page, or relative to its parent stack etc, but it now comes with an additional container for Background content. The advantage? Well, for example, there are a couple of third party menu stacks that are unable to have a logo positioned within them.
Drop the menu stack into a Target background container, however, and logos become child's play.
But that's just one option. Using the background stack, you get five default options for the positioning, plus an option to customise your position and as before, you can also rotate your content.
If you already purchased Target, no matter if it was last week or at some point in 2012, the update is completely free. If you didn't purchase Target yet, you might want to give it some serious consideration…
The site went live with two new stacks. Pen and Wallpaper.
Pen is a free stack that will save you a lot of time and will also remind you what the heck you were thinking when you positioned those new stacks after a night out with friends. Pen is a container stack that can group stacks together and allows you to add notes to the new group. The notes can be coloured to differentiate your page sections.
One of Pen's advantages is that you can copy or drag whole groups of stacks to move them around on the page, or between pages. As far as I know, it's the first stack that allows you to both group stacks together and add notes to the groups.
The Pen stack itself is not published to your website – only its content. As such, no code whatsoever is uploaded.
Oh, and did I mention that it's free?
Wallpaper is a new background generator with over 180 different gradients and customisable SVG background patterns that can be added behind single stacks, sections, or whole pages. Patterns and gradients can be combined and the height of the stack can be adjusted within the stack settings. The stack's contents can then be positioned vertically within the Wallpaper stack – Top, Centre, or Bottom.
The SVG patterns are interesting because opacity, colour and scaling can also be adjusted within the stack settings, but the pattern will also scale depending on the viewport width.
Both the gradients and the patterns are set to 'Fixed' by default, but can also be set to static so that the stack's content scrolls over them.
Two Sample stacks, Gradients & Patterns, are included with Wallpaper to make it easier for you to choose the background that you prefer.
You can add extreme combinations:
Or you can take the more subtle approach:
Whichever road you choose, you're bound to find the right background for your RapidWeaver stacks, sections, or pages with Wallpaper!
Parallaxer from Shaking The Habitual is the second take on parallax effects in as many weeks and it adds a new dimension to the effect we've become used to. Not only can the background images scroll up the page, they can also scroll to the left or the right. And, because the background image is not defined as a CSS BG, it works on mobiles*. The fact that the image is a 'normal' image, also means that you can add Alt tags to improve your SEO results.
In its default state, Parallaxer adds an image to your page that scrolls slower than the rest of the page. You can set the scroll speed between 10 and 50. A stack container can be activated that allows you to add stacks to be inserted over the background image, either centered, or in one of the four corners.
Image – Warehoused, Local
Effect Scale – 10–50
Direction – Up, Left, Right
Add Content – Deactivated by default
Placement – Four corners or Centred
Until 20th June 2018 a discount of 20% can be had by using the code: sth-ninja-parallaxer.
*Tested on Android using Chrome and Firefox
Tommy's new Stack Me stack will help you align your content flexibly, letting you break out of the constraints of the sometimes inflexible 12-column layouts of framework based themes such as Foundation and Foundry.
Stack Me adds a full width section to your page and let's you add child stacks with different content: Header, Text, Image, Float and Button. Stack Me's width may, of course, be constrained by dropping it into a container stack.
The Header, Text, Image and Button child stacks are straightforward, the Float stack adds a text stack with a container for other stacks. The child stacks can be combined as needed. The only thing missing is a child stack for third party stacks.
However, noticing that the child stacks are standard Stacks 3 stacks, I simply dragged in some other stacks – and was surprised to find that that works too.
Once you've added your choice of content, you may define Stack Me's minimum height and the content alignment, add an optional image background – which may be fixed – and a colour overlay. The setup is fast and simple and saves you the trouble of experimenting with nested stacks.
Fix Background Image – >1025 px On, <1025 px Off
Min Height – %
Vertical [orientation] – Top, Centre, Bottom
Horizontal – Left, Centre, Right
Padding – T, B, L, R – %
Colour On/Off – BG, Txt, Link, MO (Mouse Over)
Colour On/Off – H1—H4 individually
Colour Store – Tommy's famous colour reservoir. Save up to four default colours and drag them into the colour wells above
Target – Add an ID to scroll to the Stack Me container
Tile – Remove Min Height, 100%, My Choice [custom]
Custom CSS – it wouldn't be a DeFliGra stack without a bucket full of custom CSS containers
Stack Me is a great stack for when you need to align your content exactly where you want it, but with the addition of custom backgrounds.
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