Product Finder Builder: Landing Page
In this article, you will learn how to customize your Product Finder’s Landing Page.
To begin, navigate to the Flow Tab and click on the Landing Page. Alternatively, click on any question of the QA flow and then select the Landing Page from the dropdown shown in the screenshot below.
You will have the option to make changes to the Top Bar, or the Content Area.
Top Bar
To edit the Top Bar, expand the Top Bar section as shown in the screenshot below, and choose between the Settings or Styling options.
Settings Section
In the Settings section the following options are available:
Show Top bar: Choose whether you’d like to display a top bar on the landing page or not
Show close button: Choose whether you’d like to show a Close button in the top bar
Show back button: Choose whether you’d like to show a Back button in the top bar
Show restart button: Choose whether you’d like to show a Restart button in the top bar
Styling Section
In the Styling section you can customize the following:
Top Bar (Background): Other than selecting a solid color, you can also use the slider to adjust how opaque or transparent the color will appear. If you slide all the way to the left, the elements that use the color will become completely transparent, as shown in the screenshot below.
Top Bar (Icons + Text): The color of the buttons displayed on the top bar (close, back, reset).
Progress Bar Empty: The color of the progress bar’s background.
Progress Bar Fill: The color that fills the progress bar.
Keep in mind that if you add a background image to the landing page (as explained below), the top bar will be transparent by default.
Content Area
To edit the Content of the Landing Page, expand the Content Area section as shown in the screenshot below, and choose between the Content or Styling options.
Content Section
The following options are available under the Content section:
Title: Customize the title shown on the landing page.
Subtitle: Customize the text underneath the title.
Button: Customize the text of the Start button.
Styling Section
The following options are available under the Styling section:
Background Image: Add a background image to the landing page.
Background: Change the background color of the landing page. This can only be applied if no background image has been selected. If you add a background image to the global theme settings (see the Theme Configuration article for more information), or use the background image field in the Content section no background color will show.
Text: Change the font color of the landing page.
Primary Button: Change the background color of the Start button.
Primary Button Text: Change the font color of the Start button.
Custom CSS: Here you can add any CSS snippets you’d like to customize the page further. Any CSS snippets you add will only affect the Landing Page.
To save any changes made in the Styling section, you can click on the Save button at the top of the page. Alternatively, you can also choose to apply the same changes to every question of your Product Finder by clicking on Set Landing Page Global Style. If you’d like to revert back to the previous colors, click on Reset to Global Style.
Last updated