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:
-
Portal backdrop
-
Portal Column
-
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.
Note:
-
You can upload an image using : File manager or Web URL.
-
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.
Note
:
-
You can upload an image using :
File manager
or
Web URL.
-
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.
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 Form 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.
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.
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.
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.
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.
-
Understand Portal Pages
-
Understand Portals