Expanse is an animated lightbox stack that appears on your page as an info card. What said card looks like is entirely up to you.
If you drag an Expanse stack onto your page, the initial settings display containers for an image, a headline, a subhead and a Stacks container. Both the default width and height are set to 320px. Once you have dragged in an image and added your content, you can check the preview. It will display your image with a plus button which, when clicked, expands the card to fill your page.
Adjusting Expand's initial height will allow more, or less of your content to be displayed below the image – the Header and subheader, for instance, or the first few lines of text.
If we explore further, we find that there are three different card types: Template | Icon Button (default), Custom | Hover & Click and Custom | Button. The two custom cards allow you to create unique layouts for the cards.
Both Custom versions of Expanse have a Stacks container for your content, into which you may add as many stacks as you wish. The difference between the two, is that Custom | Hover & Click displays an overlay with a text – "Click To Open" for instance – when hovered, whilst Custom | Button has a button to open the lightbox.
The first settings are Animation [type] and Speed. There is a choice of eleven different animations for the lightbox display.
Card Type – As mentioned above
Card Width, Card Height, Margin T/B
Header Image – Drag & Drop
Card Colours – Background, Title, Subtitle, Text
Button Colours – Background, Icon, Close Background, Icon
Button Icons – Four different button options
Inherit Link Colours (active by default)
Title Font – (default: Inherit)
Text Font – (default: Inherit)
Truncate Type – Ellipses, Gradient Fade, Clip
Expanded Layout (Lightbox settings)
Expanse is very quickly and very easily set up and can display both your condensed and your expanded content just as you wish. There are a couple of sites that I'd have designed differently, had this stack been available earlier.
The demo page is well worth a look at.
Now if you were expecting FancyIntro to be a larger, more luxurious version of Curtains (think VW Passat/Phaeton), think again. FancyIntro is an entirely different stack. More of a Mercedes AMG.
Curtains can display a line of text and opens it's curtains horizontally. FancyIntro can display two lines of text, or two images – or one image plus a single line of text (or stacks content), and opens vertically. However, if you're expecting FancyIntro to open two curtains and reveal the underlying content, you'll be disappointed. Instead, a line travels across the page from left to right, dividing the upper and lower section, then expands vertically to create a coloured page overlay. The page overlay then fades out to reveal the underlying webpage.
Having just taken Curtains through its paces and expecting similar results, it took me a couple of minutes to work out exactly how FancyIntro works. However, once you've put away the curtain concept, FancyIntro is very easy to use.
The default setting displays a white to grey gradient and two lines of text. A mauve coloured line then travels across the page, expands to fill the page and then fades to reveal the content.
Both the initial background and the line have colour settings for top and bottom, so that the line can expand to a gradient too. Obviously, the gradients don't need to be so blatant as below.
I soon tried dragging two 'halved' images into both the upper and lower content wells. In the latest version of FancyIntro this is possible (the 1.0 version duplicated the upper image). Of course, with an image in both sections, no accompanying text is possible. If images are to be present in both upper and lower containers, it is recommended that they are kept as small as possible. In fact an image size of max 150px is recommended by S4S.
SVG images can be loaded as warehoused images, but be warned – if you have stripped out the pixel sizes, they will scale to fill the screen width.
Overlay Fill Top/Bottom. Whilst the colour palette displays transparency settings, they are ignored by FancyIntro.
Line Fill Top/Bottom
Breakpoint. FancyIntro is hidden below the breakpoint.
Line Height. Set the height of the dividing line in %.
Line Slide Speed
Line Grow Speed
Fade Speed. All of the speed settings are in ms and would seem to be unlimited. Hence, with inappropriate settings, you could sit all day, waiting for the dividing line to travel across the page.
Challenge Mode. The same as Asynchronous Mode in Curtains.
Hide period. Sets a hide cookie for Days (default), or Hours.
Upper Content. Styled Content (default), Dropped Image, HTML, Markdown, None, Stacks, Warehoused Image.
Offset. In %
Text Colours. Text / Shadow
Text Sizing / Spacing
Lower Content analogue to above.
FancyIntro is less gimmicky than Curtains and is ideal for splash screens that make way for an underlying web page. Announcements such as special offers, upcoming events, or just an attractive 'welcome' message.
I used Booklit a number of times for online menus and catalogues, When I downloaded Pagelit, I didn't know what improvements to expect, but there are quite a few.
But let's start at the beginning – you may not have seen Booklit.
What is Pagelit?
Pagelit is a stack that will allow you to build an online book(let) with pages that turn when either the page, or the navigation is clicked.
Yes, there is software available that will transform a PDF into a flip book, but Pagelit lets you build your books, or magazines directly within RapidWeaver – using stacks to build the pages.
Booklit was, in my opinion, hampered by the fact that it only allow preset page ratio formats e.g. 16:9, or 4:3 etc. This limitation has now disappeared and you can build your books at any size you please – full page, if you wish – so, with the fact that you are using stack functions, you can just imagine the possibilities…
One important restriction has remained – as with most lightboxes, you can not use stacks within Pagelit that must load in an opened state when the page is parsed. Otherwise, almost anything is possible. The iFrame above displays a very simple example with images, or a single text box on each page. The page size is deliberately small at 400px x 400px. The images have not been optimised and are quite large. I have made no attempt at designing a complicated layout. The settings are otherwise the basic settings.
However, I may just publish my next book as a Pagelit book.
Due to the page ratio restrictions, Booklit's layout options were somewhat restricted and a page could appear disrupted at some screen sizes.
Pagelit has displayed no such problems in my tests – it is fully responsive – but you may wish to hide your book from view on mobile phones if you have a lot of text content.
The new page turning options in Pagelit are Book with hard cover and 'soft' pages as demonstrated above. Book with 'stiff' pages, similar to children's books and the previously available option with 'soft' Title page and content – Magazine.
Whereas Booklit could display an online option to show your books with a fullscreen overlay, with Pagelit, you will need to decide before publishing whether to display your book, or magazine inline, or as an overlay.
One useful new feature is the option to automatically add page numbers to your publication. The pagination may then be used as a navigation help, resulting in three methods of navigation – Simply by clicking on the next/previous page; clicking on the forward/back buttons, or by entering the page number.
Type Book - Soft Pages, Book - Stiff Pages, Magazine
Page Width / Page Height
Cover Size+ (%)
Navigation Page Click, Buttons, Page Click & Buttons
Page Shading (enable/disble shadowing)
Enable Page Numbers
Pop Out (enable page overlay)
Loader Size / Loader Colour
The Page Child stacks also display settings when active – they will allow you to add full sized images, or a background colour to each page. Images may be local, or warehoused.
Pagelit is a unique stack for creating booklets within RapidWeaver. I can't imagine writing a 500 page book with it, but for an restaurant's interactive menu, or a product catalogue Pagelit is ideal. I'm sure that it will be even more popular than Booklit.
For further demos and a full list of new and optimised functions, list the Pagelit homepage.
Will's demo gallery contains 117 images and is close to 400MB in size. Quite a risky and time consuming undertaking in most cases, however, with ProGallery a gallery of this magnitude is not only possible, it's also quite simple to set up.
With lazy loading/progressive loading, the image, or video that is currently requested is called from the server on demand, thus preserving bandwidth.
The ProGallery lightbox itself has been completely rebuilt and the clutter has been removed. The controls and the titles are no longer within the displayed image, but are placed outside of it, thus allowing the viewer to focus on the image itself. Keyboard navigation has been implemented, as has swipe actions on mobile devices. In addition to an image title, a caption text can now be added.
Once you've dragged a ProGallery stack to your page and clicked the + button to add a child stack, you'll see that there are now four options to add images to your Gallery.
Single Image is the simplest solution. The settings panel displays three image wells for local, or warehoused images. Thumbnail, Large Lightbox Image and High Resolution Lightbox Image. Below these options you can add both an Image Title and an Image Caption. You will then see Alternative Link: Set Link button?
The Lightbox can be disabled. Setting a link to the thumbnail then gives you the option of linking to external pages. These pages could be product pages, or further galley pages.
Single Video is similar to Single Image. The thumbnail can be a local or a warehoused image. The Video Link will accept any video that can be embedded within a page. ProGallery will automatically discern the video format. Once more, both a Title and a Caption may be added.
Directory Of Images. One means of simplifying building a large gallery of images, is to upload the images, high-res images and thumbnails (with _thumb, or @2 appended to the name) to a server and add a .php-relative path to the Directory Path in the settings panel (html will not functions here). Then set the options Use Thumbnails and/or Use Retina Images accordingly. Your index page must then be set to .php instead of .html
ProGallery will then automatically load your images into a gallery.
CSV File. As before, ProGallery will accept a CSV file as a gallery source. The file format has now been extended to include Retina Images and Captions.
The ProGallery main stack settings are too numerous to list here, but you can take full control of your gallery appearance. The settings include Gallery ID (you may have more than one gallery on a page) Grid Type, Special effects (only for modern browsers), Transition Speed and multitudinous settings for the Lightbox.
It remains to be said that – apart from the thumbnails – there are three further options to trigger the ProGallery Lightbox. You may use a link, or a button to open the lightbox, you may do the same to open a specific image from the gallery, and you can trigger a specific slide on page load. These options are all explained in detail on the product page.
ProGallery, then, has now advanced from being one of the best gallery stacks available for RapidWeaver to one of the very best.The magnitude of possibilities make it a pleasure to set up and its reliability when building large galleries makes it second to none.
EU law stipulates that a warning must be presented, when cookies are present on a site. These notices are now generally ignored and are rarely clicked away, or accepted unless they hide page content. So what about a cookie message that loads with the page and disappears after n seconds?
What about a Call To Action that is displayed after n seconds and has to be clicked away, or an info box that is opened when an image. or a button is clicked, or when the page scrolls – and has options to open a new link? What about a thumbnail image that opens up a full page image when clicked?
Notice consists of two stacks. Notice and Notice Trigger. Notice trigger allows you to drop in a stack that will trigger notice. Its only setting is Connected ID. set the ID of your Notice stack (you might want more than one, right?).
Show Type. The first thing that Notice wants to know, is how it should be triggered. The options are Open On Start, Timer, On Scroll and On Notice Trigger only.
I searched in vain for a setting to determine the scroll distance before Notice opens on scroll. I'm sure this option would be much appreciated. As it stands, Notice opens up immediately, as soon as the page is scrolled any distance.
Show Animation. You have a choice of 42 animations to blend in your Notice Stack.
Hide Type has two options: Hide Manually, or Timer. Hide Animations has the same options as Show Animation.
Content Type is set to Text/Icon by default. It can be set to Stacks. Fill Mode may be set to Fill, Pixel Width, or Percentage Width.
The Z-Index is set to 999999 by default.
Position Vert: may be set to Top, Centre, or Bottom, while Top Margin determines the offset in px. Position Horiz:has the optionsLeft, Right and Centre. Margin, Padding and Radius can all be set individually and the Content width may be defined in px.
Notice's Background, like all recent 1LD stacks, can be set to None, Colour, Gradient, or Image. The settings for Notification Text and Notification Icon also mirror the settings of 1LD's recent stacks.
A Close Button is optional in Notice. When activated it is always in the top right hand corner. Show Action Buttons is also optional. When activated, two buttons are positioned at the foot of your Notice. The left button is a Close button, while the right button may be assigned a link. The Height of the button may be set in px and the colour of the Button Text and Button BG are definable. Each of the buttons has individual hover settings for Button Text and Button BG.
Trigger ID lets you set an individual ID for each Notice stack you have positioned on your page. You will then find a setting Maximum height for the Notice window in Percent. Any content that can not be displayed at this height can then be scrolled.
The two final settings are Activate Cookies and Absolute Position.
Notice is a versatile stack that shouldn't be missing from any self respecting Weaver's arsenal.
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.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
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?
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.