--- 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 --- # Editar componentes # Editar componentes {#ariaid-title1} * Versão de lançamento: Yokohama * * Atualizado 30 de jan. de 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura Editar Construtor de temascomponentes 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: administrador ## Por Que e Quando Desempenhar Esta Tarefa Os componentes que você pode editar em Construtor de temasforam criados em Now Platform Sistema de design. Para obter mais informações, consulte [Next Experience](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?releases[]=vancouver&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades)em ServiceNowSite do desenvolvedor. Para obter instruções sobre como editar o. Navegação unificadacomponente, consulte [Alinhe-se à sua marca usando Navegação unificadacomponente](https://servicenow-prod.fluidtopics.net/0BdmSX9HlAiy~JZ4DGwPxQ "Alinhe sua experiência mais estreitamente com sua marca editando o. Navegação unificadae seus subcomponentes."). O número total de violações de acessibilidade é indicado no selo numerado vermelho ![Selo numerado do inspetor de acessibilidade]()Ao lado do painel Inspetor de acessibilidade. ## Procedimento 1. Navegar até TudoEstrutura do Now ExperienceTemasConstrutor de temas. A página principal do Construtor de temas é 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. Exibição da página do editor 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 . ![Guia Edição de estilos de componente.]() 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 tb-preview-components.html. 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. ![Erro de acessibilidade.]() Nota: O símbolo de aviso de acessibilidade indica que o contraste de cor do componente selecionado não está em conformidade com os padrões de acessibilidade das Diretrizes de acessibilidade de conteúdo da web (WCAG) 2,1 para contraste de cores. Para obter mais informações, consulte [Ajuste um componente para atender aos padrões de acessibilidade](https://servicenow-prod.fluidtopics.net/UzuGRl_j3fBJXN0g5PiqLQ "Ajuste um componente para atender às Diretrizes de acessibilidade para conteúdo da web (WCAG) 2,1. Quando você está editando um componente em Construtor de temase ver um símbolo de aviso, que indica que o componente não está em conformidade com as diretrizes de contraste de cor."). 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: Após atualizar os ganchos específicos do componente, as mudanças feitas no estilo global não atualizarão os estilos do componente porque 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. Você pode selecionar o controle deslizante Ocultar opções inacessíveis para limitar as opções de cores às cores identificadas como acessíveis, com base nas diretrizes atuais das Diretrizes de acessibilidade para conteúdo da web (WCAG). 9. Após concluir as mudanças, selecione Salve as mudanças . 10. 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. Nem todos os componentes contêm peças editáveis.Figura 4. Painel de estilo configurável com botão Estilo {#tb-edit-components__ul_idn_dqs_tdc} 11. **Opcional:** Retorne à tela Visão geral do componente usando os links no caminho de navegação. Figura 5. Navegação da trilha de edição de componente {#tb-edit-components__steps_zc5_vgt_zyb} ## Resultado Se o seu tema estiver publicado no momento, as edições do componente ficarão visíveis para os usuários que tiverem o tema aplicado após a atualização. Para obter informações sobre como publicar seu tema, consulte [Publique seus temas com Construtor de temas](https://servicenow-prod.fluidtopics.net/WbbdPyAUiOYa2i5atsHSdg "Publique vários temas em sua instância da web ou um único tema em sua instância móvel para refletir a marca da sua empresa.").