--- sourceDocument: Interface do usuário da Now Platform Yokohama sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface Release : - yokohama ft:locale : - pt-BR ft:publication_title : - Interface do usuário da Now Platform Yokohama ft:clusterId : - platux bundleId : - platux workflow : - Platform --- # Criar e editar uma página usando o Designer Portal de serviços # Criar e editar uma página usando o Designer Portal de serviços {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 min. de leitura Crie ou edite uma página e use layouts para organizar as colunas que hospedam os widgets. ## Antes de Iniciar Função necessária: sp_admin ou administrador ## Por Que e Quando Desempenhar Esta Tarefa Essas etapas são destinadas a usuários com pouca ou nenhuma experiência de codificação. . Portal de serviçosO Designer inclui várias camadas de personalização, desde simplesmente adicionar widgets em uma configuração específica em uma página até adicionar classes CSS. ## Procedimento 1. Navegar até TudoPortal de serviçosConfiguração do Portal de serviços. 2. Selecione Designer . 3. Alterne para o portal para o qual você deseja projetar as páginas selecionando o nome do portal no cabeçalho. 4. Em Portal de serviçosDesigner, selecione uma página para personalizar ou selecionar Adicione uma nova página . 5. Em Layouts, selecione Contêiner e arraste-o para a página. 6. Arraste um dos outros layouts e solte-o no contêiner. Este layout define a estrutura da sua página e o espaço disponível para soltar widgets. A estrutura do layout se alinha com o modelo de grade do Bootstrap e sempre adiciona até 12. 7. Use o filtro para pesquisar um widget e arraste o widget para o layout. Figura 1. Arraste contêineres, layouts e widgets para uma página Para widgets que não contêm nenhuma informação por padrão, você deve configurar as opções para suas instâncias de widget antes que elas apareçam em uma página do portal. Para obter mais informações sobre como configurar opções de instância do widget, consulte [Configure instâncias de widget](https://servicenow-prod.fluidtopics.net/8tij89_RJTq3l0hQT0HHMg "Crie instâncias exclusivas de widgets configurando as opções para cada instância."). 8. **Opcional:** Edite as propriedades da página. 1. Selecione Editar propriedades da página . O registro de página da tabela de páginas \[sp_page\] é aberto. 2. Edite o formulário. {#t_ConfigureAPage__table_ygl_qdt_3z__entry__2} | Campo | Descrição | |-|-| | Título | Nome interno da página. Use o título para pesquisar uma página no Designer do portal de serviços. | | ID | Um ID exclusivo para a página. O ID é o que você usa para atribuir uma página a um portal. Ele também determina o URL da página, por exemplo https://instance name.service-now.com/doc_portal/?id=doc_page , Em que doc_page é o ID da página. | | Aplicação | O escopo da aplicação. | | Público(a) | Permite que a página seja acessada sem a necessidade de autenticação. Se Público for selecionado, todos os usuários podem exibir a página, independentemente das funções listadas. | | Rascunho | Marque uma página como rascunho para limitar a capacidade do usuário de exibir a página enquanto você ainda a está criando. Apenas usuários com a função de administrador podem exibir uma página em rascunho, todos os outros usuários veem uma página 404. | | Funções | Limite o acesso do usuário a uma página por função. | | Descrição resumida | Descreve a página do portal. Este campo não é voltado para o público. | | CSS específico da página | A menos que uma página tenha CSS específico da página, a página herda o CSS do tema e da identidade visual. Se você precisar que uma página tenha uma aparência diferente, o CSS específico da página substituirá a herança do Tema e da identidade visual. | | Título de página dinâmica | Crie variáveis para gerar títulos descritivos dependendo do conteúdo carregado em uma página. Para obter mais informações, consulte [Adicione títulos dinâmicos a uma página](https://servicenow-prod.fluidtopics.net/NvzyQZix9Pb_prFCC_AzZQ "Crie variáveis para gerar títulos descritivos dependendo do conteúdo carregado em uma página."). | | Clonar Página | Permite que você faça uma cópia de uma página que pode ser modificada. Se você clonar uma página do sistema base, uma nova instância de widget será criada para cada widget na página. | | Usar script SEO | Opção para habilitar uma inclusão de script que adiciona marcadores de SEO para URLs canônicos e marcadores hreflang. Para obter mais informações, consulte [Habilite o SEO para versões localizadas de uma página do portal](https://servicenow-prod.fluidtopics.net/I0Q2O0_mwytbjep0jopt~g "Adicione páginas do portal no idioma de sua preferência hreflangmarcadores."). | | Script SEO | Inclusão de script a ser aplicada à página. Por padrão, o sistema usa a inclusão de script spseoheaderTags, que inclui a implementação padrão para o URL canônico e os marcadores hreflang para Análise do portal de serviçospáginas. | | Estrutura de URL legível | Adicione palavras-chave legíveis ao URL da página para melhorar a otimização do mecanismo de pesquisa (SEO) e as taxas de cliques para páginas públicas. URLs legíveis também ajudam os usuários a entender o que esperar de uma página para páginas públicas e não públicas. Por exemplo, https://\/kb/en/faq/what-is-a-cookie . Para obter mais informações, consulte [Adicione palavras-chave legíveis aos URLs da página](https://servicenow-prod.fluidtopics.net/LCgHNpUd9cNktmDz6RMZzQ "Adicione palavras-chave legíveis aos URLs das páginas do portal para melhorar a otimização do mecanismo de pesquisa (SEO) e as taxas de cliques e ajudar os usuários a entender o que esperar da página."). | [Tabela 1. Campos de página] {#t_ConfigureAPage__table_ygl_qdt_3z} {#t_ConfigureAPage__substeps_oqw_3pp_x1b} 9. **Opcional:** Edite as propriedades do contêiner. 1. Selecione dentro do contêiner que você deseja editar ou selecione Contêiner nas trilhas. 2. Selecione o ícone de edição \[ ![Ícone Editar]()\]. O registro de contêiner da tabela de contêineres \[sp_container\] é aberto. 3. Edite o formulário. {#t_ConfigureAPage__table_evm_ng4_qbb__entry__2} | Campo | Descrição | |-|-| | Nome | Nome interno do contêiner. | | Ordem | A ordem em que os contêineres aparecem em uma página. Para definir um contêiner para aparecer acima de todos os outros contêineres, forneça ao contêiner o número mais baixo no Pedido campo. | | Página | A página que inclui o contêiner. | | Título do leitor de tela | O título usado por um leitor de tela. | | Marcador de semântica | O marcador HTML semântico que inclui o contêiner. As opções incluem: * Nenhum: Todo o conteúdo na página entre o cabeçalho e o rodapé é incluído no \marcador. * Principal: O. \o marcador inclui somente o contêiner e seu conteúdo. . \O marcador é um elemento HTML semântico que contém o conteúdo principal da página. Ele deve ser aplicado ao conteúdo exclusivo da página e deve ser configurado para apenas um elemento na página. Nota: . \o marcador pode ser aplicado a um contêiner, linha ou coluna. Para obter mais informações, consulte [Configure o marcador principal em uma página](https://servicenow-prod.fluidtopics.net/mp5mk2PbT9_9YXw9U9G3OA "Especifique o conteúdo principal de uma página a ser incluída no
marcador para melhorar a otimização e a acessibilidade do mecanismo de pesquisa."). {#t_ConfigureAPage__ul_gxq_jvw_1xb} | | Aplicação | O escopo da aplicação. | | Largura | Largura do contêiner. As opções incluem: * Fixo * Fluido {#t_ConfigureAPage__ul_epc_dp4_qbb} | | Classe primária | Classe CSS primária para o contêiner. | | Classe do CSS | As classes CSS do contêiner. Substitui CSS específico da página. | | Cor de fundo | A cor de fundo do contêiner. | | Imagem em segundo plano | Imagem de plano de fundo do contêiner. | | Estilo do plano de fundo | O estilo de exibição de uma imagem de fundo. As opções incluem: * Padrão * Cobertura * Contém * Repetição {#t_ConfigureAPage__ul_wg1_tp4_qbb} | | Alternativa de inicialização | Selecionar este campo remove as classes de grade padrão do Bootstrap e desabilita o sistema de grade do Bootstrap no contêiner. Se selecionado, os seguintes itens não serão aplicados: * . Largura campo no registro do contêiner. * Classe de Bootstrap padrão no registro de linha no contêiner. * . Tamanho - xs , Tamanho - sm , Tamanho - md e. Tamanho - lg campos em registros de coluna no contêiner. {#t_ConfigureAPage__ul_qw3_nr4_qbb} Somente selecione este campo se você planeja fornecer classes CSS personalizadas e CSS para os registros de contêiner, linha e coluna. | | Mover para cabeçalho | Se selecionado, o contêiner adere ao cabeçalho e não rola. Use esta opção para criar um subcabeçalho. | [Tabela 2. Campos de contêiner] {#t_ConfigureAPage__table_evm_ng4_qbb} {#t_ConfigureAPage__substeps_fs1_4j4_qbb} 10. **Opcional:** Para alternar para uma página diferente, selecione Páginas no painel esquerdo e selecione a próxima página que você deseja configurar. 11. **Opcional:** Use o botão Visualizar no cabeçalho para exibir sua página conforme você a cria. Você também pode usar Visualização para exibir sua página no modo celular ou tablet por meio dos controles apresentados no cabeçalho. Figura 2. Exibição do tablet Designer {#t_ConfigureAPage__steps_blh_nz4_2z} ## Adicione um subcabeçalho a uma página {#ariaid-title2} Selecione um registro de contêiner para servir como um subcabeçalho de página. Um subcabeçalho adere ao cabeçalho da página e não rola. ### Antes de Iniciar Função necessária: administrador ### Procedimento 1. Navegar até TudoPortal de serviçosConfiguração do Portal de serviços. 2. Selecione Designer . 3. Selecione uma página. 4. Alterne para o portal para o qual você deseja projetar as páginas selecionando o nome do portal no cabeçalho. 5. Selecione o contêiner que você deseja usar como subcabeçalho ou selecione o contêiner usando as trilhas de navegação. 6. Selecione o ícone de edição ( ![Ícone Editar]()). 7. Selecione Mover para o cabeçalho . ### Resultado Como um subcabeçalho, o contêiner adere ao cabeçalho e não rola. ## Incluir ícones de fonte em uma página {#ariaid-title3} Inclua ícones de fonte em uma página para que todos os widgets na página tenham acesso ao conjunto de ícones de fonte. ### Antes de Iniciar Função necessária: sp_admin ou administrador ### Procedimento 1. Navegar até TudoPortal de serviçosPáginas e clique na página à qual você deseja adicionar ícones de fonte. 2. Anexe o arquivo do ícone de fonte ao registro da página. 3. No campo CSS específico da página para a página, adicione o CSS para a definição do ícone de fonte. Use o sys_id do anexo como origem No CSS. Por exemplo: /* 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 Você pode selecionar um ícone no conjunto de ícones para qualquer widget nesta página. Por exemplo, no widget HTML, você pode usar Código-fonte opção para usar um ícone. Por exemplo: `

flight_land

`