Como transformar estilos de pacote de layout em padrões globais com Divi

A nova atualização dos padrões globais da Divi ajuda você a aplicar certos estilos de design a elementos em todo o seu site. Isso economiza seu tempo, ajuda a manter uma visão geral do seu site e estiliza cada configuração global da maneira que você está acostumado; dentro do próprio Divi Builder.

Agora, quando você usa um pacote de layout para o seu site, é provável que você queira transformar os estilos de pacote de layout em padrões globais, para que não precise ir e voltar. Mas qual é a melhor maneira de fazer isso? Mostraremos você no tutorial de caso de uso desta semana. Usaremos o Cyber ​​Security Layout Pack para demonstrá-lo, mas fique tranquilo, a técnica se aplica a qualquer pacote de layout que você usar.

Vamos lá!

1. Crie uma nova página para cada layout no pacote de layout

Se você está planejando transformar o estilo de um pacote de layout em padrões globais, a primeira coisa que você precisa fazer é criar uma página separada para cada layout que vem com o pacote de layout. Ter uma página separada para cada um dos layouts o ajudará na segunda etapa; escaneando elementos de design que são usados ​​em todo o pacote de layout e transformando-os em padrões globais.

2. Detecte os módulos usados ​​em todos os layouts e torne-os globais

Depois de criar uma página separada para cada layout, você pode começar a digitalizar as páginas para encontrar os diferentes módulos que são usados. Estamos pulando deliberadamente as configurações de seção, linha e coluna porque dependem do tipo de seção que você está criando. E para a maioria das seções e linhas, a equipe de design decide usar as configurações padrão do Divi para tornar mais fácil para você configurar seus próprios padrões globais.

Fomos em frente e detectamos os módulos usados ​​com mais frequência no Cyber ​​Security Layout Pack que contém estilos personalizados. Esses módulos também são alguns dos módulos mais populares da Divi e podem ser encontrados em quase todos os pacotes de layout:

• Módulo de Texto
• Módulo de botão primário
• Módulo Divisor
• Módulo de aceitação de email
• Módulo de formulário de contato

Transforme as configurações de corpo e título do módulo de texto em padrões globais

É hora de começar a transformar os estilos de módulo em padrões globais! Você precisará fazer este módulo por módulo. Começaremos com o Módulo de Texto. As únicas configurações que recomendamos tornar globais são as configurações do título e do texto do corpo. Esses dois grupos de opções provavelmente permanecerão os mesmos, não importa o design que você está criando. As outras configurações, como espaçamento e tamanho, geralmente dependem de como o Módulo de texto é influenciado pelo resto do design e são ajustados ao longo do caminho. Percorreremos o processo de definição de padrões globais para este módulo específico. Continuaremos, então, listando as configurações que recomendamos transformar em padrões globais para os outros módulos.

Em todos os layouts, três cabeçalhos de Módulo de Texto estão sendo usados; H1, H2 e H3. Vamos transformar esses três títulos e as configurações de texto de parágrafo em padrões globais. Se quiser ir além do H3, você pode estilizá-los manualmente nas configurações de texto globais do H3.

Na página inicial, você encontrará todas essas configurações espalhadas por diferentes módulos de texto. O primeiro Módulo de Texto na seção hero contém a cópia H1. Abra as configurações, vá para as configurações de texto H1, clique com o botão direito no item H1 e clique em 'Make Styles Default'.

Localize um Módulo de Texto com algum conteúdo de parágrafo a seguir. Vá para as configurações de texto, clique com o botão direito e clique em 'Tornar Estilos Padrão'.

O último Módulo de texto que abriremos contém os estilos de texto H2 e H3. Clique com o botão direito em cada um dos itens de título individualmente e clique em 'Tornar os estilos padrão'. Depois de passar por essas etapas, seus Módulos de texto estão prontos para começar!

Você terá que repetir essas etapas para cada um dos módulos recorrentes em seu site. Vamos passar para os outros.

1. Módulo de botão primário

Configurações de botão

Preenchimento

2. Módulo Blurb

Configurações de ícone (quando necessário)

Configurações de texto

Configurações de texto do título

Configurações do corpo do texto

3. Módulo divisor

Configurações de linha

Configurações de dimensionamento

4. Módulo de aceitação de e-mail

Módulo inteiro, exceto: Margem + Dimensionamento + Configurações de transformações

5. Módulo de formulário de contato

Módulo inteiro, exceto: Margem + Dimensionamento + Configurações de transformações

3. Salvar elementos recorrentes como itens (globais) para reutilização

Agora, depois de definir os padrões globais para os módulos usados ​​principalmente, ainda existem alguns outros elementos que você pode considerar reutilizar. Esses elementos são geralmente, mas não limitados a, os seguintes:

• Botão Secundário
• Botão Terciário
• Seções CTA
• Seções de rodapé
• Especificações do pacote de layout: Módulos de imagem com divisores de seção / Módulos Blurb com estilos diferentes / ...

Recomendamos que você salve esses elementos em sua biblioteca Divi e os reutilize conforme você avança. Isso ajuda a salvar alguns deles como itens globais em vez de regulares, como rodapés e seções de CTA. Recomenda-se que elementos como botões ou módulos de propaganda com estilos diferentes sejam salvos sem serem globais, para que você possa fazer alterações específicas na cópia e no design sempre que necessário.

Você pode salvar um elemento na Biblioteca Divi passando o mouse sobre ele, clicando no ícone salvar na biblioteca, dando um nome ao item da biblioteca, escolhendo se deseja torná-lo global e clicando em 'Salvar na biblioteca'.

4. Crie paleta de cores padrão nas opções do tema Divi

Depois de definir seus padrões globais e salvar os elementos recorrentes em sua Biblioteca Divi, você está quase pronto para começar a construir novas páginas do zero usando os padrões globais e itens de biblioteca. Antes de fazer isso, recomendamos que você altere a paleta de cores padrão nas Opções do tema Divi. Essas cores aparecerão em cada elemento de design que você abrir e o ajudarão a mudar as cores sem ter que copiar e colar códigos de cores constantemente. Isso permite que você se concentre no que é realmente importante; criando um site bonito e funcional. Vá para as Opções do tema Divi e certifique-se de incluir os seguintes tipos de cores em sua paleta de cores:

• Cores do Texto
• Cores de fundo
• Cores de destaque

5. Redefinir estilos de módulo em páginas existentes

Depois de definir seus padrões globais, salvar seus itens de biblioteca e escolher sua paleta de cores padrão, você pode começar a criar novas páginas do zero e ver a diferença na abordagem imediatamente. Se você, no entanto, tiver páginas existentes que foram modificadas antes de escolher os padrões globais, você terá que voltar e redefinir os estilos de módulo para que os padrões globais sejam aplicados. É assim que os padrões globais funcionam. Se você alterar algo sobre um módulo manualmente, terá que removê-lo manualmente também para que os padrões globais possam ser exibidos. Felizmente, você também pode usar o recurso de estender estilos que a Divi oferece para estender os estilos de redefinição por toda a página!

Pensamentos finais

Nesta postagem, mostramos como usar a nova atualização de padrões globais Divi para transformar pacotes de layout em padrões globais. Embora tenhamos usado o Cyber ​​Security Layout Pack, você pode fazer essa técnica funcionar em qualquer pacote de layout que escolher. Este tutorial de caso de uso é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, fique à vontade para deixá-las na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.