--- sourceDocument: Australia ServiceNow AI Platform user interface sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/platform-user-interface Release : - australia ft:locale : - pt-BR ft:publication_title : - Australia ServiceNow AI Platform user interface ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Create and edit a page using the Service Portal Designer # Create and edit a page using the Service Portal Designer {#ariaid-title1} * Versão de lançamento: Australia * * Atualizado 12 de mar. de 2026 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 min. de leitura Create or edit a page and use layouts to organize the columns that house the widgets. ## Antes de Iniciar Role required: sp_admin or admin ## Por Que e Quando Desempenhar Esta Tarefa These steps are intended for users with little to no coding experience. The Service Portal Designer includes several layers of customization from simply adding widgets in a particular configuration on a page, to adding CSS classes. ## Procedimento 1. Navigate to AllService PortalService Portal Configuration. 2. Select Designer. 3. Switch to the portal you want to design pages for by selecting the portal name in the header. 4. From the Service Portal Designer, select a page to customize or select Add a new page. 5. Under Layouts, select Container and drag it onto the page. 6. Drag one of the other layouts and drop it in the container. This layout defines the structure of your page and the space available to drop widgets. The structure of the layout aligns with the Bootstrap grid template and always adds up to 12. 7. Use the filter to search for a widget, then drag the widget to the layout. Figura 1. Drag containers, layouts, then widgets onto a page For widgets that do not contain any information by default, you must configure the options for their widget instances before they will appear on a portal page. For more information about configuring widget instance options, see [Configure widget instances](https://servicenow-prod.fluidtopics.net/d58mu4yr24EacHoq8xlu3Q "Create unique instances of widgets by configuring the options for each instance."). 8. **Opcional:** Edit page properties. 1. Select Edit Page Properties. The page record from the Pages table \[sp_page\] opens. 2. Edit the form. {#t_ConfigureAPage__table_ygl_qdt_3z__entry__2} | Field | Description | |-|-| | Title | Internal name of the page. Use the title to search for a page in the Service Portal Designer. | | ID | A unique ID for the page. The ID is what you use to assign a page to a portal. It also determines the URL for the page, for example https://instance name.service-now.com/doc_portal/?id=doc_page, where doc_page is the page ID. | | Application | The application scope. | | Public | Enables the page to be accessed without the need for authentication. If Public is selected, all users can view the page no matter the roles listed. | | Draft | Mark a page as draft to limit user ability to view the page while you're still creating it. Only users with the admin role can view a page in draft, all other users see a 404 page. | | Roles | Limit user access to a page by role. | | Short description | Describes the portal page. This field isn't public facing. | | Page Specific CSS | Unless a page has Page Specific CSS, the page inherits CSS from the Theme and Branding. If you need a page to look different, the Page Specific CSS overrides the inheritance from the Theme and Branding. | | Dynamic page title | Create variables to generate descriptive titles depending on the content loaded into a page. For more information, see [Add dynamic titles to a page](https://servicenow-prod.fluidtopics.net/PnoBSInhc~ryY~jPSa9c~g "Create variables to generate descriptive titles depending on the content loaded into a page."). | | Clone Page | Enables you to make a copy of a page that can be modified. If you clone a base system page, a new widget instance is created for each widget on the page. | | Use SEO script | Option to enable a script include that adds SEO tags for canonical URLs and hreflang tags. For more information, see [Enable SEO for localized versions of a portal page](https://servicenow-prod.fluidtopics.net/wSyPcwhT5bkUiMksH5tn0g "Allow users to discover portal pages in their preferred language by adding hreflang tags."). | | SEO script | Script include to apply to the page. By default, the system uses the SPSEOHeaderTags script include, which includes the default implementation for the canonical URL and hreflang tags for Service Portal Analytics pages. | | Human readable URL structure | Add human readable keywords to the page URL to improve search engine optimization (SEO) and click-through rates for public pages. Human readable URLs also help users understand what to expect on a page for public and non-public pages. For example, https://\/kb/en/faq/what-is-a-cookie?id=kb_article_view\&sysparm_article=KB0000007. For more information, see [Add human readable keywords to page URLs](https://servicenow-prod.fluidtopics.net/syIeH1_i28hO8zl4L_VnmA "Add human readable keywords to the URLs of portal pages to improve search engine optimization (SEO) and click-through rates and help users understand what to expect on the page."). | [Tabela 1. Page fields] {#t_ConfigureAPage__table_ygl_qdt_3z} {#t_ConfigureAPage__substeps_oqw_3pp_x1b} 9. **Opcional:** Edit container properties. 1. Select within the container you would like to edit, or select Container in the breadcrumbs. 2. Select the edit icon \[![Edit icon]()\]. The container record from the Containers table \[sp_container\] opens. 3. Edit the form. {#t_ConfigureAPage__table_evm_ng4_qbb__entry__2} | Field | Description | |-|-| | Name | Internal name of the container. | | Order | The order in which the containers appear on a page. To set a container to appear above all other containers, give the container the lowest number in the Order field. | | Page | The page that includes the container. | | Screen reader title | The title used by a screen reader. | | Semantic tag | The semantic HTML tag that includes the container. Options include: * None: All content on the page between the header and footer is included in the \ tag. * Main: The \ tag includes only the container and its contents. The \ tag is a semantic HTML element that contains the main content of the page. It should be applied to content that is unique to the page and should be configured for only one element on the page. Nota: The \ tag can be applied to a container, row, or column. For more information, see [Configure the main tag on a page](https://servicenow-prod.fluidtopics.net/z9hELqOG2IMovzF7VCqHZA "Specify the main content of a page to include in the
tag to improve search engine optimization and accessibility."). * Header: The \ tag is used as introductory content. It can be used multiple times per page, including inside an \ tag. * Nav: The \ tag is used in page-level navigation. It can be used multiple times in each page. * Section: The \ tag groups related content under a common heading or theme. * Article: The \ tag is self-contained content that can stand alone or be reused. * Details: The \ tag can be used in expand/collapse sections, and intended for FAQs. * Summary: \ tag is the first child of \ and acts as the clickable label. * Time: \ tag is for dates, times, and durations. Add for machine-readable values. * Fig caption: \ tag is only valid as a child of \ and provides the caption for a figure. {#t_ConfigureAPage__ul_gxq_jvw_1xb} | | Application | The application scope. | | Width | Width of the container. Options include: * Fixed * Fluid {#t_ConfigureAPage__ul_epc_dp4_qbb} | | Parent class | Parent CSS class for the container. | | CSS class | The CSS classes for the container. Overwrites page-specific CSS. | | Background color | The background color of the container. | | Background image | Background image for the container. | | Background style | The display style of a background image. Options include: * Default * Cover * Contain * Repeating {#t_ConfigureAPage__ul_wg1_tp4_qbb} | | Bootstrap alternative | Selecting this field removes the standard Bootstrap grid classes and disables the Bootstrap grid system in the container. If selected, the following aren't applied: * The Width field in the container record. * Standard Bootstrap class in the row record within the container. * The Size - xs, Size - sm, Size - md, and Size - lg fields in column records within the container. {#t_ConfigureAPage__ul_qw3_nr4_qbb} Only select this field if you plan to provide custom CSS classes and CSS for the container, row, and column records. | | Move to header | If selected, the container sticks to the header and doesn't scroll. Use this option to create a subheader. | [Tabela 2. Container fields] {#t_ConfigureAPage__table_evm_ng4_qbb} {#t_ConfigureAPage__substeps_fs1_4j4_qbb} 10. **Opcional:** To switch to a different page, select the Pages tab in the left pane, then select the next page you want to configure. 11. **Opcional:** Use the Preview button in the header to view your page as you design it. You can also use Preview to view your page in mobile or tablet mode through the controls presented in the header. Figura 2. Designer tablet view {#t_ConfigureAPage__steps_blh_nz4_2z} ## Add a subheader to a page {#ariaid-title2} Select a container record to serve as a page subheader. A subheader sticks to the page header and does not scroll. ### Antes de Iniciar Role required: admin ### Procedimento 1. Navigate to AllService PortalService Portal Configuration. 2. Select Designer. 3. Select a page. 4. Switch to the portal you want to design pages for by selecting the portal name in the header. 5. Select the container that you would like to use as a subheader, or select the container using the breadcrumbs. 6. Select the edit icon (![Edit icon]()). 7. Select Move to header. ### Resultado As a subheader, the container sticks to the header and does not scroll. ## Include font icons on a page {#ariaid-title3} Include font icons on a page so that all the widgets on the page have access to the font-icon set. ### Antes de Iniciar Role required: sp_admin or admin ### Procedimento 1. Navigate to AllService PortalPages and click the page you want to add font icons to. 2. Attach the font-icon file to the page record. 3. In the Page Specific CSS field for the page, add the CSS for the font-icon definition. Use the sys_id of the attachment as the src in the CSS. For example: /* fallback */ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } ### Resultado You can select an icon from the icon set for any widget on this page. For example, in the HTML widget you can use the Source Code option to use an icon. For example: `

flight_land

`