Customize portal pages | Zoho Creator Help

Customize Portal Pages

Notes 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 aspect of the portal page. You can design them to fit your online service's UI template and to speak your business's purpose.

Availability

  1. Portal pages are available only in the paid plans of Creator. They are provided as add-ons in some plans while are included by default in others.
  2. Only the super admin and admins can customize the portal pages.

Customizing Portal Pages

In Creator, we have four portal pages, namely, sign up page, sign in page, create password page and reset password page. They are individual page structures that let you to perform different portal functions and also help describe their purpose. Before customizing a portal page, make sure to check out everything you need to know about portal page customization.

Steps to Customize Portal Page

A portal page is made up of different elements put together, that can be customized. Further, each of the following portal page components can be customized with a set of distinct properties available specifically:
  1. Portal backdrop
  2. Portal Column
  3. Portal Form
Customize Portal Backdrop

1. Click Portal under Deploy on the left pane, after you sign in to your Creator account. 
2. Click on the necessary portal, assuming you've created it beforehand.
3. Navigate to the Page Customization tab. Hover over the required portal page and click Edit.
4. Customize the portal backdrop, according to your needs, using the following properties.
i) Click and drag a Heading (or any other element of your choice) from the Elements section and drop it where you want it to be placed. Enter a title for your portal page.

ii) Customize the element's properties by using the toolbar on the top. Change the font, add color to the text and background, hyperlink if necessary, etc.

iii) Add system variables to an element to mention specific details and provide the end-users with a personalized experience.

iv) Click on the tag attached to an element and click the bin icon that appears to delete the element.
5. Select the portal backdrop for the properties specific to the backdrop to be visible on the top.
i) Click on the Page Width ( ) icon. Select Custom and change the pixel value according to your necessity.
ii) Click on the Padding ( ) icon and change the pixel value according to your necessity.
iii) Click the fill icon( ) and choose a preset color. Click More Colors to choose from a color palette or to use RGB/HEX codes. This sets a background color of the portal backdrop.
iv) Click the image icon( ) to add and customize a background image for your portal page.

Notes
Note
  1. You can upload an image using : File manager or Web URL.
  2. Hover over the uploaded image in the background image dropdown to change or delete the picture.
6. Click the Undo( ) or Redo( ) button to go one step back or to repeat an undone step respectively.

Customize Portal Column

1. Click the portal column to access properties specific to it.
2. Customize the portal column according to your needs using these properties.
i) Click the alignment icon ( ) and choose if the portal form needs to be placed to the left, center, or to the right inside the portal column.
ii) Click on the Spacing icon( ) and enter values in pixels.This defines the space between the margins of the portal column and the portal form within on all four sides.
iii) Click the fill icon( ) and choose a preset color. Click More Colors to choose from a color palette or to use RGB / HEX codes. This sets a background color for the portal column.
iv) Click the image icon( ) to add and customize a background image for your portal page.
Notes
Note
  1. You can upload an image using : File manager or Web URL.
  2. Hover over the uploaded image in the background image dropdown to change or delete the picture.

6. Click Form Customization to access the properties specific to the portal form.
Alternately, you can also click on the portal form directly.
Notes
Note : Customizations specific to the portal form will be discussed in the next section.

Customize Portal Form

1. Click on the portal form to access the Form Customization pane that contains the properties specific to it.
Alternately, if you are already editing the portal column, click F orm Customization to access the Form Customization pane.
2. Click the fill icon ( ) under Background and choose a custom color to fill your portal form's background.
3.Click Border .
i) Click the fill icon( ) next to Color and choose a custom color to fill your portal form's background.for the portal form's border.
ii) Choose a style for the border.
iii) Customize the width of the border in pixels.
4. Click Shadow .
i) Click the Shadow Color icon and choose a custom color for the portal form's shadow.
ii) Enter a pixel value for X to determine the extent to which the shadow needs to spread horizontally.
iii) Enter a pixel value for Y to determine the extent to which the shadow needs to spread vertically.
iv) Enter a pixel value for Blur to determine the extent to which the shadow needs to be blurred.
v) Enter a pixel value for Spread to determine the extent to which the shadow needs to spread.
5. Click Typography .
i) Choose a font from the dropdown next to Font Family . This will apply to all the texts in the portal form.
ii) Click the Title Text Color icon and select a custom color for the title of the portal form.
iii) Click Body Text Color icon and select a custom color for the body texts of the portal form.
6. Click Field Input .
i) Click the Text Color icon and select a custom color in which the end-user's input in a field will appear.
ii) Click the Place Holder Color icon and choose a custom color for the place holders that appear before an input is entered in a field.
iii) Click the Background Color icon and choose a custom color for the place holders that appear before an input is entered in a field to fill a field's input space.
iv) Click the Border Color icon and choose a custom color for the borderline of the input field.
Notes
Note : The above properties can be set for both, the Default appearance of a field input, and its appearance when it is hovered upon. Switch to Hover tab to edit their properties.

7. Click Button .
i) Click the Text Color icon and select a custom color for the texts that appear on the buttons.
ii) Click the Background Color icon and choose a custom color to fill the buttons.
iii) Click the Border icon and choose a custom color for the borderline of the buttons.
Notes
Note : The above properties can be set for both, the Default appearance of a button, and  its appearance when it is hovered upon. Switch to Hover tab to edit their properties.

