Answer hover states

Owned by shelby.derks-wyatt
Last updated: Jul 11, 2023 by Graham Ralls (Unlicensed)
2 min read

What it is

preezie’s Selection Overlays allow users to easily identify which answers have been selected. Users are able to differentiate hovered states vs selected states through 2 seperate image uploads.

What it looks like

How to implement

Create your overlays

  1. Start by creating a 300x300px frame and fit your design within the frame, the frame will populate the space at 100% over the icon frame

    The Blue demonstrates the frames for a few possible selection designs with their front-end results on the right

  2. We recommend hover states at about 20% opacity of the selected colour for the right amount of transparency. No need to stress about getting it absolutely right while designing our overlays as we have the ability to change the opacity within our configurations.

  3. Export your designs as a png without a background

Import overlays to your preezie journeys

  1. Open Test Guide Widget

  2. Find and expand Selection and result indexes

  3. Tick Custom shape

     

  4. Expand Hover state and Selected state

  5. Expand Upload for each state

  6. Choose File. Once a file is chosen be sure to click the Upload button

    1. Underneath the upload there is the ability to adapt the;

      1. Scale of the overlay

      2. Opacity of the overlay

    2. Have a play around with them if you wish you make any adjustments

  7. Now you can hover and click on your journey! 🎉

Â