Trabalhar com predefinições de estilos

Artigo
12/11/2024

Isto artigo descreve como trabalhar com predefinições de estilo de site em Microsoft Dynamics 365 Commerce construtor de sites.

Uma predefinição de estilo é um conjunto armazenado de todos os valores de estilo autorizados no tema de um site. Ele pode ser utilizado para alterar imediatamente a aparência de um site de construtor de sites. As predefinições de estilo permitem que os autores do Commerce construtor de sites alterem, pré-visualização 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 gerenciadas por meio de predefinições de estilo.

O conjunto de variáveis de estilo disponível em um site é determinado pelo tema e biblioteca de módulos implantados no locatário de um site. O Dynamics 365 Commerce SDK (Software Development Kit) online permite que os desenvolvedores implementem tantas (ou poucas) variáveis de estilo autoritárias quantas forem necessárias para um determinado tema. Ao habilitar mais variáveis de estilo, um desenvolvedor de temas pode colocar as escolhas finais sobre estilos de site nas mãos de construtor de sites autores. Portanto, os não desenvolvedores podem atualizar e pré-visualização estilos de site usando o conjunto de ferramentas. O recurso também é útil para qualquer cenário em que alterações diretas nos temas ou CSS causem sobrecarga desnecessária.

Os temas em que as variáveis de estilo autoráveis estão ativadas requerem uma predefinição de estilo padrão. Eles podem, opcionalmente, incluir opções predefinidas adicionais como parte de um pacote de tema implantado. Por exemplo, um tema pode ser implantado que tenha uma única predefinição padrão de estilo "luz moderna". Como alternativa, ele pode incluir opções adicionais de predefinição de estilo além da predefinição padrão, como "modern dark", "vintage light" ou "vintage dark". Essas predefinições de tema integradas são criadas por desenvolvedores e podem ser usadas como pontos de partida para novos designs de sites.

No construtor de sites, os autores podem selecionar entre as predefinições internas de um tema ou podem criar suas próprias predefinições de estilo e personalizações usando as variáveis de estilo habilitadas. Uma predefinição de estilo pode ser visualizada em construtor de sites antes de ser ativada no site ativo. Depois que as alterações de estilo de um autor são revisadas, a predefinição de estilo pode ser definida como "ativa" para o site ativo.

pré-visualização uma predefinição de estilo

Para pré-visualização uma predefinição de estilo no seu site no construtor de sites, siga estas etapas.

No painel de navegação esquerdo do seu site, vá para Design de Configurações do > Site.
Na guia 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 Exibir para ir para o editor de predefinições.

Se atualmente não houver predefinições na lista Predefinições disponíveis, consulte Criar uma predefinição de estilo personalizado 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 selo integrado . Essas predefinições internas são somente 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é-visualização.
Selecione um URL do seu site para usar para pré-visualização a predefinição de estilo e, em seguida, selecione OK.
Selecione a variante de URL específica do canal e da localidade para pré-visualização selecionando o nome da variante. Uma nova janela pré-visualização navegador é aberta, onde a predefinição de estilo selecionado é aplicada à página especificada.

Nota

O URL pré-visualização é persistente e autenticado. Portanto, você pode copiar, colar e enviá-lo para outros colegas de trabalho autenticados para revisão antes de defini-lo como "ativo" em seu site ativo. O URL pré-visualização também é útil para verificar estilos em diferentes dispositivos, em diferentes navegadores e em diferentes telas.

Sugestão

Ao editar uma predefinição de estilo, você pode achar útil deixar a janela pré-visualização do navegador aberta em uma janela separada do navegador, para que você possa validar rapidamente suas alterações. Depois de guardar as alterações em uma predefinição, atualize a janela aberta pré-visualização navegador para validar a experiência do utente.

Criar uma predefinição de estilo personalizada

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

No painel de navegação esquerdo do seu site, vá para Design de Configurações do > Site.
Na guia 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 pode criar uma nova predefinição de estilo personalizada a partir de qualquer predefinição existente selecionando o botão de reticências (...) para essa predefinição e, em seguida, selecionando Guardar como. Como alternativa, selecione Salvar 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ódulo. Essas variáveis de estilo são chamadas de variáveis de estilo global . Os exemplos incluem cores primárias do site, estilos de fonte padrão e estilos de botão. Ao definir variáveis globais, você pode alterar a aparência em muitos tipos de módulos diferentes.

Alguns valores de estilo podem ser exclusivos de um tipo de módulo ou podem ter que substituir opcionalmente um valor global padrão. Se o tema de um site tiver implementado variáveis de estilo de tipo de módulo, construtor de sites autores poderão personalizar o estilo de um tipo de módulo independentemente das configurações globais. As variáveis de tipo de módulo podem aumentar ou substituir as variáveis de estilo global em um tema.

Nota

A hierarquia de valores de estilo em um site se comporta da seguinte maneira. Os valores de estilo que aparecem mais à direita substituem os valores de estilo à esquerda deles.

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

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 Design de Configurações do > Site.
Na guia Predefinições de estilo na parte superior do editor de design, selecione Exibir para qualquer predefinição de estilo para ir para o editor de predefinições.
Selecione pré-visualização e siga as etapas de seleção de URL para abrir um pré-visualização de janela completa do navegador para sua predefinição. Deixe esta pré-visualização janela do navegador aberta.
No editor de predefinições, selecione Editar no canto superior direito.
Use os controles de variável de estilo no editor para alterar alguns valores de estilo global.
Na parte superior do editor, na guia Módulos à direita da guia Global , selecione um tipo de módulo que deve ser estilizado.
Use os controles de estilo para alterar alguns valores para o tipo de módulo.
Quando estiver pronto para pré-visualização as alterações, selecione Salvar na barra de comandos.
Volte à janela aberta do navegador pré-visualização e atualize-a. O pré-visualização de janela completa do navegador é ú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 você estiver a editar a predefinição de estilo que está atualmente ativa em seu site, verá um selo Ativo azul no editor. Esse selo indica que a predefinição está ativa no seu site. Se você 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 definir uma predefinição de estilo como a nova predefinição ativa no seu site, siga estas etapas.

Selecione o botão Definir como ativo em um 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 Design das Definições do > Site

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