Having clickable images is not yet an available feature in bucket.io, but there is a workaround that applies to Pre-Quiz Pages and to Post-Quiz Pages.
Step #1: Add a column and a link
- From the left-hand side menu, drag and drop a One Column component
- Then drag and drop the Link component inside the column
Step #2: Expand the Text Link box
- Click to select the text link and find the Size menu from the left-hand menu bar. For starters, change the Width to 100%, the Height to 400px, and the Max Width to 400px as well. This is just to make sure that the effect of the clickable link expands to the entire box or container, but we’ll adjust it to the proper size later.
- Also, locate the Alignment Menu, and from the Display drop-down menu, change it to Line and then back to Block, this is due to a bug with the Display option that needs to be enhanced.
Step #3: Set a background image
- Scroll down to the Background Image menu and add what’s going to be the clickable image, and adjust properties as illustrated:
- Background repeat: no-repeat
- Background position: center- center
- Background size: cover
This is to make sure the background image will occupy the entire container no matter how big or small it is.
- Next, select the Row where the link is contained. *Please note, it is not the link box that we are selecting now, it is actually the outer box or container. Go to Alignment from the left-hand side and set it to Flex, then scroll down to the Flex menu and adjust the values as displayed:
- Justify content: center
- Align items: center
- Align content: center
This will push the Link element from the left corner and will position it at the very center.
Step #4: Adjust the image size
- Click to select the Text link box again and scroll back to the Size menu, adjust the values of the Height and Max width as needed, as a pro-tip, here are some maximum measures that you can use for the tablet and mobile view, meaning that if you use values outside of these ranges you will not notice any variation in the size of the image:
- Max width tablet: from 0px to 800 px
- Max width mobile: from 0px to 350 px
- Double click where it says Text Link and erases that text
Step #5: Add your redirect link
- Finally, add a link