Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Captions On Hover

I have a number of caption stacks in my Stacks library. Some are simple caption overlays, some are captions that appear on hover. Then there is the possibility of combining stacks to create animated captions on hover. Jeroen, at Marathia Stacks has developed something that is more sophisticated than most hover stacks. The name, CaptionOnImage is a bit of a mouthful, but the idea is simple, effective and can save a lot of work.

CaptionOnImage
At first glance, CaptionOnImage is a very simple stack. Drop it into your RW project; add an image – local, or warehoused; add a text stack with a caption and, with the standard settings, when you hover over the image, just as with some other caption stacks, your caption will appear.

CaptionOnImageCaptionOnImage, however, isn't finished there. You can also set the caption to disappear on hover, but that isn't all. By nesting the CaptionOnImage stacks, you can also have the image change on hover – with, or without a caption. Just hover over the image above and you'll see what I mean.

If you wish to go easy on the grey matter, you can open Jeroen's detailed example project – it comes with the stack – copy the example that you wish to use, drop it into your project and replace the images and the caption text. Otherwise, drag CaptionOnImage into your project and play around with the stack settings.
To do so, drag an image into the upper part of the stack and a text stack into the lower part.

First up: The General Settings are for the positioning of the caption; Top, Bottom, or Centre. If you choose Top or Bottom, you can set the distance in either % or to Fixed [px]. You then have settings for T/B, Left and Right. Force Fluid Image will ensure that your image remains responsive. Set Link will allow you to add an URL.

Hover Effect: Static sets the caption to appear on page load and disappear on hover. Hover sets the caption to appear upon hover and Both gives you a permanent caption. Show Effect enables Image Hover Effects, either for the static, or the hovered image. You have a choice of four image effects: Opacity, Blur, Sepia, or Greyscale. Hover Delay is defined in milliseconds and there are five transitions to choose from.

You may add a border to the image and the border colour may also be changed upon hover. And finally, the image can have a colour overlay – once more, you can choose between a static and a hovered colour.

If you wish to have the image change, as in the first example above, you can nest a CaptionOnImage within the lower stack, add a text caption that will appear together with the second image and you're good to go. The opposite is also possible: an image with a caption that disappears when the new image appears upon hover.

A great deal of thought has gone into CaptionOnImage. It's a great stack that makes exceedingly versatile captioning very simple without stressing those grey cells. It is a welcome addition to my stacks library!

Now — How do I add CaptionOnImage to my blog page? Oh look! There's a description for that on the demo pages too!
[Note – The images displayed here are screenshots, not the actual stack]

Step By Step — FormsPlus

There are many solutions available for building forms in Rapidweaver. Just like sliders, every developer seems to have either a set of stacks or a plugin in their stables. Only a few of them jump out as being special. FormsPlus is special.

The majority of contact forms begin to look daunting as soon as they request more details than just your name and address. I know – I have built a couple of booking forms for clients: What? Where? When? How many etc. etc.?
In fact, I just recently spent a couple of days simplifying the contact forms on my own web pages. Currently, I'm working on a client site and just finished a contact Form. That was before FormsPlus from Chillidog Software flattered into my inbox. I might just have to start over!

After a year of development, Greg has just removed the wraps from FormsPlus, a stack that allows you to build multi-step contact forms for RapidWeaver. Ideal for questionnaires, feedback forms, and more. But there is more to FormsPlus, much more.

FormsPlus

FormsPlus offers so many possibilities – many more than any other forms suite of stacks and so much easier to use. Drop a FormsPlus stack into your RW project and you get a stack that offers you the options: Add Form Steps; Add Template; Success and Error Messages.

If we begin at the top, you need to add a Form Step by clicking the + button to add a child stack, then click the new + button to add a Form Element. Other Form Suites come with a set of stacks – one for each option available. FormPlus delivers 19 Child Stacks instead. You can view a list of them on the left.

