Well, today is Cyber Monday and is revival day. RWExtras is now back online and the stacks – which hadn't been updated in an age – have all been rewritten.
RWExtras specialises in elegantly simple stack elements – simple image sliders, galleries, font stacks and other useful stacks to help novice users make the most of RapidWeaver.
Seamless compatibility is given with themes by all major developers and frameworks such as Bootstrap, Foundation and UIKit.
So what's new? As it turns out, a lot! Presently there are twenty-two revised stacks available. I'll be reviewing all of them, but will split the reviews up into smaller chunks sorted alphabetically. so if you're waiting for the Slider Stack review, it will appear in a later post.
Shall we dive in?
Probably the simplest of all the new RWExtras stacks is anchor point. Set anchors on your page to let visitors quickly navigate up or down to the information they wish to view. How? Simply drop an Anchor Point stack at the required position, give it a unique ID and add a button or a text link to entice your visitors to scroll to said ID.
The default ID is chapter-1. All you need to configure your linked text or button is a URL #chapter-1. To link to the anchor from other pages, just add #chapter-1 to the page's link.
The only setting that Anchor Point has, other than its ID is Display Instructions – Will has added complete instructions to each of the new stacks, so that when even a seasoned user adds one to his/her page, he/she doesn't have to sit and scratch his/her head whilst trying to remember how it should be configured.
RWExtras' Background Stretcher [BGS] allows you to add a local or a warehoused (stored on a server) .jpg or .png image as your page's backdrop. BGS is really simple to set up. Once the stack is on your page, the settings panel lets you choose where the image should be placed: Left Top (Default); Left Centre, etc.
You may set the image to static, or if it should scroll with the page content – scroll. If it scrolls with the content, you may perhaps want the image to be repeated, otherwise, you can set Auto Size; Contain; Cover; Stretch; Pixel [size] or Percent. You should play around with these settings to find the ideal setting for your page.
There is setting 'Force Styling' for any stubborn theme you may encounter. Some pre-baked themes just won't allow you to add a background image.
If you wish to show your visitors a message, when they move their cursor above the navigation bar to leave your page, Exit Intent is the ideal stack to do so and it is really simple to set up. RWExtras' Exit Intent has a backdrop that covers the whole page, so your visitor isn't going to miss your suggestion that he/she sign up for your newsletter or join your member's page, or the message that your work is being exhibited in the near future …
… but let's begin at the beginning – Enable in RapidWeaver Preview. If you want to preview your Exit Message, leave this activated and your message box will pop up every time you try to leave the preview. Once you have Exit Intent set to your liking, you can deactivate this.
Next up, the Animation Speed is set to one second – it shouldn't be much longer, otherwise you user might have left the page before the message appears. The Border Radius is the border around your message box. Max. Width sets the width of the message box within the backdrop and Spacing sets the Padding inside the message box.
Theme lets you set the colour of the backdrop and the colour of the content box, while Close Button gives you the static and hovered colour for, well, the close button. However, any linked text or button with the class 'exit-intent-close' will also close the message box; in which case, I personally would probably set the close button to the same colour as the message background.
Cookie Tracking is an important part of messages on exit – if a visitor has returned to your page numerous times, you won't want to bug them with the same message every time. Set a Cookie ID and time for the cookie to expire before the message is displayed again. The default setting is 28 days.
Almost any stack can be dropped into RWExtras' Exit Intent's message box, including an HTML stack for MailChimp's subscription form or similar.
EZ Flex Button
No bells, no whistles, just a simple button stack. However, RWExtras' EZ Flex Button does have more settings available than the standard Stacks' button. The settings panel has options for a Link (obviously) and the Button Alignment. Then there is the Rollover Speed and the Label Font Size. Now set the Minimum Width for the button; the Border Radius and the Padding, both horizontal and vertical.
EZ Flex Button is a two-tone button and the settings for both the Static and Hovered states can be altered – make sure to choose subtle colour changes for the top and bottom of the button, otherwise it will end up looking like a stick of Brighton Rock. The hover states for the Button Text can also be set. Oh, and to add the button text, just click the button itself.
Font Resize Ultimate
If you are preparing a site for the visually impaired, a family album that your grandparents might visit, or you have a box with 'The Small Print', then RWExtras' Font Size Ultimate is the stack for you! It has three buttons to enlarge, reduce, or reset the size of a text.
There are two options available for this stack: If you're a newbie, you can drag a standard text stack into it and enter your content; the seasoned user can look for the Class/ID of any text elements on his/her page and enter it into the stack's settings panel.
In the first case, clicking the buttons that appear above the stack will enlarge, or reduce the size of any text contained within the Font Size Ultimate stack, in the latter case, the buttons will enlarge, or reduce the size of the text of all of the page elements that you added to the ID Or Class box.
To do the latter, the settings panel has two cool buttons: Show Theme Info and Show ID Values. When the first is activated, your preview page will show a list of classes from the stacks that have been placed on your page; Show ID Values displays the stack IDs. Copy the element Class or ID that you'd like to be enlarged and paste it into the Font Resize settings panel.
The remaining settings allow you to define button Alignment and the Symbols used for the button's Decrease, Reset, and Increase Labels. Fontawesome icons may also be used for these buttons.
It goes without saying that the button's Font size may be set, but there are also settings for the Label Dimensions, the Spacing between the Labels and a setting for Small Caps.
The next two settings are for the hover states of both the buttons themselves and the label text/icon.
Of course, being able to enlarge or reduce the size of a text wouldn't be much use, if you can't define how large the text has to be so that your grandfather can read it when he has mislaid his reading glasses again. Both the Increase and the Decrease settings can accept three different sizes – entered in Percent up to 300% and down to 1% (0% allows the text to disappear entirely). RWExtras' Font Resize Ultimate is the ideal stack for the visually impaired.
And last in this post …
RWExtras' Full Screen is an interesting stack that enables either a local, or a warehoused image to cover the screen. Depending on the z-Index you choose, Full Screen may be utilised as a background image slideshow, or you can annoy your visitors by hiding some or all of the page content every couple of seconds.
Once the stack is positioned on your page, the blue + button can be clicked to add images. Add a single image and the default Animation settings will cause the image to Fade or Slide in and out again every eight seconds. If you add multiple images, you get a slideshow. You can also set the Image Order to display random images.
The settings panel has options to overlay the image with a choice of nine different patterns or a .png image of your choice. The opacity of said overlay can also be altered. Unusual is the fact that the overlay and the image appear separately when set to Slide – interesting.
The main settings panel also allows the addition of Navigation, Pagination and Captions with extensive settings for each. The Image Title and Caption are set by clicking the image container itself, as opposed to the main stack.
As the RWExtras' Full Screen images cover the whole screen, it goes without saying that only one instance of the stack may be used per page.
As stated in the intro, each of these stacks brings a simple but elegant solution to the everyday requirements of building a website. A great selection for the novice, but also a quick n' dirty solution for the pro. More in the next post…
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
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
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—17
Powered by rjh-design
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.