EverWeb Widgets

Responsive Timeline

Step-By-Step

The responsive timeline widget is used here to create step by step instructions. It uses a pure CSS solution which makes it more suitable for responsive pages than one using javascript.
The widget uses the EverWeb widget API to create the items so up to 48 can be added. The label, marker and timeline appear automatically when an item is added.
Label
On wide screens, the label is located to the left of the timeline. On the narrower screens of tablets in portrait mode and phones, the label switches to the right of the line and all the other items move downward to accomodate it.
Timelime
The timeline and its markers have options to change the colors. The marker has a hover animation when viewed on computers.
The time line can be included or excluded from the last item in the list.
Content
Each item can have a title, an image with alt text, a contrasting field for date, time etc, a text block and a link.
The image, time and link options need to be turned on globally if required.
The images are centered and can have less than 100% width if required. The width becomes 100% when viewed on phones.
Note that this timeline can be used without images if required.
CTA Links
Although inks are turned on globally, they also need to be turned on individually. That way, not every item needs to have a link as can be seen in this demo.
The links can be configured with a relative or absolute URL and open in a new window if required.

  • Step [1]

    Measure

    How To MeasureHow To Measure

    Stretch the 6th string out to the fifth string post, pinch between the thumb and forefinger and bend it to mark the cut point.

  • Step [2]

    Cut

    Cutting Strings

    Use a good quality pair of wire cutters. They can also be use to remove the bridge pins by sliding them under the pin's ball and levering upwards.

  • Step [3]

    Thread

    Stretching & Threading

    Run the string across all four fingers, pinch it between thumb and forefinger and thread it through the hole. Allow it to pass through about 1/4".

  • Step [4]

    Wind

    Winding Down

    Turning the tuner with a hand or powered winder makes things go faster. Wind the string from the top of the post downwards.

  • Step [5]

    It's A Wrap

    Just Right

    Measuring the string length to the next post gives just the right amount to wrap it without it slipping or overloading the post.

  • Step [6]

    Next One …

    Step [6]More About Measuring

    All three strings on the bass side can be measured as described above. The thinner strings on the treble sided need a little more length - add an amount equal to half the distance between two posts.

    Video

© EverWeb Widgets -