Usando as predefinições padrão do Divi 5 para estilizar todo o seu site

A chegada de predefinições do grupo de opções abriu tantas novas possibilidades no Divi 5. Nick disse que esse era o recurso mais importante para chegar ao Divi em anos e, ao testá -los, você verá exatamente por que ele disse isso .

Você já está acostumado a predefinições de elementos, mas as predefinições de grupo de opções adicionam uma nova camada de controle de design que você nunca vai parar de usar. No entanto, ambos os tipos de predefinições suportam " Presefets padrão ". É isso que eu quero mostrar ao longo das seguintes 2000 palavras.

O que são predefinições padrão no Divi 5?

Predefinições padrão são as primeiras predefinições que você deseja editar em seus sites. De muitas maneiras, estes são um substituto total para o personalizador de temas.

Você tem dois tipos de predefinições padrão com as quais você pode trabalhar imediatamente ao editar uma página - Presefetas de elementos padrão e predefinições de grupo de opções padrão . Vamos cobrir as predefinições de elementos primeiro porque é mais familiar, mas você deve iniciar todos os seus designs com predefinições de grupo de opções.

Predefinições de elemento padrão

As predefinições de elementos fazem um trabalho rápido para projetar um elemento que você usará muitas vezes em seu site. Com predefinições de elementos, você pode pegar um módulo como o módulo Blurb e editar a predefinição padrão do módulo. Depois que a predefinição padrão é editada, ele usa esses mesmos estilos ao adicionar um novo módulo Blurb ao seu site (porque novos itens usam as configurações padrão).

Como editar um elemento padrão predefinido

A edição de uma predefinição padrão é direta. Clique no elemento para o qual deseja alterar as configurações padrão (neste caso, um módulo de texto). No canto superior direito, clique no seletor predefinido.

Você deve ver pelo menos uma predefinição no menu suspenso - a predefinição padrão para esse elemento. Encontre as configurações (ícone de engrenagem) e clique nele para alterar as opções de configurações do elemento de página específico para as opções de configurações para a predefinição padrão.

Você saberá que está editando uma predefinição quando as farinhas (mostrando a posição aninhada do elemento em que estava trabalhando) desaparecem e a palavra " predefinição " aparece no canto superior esquerdo do painel de configurações. Você também notará que o seletor predefinido diz " predefinição padrão " e fica azul. A partir daqui, navegue para o grupo de opções de elementos que você deseja editar. Nesse caso, decidi ir para a guia Design> Texto> Tamanho do texto para editar o tamanho do conteúdo de texto para este módulo.

Clique em "Salvar predefinição" para que suas alterações ocorram em todo o site.

Caso você não soubesse
Se você está perto do Divi há um tempo, sabe sobre predefinições de módulos . As predefinições de elementos são iguais às predefinições do módulo, mas chamá-las de predefinições de módulos foi confuso porque as predefinições também podem ser usadas em elementos não módulos, como seções e linhas.

Vista de Wireframe de uma página no Divi 5. Observe como esta linha possui predefinições, sem ajustar os critérios para ser um módulo, mas sim um contêiner.

As predefinições de elemento padrão podem ser "substituídas" simplesmente aplicando um elemento personalizado diferente predefinido ao módulo (mais abaixo) ou aplicando estilos diretamente a um módulo ou elemento específico. O Divi, como o CSS, trabalha com regras de especificidade e, neste caso, as configurações aplicadas a um módulo diretamente são mais específicas do que as configurações aplicadas a uma predefinição do elemento padrão.

Mas há uma nova predefinição no bloco que você deve projetar seus sites Divi com primeiro.

Predefinições de grupo de opções padrão

As novas predefinições de grupo de opções da Divi permitem criar estilos padrão que abrangem vários módulos e elementos que podem usar grupos de opções semelhantes. Tudo isso é feito com as predefinições de grupo de opções "padrão" . Se você está confuso sobre os detalhes desse novo conceito de grupos de opções, pode ler mais sobre isso em nossa postagem, o que informa tudo o que você precisa saber sobre eles.

Aprenda sobre predefinições de grupo de opções

Em resumo, diferentes módulos têm composições diferentes (consulte a tabela abaixo para um exemplo comparando quatro elementos diferentes).

