Alinhe com sua marca usando o componente Navegação unificada

Alinhe sua experiência com sua marca editando o componente Navegação unificada e seus subcomponentes.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

O componente Navegação unificada é composto por vários subcomponentes que você deve estilizar individualmente. Na versão Construtor de temas 5.0, a edição de Navegação unificada está limitada ao cabeçalho e aos menus, embora alguns estilos possam se aplicar a todos os aspectos do componente Navegação unificada e dos subcomponentes.

Procedimento

1. Navegar até Tudo > Estrutura do Now Experience > Temas > Construtor de temas.
2. Na lista suspensa Página, selecione a exibição da página Editor.

   Figura 1. Exibição de página do editor

   

3. Na lista suspensa Tema, selecione o tema para o qual você deseja editar o componente Navegação unificada.
4. Selecione a guia Estilos de componente.
5. Selecione a guia Edição.

   

6. Filtre a lista para exibir o componente Navegação unificada.
   1. Selecione o ícone Filtro ( ).
   2. Expanda a categoria Navegação e selecione o componente Navegação unificada.

      Figura 2. Componente do Navegação unificada

      

7. Acesse o Editor de componente, onde você pode estilizar vários aspectos do componente Navegação unificada usando uma das duas maneiras listadas:
   • Clique duas vezes no bloco do componente Navegação unificada.
   • No painel de edição Navegação unificada, selecione Subcomponentes de estilo.

   Figura 3. Navegação unificada painel de edição

   

8. Selecione o bloco Cabeçalho ou Menu para abrir o painel de estilos configuráveis, onde você pode editar os ganchos de tema disponíveis.
   Os ganchos de tema editáveis disponíveis dependem do tipo de subcomponente selecionado. Por exemplo, se você selecionar um subcomponente Cabeçalho, poderá editar as cores de fundo do Cabeçalho. Se você selecionar um subcomponente de Menu, poderá editar o plano de fundo, o texto e as cores do ícone.

   Nota:

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

   

9. Clique duas vezes no cabeçalho ou no bloco Menu ou selecione Subcomponentes de estilo para editar os subcomponentes disponíveis.
   Um subcomponente é uma parte menor de um componente maior. Por exemplo, o subcomponente Navegação unificada Cabeçalho ou Menu é uma parte menor do componente Navegação unificada. Uma interação descreve as diferentes maneiras como o componente ou subcomponente se comporta. Por exemplo, as interações Padrão ou de Foco são interações do subcomponente Menu Gatilho.

   Figura 4. Navegação unificada Opções de edição do subcomponente do cabeçalho

   

10. Continue editando cada subcomponente e interação até concluir o estilo do componente Navegação unificada.
    Por exemplo, depois de clicar duas vezes no subcomponente do gatilho de menu de cabeçalho, as interações do gatilho de menu ficam disponíveis para estilização. Da mesma forma, se você clicar duas vezes no subcomponente Menu, os subcomponentes e as interações de cada menu estarão disponíveis.

    Nota:

    O recurso de cor da tela aplica automaticamente a cor de fundo do subcomponente primário.
11. Opcional: Ao editar determinados subcomponentes, como o Menu, escolha qual configuração você deseja visualizar.
    Por exemplo, ao editar o subcomponente Menu, depois de selecionar Configuração do componente, você pode selecionar o menu específico que deseja editar na lista suspensa Tipo. Depois de selecionar o menu desejado, todos os subcomponentes disponíveis para esse menu específico são listados.

    Figura 5. Menu de configuração do componente

    

12. Opcional: Para retornar a uma tela de edição de componente anterior, selecione um dos links de trilhas.

    Figura 6. Navegação por trilhas de edição de componente

    

Resultado

Se o seu tema for publicado, suas Navegação unificada edições ficarão visíveis para os usuários que têm seu tema aplicado na atualização. Para obter informações sobre como publicar seu tema, consulte Publique seus temas com Construtor de temas.