Understand Portal Pages
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version.
What Does This Page Cover?
Learn about the Sign Up, Sign In, and Reset Password pages of your portal. They act as the input user interface that allow your portal users to access your application.
Availability
- Portals can be accessed only in the paid plans of Creator. They are provided as add-ons in some plans while are included by default in others.
- Only the super admin and admins can access the portals.
Overview
Portal pages are organized page structures that house a portal through which you can sign up for a service, login, reset credentials, etc. They also display necessary information about the portal and provide input fields for the end-users to enter data such as their credentials. Mostly, these pages try to resonate with the template of their online service's purpose in both in displaying information and in design.
Portal Pages in Creator
In Creator, a
portal
has three assets that are essential to your
portal user
's lifecycle — the sign in, sign up, and reset password pages. Each portal page comprises of different rows and columns that include a portal form, relevant headings, description texts, background images, etc.
Zoho Creator offers a default and robust design for each of these pages, which you can further customize using the portal page designer. Check out the comprehensive steps for
portal page customization
to know more about the tailor-made properties it offers to design the pages.
See How it Works
Use Case
Say you've built a
Zylker Automobile Resale
application that resells pre-loved luxury cars. You've added a portal for the verified sellers who are willing to quote and put their cars on sale in the platform. You'll have separate portal pages for them to sign up to your service, for consecutive logins, and a page if they want to reset their password. Design these pages in a way that resonates with your business's goal. Using the portal page designer, set a background color that resonates with your existing application's design and add an image that pictographically explains the purpose of the page. You can also customize the login portal page to match the brand's theme by choosing color and text styles of the portal form, the input fields, and the buttons.
Navigation Guide
You can find
Portals
under the
DEPLOY
section on the left-side pane once you
sign in
to your Creator account. After choosing the necessary portal previously created by you, the
Page Customization
tab can be chosen. From here, you can customize your portal pages.
Types of Portal Pages
Every portal created within the Zoho Creator application has three portal pages. They have been discussed in detail below:
|
Portal Page Type
|
Description
|
|
Sign Up
|
The page where portal users sign up for your Creator application's portal. In case your portal is private or restricted, your approval is required to complete the signup process.
|
|
Sign In
|
The page where the portal users will have to enter their credentials to access your Creator application's portal.
|
|
Reset Password
|
The page where the portal users can reset their password for accessing your Creator application's portal.
|
Portal Page Customization
Zoho Creator offers an intuitive designer for customizing the design of your portal's sign in, sign up, and reset password pages. This sophisticated designer is common for all three portal pages and allows you to customize all their components.
Playing around with the designer helps you achieve maximum resemblance between your portal page and your application. Each portal page has a set of general properties, and properties specific to the components that the page holds. The three components (portal backdrop,
Portal Column, and
Portal Form) which are discussed in detail below.
Components of a Portal Page
A portal page has three components that contribute to the user interface design in different ways. They have properties of their own which can be utilized to design a very distinct user interface layout. The components are:
- Portal Backdrop - You can customize the portal backdrop by editing the page width, padding, background color, background image, and by adding more elements (headings, tables, spacers, etc)
-
Portal Column
- The portal column holds the portal form within it and has excess area that can be customized to suit your needs. You can choose to edit the alignment, spacing, background color, and background image.
-
Portal Form
- The portal form contains the input fields for the credentials. Every element inside the portal form can be customized such as the background color, the font of the buttons and field names, the color of the buttons, the color of the links when hovered over, etc.
Portal Backdrop
The properties specific to the portal backdrop helps you design the prefixed and custom elements of the portal page. These properties appear by default when a portal page is edited.
|
Property
|
Icon
|
Description
|
|
Page Width
|
|
Note :
Default
value will be set to 100% capacity.
Note
: The pixel range within which you can adjust the page width is 790-1500.
|
|
Padding
|
|
The space between the content and the border of the portal page can be customized in pixels.
Note
: The pixel range within which you can adjust the padding is 0-100.
|
|
Background Color
|
|
The background color of the portal page. The available options to choose from are:
|
|
Background Image
|
|
An image that fills and makes the background of your portal page. This can be uploaded using
File manager
or a
Web URL.
|
|
Elements
|
|
The elements column situated on the left side of the designer features predesigned elements. You can add them to your portal page's backdrop:
The builder offers element-specific toolbars that allow you to customize their display value, appearance, insert
system variables, and much more.
|
|
Undo & Redo
|
|
Note
:
|
Portal Column
The properties specific to the portal column that helps you customize the panel that encapsulates the portal form. They can be accessed by clicking on the portal column.
|
Property
|
Icon
|
Description
|
|
Alignment
|
|
The alignment of the portal form in the portal column. the available options are:
|
|
Spacing
|
|
The spacing between the margins of a portal column and the portal form that is situated inside it. The available options are:
Note
: The pixel range between which you can set the spacing is 0-1400.
|
|
Background Color
|
|
It is the color of the portal column. The available options to choose from are:
|
|
Background Image
|
|
An image that fills and makes the background of your portal page. This can be uploaded using
File manager
or a
Web URL.
|
Portal Form
The
Form Customization
properties specific to the portal form helps you design and customize the portal form fully. They can be accessed by clicking Form Customization
or by directly selecting the portal form.
|
Property
|
Description
|
|
Background
|
The background color of the portal form.
|
|
Border
|
Note: The pixel range within which you can customize the border width is 0-20.
|
|
Shadow
|
|
|
Typography
|
|
|
Field Input
|
Note
: These properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the
Default
and
Hover
tabs.
|
|
Button
|
Note
: The properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the
Default
and
Hover
tabs.
|
|
Link
|
Default Text Color
- The color of the text that is displayed on links placed within the portal form.
Underline
- The link text can be displayed as underlined or plain.
Note
: The properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the
Default
and
Hover
tabs.
|
Points to Note
-
You can make row and column-wise customizations to every element present in the portal page. The available properties are:
-
Row - Spacing, Fill Color, Edit HTML, Border
-
Column - Fill Color, Border
-
The changes you make in the designer are automatically saved.
-
You can set the width of all the columns in the portal page by dragging its borders.
Related Topics
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Still can't find what you're looking for?
Write to us: support@zohoforms.com
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Bigin?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
Related Articles
Understand portal
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. A Portal is a great way for an organization to allow its external users to log in to their dedicated internal system and ...Customize Portal Pages
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn to customize portal pages using a sophisticated designer that allows you to tailor every ...Understand portal user permissions
A permission set is a group of rules that govern the accessibility of the portal by the user. Permissions can be configured in different ways by the admin based on the scope of work for user within the portal. This enables the admin to assign ...Understand permissions in portal
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. A permission set is a group of rules that govern the accessibility of the portal by the portal user. Permissions can be ...Understand customer permission in portal
The customer permission is the predefined permission available in Zoho Creator. This permission is helpful when choosing a permission for the customer of the organization. Customer implies an individual who is not a part of the admin's organization ...