Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Step by Step for RapidWeaver

Guide your users, one step at a time. Step from 1LD allows you to create step-by-step sections that lead users to a solution for their problems. Want to show your visitors how to fix their bike? Do you need to explain how to download and install your software? Step is the ideal solution.

Step displays two panels, the left panel shows a menu; the main panel contains the numbered steps/instructions for your visitor to arrive at a solution. The Menu panel displays the steps necessary and gives an idea of how many steps remain to be completed. When your visitor has digested the first step, she/he can either click the 'Next' button, or click the next step in the menu.
A clipboard Symbol slides the menu panel out of sight when it's not needed. And Step is, of course, fully responsive – when viewed on a mobile device, the menu is hidden by default and simply activated by clicking the clipboard.

Step – One Little Designer
Once Step has been added to a Stacks page, you can get straight to work, the procedure is simple. Add a Title to your first step – it is automatically added to the menu panel. In the stack container, add the stacks that you need for your description and add your content. Just about any stack is acceptable, including contact forms.
Once you have the first Step completed, you can add further Step child stacks and then set about formatting the display.

Stack settings
General
Maximum Width – Sets the maximum width of the entire stack
Minimum Height – Set minimum height
Radius –Corner radius
Mobile Point – Breakpoint. Note: the sidebar hides and is be toggled by clicking the clipboard icon.

Sidebar
Sidebar Width – Sidebar width for desktop devices
Text Size – Font-size for the list item within the sidebar
Text Padding – Padding around the sidebar text
Sidebar Font –
Text colour – Initial & Active
Background – Colour, Double Gradient, Triple Gradient, Image
Steps
Padding – Padding around the inner step content.
Step Count – Text & Number – size
Count Text – Edit text content of the “STEP”
Title Size
Text Size – Default font-size for stack container
Nav Btn Padding – Padding of the “BACK” & “NEXT” buttons
Nav Btn Radius
Nav Btn Size – Font-size
Nav Btn Text – Text content of the navigation buttons
Nav Complete Text – Text for final step
Title, Text, Count FONTS
Count colours – Text & Number
Toggle colours – Initial & Active
Main Title – Colour
Content colours – Headers, Text, Links
Nav Btns – Text, Background
Nav background – Colour, Double Gradient, Triple Gradient, Image
Completed Step
Completed Icon – Size
Complete Title – Font-size
Complete Description – Font-size

Restart Icon & Button Sizes – Icon size, width, height
Icon colour – Colour of the checkmark icon.
Title & Description colours
Restart Button – Icon & Background
Background – Colour, Double Gradient, Triple Gradient, Image

The possibilities of Step are only restricted by your imagination. I can think of a couple of web designers that will immediately find a use for the stack.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Parallax effects in RapidWeaver

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight. In web design, we have come to understand parallax to be two objects on a page that scroll at different speeds. Usually a background and a foreground content.

Parallaxer from Shaking The Habitual is the second take on parallax effects in as many weeks and it adds a new dimension to the effect we've become used to. Not only can the background images scroll up the page, they can also scroll to the left or the right. And, because the background image is not defined as a CSS BG, it works on mobiles*. The fact that the image is a 'normal' image, also means that you can add Alt tags to improve your SEO results.

In its default state, Parallaxer adds an image to your page that scrolls slower than the rest of the page. You can set the scroll speed between 10 and 50. A stack container can be activated that allows you to add stacks to be inserted over the background image, either centered, or in one of the four corners.

Stack settings
Image – Warehoused, Local
Alt Text
Restrict Height?
Effect Scale – 10–50
Direction – Up, Left, Right
Add Content – Deactivated by default
Placement – Four corners or Centred

Until 20th June 2018 a discount of 20% can be had by using the code: sth-ninja-parallaxer.

*Tested on Android using Chrome and Firefox

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Panels for RapidWeaver

Panels is Weavium's latest contribution to the Stacks scene. Full page animated panels that expand, when clicked, to display whatever you care to drop inside.

When first inserted into a Stacks page, Panels displays a single panel 1000px wide. The panel contains an icon, a title and a stack container into which you can insert the expanded content. The panel may be configured to have a flat colour, gradient (via the Panels item settings) or an image. The Icon – from a choice of four icon fonts – may be replaced with an image.

By adding item child stacks, the panel is divided into two, three, four etc. panels which either have the max width you've set, or fill the container that they are in. When one of the Panels is hovered it expands, the icon gently bounces and a text e.g. 'Read More' slides up into the panel. When clicked, the panel expands to fill the full width of its container and displays the container stacks.Panels – WeaviumPanels – WeaviumStack settings
General
Max Width – px
Max Height – Vertical Mode, Horizontal Mode
Radius
Mobile Point – Breakpoint px

Section Panels
Icon BG Size – Initial, Active
Icon Size – Initial, Active
Icon Radius – Initial, Active
Title Size – Initial, Active
Title Spacing – Initial, Active
Title Weight
Content Width
Content Padding
Help Text
Help Text Size
Hover Stretch – Desktop, Mobile

Colours & Fonts
Title Font – 18 options plus Custom
Content Font – as above
Icon Colour – Icon, BG
Title [colour]
Help Text
Content – Header, Text, Links
Overlays

The item stack settings allow you to set the individual Icon or image plus a background image and allows the override of all colour settings.

Weavium's expanding stacks are amongst the best available. Panels is no exception and is a highly flexible way to display additional information within a confined space.

NOTE: Ion Icons have just been upgraded to version 4 with which Panels is not yet compatible. If you wish to use Ion Icons, I recommend you download the cheatsheet for version 2 which is 100% compatible.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
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.