[3.0] Post-Quiz Page Builder: Components

[3.0] Post-Quiz Page Builder: Components


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.






    • Related Articles

    • [3.0] Lead Capture Page Builder: Components

      COMPONENTS BUILDING A NEW LEAD CAPTURE PAGE The Lead Capture page is where you collect essential contact information from your participants. When you start to build a new Lead Capture page, you will be prompted to select either an empty layout or ...
    • [3.0] Building a Post-Quiz Page

      Post-Quiz pages come after the Lead Capture Page(s) - and is the last section in your funnel. The Post-Quiz page can display the quiz results or contain a video with a message about next steps. Post-Quiz pages can also be a page pointing to an ...
    • [3.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. ...
    • [3.0] Building A Pre-Quiz Page

      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 ...
    • [3.0] Change Pre-Quiz Page Background

      STEP # 1 From the Canvas, click the Pre-Quiz Page to edit it. Make sure you click the one on the Canvas page and not the one under the Components menu. Click Builder - this action will automatically open the Builder menu with three sections: STEP # 2 ...