Appearance

How to configure the landing page of the borrower portal.

Overview of Landing Page Appearance

The standard borrower portal includes a customizable landing page that allows users to better showcase their brand identity and key business information.

  • Reflect your brand by incorporating your brand colors and logos into the portal.
  • Add interactive elements, such as buttons, to direct borrowers to the appropriate pages.

Branding

DigiFi offers the ability to customize the appearance of your borrower portal by incorporating your company colors and logos through the Branding section. These customizations will also be reflected in emails sent to borrowers and intermediaries.


Landing Page Elements

DigiFi provides the ability to customize and build the landing page using page elements, similar to those used for other portal pages.


How To Add Elements

To add an element to a page:

  • Click on the "Add First Element" button or click on the "+" button located between the elements.
  • Select an element from the dropdown list.
  • Hover over the upper-right corner of the element.
  • Click on the pen icon to edit the element's configurations.

Page Elements

Elements are the fundamental components of the landing page. Below is a description of each element available in the landing page setup.

ElementDescription
Header TextLets you incorporate the main title of the landing page to guide borrowers through their next action.
Sub-Header TextLets you incorporate the secondary title of the landing page on the portal to provide borrowers with additional details.
Body TextLets you include the main content or provide information for borrowers on the landing page.
ButtonLets you include a button on the landing page for applying for a loan, signing in, signing up, or performing other required actions.
ImageLets you incorporate images on the portal to visually represent your company or loan product.
Page DividerLets you incorporate page dividers on the portal, which help separate elements and create a more cohesive layout.
Text ColumnsLets you present additional information in the form of text columns, either bulleted or non-bulleted.
Text + ButtonLets you include a button with accompanying text in a block that calls for action.

Header Text

The header text element can both emphasize the page title to the borrower and attract the borrower's attention towards specific information at the top of the landing page.

Headers include the following configurations:

  • Text Alignment (Left, Center, Right), which lets you choose the placement of the text.
  • Header Text, which represents the text in the header.

Sub-Header Text

The sub-header text element can help you organize content into sections and subsections, as well as focus on a specific topic.

Sub-headers include the following configurations:

  • Text Alignment (Left, Center, Right), which lets you choose the placement of the text.
  • Sub-Header Text, which represents the text in the sub-header.

Body Text

The main body text provides essential information or detailed instructions for the borrower on the landing page.

The body includes the following configurations:

  • Text Alignment (Left, Center, Right), which lets you choose the placement of the text.
  • Body Text, which represents the text in the body.

Button

The button helps borrowers perform various actions, such as applying for a loan, signing in, signing up, or completing other required actions.

The button includes the following configurations:

  • Button Type (Primary, Secondary), which defines the visual style of the button on the landing page.
  • Button Text, which represents text within the button.
  • Button Alignment (Left, Center, Right), which lets you choose the placement of the button.
  • Button URL (Apply Now, Sign In, Create Account, Custom), which allows you to define where the borrower will be redirected after clicking the button.
    • Custom URL, if selected, allows you to specify the URL to which the borrower will be redirected.

Image

The images help you to incorporate additional branding elements, making it not unique visually, but also tailored to suit your specific business and loan product.

You can specify the image you would like to add and its alignment.


Page Divider

The page divider helps you organize content into distinct sections by creating visual breaks that separate different elements.

The page divider includes the following configurations:

  • Divider Length, which lets you select the length of the page divider.
  • Divider Alignment, which lets you choose the placement of the page divider.

Text Columns

The Text Columns are customizable fields where users can input and display textual information related to loans, borrowers, or other relevant data. The maximum number of text columns allowed is 5.

The text columns include the following configurations:

  • Bullet Type, which allows you to select the type of bullet (or no bullet) to display with text columns.
  • Header, which is the main title or heading of the column.
  • Body, which is the main content or paragraph of the column.

Text + Button

The Text + Button element consists of action-oriented text paired with a button that executes the action. For example, the text might say "Click the button to start your application," and clicking the button initiates the application process.

The text + button include the following configurations:

  • Header, which is the main title or heading of the element.
  • Body, which is the main content or paragraph of the element.
  • Button Type (Primary, Secondary), which defines the visual style of the button on the element.
  • Button Text, which represents text within the button.
  • Button URL (Apply Now, Sign In, Create Account, Custom), which allows you to define where the borrower will be redirected after clicking the button.
    • Custom URL, if selected, allows you to specify the URL to which the borrower will be redirected.

Optionally, you can enable a background gradient using your branding colors to make the element more visually appealing to borrowers.