This help page is for Creator 6 users with portals created after June 1, 2026.

1. For portals created earlier, refer to this document to learn about the older version of portal page customization.
   
2. If you are on Creator 5, refer to this document. Know your Creator version.

1. Setting up portal pages in Zoho Creator

When creating a portal in Zoho Creator, you begin by choosing how to set up your portal pages, either by starting from a pre-built template or from scratch. Once inside the designer, you can add and arrange elements on each page and create additional custom pages beyond the default portal pages Sign In, Signup, Create Password, and Reset Password.

2. Steps to configure portal pages

2.1. Configuring portal pages from a template during portal creation

Portal templates give you a head start with pre-designed portal pages, including layout, elements, and visual styling, that can be customized to match your brand and requirements.

1. Sign in to your Zoho Creator account and navigate to Portal under the DEPLOY section on the left pane.
2. Click + Create New to begin building a portal for your application.
   
3. Browse through the available templates to find one that suits your portal's purpose. Hover over the required template and click Use Template.
   

Note: You can hover over a template and click Preview to go through the template's design before choosing it.

4. Choose the application for which you want to create a portal in the Configure Portal dropdown.
   
5. If Zia is configured in your account and Portal page customization is enabled, click the Customize with AI to expand to a prompt field.
   
6. Enter a prompt describing the information and details your portal pages should contain. This enables Zia to customize personalized content on your portal pages which you can later build on if required. Click Create Portal.
   
7. Review the pre-loaded portal pages listed in the dropdown present in the top pane of the designer. Each portal page reflects the template's default layout and element arrangement.
   
8. Proceed to add more portal page elements and presets, configure their display,  style them, and manage the portal pages as needed.

2.2. Configuring portal pages from scratch during portal creation

Starting from scratch gives you a blank set of default portal pages, sign in, sign up, create password, and reset password, with no pre-applied layout or elements.

1. Sign in to your Zoho Creator account and navigate to Portal under the DEPLOY section on the left pane.
2. Click + Create New to begin building a portal for your application.
   
3. Click + Create from scratch to create blank default portal pages that you can build on.
   
4. Choose the application for which you want to create a portal in the dropdown and click Create Portal.
   
   The portal is created and the page designer opens with the default portal pages loaded as blank canvases. The portal forms of each page are embedded in it by default since they are mandatory in each portal page.
5. Select the portal page you want to customize from the dropdown in the top pane of the designer.
   
6. Proceed to add elements and presets, configure their display,  style them, and manage the portal pages as needed. Additionally, you can add custom portal pages to include branding value and display other content relevant to your portal application.

2.3. Creating custom pages

In addition to the default portal pages, you can create custom pages within the designer to extend your portal's structure, for example, a landing page, a profile page, or a catalogue display.

To create a new custom page from within the designer:

1. Click the + icon in the top strip next to the portal page listing's dropdown.
   
2. Enter a name for the new portal page and click Create. The new custom page is added as a blank canvas.
   
3. Add elements, and configure the display, style, and action properties for them.

3. Adding elements and presets to a portal page

Elements are the building blocks of a portal page which includes text, images, icons, canvases, navigation menus, tabs, and more. Within the page designer:

1. Select the portal page you want to customize from the dropdown on the top strip.
   
2. The left pane lists all the portal element categories, and selecting one opens a gallery of prebuilt templates for you to browse through for each element.
   1. Primitives - Click Primitives to browse through the prebuilt templates of the primitive elements that include Text, Image, Icon, Button, V-Stack, H-Stack, and Canvas.
      
   2. Navigation - Click Navigation to view a list of templates for the Menu element and the navigation header preset built using it.
      
   3. Forms - Click Forms to check out the templates provided for the portal forms Sign In, Sign Up, and Reset Password.
      
   4. Sections - Click Sections to browse through the templates of the presets Hero section, Footer, and Group Cards.
      
   5. Cards - Click Cards to view the templates of the presets individual Cards, and Lists.
      
   6. Embed - Click Embed and drag and drop the container onto the designer space.
      
   7. Tab - Click Tab to browse through the templates of the element.
3. Drag and drop the desired elements from the left pane onto the building space in the position where you want it to appear on the portal page.
   

Note: The placement in which elements are stacked on the building space determines their visual hierarchy on the page. Drag elements to reposition them relative to each other after placing them.

Once elements are placed, each one can be fully customized by configuring display, style, and action properties for them. Refer to the respective configuration sections below, the elements, and the individual styling property documentation for details.

4. Configuring display for portal page elements

The display properties control what an element holds on the portal page. All elements have a common Element Name property. To configure this in the portal page designer:

