COMPONENTS

BUILDING A NEW PAGE

The Pre-Quiz page is similar to the Welcome page in bucket.io 1.0, which is the first thing your audience sees when they enter the funnel link on their browser.

When you start to build a new Pre-Quiz Page, you are taken to an empty page, to which you can then drag and drop components from the Components sidebar on to the Builder. 

An alternative is to use a preset layout for your pre-quiz page. Preset layouts make the task of creating a pre-quiz page easier and will save you time. Once you are more familiar with the process of creating pages in bucket.io 2.0, you should be able to develop your Pre-Quiz Pages on your own without using them as a guide. Preset layouts are discussed in more detail near the end of this article.

Note: Many of the Pre-Quiz Page Builder components are customizable through the Properties tab. For more information, see the article Pre-Quiz Page Builder: Properties.

LAYOUT ORGANIZATION

These components are used to organize your pre-quiz page’s layouts. There are four (4) types of layout organization components, namely:

CONTAINER

In web design, containers are used to style some of the important elements on a web page, e.g. headers, footers, and margins. The same principle applies to the container component in a Pre-Quiz Page. When designing your Pre-Quiz Page, you may need to add a container to apply common styling to other components on the page. 

To use a container in your Pre-Quiz Page, drag the Container component onto the page body. 

Initially confined to the top of the page body, the container includes an inner content section which is where you place the other components you want to use in the page body. To increase the size of the container so that it covers a wider area, click the container, then drag the handlebar at the bottom and resize it accordingly. 

The content section follows the container - if you drag the container until it reaches the bottom of the page body, the content section goes along with it, meaning you can use that area to display content you want to appear on the Pre-Quiz Page. You can use any of the other components, including the other layout organization components, within the Content section.

ONE COLUMN

With this component, the page body is displayed as a single column. Drag and drop it into the area where you want the column to appear.

2 COLUMNS

With this component, the page body or part of it is divided into two (2) equal columns. To use this component, drag and drop it into the area where you want the columns to appear. To resize the columns, click any of the columns, then drag the handlebar that appears on the right until you reach the desired size.

3 COLUMNS

With this component, the page body or part of it is divided into three (3) equal columns. To use this component, drag and drop it into the area where you want the columns to appear. To resize the columns, click any of the columns, then drag the handlebar that appears on the right until you reach the desired size.

BASIC COMPONENTS

The basic components are used to display content on the Pre-Quiz Page. 

TEXT

The Text component allows text to be displayed on the page. To use the component, drag and drop onto the page, then double-click it and enter your desired text. The component displays several formatting tools at the top, allowing text to be resized, bolded, italicized, underlined, etc. Text can also be aligned to the left, center, or right. You can also select a font to be used for the text.

LINK

With the Link component, you can add links to the pre-quiz page. To use the component, drag and drop a Link component onto the page, then enter the link you want to use with the component in the Properties, located at the top of that section.

QUIZ BUTTON

The Quiz Button component allows you to insert navigation and/or call to action buttons into the Pre-Quiz Page. To use the component, drag and drop a quiz button into the page. To resize a quiz button, select it, then drag any of the handlebars that appear on the sides and in the corner.

VIDEO

The Video component allows inserting videos within the Pre-Quiz Page. To use the component, drag and drop the video component onto the page. To resize the video window, select it, then drag any of the handlebars that appear on the sides and in the corner. A video ID is required from either YouTube or Vimeo, and can be entered under the Properties section, at the top.

IMAGE

The Image component allows inserting images within the pre-quiz page. To use the component, drag and drop an image component onto the pre-quiz page. Here you will be asked to either upload an image from your desktop, or select one from the ones you have already uploaded to your bucket account. To resize the image component, select it, then drag any of the handlebars that appear on the sides and in the corner. 

ADVANCED COMPONENTS

COUNTDOWN

The Countdown component allows you to add a countdown timer on the Pre-Quiz Page. To use the component, drag and drop the component onto the Pre-Quiz Page. The deadline date for the timer is set in Properties, as the top of that section. 

Browse Preset Layouts

When you select a layout, instead of a blank canvas, the Pre-Quiz Page is laid out in the selected format. You are then free to rearrange and delete components, drag and drop other components from the list on the left, and modify text content.

Currently, there’s only a single available preset layout but bucket.io hopes to add more layouts soon. 

To use a preset layout in your Pre-Quiz page, click the Browse Preset Layouts button on the bottom of the Components sidebar, then select from the list of available layouts.

Regardless of whether you started from scratch using an empty page or you’re using a preset layout, if you’re not happy with how your Pre-Quiz Page looks, you can delete the components already on the page by clicking the button with the trash icon on the bottom right.

You can also delete individual components on the Pre-Quiz Page by selecting it, then clicking the Delete button.