Clicky

Step by Step for RapidWeaver
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.
blog comments powered by Disqus
  • 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.