Now you have two elements to set up. First, the Form Step and second the Form Element. If you look at the stack settings for the Step, you'll find that you're requested to add a Name for the step and a Step Description. You'll need to give a little thought to the Name, as it appears in the navigation bar above your form. You can, of course, simply choose Step 1; Step 2 etc. or add a step description as in the screenshots above.

You may add a Header and/or Footer stack to your Form Step. These can be any stack you choose; a help text, perhaps. Next you can decide how many columns the Form Step should have at each of four breakpoints and the gutter width or Column Gap between the columns.

Next you should format the Form Element. The stack settings are, of course, different for each stack. If, for instance, you added an Email Input Child, you must add a name (for use in the Templates) a description for your Form Element and a Placeholder; john.smith @someserver.com, for instance. Then you can add an optional Help Text to let your visitor know what you want him to add to said element. Finally, you should decide if the Element is a Required field or not.

You can add as many Form Elements to the Form Step as you feel are needed for said step.
NOTE: It is by no means obvious, but country and state selectors are also available – when you add a Select menu, you may choose 'Custom' and then add the selector you require from the stack's settings.

When your visitor has filled all the required fields in the first step he/she can click the next button and move on to the next step.
You can add as many steps as you need to FormsPlus, each one with different Child Elements. If you have a questionnaire or opinion poll you can add sliders (Range Input) to each element to gauge a user's satisfaction. The values from each Form Element will then be automatically added to the Template that you create when you are finished.

You can add multiple Templates to FormsPlus. A Form Receipt, which will be sent to the visitor, lets you set a Subject and a Reply To. In the Reply To, you need to add the name of your Email field. A Form Submission will be sent to a list of comma delimited email addresses that you enter, using the Subject that you set. The Reply To field should once more contain the name of the Email Element.
An Online Record will be saved as a text file to your server and could be imported into an CSV file.

Once you've added all the necessary Steps to your Form, you can take a look at the FormsPlus stack settings. They contain everything you will need to configure your form to match your website theme. There is even a choice of eight different transitions for moving from one step to the next or back. You'll also be able to position your form buttons (Top; Bottom; Left, or Right), set the wording on the buttons to your own language and (did I say already?) much, much more.

FormsPlus doesn't add personalised text to the Form Elements and it can't diverge from a set path of steps, but it does make a complicated form look a lot less overwhelming; it does allow you to define a user questionnaire that allows you to collect numerical results and it has a phenomenal set of Child Stacks.

Oh, there is one more feature: FormsPlus intelligently breaks uploads into small pieces before uploading. This allows you to upload files up to 2GB without you having to change any server settings.

Note: FormsPlus currently doesn't add a Sender to the mails received and the Reply To is your own address, not that of the sender, but we can expect those to change in version 1.1.

Any questions? Ask them with FormsPlus; the best way to ask them of your audience!

Comments

Action Menu

Menu buttons are always rectangular or square; perhaps with round corners. Except they're not! Introducing Action Menu from 1LD.


Action Menu is One Little Designer's latest release and proposes something new; dropdown/popup menus that can be square, with or without round corners or round, or – if you have a little time to invest – any shape you wish; just create your own icon and save it as a square .png with a transparent background.

As if just to be different, Action Menu – when you drop it onto your Stacks page – is configured as a PopUp menu, hovering at the bottom right corner of your screen. It can, however, be positioned at any corner of the screen, or it can be anchored within a Stacks container where, once more, it can lurk in any any of the four corners of said container, just waiting to be clicked. It hovers above the container's contents, so a spacer may be necessary – depending on your content.

And there's something else that's new. Action Menu displays icons, but in addition to Fontawesome, you may also choose Google Material Icons, or Ion Icons – a refreshing change. Let's just hope that Ion is around for longer than Brandicon and consorts.

So let's take a look. Action Menu delivers three stacks: Action Menu, Action Menu Container, and Action Menu Item, though the latter, in my humble opinion, is unnecessary.
The Action Menu stack settings first want to know if the menu should open when the page loads and if the page should be overlaid with colour. The overlay has its very own transparency slider. Then you can set the Vertical and Horizontal alignment. If you dropped the Action Menu onto your page, it will float above your content in the position you chose. If you drop the stack into container it is fixed within that container.

