Trabalhar com predefinições de estilos

O Grupo de Interesse de Varejo do Dynamics 365 Commerce mudou do Yammer para o Viva Engage. Se você não tiver acesso à nova comunidade Viva Engage, preencha este formulário (https://aka.ms/JoinD365commerceVivaEngageCommunity) para ser adicionado e mantenha-se envolvido nas últimas discussões.

Este artigo descreve como trabalhar com predefinições de estilo de site no construtor de sites do Microsoft Dynamics 365 Commerce.

Uma predefinição de estilo é um conjunto armazenado de todos os valores de estilo editáveis no tema de um site. Pode ser utilizado para alterar imediatamente a aparência de um site do construtor de sites. As predefinições de estilo permitem que os autores do construtor de sites do Commerce alterem, pré-visualizem e ativem rapidamente um conjunto de valores de estilo em todo o site, sem ter de utilizar Folhas de Estilos em Cascata (CSS) ou implementar temas. Estilos de fonte, estilos de botão e cores de site são exemplos típicos de variáveis de estilo que podem ser geridas através de predefinições de estilo.

O conjunto de variáveis de estilo disponível num site é determinado pela biblioteca de temas e módulos implementada no inquilino de um site. O Software Development Kit (SDK) online do Dynamics 365 Commerce permite aos programadores implementar tantas (ou tão poucas) variáveis de estilo autorizáveis quantas forem necessárias para um determinado tema. Ao ativar mais variáveis de estilo, um programador de temas pode colocar as escolhas finais sobre os estilos do site nas mãos dos autores do construtor de sites. Assim, os não programadores podem atualizar e pré-visualizar estilos de sites utilizando o conjunto de ferramentas. A capacidade também é útil para qualquer cenário em que as alterações diretas aos temas ou ao CSS causarão uma sobrecarga desnecessária.

Os temas em que as variáveis de estilo criáveis estão ativadas requerem uma predefinição de estilo predefinida. Podem, opcionalmente, incluir opções predefinidas adicionais como parte de um pacote de temas implementado. Por exemplo, pode ser implementado um tema que tenha uma única predefinição de estilo "luz moderna". Em alternativa, pode incluir opções de predefinição de estilo adicionais para além da predefinição padrão, como "moderno escuro", "vintage claro" ou "vintage escuro". Estas predefinições de tema incorporadas são criadas por programadores e podem ser utilizadas como pontos de partida para novos designs de sites.

No construtor de sites, os autores podem selecionar entre as predefinições incorporadas de um tema ou podem criar as suas próprias predefinições e personalizações de estilo utilizando as variáveis de estilo ativadas. Uma predefinição de estilo pode ser pré-visualizada no construtor de sites antes de ser ativada no site ativo. Depois de as alterações de estilo de um autor serem revistas, a predefinição de estilo pode ser definida como "ativa" para o site ativo.

Pré-visualizar uma predefinição de estilo

Para pré-visualizar uma predefinição de estilo no seu site no construtor de sites, siga estes passos.

No painel de navegação esquerdo do seu site, vá para Definições do Site > Design.
No separador Predefinições de estilo na parte superior do editor de design, na lista Predefinições disponíveis, selecione uma predefinição e, em seguida, selecione Ver para ir para o editor de predefinições.

Se atualmente não existirem predefinições na lista Predefinições disponíveis, consulte Criar uma predefinição de estilo personalizada para obter informações sobre como criar uma predefinição de estilo personalizada.

Nota

As predefinições que foram incluídas com o tema são indicadas por um destaque Integrado. Estas predefinições internas são só de leitura. Para copiar uma predefinição incorporada como uma nova predefinição personalizável, selecione o botão de reticências (...) para a predefinição e, em seguida, selecione Guardar como.
Na barra de comandos, selecione Pré-visualizar.
Selecione um URL do seu site para usar para pré-visualizar a predefinição de estilo e, em seguida, selecione OK.
Selecione a variante de URL específica do canal e da localidade para ver ao selecionar o nome da variante. É aberta uma nova janela do browser de pré-visualização, onde a predefinição de estilo selecionada é aplicada à página especificada.

Nota

O URL de pré-visualização é persistente e autenticado. Assim, pode copiar, colar e enviá-lo a outros colegas de trabalho autenticados para revisão antes de o definir como "ativo" no seu site ativo. O URL de pré-visualização também é útil para verificar estilos em diferentes dispositivos, em diferentes browsers e em diferentes ecrãs.

Sugestão

Enquanto edita uma predefinição de estilo, poderá ser útil deixar a janela de pré-visualização do browser aberta numa janela separada do browser para poder validar rapidamente as suas alterações. Depois de guardar as alterações numa predefinição, atualize a janela aberta do browser de pré-visualização para validar a experiência do utilizador.

Criar uma predefinição de estilo personalizada

Para criar uma predefinição de estilo personalizado no construtor de sites, siga estes passos.

No painel de navegação esquerdo do seu site, vá para Definições do Site > Design.
No separador Predefinições de estilo, na parte superior do editor de design, na barra de comandos, selecione Nova predefinição.
Introduza um nome e uma descrição para a nova predefinição e, em seguida, selecione Guardar. É criada uma nova predefinição personalizável que utiliza os valores predefinidos do tema como ponto de partida.

Nota

Também é possível criar uma nova predefinição de estilo personalizado a partir de qualquer predefinição existente ao selecionar o botão de reticências (...) para essa predefinição e, em seguida, selecionar Guardar como. Como alternativa, selecione Guardar como na barra de comandos no editor de predefinições.

Modificar valores de estilo de tipo global e de módulo

Algumas das variáveis de estilo de um tema são partilhadas entre vários tipos de módulos. Estas variáveis de estilo são designadas como variáveis de estilo globais. Os exemplos incluem cores primárias do site, estilos de letra predefinidos e estilos de botões. Ao definir variáveis globais, pode alterar o aspeto em muitos tipos de módulos diferentes.

Alguns valores de estilo podem ser exclusivos de um tipo de módulo, ou podem ter de substituir opcionalmente um valor global predefinido. Se o tema de um site tiver implementado variáveis de estilo de tipo de módulo, os autores do construtor de sites podem personalizar o estilo de um tipo de módulo independentemente das definições globais. As variáveis de tipo de módulo podem aumentar ou substituir as variáveis de estilo globais num tema.

Nota

A hierarquia de valores de estilo num site comporta-se da seguinte forma. Os valores de estilo que aparecem mais à direita substituem os valores de estilo à sua esquerda.

Valores predefinidos do tema < Valores de estilo globais < Valores de estilo de tipo de módulo < Anulação de CSS

Para alterar os valores globais ou de tipo de módulo de uma predefinição de estilo no construtor de sites, siga estes passos.

No painel de navegação esquerdo do seu site, vá para Definições do Site > Design.
Nos separador Predefinições de estilo na parte superior do editor de design, selecione Ver para qualquer predefinição de estilo para aceder ao editor de predefinições.
Selecione Pré-visualizar e, em seguida, siga os passos de seleção de URL para abrir uma pré-visualização da janela completa do browser para a sua predefinição. Deixe esta janela de pré-visualização do browser aberta.
No editor de predefinições, selecione Editar no canto superior direito.
Utilize os controlos de variáveis de estilo no editor para alterar alguns valores de estilo globais.
Na parte superior do editor, no separador Módulos à direita do separador Global, selecione um tipo de módulo que deve ser estilizado.
Utilize os controlos de estilo para alterar alguns valores do tipo de módulo.
Quando estiver pronto para pré-visualizar as alterações, selecione Guardar na barra de comandos.
Regresse à janela aberta do browser de pré-visualização e atualize-a. A pré-visualização completa da janela do browser é útil para verificar alterações de estilo em diferentes pontos de interrupção de exibição, em navegadores diferentes e em plataformas de dispositivos diferentes.
Quando todas as alterações tiverem sido concluídas e validadas, selecione Concluir edição no canto superior direito do editor.

Nota

Se estiver a editar a predefinição de estilo que está atualmente ativa no seu site, verá um destaque Ativo no editor. Este destaque indica que a predefinição está atualmente disponível no seu site. Se alterar a predefinição ativa, selecione Publicar para enviar essas alterações para o seu site ativo.

Ativar uma nova predefinição de estilo no seu site ativo

Para estabelecer uma predefinição de estilo como a nova predefinição ativa no seu site, siga estas etapas.

Selecione o botão Definir como ativo num destes locais:
- A barra de comandos no editor de predefinições de estilo
- O menu de reticências (...) para qualquer predefinição disponível na vista principal no separador Predefinições de estilo em Definições do SIte > Design

Os valores de estilo da predefinição são ativados em todo o seu site voltado para o público.