Trabalhar com predefinições de estilos

Artigo
07/30/2024

Isto artigo descreve como trabalhar com predefinições de estilo de sítio no construtor de sítios Microsoft Dynamics 365 Commerce .

Uma predefinição de estilo é um conjunto armazenado de todos os valores de estilo autorizáveis no tema de um sítio. Pode ser utilizado para alterar imediatamente o aspeto de um sítio a partir do construtor de sítios. As predefinições de estilo permitem aos autores do construtor de sites Commerce alterar, pré-visualizar e ativar rapidamente um conjunto de valores de estilo no seu site, sem terem de utilizar folhas de estilo em cascata (CSS) ou implementar temas. Os estilos de letra, os estilos de botão e as cores do 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 que está disponível num site é determinado pela biblioteca de temas e módulos que é implementada no inquilino de um site. O kit de desenvolvimento de software (SDK) em linha Dynamics 365 Commerce permite aos programadores implementar tantas (ou tão poucas) variáveis de estilo autorizáveis quantas as 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. Por conseguinte, os não programadores podem atualizar e pré-visualizar estilos de sítios utilizando o conjunto de ferramentas. A capacidade também é útil para qualquer cenário em que as alterações directas aos temas ou a CSS causem despesas gerais desnecessárias.

Os temas em que as variáveis de estilo autoráveis estão activadas 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 sítios.

No construtor de sítios, 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 activadas. Uma predefinição de estilo pode ser pré-visualizada no construtor de sítios antes de ser activada no sítio 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 sítio, aceda a Definições do sítio > Design.
No separador Style presets na parte superior do editor de design, na lista Available presets , seleccione uma predefinição e, em seguida, seleccione View para aceder ao editor de predefinições.

Se 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 no tema são indicadas por um emblema Built-in . Estas predefinições incorporadas são apenas de leitura. Para copiar uma predefinição incorporada como uma nova predefinição personalizável, seleccione o botão de reticências (...) para a predefinição e, em seguida, seleccione Guardar como.
Na barra de comandos, seleccione Preview.
Seleccione um URL do seu site a utilizar para pré-visualizar a predefinição de estilo e, em seguida, seleccione OK.
Seleccione a variante de URL específica do canal e da localidade para pré-visualizar, seleccionando o nome da variante. É aberta uma nova janela do navegador 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. Por conseguinte, pode copiar, colar e enviá-lo a outros colegas de trabalho autenticados para revisão antes de o definir como "ativo" no seu sítio ativo. O URL de pré-visualização também é útil para verificar estilos em diferentes dispositivos, em diferentes navegadores 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 navegador aberta numa janela separada do navegador, para que possa validar rapidamente as suas alterações. Depois de guardar as alterações numa predefinição, actualize a janela aberta do navegador 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 sítios, siga estes passos.

No painel de navegação esquerdo do seu sítio, aceda a Definições do sítio > Design.
No separador Style presets na parte superior do editor de design, na barra de comandos, seleccione New preset.
Introduza um nome e uma descrição para a nova predefinição e, em seguida, seleccione 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, seleccionando o botão de reticências (...) para essa predefinição e, em seguida, seleccionando Guardar como. Em alternativa, seleccione Guardar como na barra de comandos do 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 por variáveis de estilo global . 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 sítio 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 < CSS substituir

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

No painel de navegação esquerdo do seu sítio, aceda a Definições do sítio > Design.
No separador Style presets na parte superior do editor de design, seleccione View para qualquer predefinição de estilo para aceder ao editor de predefinições.
Seleccione Preview e, em seguida, siga os passos de seleção de URL para abrir uma pré-visualização em janela de navegador completo para a sua predefinição. Deixe esta janela do navegador de pré-visualização aberta.
No editor de predefinições, seleccione 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 Modules , à direita do separador Global , seleccione 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, seleccione Guardar na barra de comandos.
Regresse à janela aberta do navegador de pré-visualização e actualize-a. A pré-visualização da janela do navegador completo é útil para verificar as alterações de estilo em diferentes pontos de interrupção da vista, em diferentes navegadores e em diferentes plataformas de dispositivos.
Quando todas as alterações tiverem sido concluídas e validadas, seleccione Terminar 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 emblema azul Active no editor. Isto emblema indica que a predefinição está atualmente disponível no seu sítio Web. Se alterar a predefinição ativa, seleccione Publicar para transferir essas alterações para o seu sítio ativo.

Tornar uma nova predefinição de estilo ativa no seu sítio ativo

Para definir uma predefinição de estilo como a nova predefinição ativa no seu site, siga estes passos.

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

Os valores de estilo da predefinição são activados em todo o seu sítio Web público.