Editar componentes

Editar Construtor de temas componentes individuais para melhor se adequarem à sua marca e para atender aos padrões de conformidade de acessibilidade. Os ganchos de tema que você pode editar são específicos para cada tipo de componente.

Antes de Iniciar

Função necessária: ui_builder_admin

Para obter informações sobre funções granulares, consulte Granular admin roles.

Por Que e Quando Desempenhar Esta Tarefa

Os componentes que você pode editar em Construtor de temas foram criados em ServiceNow AI Platform Sistema de design. Para obter mais informações, consulte Next Experience em ServiceNow Site do desenvolvedor.

Para obter instruções sobre como editar o. Navegação unificada componente, consulte Alinhe-se à sua marca usando Navegação unificada componente.

O número total de violações de acessibilidade é indicado no ícone de selo numerado vermelho Ao lado do painel Inspetor de acessibilidade.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Construtor de temas.
   . Construtor de temas A página principal é exibida na exibição da página inicial.
2. Use a lista suspensa Página para selecionar a exibição da página do Editor.

   Figura 1. Lista suspensa de páginas

   

3. Na lista suspensa Tema, selecione o tema cujos componentes você deseja editar.
4. Na exibição da página do Editor, selecione Estilos de componente .
   Os estilos de componente são listados graficamente.

   

5. Selecione Editando .

   

   Nota:

   Os componentes que podem ser editados são exibidos. Para obter informações sobre como filtrar a lista de componentes para localizar o componente que você deseja editar, consulte Visualizar componentes.
6. Selecione o componente que você deseja editar para acessar o painel Estilo configurável.
   Ao observar os componentes listados na página Edição, observe que alguns componentes podem exibir o símbolo a seguir.

   

   Nota:

   O símbolo de aviso de acessibilidade indica que o contraste de cor do componente selecionado não adere aos padrões de acessibilidade das Diretrizes de acessibilidade para conteúdo da Web (WCAG) 2,1 para contraste de cores. Para obter informações sobre como editar componentes com violações de acessibilidade, consulte Ajuste um componente para atender aos padrões de acessibilidade.
7. No painel Estilo configurável, edite os ganchos de tema que estão disponíveis para o componente selecionado, conforme necessário.

   Figura 2. Painel de estilo configurável

   

   Os ganchos de tema editáveis disponíveis dependem do tipo de componente selecionado. Por exemplo, se você selecionar um componente do selo, poderá editar as cores e os ganchos de acessibilidade do selo. Se você selecionar um componente de Link de texto, poderá editar a cor de base e os ganchos de acessibilidade.

   Nota:

   Depois de atualizar os ganchos específicos do componente, todas as mudanças feitas nos estilos globais não afetarão as edições do componente. Os estilos específicos do componente têm precedência sobre os estilos definidos globalmente.
8. Se você selecionar uma cor a ser editada, o seletor de cores será aberto.

   Figura 3. Seletor de cores

   

   Nota:

   Por padrão, o seletor de cores mostra todas as cores disponíveis para o componente. Use o. Minhas cores para selecionar em uma lista predefinida de cores ou escolher Personalizado Para selecionar o modelo de cor específico de sua preferência: HEXADECIMAL, RGB ou HSL.
9. Ao concluir as mudanças de cor, selecione Salvar mudanças .
10. Se você selecionar uma forma a ser editada, use os modais do seletor para escolher a largura da borda e o raio do canto.
11. Ao concluir as mudanças de forma, selecione Salvar mudanças .
12. Se você selecionar uma família de fontes ou uma face de fonte a ser editada, o modal do seletor será aberto.

    Figura 4. Modal Editar família de fontes

    

    Nota:

    Se você carregou uma fonte personalizada, ela aparecerá no modal para seleção. Você também pode carregar uma fonte personalizada diretamente do modal do seletor, tornando-a disponível para uso em todo o tema. Para obter mais informações, consulte Carregue uma fonte personalizada para o seu tema.
13. Ao concluir as mudanças de fonte, selecione Salvar mudanças .
14. Opcional: Selecione o ícone desfazer Para reverter sua fonte para o Source Sans Pro, se necessário.
15. Acesse o Editor de componentes, onde você pode estilizar vários aspectos de um componente usando uma das duas maneiras listadas:
    • Clique duas vezes no bloco do componente.
    • Selecione Interações de estilo , Subcomponentes de estilo , ou Variantes de estilo botão no painel estilos configuráveis, dependendo do que está disponível para esse componente específico.
      Nota:

      Nem todos os componentes contêm peças editáveis.

      Figura 5. Editor de componente

      

16. No Editor de componentes, escolha a interação, a variante ou o subcomponente do componente selecionado e edite os ganchos de tema disponíveis.
    Nota:

    Depois de salvar as mudanças em qualquer um dos ganchos de cor, um símbolo Remover substituição será exibido. O símbolo Remover substituição permite reverter as mudanças de cor de volta para as cores originais geradas automaticamente.

    

17. Opcional: Retorne à tela Visão geral do componente usando os links no caminho de navegação.

    Figura 6. Navegação da trilha de edição do componente

    

Resultado

Se o seu tema for publicado, as edições do componente ficarão visíveis para os usuários que tiverem o tema aplicado na atualização. Para obter informações sobre como publicar seu tema, consulte Publique seus temas com Construtor de temas.