Designing Pages

Learn about the page design

In Zotlo, pages are created and organized using "elements" and "sections." Elements are used to customize the content displayed on pages. Elements include various elements such as text fields, buttons, images and special question types used in quizs. Each element can be customized according to the purpose and content of the page, resulting in a more effective and user-friendly experience. Sections are used to group multiple elements or content.

Section Types

The section types available in Zotlo are as follows.

Header

This section type is usually used to add the logo of your site and consists of the image element. By clicking on the edit icon in the upper left corner of the section, you can make design changes via the drop-down menu. In the "Style" tab you can adjust the position of the uploaded image and in the "Design" tab you can adjust the background and spacing settings in detail.

Quiz Header

This section is used to track the progress of your site when answering survey questions and consists of the element that shows the survey progress. You can make design changes with the edit icon in the top left corner, manage image placement via the "Style" tab, background and spacing settings via the "Design" tab.

Site Body

The site body section is the main content of the site and is usually composed of text, button and image elements. In this section, you can choose between options such as displaying no images, images positioned on different sides, or user reviews.

Footer

A footer is a section of text-only elements that usually complements the main content of your site.

Adding Sections and Changing Designs

Each page consists of header and body sections that may vary according to the page content. When you want to add a new section to the page, you can click on the "Add Section" button among the existing sections and select the one you need from the section list. In this way, page layout and content can be easily customized.

After adding sections, you can make design changes through the drop-down menu that opens after clicking on the edit icon in the upper left corner of the section. In this menu, you can choose from the supported style preferences for the section via the "Style" tab, and manage the background and spacing settings in detail via the "Design" tab. You can also see and manage the elements that make up the section via the "Elements" tab.

Element Types

Text Element

To customize the appearance of the text element, you can easily change design features such as font type, font size, font color, etc. by clicking on the edit icon on the element. You can also add a link to the text element. By clicking on the link icon on the element, you can enter the desired link address from the drop-down menu and save it.

Image Element

To customize the appearance of the image element, you can click on the edit icon on the element, upload the image you want from the drop-down menu and adjust its parameters such as size, opacity, and radius.

Button Element

To customize the appearance of the button element, you can make design changes related to the button text in the "Text" tab in the drop-down menu that opens after clicking on the edit icon on the element, and you can change characteristics such as button color and button lines with the "Design" tab. In addition, you can add a link to the button or redirect to a page in the flow from the drop-down menu that opens after clicking on the link icon on the element.

Multiple Choice Question Element

With the multiple choice question element, you can manage the settings for the questions you add to the quiz. You can make design changes via the "Text" and "Design" tabs in the drop-down menu that opens when you click on the edit icon on this element. With the "Question" tab, you can set whether the question will be mandatory or whether it will be multiple choice. With the "Options" tab, you can add different options, enter the text for each option and a unique ID.

Image Chooser Question Element

With the visual choice question element, you can manage the settings for the questions you add to the quiz. You can make design changes for the appearance and texts with the "Text" and "Design" tabs in the menu that opens by clicking the edit icon on this element. With the "Question" tab, you can set whether the question will be mandatory or not, whether it will be multiple choice or not, or set the image dimensions. With the "Options" tab, you can add different choices and upload the text and image for each choice.

Single Row Text Question Element

With the "Question" tab in the settings of this element, you can set whether the question will be mandatory and the minimum-maximum characters that can be entered for the answer. With the "Label" tab, you can make design changes regarding the header on the input.

Numeric Entry Element

In the settings of this element, you can set default values via the "Question" tab and set whether to accept decimal numbers. With the "Label" tab you can change the design of the header that appears above the input field. With the "Info Tag" tab you can configure the additional information field that will be shown when the user gives answers.

Location Picker Element

In the settings of this element, you can select the location type (city or country only) and make custom design changes for the question header.

Date Entry Element

In the settings of this element, you can choose the appearance of the date selection field (calendar, list or slider), set a specific date range and make custom design changes for the question header.

Time Entry Element

In the settings of this element, you can determine the appearance of the time selection field, define a specific time range, use the 12-hour format, and make custom design changes for the question header.

File Upload Question Element

In the settings of this element, you can specify the type of file to accept (video or image) and then configure the file extensions that can be uploaded, the maximum number of uploads and file size.

Height Entry Element

In the height question element settings, the "Question" tab allows you to set the minimum range of values that can be entered and to enable the imperial measuring system. With the "Info Tag" tab you can configure the additional information field that will be displayed when the user gives answers.

Weight Entry Element

In the settings of the weight question element, you can set the minimum range of values that can be entered in the "Question" tab and enable the imperial measuring system. You can also link this question to a different height and weight question to calculate users' BMI (Body Mass Index) or recommended weight. With the "Info Tag" tab you can configure the additional information field that will be displayed when the user gives answers.

Quiz Ending Element

With this element, which is mandatory to include at the end of the survey, you can manage the number of steps on the page and customize the text. Under the "Design" tab you can set the waiting time to be displayed on the page and change the completion icon.

Registration Form Element

You can manage color, text and other design options for the form field and header with the "Design" and "Label" tabs in the registration form element menu. With the "Social Login" tab, you can add buttons for social login methods.

In order to use social login methods, the registration type must be set to email and the relevant integrations must be completed. For more detailed information about integrations, you can review the following guide:

pageAdding Social Login

Payment Form Element

With the "Design" tab in the payment element menu, you can edit the appearance of the payment form and design features such as background color or input frames. With the "Label" tab, you can configure the appearance settings of the field headers, texts and images in the form.

Plan Selection Element

With the "Design" tab in the settings menu of this element, you can manage settings such as the background of the plan list to be used on the Paywall page, the design of the list fields and the price card preferences. With the "Text" tab, you can adjust the design changes of the texts in the list. With the "Plan" tab, you can determine the number of packages to be listed and make adjustments by entering texts for each package.

With the "Ribbon" tab, you can configure the additional text fields you want to add to the listed plans. With the "Highlights" tab, you can carry out the necessary configurations to highlight a package.

Payment Result Element

In the settings menu of this element, you can edit design features such as background color or background transparency with the "Design" tab. With "Access Links" you can enter download links for your applications. "Icons" tab allows you to manage successful payment and warning icons.