COMPONENTS

BUILDING A NEW PAGE

The Post-Quiz page is the last page in your funnel and comes after the Lead Capture page or, if you skip the Lead Capture page, the internal Quiz Results page. 

To your participants, the Post-Quiz page comes after the Lead Capture page, if you have one, or your Questions, if you chose to skip the Lead Capture page.

When you start to build a new Post-Quiz Page, you will be prompted to select either an empty layout or predefined layouts for the page. Regardless of the option you select, 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 Post-Quiz page. Preset layouts make the task of creating a Post-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 Post-Quiz Pages on your own without using these preset layouts as a guide. Preset layouts are discussed in more detail near the end of this article.

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

LAYOUT ORGANIZATION

These components are used to organize your Post-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 Post-Quiz Page. When designing your Post-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 Post-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 Post-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 Post-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 Post-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.

BUTTON

The Button component allows you to insert navigation and/or call to action buttons into the Post-Quiz Page. To use the component, drag and drop a button onto the page. To resize a 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 Post-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. See our article on Adding a Video for more information.

IMAGE

The Image component allows inserting images within the Post-Quiz page. To use the component, drag and drop an image component onto the Post-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 Post-Quiz Page. To use the component, drag and drop the component onto the Post-Quiz Page. The deadline date for the timer is set in Properties, at the top of that section. For more information, see our article on Setting a Countdown Timer.

Browse Preset Layouts

When you select a layout, instead of a blank canvas, the Post-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.

To use a preset layout in your Post-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 Post-Quiz Page looks, you can delete the components already on the page by clicking the button with the trash icon on the bottom right of the Components sidebar.

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