Quando os recursos compostos de um elemento se sobrepõem à de outros, eles podem compartilhar estilos no nível do grupo de opções - o que você economiza ao projetar motivos semelhantes em diferentes módulos e elementos (como o texto do título em muitos módulos). Particularmente com títulos, texto corporal, sombras, animações, funcionalidade pegajosa, bordas, espaçamento e botões, você estará projetando sites muito, muito mais rápido.

Como editar um grupo de opções padrão predefinido

Para editar uma predefinição de grupo de opções padrão, vá para um módulo ou painel de configurações de linha/seção. Passe o mouse sobre os grupos de opções disponíveis (texto, texto do título, botão, fundo etc.). Grupos de opções que suportam predefinições revelarão um ícone predefinido no lado direito desse campo OG quando pairou. Clique no ícone Preset para mostrar o padrão e qualquer predefinição personalizada para esse grupo de opções.

Aqui está um vídeo que demonstra a diferença entre editar um aspecto específico de um único módulo e editar o mesmo aspecto com uma predefinição de grupo de opções.

Você sabe que está editando uma predefinição do grupo de opções quando a interface do usuário muda de claro para escuro (a menos que você estivesse no modo escuro, nesse caso, é o oposto) apenas para o grupo de opções que você está editando atualmente. Você deve salvar alterações para que eles entrem em vigor.

Qual é a diferença entre predefinições padrão e personalizadas?

Predefinições padrão são os estilos aplicados automaticamente a quaisquer novos elementos (módulos/seções/linhas) colocados em uma página ou modelo. Não importa o quê, todos os elementos e todos os grupos de opções do Divi terão uma predefinição padrão. Veja abaixo de onde os estilos padrão vêm.

Predefinições personalizadas são predefinições adicionais que são fáceis de gerenciar e aplicar como predefinições padrão, mas não serão usadas automaticamente (você deve aplicar essas predefinições personalizadas no lugar do padrão). Eles são usados ​​em situações especiais, como seções escuras, barras laterais e displays densos de conteúdo - quaisquer que sejam suas necessidades de design.

Todo site deve ser projetado usando predefinições de grupo de opções padrão o mais longe possível. Em seguida, as predefinições de grupo de opções personalizadas adicionais devem ser criadas para lidar com situações semelhantes de acordo com as especificações do seu design. O que quer que não seja coberto por essas predefinições de OG pode ser projetado com predefinições de elementos padrão e predefinições de elementos personalizados. Você pode aplicar diretamente estilos a módulos individuais para os casos de borda restantes que ainda precisam ser projetados.

O Divi está em um estágio emocionante, com todos os novos recursos lançados. Quando as unidades avançadas e as variáveis ​​de design caem, você pode definir variáveis ​​CSS com todas as unidades e funções CSS. A partir daí, você pode usar essas variáveis ​​CSS em todas as suas predefinições, tornando seu fluxo de trabalho de design cerca de 10x mais consistente e rápido.

Há também um recurso planejado para permitir predefinições de grupo de opções de ninho em predefinições de elementos, permitindo criar predefinições de elementos com a lógica das predefinições de grupo de opções incorporadas a elas. Isso significa que, quando você edita uma predefinição do OG, ele também modificaria as predefinições relacionadas a elementos (e vice -versa até certo ponto).

O futuro parece brilhante para designers e desenvolvedores no Divi 5!

Como transformar uma predefinição personalizada em uma predefinição padrão

Temos predefinições padrão e também temos predefinições personalizadas. Vimos como aplicar uma predefinição personalizada em vez de padrão, mas e se gostarmos tanto que queremos torná -lo nosso padrão?

Bem, isso é fácil. Vá para as predefinições de elementos ou o grupo de opções predefinições suspensas . Passe o mouse sobre a predefinição personalizada que você deseja fazer com que seu padrão e clique no ícone das estrelas . Em seguida, salve suas alterações . Sua predefinição agora é a predefinição padrão em todo o site.

De onde vêm os estilos dentro das predefinições padrão?

Predefinições padrão não editadas simplesmente herdam os valores do estilo encontrados no personalizador do tema. Quase todos os temas do WordPress ainda usam algum aspecto do personalizador de temas (até os temas de bloqueio), embora o Divi tenha feito isso para que esteja conectado, mas não é necessário usar . Provavelmente substituiremos o personalizador em algum momento no futuro, mas, por enquanto, é uma relíquia transportada do núcleo do WordPress que é uma peculiaridade dos temas modernos do WordPress .

