Customizing portal pages
This help page is for Creator 6 users with portals created after June 1, 2026.
- For portals created earlier, refer to this document to learn about the older version of portal page customization.
- If you are on Creator 5, refer to this document. Know your Creator version.
What does this page cover?
Learn how to create and manage pages in your portal, including creating new portal pages, configuring portal page settings, and organizing components to achieve customizations and branding requirements.
Availability
- Portal Pages can be created in all paid plans of Creator.
- Only the super admin, admins, and developers can create and manage portal pages.
1. Steps to create portal pages
When creating a portal, you can define how your portal pages should be generated. You can add more portal pages later to an existing portal. In both cases, the portal page builder will be displayed once the portal is created, which allows you to edit and manage these pages based on your portal requirements.
1.1. While creating a portal
During portal creation, you can choose how your portal pages should be generated. You can create portal pages from scratch or using a template.
If you are using a template to create portal pages, you can use Zia to generate or update content and images based on your requirements. You can also upload a reference image to customize the visuals in the portal page further. This option allows you to quickly set up portal pages depending on your content requirements.
Learn how to create portal pages while creating a portal.
1.2. Adding a new page to an existing portal
To add a new portal page to an existing portal:
- Navigate to the Portal Page Builder of the preferred portal.
- Click the + icon in the top-left corner.
- Enter the Portal page name and Link name.
- Upload a reference image to customize the portal’s appearance if required, then click Create.
- Drag and drop components to add them to the page and configure them as required. Learn how to configure component properties.
- Click Save to apply the changes.
2. Managing Portal Pages
Manage your portal pages by updating their details, modifying content, or removing pages that are no longer needed.
- Editing Portal Page Details
- Editing portal pages
- Deleting a Portal Page
2.1. Editing Portal Page Details
Update the name and link name of your portal pages to keep them relevant and organized. Follow the steps below to edit portal page details:
- Navigate to Portal Pages of the preferred portal.
- Click the dropdown next to the portal name in the top-left corner.
- Click the pen icon next to the page you want to edit.
- Update the Portal page name and Link name.
- Click Update to save the changes.
Note: Default page names and link names cannot be edited.
2.2 Editing portal pages
To edit an existing portal page:
- Navigate to the Portal Page Builder of the preferred portal.
- Select the required page from the page dropdown in the top-left corner.
- Make changes using the builder:
- Drag and drop components from the Components pane.
- Select a component to update its basic properties.
- Use the ellipsis icon to access advanced properties of the selected component. Learn how to configure component properties.
- Drag one element toward another to group them. A blue line indicator will appear, drop the element to complete grouping.
- Snap elements horizontally (left, center, right) or vertically (top, center, bottom) based on your layout needs.
- Right-click on an element to access additional options such as moving it one step forward or backward, or sending it completely to the front or back.
- Select Undo/Redo in the top-right corner when you want to revert or reapply recent changes.
- Click Save.
All the pages built here can be responsive to mobile and tablet. Building the page using stack containers will help to achieve responsive outputs.
2.3. Deleting a Portal Page
Remove portal pages that are no longer needed to keep your portal clean and up to date.
Note: Deleting a portal page is permanent. All associated changes and content will be lost and cannot be recovered.
Follow the steps below to delete a portal page:
- Navigate to Portal Pages in the portal.
- Click the dropdown next to the portal name in the top-left corner.
- Click the bin icon next to the page you want to delete.
- Confirm the deletion.
Note: Default pages cannot be deleted.
3. Configuring component properties
The builder dashboard allows you to design portal pages by adding components and customizing their layout, appearance, and behavior. Learn about the properties available configure components>.
Follow the steps below to configure component properties:
- Navigate to the Builder Dashboard.
- Click a component and select the ellipsis icon (⋯) to view its properties.
- The Component Properties pane will appear on the right side of the builder.
- Configure the component as required using the available properties and click Save in the top-right corner of the page.
3.1. Common Properties
Property | Options | Steps to Configure |
Layout (W, H) | Width: Fill, px, %, Auto Height: Auto, px, %, Fill | Select values for Width and Height to define the component size. If you choose px or %, enter the corresponding numeric values. |
Background | Color:
Image:
| Select a color from standard options or define a custom color using the picker or hex code. To use an image as a background, click to choose from stock images or upload your own image. |
Radius | 0px, 6px, 12px, 16px, 24px, Round | Select a radius value to control corner rounding or choose Round for fully rounded edges. |
Border | Thickness: 1 to 5 Color: • Standard colors • Custom (Color picker, Hex code) | Select a border thickness (1–5). Then select a color from standard options or define a custom color using the picker or hex code. |
Shadow | Elevation 1to 5 | Select an elevation level (1–5) to apply shadow depth. |
Opacity | 0% to 100% | Adjust the opacity value to control transparency. |
3.2. Component-Specific Configurations
These properties are available based on the selected component.
Property | Applicable Component | Options | Steps to Configure |
Font Family | Text | Lato, Barlow, Comfortaa, Montserrat, Nunito, Open Sans, Poppins, Quicksand, Raleway, Rubik, Source Sans Pro | Select a font family for the text. |
| Font Weight | Text | Thin, Regular, Semi Bold, Bold, Extra Bold | Select a font weight to define text emphasis. |
Font Size | Text | 8 to 72 | Enter or select a font size within the supported range. |
Text Color | Text | Standard colors, Custom (Color picker, Hex code) | Select a color from standard options or define a custom color. |
Text Alignment | Text | Left, Center, Right | Select horizontal alignment for the text. |
Vertical Alignment | Text | Top, Middle, Bottom | Select vertical alignment within the component. |
Padding | All components | px | Select a unit and enter values to control inner spacing. |
Image Source | Image | Stock images (Zoho), Upload image | Click to choose an image from stock images or upload your own. |
Image Fit | Image | Fit, Fill, Stretch | Select how the image fits within the component. |
Image Position | Image | Top left, Top, Top right, Left, Center, Right, Bottom left, Bottom, Bottom right | Select a position to align the image. |
Icon | Icon | Icon gallery | Open the icon gallery and select an icon from the list of available icons. |
Canvas Type | H-Stack, V-Stack | H-Stack, V-Stack H-Stack:
V-Stack:
| Select a layout type to arrange components. |
Align Items | H-Stack, V-Stack | Top left, Top, Top right, Left, Center, Right, Bottom left, Bottom, Bottom right Edge To Edge, Equal Split Edge to Edge:
Equal Split:
| Select alignment to position items within the container. |
Overflow | H-Stack, V-Stack | Scroll, Wrap, Wrap reverse Scroll:
Wrap:
Wrap Reverse:
| Select an overflow option to control content behavior. |
Container Background | Form | Standard colors, Custom (Color picker, Hex code) | Select a background color. |
Container Padding | Form | px, % | Adjust padding to control spacing. |
Container Radius | Form | 0px, 6px, 12px, 16px, 24px, Round | Select a radius value. |
Container Border | Form | Thickness: 1–5, Color | Select border thickness and color. |
Container Shadow | Form | None, Elevation 1–5 | Select a shadow level or remove shadow. |
Heading Color | Form | Standard colors, Custom | Select a color for heading text. |
Body Color | Form | Standard colors, Custom | Select a color for body text. |
Field Background Color | Form | Standard colors, Custom | Select a background color. |
Field Border Color | Form | Standard colors, Custom | Select a border color. |
Placeholder Text Color | Form | Standard colors, Custom | Select a placeholder text color. |
Button Text Color | Button | Standard colors, Custom | Select a text color. |
Button Background Color | Button | Standard colors, Custom | Select a background color. |
Button Border | Button | Thickness: 1–5, Color | Select border thickness and color. |
Link Color | Link | Standard colors, Custom | Select a link color. |
Link Text Color | Link | Standard colors, Custom | Select a link text color. |
4. Related Topics
5. Related Videos
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 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:
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
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.
New to Zoho Survey?
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?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Customizing portal pages
This help page is for Creator 6 users with portals created before June 1, 2026. For portals created later, refer to this document to learn about the latest version of portal page customization. If you are on Creator 5, refer to this document. Know ...Understanding portal pages
This help page is for Creator 6 users with portals created after June 1, 2026. For portals created earlier, refer to this document to learn about the older version of portal page customization. If you are on Creator 5, refer to this document. Know ...Understanding portal pages
This help page is for Creator 6 users with portals created before June 1, 2026. For portals created later, refer to this document to learn about the latest version of portal page customization. If you are on Creator 5, refer to this document. Know ...Accessing and managing Zoho Creator portal account
What does this page cover Learn how to sign up for and sign in to your Creator portal, and manage your account settings, including authentication methods, sessions and profile details. Note: This page is intended only for portal users. Availability ...Understanding form builder
In a nutshell The form builder is a workstation where you can create, edit, and manage forms. Forms collect different types of data through the fields present in them. These fields can be managed and customized from its form builder. In addition to ...
New to Zoho LandingPage?
Zoho LandingPage Resources