Image Card. What does it do? It displays an image with a colour overlay, a text and a link icon.
But it does the above in a unique way.
Supposing you have an image gallery, or a portfolio, or you'd like a navigation grid to other pages…
Drop Image Card into a Stacks page and add an image to it. You can add a colour overlay and a title, or a short text – link is already provided – and you have a cool link box to your new page. It is even animated – the whole card moves up, or down when hovered.
Images scale within Image Card, to fit the longest dimension. But as you are able to set the card's height, you can make adjustments to the image display.
Fill Mode – Percent, Pixel
Alignment – Left. Centre, Right
Image – Drag & Drop
Mobile/Tablet/Desktop Height – px
Margin – Vertical, Horizontal
Padding – Vertical, Horizontal
Overlay Type – Gradient, Colour
Title Font – Choice of 14 Fonts + Custom
Mobile/Tablet/Desktop – Font Size, Line Height
Hover Icon Colour
Shift On Hover
Shift Amount (px)
That's a pretty impressive list of settings for such a simple looking stack and just goes to show how seriously Weavium takes their work.
What's more – Image Card is free!
Back To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.
Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Offset – Page scroll before active
Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border – Normal/Hover
The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.
Without a doubt, a useful stack to have in your collection!
Press is an extremely versatile button stack that will allow you to create just about any button that you can imagine. Flat buttons are currently the mode (don't worry, fashions change and flat will be replaced by something else soon – and we'll find the new 'modern look' just as cool). 1LD acknowledges the current trend, so obviously, when you drag your first Press stack into a project, your new button will be flat and black.
Want flat with a very subtle gradient, or pill formed with a less subtle gradient, perhaps a patterned background? Not to forget Ghost buttons, of course – they're still semi fashionable; Press can do them all and more.
And Press doesn't stop at simple buttons, it can build button groups too. If you need to build a menu bar of your own, design the basic button that you'd like, drag a Press Group stack to the page, drag your button into it and duplicate it inside the Group as often as you need it.
If I go through all of the settings available in the two Press stacks, you'll still be reading next week.
Press has similar settings to previous 1LD stacks recently reviewed here. The settings groups are:
Button Initial State
Button Hover State
Button Active State
Advanced (Custom Classes)
Each of the above groups contains extensive settings.
Press Group contains settings for the Shared Button Styles – Group Radius, Button Margin and Button Padding.
Press group and the contained buttons are responsive, adjusting to all screen sizes. The only thing I miss is an option to display a hamburger on mobile devices.
You can read the full instructions for Press here.
Side Menu is very closely related to Overlay Menu, it is equally highly configurable, but instead of overlaying the whole page, it slides out from the left, or from the right and is exactly as wide as you want it to be. Just like Overlay Menu, Side Menu can reflect the RapidWeaver site menu, or it can contain a custom list of links. For this reason, multiple instances of Side Menu can be placed on a stacks page.
The menu initially shows up as a black sidebar on the left of the page, with a black menu button in the top righthand corner. This is a configuration that is often seen on current websites but, not being a mortician, I'm not especially fond of this appearance. So let's take a look at the settings panel to see if we can change it.
The first setting is Unique Menu ID. Necessary because, as already stated, you can have multiple instances of Side Menu on each page. If you only intend to have one instance, you can leave the default ID unaltered.
Use Custom List is the next checkbox you'll encounter. Check it if you want a custom links list. Leave it unchecked if you need a site menu.
Now the party can begin: The Menu Configuration sets out with position – Left, or right – and continues with Font Family. Once again, you'll find a choice of twelve Google Fonts and once again, I ask myself – if Google Fonts are implemented, why can't I just enter the name of the font I want to use? Whatever – I'm sure you'll find a suitable font for your site amongst the twelve.
The Text Alignment may be set to Left, Right, or Centre and the Menu Fill Mode can be set to Pixels or Percent. The default setting is px.
Next follow individual settings for the menu width when displayed on Mobile, Tablet and Desktop. The menu Padding is set in px.
Next up is the Background opacity, followed by Background [content], which may be set to Off, Colour, Gradient, or Image. Images are centred and set to fill the menu height.
Image Cover will set a colour overlay for the background image – a nice effect.
As demonstrated in the screenshot, the Menu can contain a Header and/or a Footer. You may drop any stacks you please in the child stacks, but don't forget that the longer your link list, the less room you will have available. As also demonstrated in the screenshot, when the menu is opened, the site's scroll bar is hidden.
Next up: Dropdown Icons. The Icon Size for the icon that appears next to your link list to indicate sub-pages is set to a default of 24px. The Open Icon Font may be chosen from Google Material Icons, Font Awesome, or ION. Open Icon awaits the code of your choice. The same applies to the Close Icon.
Rotate Icon When Opened has its own settings for Degrees.
Top Level Menu Items has options for Font Size, Subtitle Size (for custom link lists), Padding and Vertical Spacing. Radius refers to the button radius. Then we have Text Colour and Subtitle Colour. While the Text Colour is a solid colour, the Subtitle Colour may be translucent.
The Button Background can be set to Off, Colour, or Gradient. The Gradient settings thankfully only have two colours and produce a very smooth gradient. The Direction can be Top to Bottom, Left to Right, Right to Left, or Diagonal.
Hover Text Colour and Hover Subtitle Colour are set individually, as is the Hover Background.
Sub Level Menu Items automatically inherit the Top Level Font, but the Font Size may be set individually. The Indent may be set either with a default Margin, or a default Padding. Margin and Padding can not be altered in this case.
The Sub Level Menu Items are also set to inherit the Top Level colours, but there is a checkbox to override the settings.
Menu Toggle. Show Toggle Text and Show Toggle Icon are the first two checkboxes. The Toggle Text Font may be set individually from the Item Font, as can the Toggle Font Size. The Toggle Text is set to 'Menu' by default. The same Icon options are available once more and the Font Size for the Icon is set individually from the text.
The Toggle Fill Mode is interesting. By default, it is set to Auto, but the options are Fill (full width), Pixel Width, or Percentage Width. The Menu Toggle is at the top right by default, but the Vertical and the Horizontal alignment may be altered, as may the Margin, Padding and Radius.
Once more we have multiple options for the Background and Hover settings, Plus Border and Shadow options.
I was irritated that the Overlay Menu Close Button couldn't be configured [at initial release]. This is not the case with Side Menu. The close button is as equally highly configurable as everything else. Hats off! ILD always listens to constructive criticism.
Advanced Settings. Here you'll find Show External Data Link Info and Make Parent Links Clickable.
Experimental. As with Overlay Menu, there is an options to Replace Theme Menu. This will not automatically work with all themes, but as mentioned last time, there are other stacks, that offer assistance here.
I liked Overlay Menu very much – it is highly configurable and is different.
I like Side Menu even more. It is more traditional so it will find wider acceptance and, if anything, it is more highly configurable than its sister stack.
Paypal Stack is not your typical Paypal Button stack. In fact it does not add a Paypal button to your page at all, instead it adds either a hidden download link or a failure message.
PayPal Stack requires that you set up your Paypal Merchant Page with a few options that you probably haven't activated yet. First, you will need to activate Payment Data Transfer (PDT), after which you need to copy the ID Token into Paypal Stack. On the PayPal setup page, you will also need to activate Automatic Return and add the URL of your success/failure page. Detailed instructions are supplied on Bryn's page.
Once you've set up your purchase page, you can add the button code supplied by PayPal to an HTML stack.
Now add the new success/failure page that includes the PayPal Stack.
First add your Item ID to the Paypal Stack settings panel under Match Item ID. You can add up to four items.
There is an option to Check Name/Email/Payment to prevent falsified payments.
The next option is PayPal Hostname. This may be altered for test purposes, but should be set to Paypal.com before publishing your page.
Finally there is an option to add Debug Information to the transaction details that PayPal returns after a purchase.
The Paypal Stack itself has two containers. The upper container is labeled If Purchase Valid and you may drop your Payment Confirmed message (required by PayPal) and your download link or your download stacks (E.G FileSafe, or TrueDownload) here. The stacks contained here will only be displayed once a payment is confirmed and your buyer is returned to your page via PayPal.
The lower container is labeled Else and the stacks contained here will only be displayed if your customer cancels his payment on the Paypal page, or someone arrives on your page by accident. Something like a text stack with "Oops! You changed your mind, or an error occurred.", for instance.
Paypal Stack automatically changes your page extension to .php, so if you already had the download page online, you'll need to delete the .html file. A small price to pay for
not having a page that will allow your visitors to see a download link when they find the page by accident. I'd have purchased this stack years ago – had it been available.
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