Trabalhar com predefinições de estilo

Artigo
07/30/2024

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 que pode ser criado no tema de um site. Ele pode ser usado para alterar imediatamente a aparência de um site do construtor de sites. As predefinições de estilo permitem que o criador de sites do Commerce altere, visualize e ative rapidamente um conjunto de valores de estilo no site sem a necessidade de usar folhas de estilo em cascata (CSS) ou implantar 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 que está disponível em um site é determinado pelo tema e pela biblioteca de módulos que é implantado para o locatário de um site. O kit de desenvolvimento de software (SDK) online do Dynamics 365 Commerce permite que os desenvolvedores implementem o máximo (ou o mínimo) de variáveis de estilo que podem ser criadas quanto forem necessárias para um determinado tema. Ao habilitar mais variáveis de estilo, um desenvolvedor de temas poderá colocar as escolhas finais sobre os estilos de site nas mãos dos autores do construtor de sites. Portanto, os não desenvolvedores podem atualizar e visualizar estilos de site usando o conjunto de ferramentas. O recurso também é útil para qualquer cenário no qual as alterações diretas nos temas ou CSS causarão sobrecarga desnecessária.

Os temas nos quais as variáveis de estilo são habilitadas exigem uma predefinição de estilo padrão. Opcionalmente, eles podem incluir opções de predefinição adicionais como parte de um pacote de tema implantado. Por exemplo, um tema pode ser implantado e ter uma única predefinição de estilo padrão de "luz moderna". Como alternativa, ele pode incluir opções de predefinição de estilo adicionais além da predefinição padrão, como "escuro moderno", "claro vintage" ou "escuro vintage". Essas predefinições de tema internas são criadas por desenvolvedores e podem ser usadas como pontos de partida para novos designs de site.

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

Visualizar uma predefinição de estilo

Para visualizar uma predefinição de estilo no seu site no construtor de sites, siga estas etapas.

No painel de navegação esquerdo do site, Acesse Configurações do Site > Design.
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.

No momento, se não houver 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.

Observação

As predefinições incluídas no tema são indicadas por um emblema Interno. Essas predefinições internas são somente leitura. Para copiar uma predefinição interna como uma nova predefinição personalizável, selecione o botão de reticências (...) para a predefinição e selecione Calvar como.
Na barra de comandos, selecione Visualização.
Selecione uma URL do site a ser usada para visualizar a predefinição de estilo e, em seguida, selecione OK.
Selecione a variante de URL específica do canal e da localidade a ser visualizada selecionando o nome da variante. Uma nova janela de visualização do navegador é aberta, na qual a predefinição de estilo selecionada é aplicada à página especificada.

Observação

A URL de visualização é persistente e autenticada. Portanto, você pode copiá-la, colá-la e enviá-la a outros colaboradores autenticados para revisão antes de defini-la como "ativa" no seu site ao vivo. A URL de visualização também é útil para verificar estilos em diferentes dispositivos, em navegadores diferentes e em telas diferentes.

Dica

Enquanto você edita uma predefinição de estilo, pode ser útil deixar a janela de visualização do navegador aberta em uma janela separada do navegador, para que você possa validar rapidamente suas alterações. Depois de salvar as alterações em uma predefinição, atualize a janela do navegador de visualização para validar a experiência do usuário.

Criar uma predefinição de estilo personalizada

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

No painel de navegação esquerdo do site, Acesse Configurações do Site > Design.
Na guia Predefinições de estilo na parte superior do editor de design, na barra de comandos, selecione Nova predefinição.
Insira um nome e um descrição para a nova predefinição e selecione Salvar. É criada uma nova predefinição personalizável que usa os valores padrão do tema como ponto de partida.

Observação

Você também pode criar uma nova predefinição de estilo personalizado de qualquer predefinição existente, selecionando o botão de reticências (...) para essa predefinição e selecionando Salvar 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 variáveis de estilo de um tema são compartilhadas entre vários tipos de módulo. Essas variáveis de estilo são mencionadas como variáveis de estilo globais. Exemplos incluem cores de site principal, estilos de fonte padrão e estilos de botão. Ao definir variáveis globais, você poderá alterar a aparência entre vários tipos diferentes de módulo.

Alguns valores de estilo podem ser exclusivos para um tipo de módulo, ou talvez precisem substituir um valor global padrão. Se o tema de um site tiver implementado variáveis de estilo de tipo de módulo, os autores do construtor de sites 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 globais em um tema.

Observação

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

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

Para alterar os valores de tipo global ou de módulo de uma predefinição de estilo no construtor de sites, siga estas etapas.

No painel de navegação esquerdo do site, Acesse Configurações do Site > Design.
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 Visualização e, em seguida, siga as etapas de seleção da URL para abrir uma visualização de janela inteira do navegador para a predefinição. Deixe esta janela de visualização 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 visualizar as alterações, selecione Salvar na barra de comandos.
Retorne à janela de visualização do navegador aberta e atualize-a. A visualização de tela inteira do navegador é útil para verificar alterações de estilo em diferentes pontos de quebra de exibição, em diferentes navegadores e em diferentes plataformas de dispositivos.
Quando todas as alterações tiverem sido concluídas e validadas, selecione Terminar edição no canto superior direito do editor.

Observação

Se você estiver editando a predefinição de estilo atualmente ativa no seu site, verá um emblema Ativo azul no editor. Esse emblema indica que a predefinição está atualmente ativa no seu site. Se você alterar a predefinição ativa, selecione Publicar para enviar essas alterações ao seu site ao vivo.

Tornar uma nova predefinição de estilo ativa no seu site ao vivo

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 dos seguintes locais:
- A barra de comandos no editor de predefinição de estilo
- O menu de reticências (...) para qualquer predefinição disponível na exibição principal da guia Predefinições de estilo em Configurações do Site > Design

Os valores de estilo da predefinição são ativados no seu site público.