[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] Adding Images to Questions

      This is 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 from based on the questions.  STEP # 1  ...
    • [2.0] Adding Images to Answer Choices

      This is how you can add images to your answer choices when adding Quiz Questions to a funnel.  Note: Only radial and check questions support images - you can’t add images to short and long input questions. STEP # 1  On the Canvas, drag either a ...
    • [2.0] Adding Images to Pre-Quiz Pages

      This is how you can add images to Pre-Quiz Pages when creating a funnel.  STEP # 1  On the Canvas, drag a Pre-Quiz Page component to your funnel. Note: We recommend adding all components and setting up the framework of your funnel flow prior to ...
    • [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. ...
    • [2.0] Adding Images to a Post-Quiz Page

      STEP # 1  On the Canvas, drag a Post-Quiz Page 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. ...