1. Drag any element or preset onto the designer workspace to place it on the portal page.
2. Click on an element within the building space of the portal page designer and click the ellipsis () icon.
   
   You land in the Display tab of the Properties pane on the right by default.
3. Update the auto-generated value to an appropriate link name for the element in the Element Name field. This acts as an internal identifier for the element.
   

Beyond this, each element has its own set of display properties specific to its functionality. Refer to the individual element pages to know more:

1. Text
2. Image
3. Icon
4. H-Stack
5. V-Stack
6. Canvas
7. Menu
8. Portal forms
9. Embed
10. Tab

The elements within the customized presets also hold the display, style, and action properties as relevant.

5. Styling elements on a portal page

In the portal page designer, all elements and presets appear in the left pane:

1. Drag any element or preset onto the designer workspace to place it on the portal page.

1. Select a placed element to open a brief set of styling properties for quick styling.
   
2. Click the ellipsis icon () to open the Properties pane on the right for extensive styling. All properties are available as accordions that can be expanded and collapsed in the right pane.
   

The elements, presets, and its styling properties are covered in full detail in their respective documentation. Refer to the links below:

1. Alignment
2. Layout
3. Padding
   
4. Margin
   
5. Font
6. Background
7. Corner Radius
8. Border
9. Shadow
10. Opacity
11. Image and icon styling
12. Stack styling

6. Configuring action for portal page elements

In the portal page designer:

1. Click on an element within the building space of the portal page designer and click the ellipsis () icon.
   
2. Navigate to the Action tab on the Properties pane that appears on the right to configure an action on a trigger.
   
3. Under ON CLICK, select an action:
   1. None (default) - No action is performed.
   2. Navigate To - Navigates the portal user to a destination when clicked.
4. If you select Navigate To, configure the following:
   
   
   1. Page / URL - Either enter an accessible URL or select one of the portal pages listed in the dropdown. The portal user will be redirected to the specific URL or portal page on click of the element.
   2. Open In - Select Same Window to reload the destination in the current tab or New Window to open it in a separate tab.

7. Managing portal pages

The page designer includes controls for managing changes, configuring page-level properties, saving your work, and maintaining custom pages, all accessible from within the designer itself.

7.1. Assigning as landing page

Any portal page can be assigned as the landing page for that portal. Portal users will land directly on it when they access the portal.

From within the designer:

1. Click the portal page listing dropdown in the top strip of the designer and hover over the required custom page.
   
2. Click the tick icon () that appears next to the custom page's name.

7.2. Edit custom page details and delete custom pages

For custom pages created within the designer, you can edit the page's details or delete it entirely.

To edit a custom page's details:

1. Click the portal page listing dropdown in the top strip of the designer and hover over the required custom page.
   
2. Click the edit icon () that appears next to the custom page's name.
3. Update the page name or link name as required and click Ok to apply the changes.
   

To delete a custom page:

1. Click portal page listing dropdown in the top strip of the designer and hover over the required custom page.
   
2. Click the delete icon () that appears next to the portal page name.

Note: Only custom pages created within the designer can be deleted.

7.3. Undo and redo

1. Click the Undo icon () on the top strip to reverse the most recent change made to the portal page.
2. Click the Redo icon () to reapply an undone change to the portal page.

7.4. Page properties

Page-level properties apply uniformly to the entire portal page, independently of individual element settings. To configure page properties:

1. Click the Page Properties icon () in the top strip of the designer.
2. Adjust the following portal page-level settings that include the stacking properties Align components and Spacing along with Background, Padding, Margin, and Border.
   

Note: If a property set at the portal page level conflicts with a property set on an individual element, the element's property takes precedence.

7.5. Save and close actions

1. Click Save in the top right corner of the designer to apply all changes to the portal page. This ensures no changes are lost while you navigate through the portal page designer.
2. Click Close to exit the designer and return to the portal's configuration page. Ensure that you save your changes before clicking Close.

8. Points to note

1. Templates include custom pages - When starting from a template, the designer may load additional custom pages beyond the four default portal pages. These are included as part of the template's structure and can be edited or deleted as required.
2. Default pages cannot be deleted - The four default portal pages (sign in, sign up, create password, reset password) are always present in the designer and cannot be removed. But, custom pages can be deleted if required.
3. Page-level properties and element-level properties - The portal page properties set through settings icon () apply across the entire page. When a specific element has its own conflicting property set, the element's property values take precedence over the portal page-level property.
   

9. Related topics

1. Understanding portal pages
2. Understanding portals
3. Understanding presets in portal page designer