[2.0] Clickable Images

[2.0] Clickable Images



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

  1. From the left-hand side menu, drag and drop a One Column component 
  2. Then drag and drop the Link component inside the column


Step #2: Expand the Text Link box

  1. 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.
  2. 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

  1. Scroll down to the Background Image menu and add what’s going to be the clickable image, and adjust properties as illustrated:
  1. Background repeat: no-repeat
  2. Background position: center- center
  3. Background size: cover

This is to make sure the background image will occupy the entire container no matter how big or small it is.


  1. 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:
  1. Justify content: center
  2. Align items: center
  3. 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

  1. 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:
  1. Max width tablet: from 0px to 800 px 
  2. Max width mobile: from 0px to 350 px


  1. Double click where it says Text Link and erases that text


Step #5: Add your redirect link

  1. Finally, add a link





    • Related Articles

    • [2.0] Deleting Recent Images

      Looking for an option to delete images from your quiz gallery? Then this article is for you. IMPORTANT: Bucket only displays the last 50 images that were recently uploaded, anything older than that is automatically deleted by the system. Follow ...

    • [2.0] Images: Recommended Sizes

        Area MAX Recommended Pixels Recommended Size Meta data Meta data image 1280px x 720px 2 MB Pre-Quiz Page Background 1920px x 1080px 2 MB Testimonials 400px x 400px 2 MB Social Proof 200px x 200px 2 MB Bio or Bullets section 100px x 100px 2 MB Logos ...

    • [2.0] Adding Images to Questions

      This article aims to give a step-by-step on how to add images to Quiz Questions in your funnel.   Note: Questions refer to the items that quiz participants have to answer; in contrast, answers are the options that quiz participants need to select ...

    • [2.0] Adding Images to Answer Choices

      This article aims to give a step-by-step on how to add images to answer choices in your funnel.   Note: This is only applicable to answer choices of radio and checkbox questions.  STEP # 1  From the Canvas, select the Radio or Checkbox Question where ...

    • [2.0] Adding Images to Lead Capture Pages

      STEP # 1  On the Canvas, drag a Lead Capture component to your funnel. Note: We recommend adding all components and setting up the framework of your funnel flow prior to editing the design elements or details of each section under the Builder tab. ...