8. Click Link.
i) Click the Default Text Color icon and select a custom color for the texts that appear as links or URLs.
ii) Click the Underline icon to make the links appear as underlined texts.
Notes
Note : The above properties can be set for both, the Default appearance of a link, and its appearance when it is hovered upon. Switch to Hover tab to edit their properties.
Row and Column Wise Customizations
A portal page comprises different rows and columns that house the elements such as the titles, descriptions, and portal form inside them. To perform row and column-wise specifications:
1. Click an element and click on the tag that appears along its borderline. Two options appear beneath the tag.
2. Click Row . The applicable properties appear on the top of the designer.
i) Click the Spacing icon and enter values in pixels.This defines the space between the margins of the selected element's row and that of other rows.
ii) Click the fill icon and choose a color to fill the space that exists in a row outside of an element.
iii) Click the Edit as HTML icon to edit the properties of a row using HTML instead.
iv) Click the Border Setting icon. Choose the Type , Style , and Color of the row's border.
3. After step 1, click Column . The applicable properties appear on the top of the designer.

i) Click the fill icon and choose a color to fill the space that exists in a column outside of an element.
ii) Click the Border Setting icon. Choose the Type , Style , and Color of the column's border.
Notes
Note : To reset and erase all the customizations made to a portal page, go to the Page Customization tab in the Portal . Hover over the relevant portal page and click Reset .
  1. Understand Portal Pages
  2. Understand Portals


      Create. Review. Publish.

      Write, edit, collaborate on, and publish documents to different content management platforms.

      Get Started Now


        Access your files securely from anywhere

          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 CRM Training
            Redefine the way you work
            with Zoho Workplace

              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 CRM Training

                Create, share, and deliver

                beautiful slides from anywhere.

                Get Started Now


                  Zoho Sign now offers specialized one-on-one training for both administrators and developers.

                  BOOK A SESSION







                              Quick LinksWorkflow AutomationData Collection
                              Web FormsEnterpriseOnline Data Collection Tool
                              Embeddable FormsBankingBegin Data Collection
                              Interactive FormsWorkplaceData Collection App
                              CRM FormsCustomer ServiceAccessible Forms
                              Digital FormsMarketingForms for Small Business
                              HTML FormsEducationForms for Enterprise
                              Contact FormsE-commerceForms for any business
                              Lead Generation FormsHealthcareForms for Startups
                              Wordpress FormsCustomer onboardingForms for Small Business
                              No Code FormsConstructionRSVP tool for holidays
                              Free FormsTravelFeatures for Order Forms
                              Prefill FormsNon-Profit
                              Intake FormsLegalMobile App
                              Form DesignerHRMobile Forms
                              Card FormsFoodOffline Forms
                              Assign FormsPhotographyMobile Forms Features
                              Translate FormsReal EstateKiosk in Mobile Forms
                              Electronic Forms
                              Drag & drop form builder

                              Notification Emails for FormsAlternativesSecurity & Compliance
                              Holiday FormsGoogle Forms alternative GDPR
                              Form to PDFJotform alternativeHIPAA Forms
                              Email FormsEncrypted Forms

                              Secure Forms

                              WCAG

                                      Create. Review. Publish.

                                      Write, edit, collaborate on, and publish documents to different content management platforms.

                                      Get Started Now






                                                        You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.




                                                            Manage your brands on social media

                                                              Use cases

                                                              Make the most of Zoho Desk with the use cases.

                                                               
                                                                

                                                              eBooks

                                                              Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                               
                                                                

                                                              Videos

                                                              Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                               
                                                                

                                                              Webinar

                                                              Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                               
                                                                
                                                              • Desk Community Learning Series


                                                              • Meetups


                                                              • Ask the Experts


                                                              • Kbase


                                                              • Resources


                                                              • Glossary


                                                              • Desk Marketplace


                                                              • MVP Corner

                                                                Zoho Sheet Resources

                                                                 

                                                                    Zoho Forms Resources


                                                                      Secure your business
                                                                      communication with Zoho Mail


                                                                      Mail on the move with
                                                                      Zoho Mail mobile application

                                                                        Stay on top of your schedule
                                                                        at all times


                                                                        Carry your calendar with you
                                                                        Anytime, anywhere




                                                                              Zoho Sign Resources

                                                                                Sign, Paperless!

                                                                                Sign and send business documents on the go!

                                                                                Get Started Now




                                                                                        Zoho TeamInbox Resources





                                                                                                  Zoho DataPrep Demo

                                                                                                  Get a personalized demo or POC

                                                                                                  REGISTER NOW


                                                                                                    Design. Discuss. Deliver.

                                                                                                    Create visually engaging stories with Zoho Show.

                                                                                                    Get Started Now









                                                                                                                        • Related Articles

                                                                                                                        • 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, Create Password and Reset Password pages of your portal. They ...
                                                                                                                        • Customized search component for report data, using pages

                                                                                                                          Requirement             Provide a search component for users to search for the required data. Data is fetched from reports based on the search keyword. Use Case   A library or a book management system wants to allow for searching. Any customer who ...
                                                                                                                        • Understand Pages

                                                                                                                          1. What Does This Page Cover? Learn about pages and how they are used to create user-friendly, customized dashboards for your applications. Via these dashboards, you can display dynamic elements and visually represent the data stored in Creator. 2. ...
                                                                                                                        • Manage Portal Settings

                                                                                                                          This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. 1. What Does This Page Cover? Learn how to manage the different portal settings present under the Portal tab. 2. ...
                                                                                                                        • Understand Portal Permissions

                                                                                                                          This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. 1. In a Nutshell Portal permission sets allow you to decide which application components and data portal users can access ...
                                                                                                                          Wherever you are is as good as
                                                                                                                          your workplace

                                                                                                                            Resources

                                                                                                                            Videos

                                                                                                                            Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                                            eBooks

                                                                                                                            Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                                            Webinars

                                                                                                                            Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                                            CRM Tips

                                                                                                                            Make the most of Zoho CRM with these useful tips.



                                                                                                                              Zoho Show Resources