Next, you will need to decide just how far Action Menu is positioned away from the page or container edges. The settings are in pixels, although for responsive layouts percent would be much appreciated. The dropdown speed may be set between 0.5 and 1.0, where 0.5 is the slowest setting at just over 1 second and 1.0 is almost instantaneous.
The first settings for the Main Toggle include Hide Toggle Icon, Rotate Toggle Icon and Hide Toggle Shadow. Next you'll need to decide if the Main Toggle should have a background colour or not, a gradient, or perhaps an image? Hiding the background colour and the shadow leaves you with just the icon on your page – nice. NOTE: Images are tiled, so if you wish to load your own icon image, the .png must be square.

The icon colour, like all Action Menu colours with the exception of the page overlay, is a solid colour. The icons themselves, as already mentioned, can be chosen from Google Material Design, Fontawesome, or Ion Icons. Because Fontawesome is built into RW, a list of FA icons is available from a dropdown. For the Google or Ion icons, you'll need to browse the appropriate web pages. The Toggle Size and the Icon Size are set individually, but now comes the clou: the icon radius may be set between 0 and 100px so that your icon can be anything between square and round.

All Items contains the settings for the all dropdown icons and includes the Item Size, Icon Size, the Item Spacing and the Item Radius. The dropdown Items are linked and the link can slide out from the item on hover. All Links contains the settings for all links. Always Show Links, Show Links on Mobile and Link Text Colour. The slider can have a Background Colour and a shadow. The Advanced Setting fixes Action Menu to your Stacks container.

Once you've fashioned your button's appearance, you can turn your attention to the Dropdown Items. The first Item is already in the Action Menu stack, when you activate it, the stack settings will display everything you need to set up the Button Colours, Icon and your Link. The Link Text is set directly within the stack.
Once you have set up the first Item, you have three options: you can either click the + button to create a new child stack, you can drag in a new Action Menu Item from the Stacks Library, or you can Alt drag and drop, or copy/paste the Item that you just configured to duplicate it. Each Item may have its own colour and, obviously, icon.


Now,if you regard the Action Menu stack header, you will immediately be able to see if Action Menu will open on page load, if the page will be overlaid, if links are visible and the position of the Main Toggle on your page (or within its stack).

Would you like to place multiple instances of Action Menu next to each other? You could always drop a multi column stack onto your page and populate it with your Action Menus, but there's no need to got to the trouble. Instead, you can take and Action Menu Container and drop your Action Menu stacks into it – they will automatically appear side by side…

Yes, there have been round buttons before. Most often, we see them for social Icons and Joe's Share It stack takes those to the next level, but 1LDs Action Menu is an unostentatious dropdown or pop up – your choice. Immediately upon release, it hit the sweet spot for many RW users and harvested multiple approving comments on the forums. If you'd like to see it in action, visit the 1LD demo page.

Comments

P5 – Design Stimulous

Continuing the theme* of prefabricated projects as opposed to themes, here is some new inspirationion: Gary at WebdeerSign creates both RapidTemplates and RapidProjects. I recently very fleetingly introduced WDS's T4 in my Paddy review, now I've taken a look at P5.

P5 is a fully responsive Foundation project and compatible with RW6 and RW7. At first glance it looks quite frugal, but I assure you – a traditional coder would have his work cut out if he wanted to replicate the responsive elements! His time would certainly cost a great deal more than the cost of the project.

Starting at the top, we have a Hamburger Menu that rotates on hover and opens a Mega Menu. Now a Mega Menu can contain pretty much anything, so why not add the footer to it as well as the navigation links. When I opened the menu for the first time, I was immediately reminded of the footer on my own site – good idea, lets do away with the footer in future and place it – permanently accessible – in the floating menu!

P5's Hero Banner fills the whole screen on the first page and has a title text that floats up to appear between the image foreground and background. I like the idea very much, but you're going to have to search for images that are suitable for such a trick. However – once you've found a suitable image – if you're Photoshop savvy, I personally would process the image and not the Header text to create the effect.**
I spoke to Gary about this and while I agree with him that many images will make the effect difficult to produce in an image editor – a little extra effort would help your SEO a long way.

