Step — One Little Designer

Step Stack


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.

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.



  • Maximum Width – Sets the maximum width of the entire stack
  • Minimum Height – Set minimum height
  • Radius –Corner radius
  • Mobile Point – Breakpoint.

Note: the sidebar can be hidden and toggled by clicking the clipboard icon.

SETTINGS [cont.]


  • 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


  • 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.

Rob Hall

Rob Hall is founder of RapidWeaver Ninja and a freelance webdesigner. He studied Art and Design in Birmingham, England, and after many years in the pre-press industry, built up his own consultancy business in Germany. In 2011 he relocated to Thailand where he now ninjas by design.