The Pre-Quiz page in bucket.io 2.0 is the landing page of your funnel, similar to the Welcome Page in bucket.io 1.0. Thus, building a pre-quiz page is the first step in creating a funnel. 

If you’re starting the funnel from a template, the Pre-Quiz page is already laid out with all the components available for use with the page. You can then simply modify the Pre-Quiz page by putting in your own images, rearranging the components, and deleting those you don’t need. For more information, see Starting a Funnel from a Template.

If you’re starting the funnel from a template, you need to drag-and-drop and lay out components into the Pre-Quiz page one-by-one. You will use something similar to a WYSIWYG HTML editor when building a Pre-Quiz page for your funnel. For more information, see Starting a Funnel from Scratch. 

We’ll discuss how to build a pre-quiz page below. The principles discussed here apply to all Pre-Quiz pages whether started from scratch or a template. 

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. For more information on the different types of components that can be used in your funnels, see Canvas.

Step # 1

On the Canvas, click your funnel’s Pre-Quiz Page, then click either the Edit button that appears at the bottom of the component or Builder on the top-left.

Step # 2

The Builder is initially empty. Start building the Pre-Quiz page by dragging components from the Components section on the left and dropping it onto the Builder. For more information on the various components you can use for the Pre-Quiz page, see Pre-Quiz Builder: Components.

Step # 3

Here are some important things to consider when designing a Pre-Quiz Page:

• Some elements can be resized by clicking them, then dragging the handlebar/s that may appear at the top and bottom, and on both sides.
  
  
  

• When using a Container element, make sure to drop all other elements to be used within the Container inside the element’s Content section.
  
  
  
• You can use components together. For example, an Image component can be inserted within another column inside the Container element. 
  
  
  
• Once dropped on the page, some components can be customized through a menu that appears when the component is clicked.
  
  
  
• Some components can also be customized through the Properties tab. For more information, see Pre-Quiz Builder: Properties.
  
  
  
• If you make a mistake in laying out the components and a component needs to be deleted, click the component, then when the component menu appears, click the Delete icon. 
  

Note: When designing a Pre-Quiz page, changes you make to the page are automatically saved.