WebDeerSign P5

Moving down the page, we find a two column layout, with a text floating above the left half of the image, dropped caps and a superimposed logo over the image. The design looks simple, but it is only possible thanks to BWD's (donation ware) stacks. A similar effect could be achieved with Jack – in combination with a few other stacks, but it wouldn't look quite the same and it would weigh a lot more.

The rest of the page contains examples of PopDrop Popups and Modal Windows with variations on the dropped caps theme. The page footer is in fact a contact footer that has the same animated text effect as the Hero Banner and is linked to a a popup contact form and social websites.
P5 then contains two more pages with more examples of the Hero theme, plus colour variations of the fist page and a page of Font Examples to make font selection easier.

P5 is a great example of what can be created with RapidWeaver today. Pages that wouldn't have been possible a while ago. If you like the theme, you can us it to build your own new project, or you can plunder it and use its building blocks within your own layout. Be warned though, if you wish to use the animated Mega Menu, you will need to copy the CSS from the project setup too!

P5 has certainly provided me with a couple of ideas for my next project.

* http://bit.ly/PartialMagic | http://bit.ly/PaddyStacks | http://bit.ly/CaliforniaProject
** Demo project and instructions available upon request.

Comments

Partial Magic — Layout inspiration

Stuck for Ideas? Creative block? Or maybe you have a client site with a tight deadline? There are a couple of brilliant designers out there that offer pre-configured Foundation Themes/Projects. Some of those projects are really slick. Jochen Abitz is one of those talented designers and he's had an ingenious idea. So now for something entirely different…

Partials. Jochen has put together Partial Magic, a Foundation Project that contains a collection of subtly animated, highly polished partials. Three pages of them.
Each Partial is painstakingly designed and each page is formatted with a different scheme via the Foundation Styles stack. The themes include a light theme, a bright theme and a bold theme with variations of the Partials. There are 32 Partials in all, so there are bound to be elements that you like! The three pages all have white content. The light theme is composed with blue and grey accents, the bright theme has orange and light grey accents, while the bold theme has light teal and light grey accents with a bold font (Teko).


The Partials make extensive use of BWD's Sections stacks (donation ware) while the styling Partials contain BWD's Pro Styles. To use the Partials, drag the Styles Partial you like into your new project, then just drag, or copy/paste the other Partials you wish to use into your project, unpack them and add your own content. Once you've tweaked the Styles to suit your taste – don't forget to create a new Partial from the edited styles for use on other pages – you're ready to go !

Need a Hero banner for your site? With a static image, or perhaps a video background? Drag the one you like from Jochen's project into your new project, unpack it and replace the image/video and Header text with your own content. Not keen on the Header style? Simply remove it, edit its appearance, or tweak the animated Child stack.

Need a Top Bar? Choose one from the Fixed, Static, or Sticky versions supplied, replace the Site Logo in the project settings with your own and you're finished.

The project contains two-column stacks with images and text – beautifully styled with the image either on the right, or the left – with and without a superimposed Header; two columns of text; three columns of text; a full width static image with Header text (the text scrolls over the image), and a three column Footer. Most of the Partials have buttons positioned beneath the text. There is also a simple, but very elegant contact form; subtly animated, of course, and ready to go. All you have to do is insert your mail details.

Partial Magic has a fourth page "Partials Magic Depot" that contains all of the Partials in one place and includes a couple of empty layouts that aren't on the demo pages.
I experimented with Partial Magic and set up an elegant page layout with my own content within twenty minutes. This means that you could have a new website up and ready for publishing in less than two hours. A boon if you have a tight deadline to meet.

32 Responsive Design Ideas, ready to use and at an affordable price. Partial Magic is a great new idea.

Comments

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

x

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.

* indicates required

Contact Information

My Image

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.

Legal

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—16

This website was built with loving care on a Mac using Foundation. For more information, contact me.