Digamos que usei o site de partida do Consultor Financeiro (como um exemplo concreto). No personalizador de temas, o tamanho do texto do cabeçalho é definido como 30px .

Eu posso ver o mesmo valor (30px) usado nas predefinições padrão entrando no editor visual para uma página, clicando na “ predefinição padrão ” para um módulo de título ou texto e verificando em design> Texto para a elevação H1.

Um valor cinza em um campo Divi 5 significa que é um valor herdado, neste caso, herdado do personalizador do tema

Mas esse é simplesmente o padrão definido por este site de partida. Se você usou predefinições de um pacote de layout importado ou iniciado do zero, diferentes valores padrão serão definidos no personalizador de temas.

Como usar predefinições padrão para construir um site

Eu recomendo iniciar suas construções com algumas páginas de wireframes. Deixe tudo em algumas páginas com o que você sabe que precisará ter projetado.

Tente confiar nos módulos mais simples para realizar o trabalho e repetir o uso do mesmo conjunto de módulos quando possível. Considere como você pode usar os módulos de cabeçalho, texto, sinopse, menu, imagem, acordeão/alternância e vídeo para criar a maioria dos quadros de fio da sua página. Adicione outros módulos conforme necessário, mas manter um conjunto principal de módulos para a maioria das coisas tornará muito mais rápido usar as predefinições padrão do grupo de opções e do elemento.

Esta página usa seções, linhas, colunas, texto, sinopse, imagem, botão e módulos de menu. Ao manter as coisas o mais simples possível para esta página em particular, reduzi o número de grupos de opções com quem preciso projetar.

Em seguida, você deseja começar a projetar suas alterações mais abrangentes com as predefinições de grupo de opções padrão. Para a maioria dos designs, este será:

1. Espaçamento da seção : Inclua margens superior/inferior, margens esquerda/direita e qualquer preenchimento necessário.
2. Seção Cores de fundo : Crie uma predefinição de grupo de opções padrão que você deseja usar na maioria dos casos e um grupo de opções personalizado predefinição para uma cor de fundo alternativa/contraste. Lembre -se de que as predefinições padrão à predefinição do grupo de opções de segundo plano também podem ser aplicadas ao plano de fundo das colunas.
3. Tipografia : comece com o seu H1-H6s. Dependendo do uso do seu módulo, você deseja iniciá -los nas predefinições de grupo de opções padrão em Texto de título para módulos de cabeçalho e texto e texto do título para módulos de blerb. Em seguida, trabalhe no texto normal, concentrando -se no grupo de opções de texto nos módulos de texto e grupos de opções de texto corporal encontrados em coisas como o módulo Blurb.
4. Outras configurações de design : crie predefinições de grupo de opções para bordas, sombras de caixa, filtros (se você estiver estilizando imagens) e animações. Para isso, tendem a não usar predefinições padrão, mas criar predefinições personalizadas que posso aplicar seletivamente aos elementos da página.
5. Configurações avançadas : isso é semelhante à etapa acima, mas eu crio predefinições de grupo de opções para coisas como transições e efeitos de rolagem. Também tendem a não usar predefinições padrão, mas criar predefinições personalizadas que posso aplicar seletivamente aos elementos da página.

A criação de predefinições de grupo de opções padrão dessa maneira começará automaticamente a aplicar seus estilos em seu site. Cada vez que um OG padrão é atualizado, os elementos relevantes em seus sites aceitam automaticamente essas alterações.

Predefinições padrão economizarão horas

As predefinições padrão, tanto o elemento quanto a variedade do grupo de opções, economizarão grandes quantidades de tempo. Mal posso esperar para você começar a construir sites com esses recursos usando o construtor ardente do Divi 5. E esse nem é o fim dos novos recursos lançados no Divi 5.

Com os recursos novos e planejados da Divi, você terá um verdadeiro sistema de design na ponta dos dedos. Você já tentou editar um site usando as predefinições padrão primeiro? Como foi? Informe -nos no comentário abaixo e compartilhe como você usa esses recursos.

Baixe o divi 5 aprenda tudo sobre o divi 5 tente a demonstração divi 5