What are hotspots, I hear you ask. Hotspots are active areas positioned over an image. They can be activated to display information, when the mouse hovers over them, or they can contain an external link that is activated on mouse click. The external link may, of course, be a lightbox or a gallery that opens on the same page.
A word of warning – If you have a previous version of HotSpots installed, uninstall it before you install the new version to avoid conflicts.
The stack settings have been greatly simplified since the original version – in part, of course, due to the release of Stacks3.
When you drop HotSpots onto a Stacks page, you'll see a container with an 'add child' + button.
I recommend that you first add an image to the image well in the settings panel. The image may be local, or warehoused.
Once you have an image loaded, you can begin to add your hotspots by clicking the + button.
The main stack's settings will allow you to set up the general appearance of the hotspots. The very first setting is Edit Highlight. This is the highlight colour of the hotspot that you are currently editing – it makes it more obvious in edit mode, which of your 50 spots is currently active.
Lightbox – when activated, will enable the following lightbox settings:
Gallery adds next and previous arrows to the lightbox, enabling users to move to the next, or previous image.
Content Type is set to Auto[detect] by default. The options are AJAX, iFrame, Images, Inline, or Video. The lightbox function is demonstrated on the HotSpots product page.
Effect offers seven options for the image changes.
Next follow the colour options for the Window Shade, Title Fill and Title text.
Toggle will allow your visitor to toggle the annotations on and off to view the main image undisturbed.
Toggle Button and Toggle Fill let you set the colours for said toggle. The instruction text may be freely defined.
Tooltips – the hotspot info that is displayed on hover – may be deactivated.
The hotspots may display an icon which may be an image, or a font awesome icon. Place Icon Bottom Centre does just as it says.
The next eight settings are for the tooltip appearance.
Then finally, you will find the settings for the HotsSpot Global Styling and Mouse Cursor.
Once you have activated your first hotspot, you can click it (a great advantage over previous versions) and check the settings panel again.
The first settings are for the positioning, in percent, from the Left and from the Top of the image.
Then you have the Width, the Height and the Tooltip Position, the HotSpot Link settings, the Title Text and the Content Or Icon.
These settings are all best made in preview mode.
Each of the hotspots can be set to Custom Settings – an override that allows you to set the Background Fill, Borders and the Content settings individually for each HotSpot.
HotSpotsPro 3 is a great improvement over previous versions and well worth taking a look at.
Facebook Pages displays a live facebook page on your RapidWeaver Stacks page, which is great because instead of having to search for your facebook page, your visitor can see your latest posts directly on your homepage without getting distracted by all the cute kittens and clever dog posts. And, he/she can like your page directly from the homepage and/or access the Facebook page directly by clicking the link provided.
I know that a lot of clients are going to like Facebook Pages and the great thing is – it's simple to set up; there are only a few settings, but some of great options. And it updates instantaneously.
The only setting that you need is the name of your facebook page. Finished.
However, you do have some options. You might, for instance, wish to set the Width, Height and Alignment of the stack. A word of warning – don't set the width wider than the container it is in, Facebook Pages is not fully responsive and it can overflow.
Enable Small Header will reduce the height of the page header (active in the screenshot above).
Hide/Cover Header image deactivates the header image and leaves just the page logo visible.
Hide Call To Action Button will hide a CTA button, if you have on your fb page.
Show Facepiles will activate/deactivate the images of those that have liked your page.
Finally, you can decide which page tabs you would like visible within the stack – Timeline, Messages, or Events, or different combinations of each.
Facebook Pages will only display, well, facebook pages. It will not display personal pages or timelines, so if you want your visitors to see your cute cat, or how intelligent your goldfish is, you'll need to create a page to do so.
I can see this stack becoming very popular – even without those cute pets.
SmoothScroll is a stack (or rather – a set of three stacks) that does exactly as it says on the tin – once it's placed on your page, the page will smoothly scroll to its position when a link is clicked.
Three stacks. SmoothScroll is the central stack, but it is accompanied by Anchor To TopBottom and Menu ToAnchor. Now, if I'd had these stacks three days ago, I'd have known exactly where to utilise them. As it is, I settled for a more complicated option.
SmoothScroll itself is a very simple stack. Drop it on your page and set an Anchor Name – a unique ID (you'll have more than one on your page – right?). Then all you need to do is add a link '#[Anchor Name]' to a text, image, or button. As simple as that. When the link is clicked, your page will smoothly scroll to where SmoothScroll is positioned.
Now it's difficult to make a screenshot of a smoothly scrolling webpage – just believe me – it works perfectly! I spent a couple of hours testing the various possibilities.
So what are the other two stacks?
Anchor To TopBottom is an anchor stack that can be placed at the top and/or bottom of a page. It has just two settings Set Anchor (top/bottom) and an ID. Once again, a link with '#[ID]' will send you to whichever position you have defined.
Menu ToAnchor is slightly more complicated and I needed Jeroen's demo project to get my head around it. But then, I'm thick sometimes.
Let's say you have a single page website and you want the menu bar to display the SmoothScroll sections on your page.
Define the sections using SmoothScroll and then drop Menu ToAnchor onto your page. Now add an Offsite Page for each of the sections to your project, give the pages the same name as your sections ID (just so that they are easily identifiable, then simply set '#' as the URL and activate Use Redirect Page.
Menu ToAnchor already displays a link – give this link the same Anchor Name as your first section, in the stack's settings and then go to Set Link and link to your Offsite Page.
You can now click the + button to add a child stack and repeat the process for as many SmoothScroll sections as you have on your page.
The result – your menu bar is now populated with the SmoothScroll sections on your page! When you click a menu entry, your page will smoothly scroll down (up, if you have a sticky menu) to the appropriate section.
You can, of course, combine all three linking methods as displayed in the screenshot above. I.E. in the menu bar, you'll see the chapter names then, underneath the chapters, you'll see links to each of the other chapters, plus links to the top and bottom of the page.
At first glance, SmoothScroll would seem to be a simple stack, but lot of thought has gone into it and I can highly recommend it.
Why do I say flexible? Because ScrollShow has a number of options to display/position the stack – we'll get to that shortly; you get to decide exactly when it is displayed and you can drop almost anything into it that you want.
Example: You want to display a CTA when your visitor has scrolled 500px down the page. With a teaser and a button to link to a special offer. Or you want to display a menu bar at the bottom of the page (DeFliGra's MenuList is ideal for this) when your TopBar has been scrolled out of view – and have the menu disappear again, when the page is scrolled back up.
The CTA above is set to display once the page is scrolled down 400px, but to disappear again when the page has been scrolled down a further 400px. It can be clicked away and won't appear again until the page is refreshed. No page content is permanently hidden from view.
Action. The options are Show, or Hide.
Show/Hide… The options are When Scrolling Down At Least… When Scrolling Down Between… and Always.
Scroll Position displays the pixel values for the above options.
When Scrolling Up gives the options Do Nothing, Hide When Shown and Show When Hidden.
Transition Speed. Can be set between 0 and 1000 milliseconds.
Position. Allows nine different positions on the page – combinations of top, bottom, left, right, or centre.
Distance From. Pixel distance from the edge of the page.
Width. Popup width in percent. It is also possible to set both a Minimum and a Maximum width in px.
Custom Font Size. Font Family has three options – Theme Default, Web Safe Font, or Custom.
Custom Text Colour. Custom Link Colour. Custom Link Underlining. Custom Heading Size. Custom Heading Colour.
There are further options to activate a Close Button, three options for the Close Icon, Icon Size and Icon Colours for Static, Hover and Active.
The Icon Position can be set to the Left, or The Right of the open Popup.
You can look forward to seeing ScrollShow on this page in the near future!
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.
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