Construindo sua estrutura de design com divi 5

Se você já trabalhou com estruturas CSS como Bootstrap, entende por que é tão popular. Uma estrutura de design oferece uma base reutilizável para projetar layouts rápidos e consistentes, para que você não esteja construindo do zero toda vez que estiliza uma página.

Embora a maioria das estruturas dependa de aulas pré-escritas, elas ainda esperam que você escreva CSS personalizados para uma personalização mais profunda, o que os torna complicados para os não codificadores. É aí que o Divi 5 difere.

É preciso uma abordagem visual primeiro, substituindo o CSS por ferramentas como variáveis ​​de design, predefinições de grupo de opções e predefinições de elementos. Você obtém todo o poder de uma estrutura, sem escrever uma única linha de CSS. Nesta postagem, mostraremos como criar uma estrutura de design sem código visualmente usando o Divi 5.

O Divi 5 está pronto para ser usado em novos sites , mas ainda não recomendamos migrar os existentes.

Como o Divi 5 permite criar uma estrutura de design sem código

O Divi 5 é reconstruído do zero para tornar o Web Design avançado acessível a todos. Não importa o seu nível de codificação, ele permite criar visualmente os layouts personalizados modernos. Construir uma estrutura de design não é diferente.

Inscreva -se no nosso canal do YouTube

Variáveis ​​de design permitem definir valores de design global

As variáveis ​​de design permitem definir valores repetíveis, como as cores, fontes, espaçamento e muito mais da sua marca. Uma vez salvo, você pode reutilizar esses valores em todo o site para fornecer uma aparência visual consistente e de marca.

Dentro do Visual Builder, encontre o Variable Manager para definir e armazenar diferentes tipos de variáveis ​​(números, texto, imagens, links, cores e fontes) de maneira organizada.

As variáveis ​​de design são como uma versão sem código das propriedades personalizadas do CSS, mas têm muito mais flexibilidade. Por exemplo, você geralmente declara variáveis ​​CSS como : root {–Primary-cor: #1A73E8; } , mas com as variáveis ​​de design da Divi, você salva apenas a cor como uma cor primária .

Você verá seu verdadeiro poder enquanto faz atualizações. Não há necessidade de passar pela sua folha de estilo; Basta modificar o valor variável salvo uma vez no Variable Manager para atualizar todas as instâncias em todo o site. Eles permitem que você visualize rapidamente suas idéias sem procurar várias regras de estilo.

Além disso, você pode definir elementos de conteúdo comumente repetidos, como endereço, email, links, motivos de fundo, etc., como variáveis ​​de conteúdo. Você não precisa inseri -los manualmente várias vezes; Um clique e esses elementos aparecem na sua página. Por exemplo, salve e use o endereço da sua empresa como uma variável de texto.

Para aplicar uma variável de design, passe a opção e procure o ícone de conteúdo dinâmico.

Aprenda tudo sobre variáveis ​​de design

Salvar combinações de estilo comum com predefinições de grupo de opções

As predefinições de grupo de opções permitem salvar e reutilizar configurações de design usadas com frequência, como espaçamento, bordas, sombras, estilos de texto e fundos, sem precisar reconstruí -las sempre. Eles se concentram em um grupo específico de opções dentro de um módulo, para que você possa estilizar apenas essa parte e aplicá -lo em qualquer lugar com um clique.

Por exemplo, digamos que você sempre use o mesmo preenchimento de 40px e margem de 10px em todas as suas seções de depoimento. Salve essas configurações como uma predefinição de espaçamento . Ao adicionar um novo módulo de depoimento, selecione a predefinição e ele está pronto.

O que torna as predefinições de grupo de opções poderosas é que você pode misturá -las com variáveis ​​de design . Se a sua cor primária for salva como uma variável, você poderá usá -la dentro de uma predefinição de fundo; portanto, se a cor da marca mudar, todas as atualizações predefinidas com ela. Os fundos em todas as suas páginas mudam com um único clique.

As predefinições do grupo de opções não substituem todo o seu módulo, elas se aplicam apenas ao grupo de estilo que você escolher. Mas você sempre pode substituir as predefinições por configurações específicas do módulo para personalizar módulos específicos. Isso permite que você mantenha seu layout e conteúdo exclusivo, garantindo um estilo visual consistente em seu site.

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

Salvar elementos totalmente projetados com predefinições de elementos

Se você foi um usuário do Divi, já está familiarizado com as predefinições de elementos. Eles permitem salvar todos os estilos personalizados de um módulo, incluindo texto, espaçamento, cores, ícones, efeitos de pairar, como um elemento predefinido, para que você possa reutilizá -lo em qualquer lugar sem construir do zero. Você está basicamente criando uma versão pronta para uso de seus módulos mais usados.

Aqui está um caso de uso rápido: personalize e salve uma predefinição de sinopse e aplique -o a outros brotbos não sintéticos para modelá -los rapidamente.

Como essas ferramentas refletem no Frontend HTML

O Divi 5 pode parecer uma ferramenta sem código, mas na verdade está escrevendo código limpo e estruturado em segundo plano. Quando você ajusta as configurações visualmente, como escolher uma predefinição de espaçamento ou aplicar as cores da sua marca no Variable Manager, você não está apenas estilizando um módulo. Você também está escrevendo o código.

Toda decisão de design que você toma é traduzida para a saída adequada do front -end. O Divi lida com a parte da codificação enquanto você se concentra no design.

Para mostrar como isso é poderoso, compararemos o Fluxo de Trabalho Visual-primeiro no Divi 5 com uma abordagem manual usando uma estrutura CSS tradicional como o Bootstrap.

Primeiro Bootstrap:

Construindo um sistema de design manualmente com código no bootstrap

Para o nosso exemplo, usei uma configuração do WordPress com o tema da tipstra instalada.

Em um fluxo de trabalho típico baseado em código, você começaria definindo seus valores globais de design como variáveis ​​CSS. Aqui estão nossos:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Digamos que estamos construindo um layout de página de contato simples com um formulário de contato e um botão de estilo personalizado. Para manter tudo consistente e reutilizável, usaremos uma mistura de classes de serviços públicos da Bootstrap e nossas próprias variáveis ​​CSS.

Primeiro, adicionamos código personalizado para um formulário de contato usando as classes de formulários embutidas da Bootstrap para lidar com o layout e o estilo de entrada.

Em seguida, adicionamos o código para o nosso botão com estilo. Aqui, combinamos aulas de utilitário de bootstrap com nossas variáveis ​​CSS personalizadas para fundo, raio de borda e sombra. Isso nos dá controle total sobre a aparência. Se quisermos fazer alterações, podemos atualizar nossas variáveis.

Como você pode ver, é ótimo e eficiente, mas tudo é construído manualmente. Definimos as variáveis, aplicamos as classes e escrevemos todo o código sozinhos. E este é um layout simples, imagine construir páginas complexas usando essa abordagem!

Agora, vamos construir a mesma página usando o divi 5 sem codificação.

Recriando a mesma página visualmente com o divi 5

Começamos definindo nossas variáveis ​​de design global que se tornam parte do nosso sistema de design em todo o site. Primeiro, você vai para o Variable Manager> Colors . Em seguida, escreva o código hexadecimal para a cor primária (#e91e63) e salve.

Da mesma forma, você também pode salvar variáveis ​​de número para raio de borda {6px} e espaçamento. Em seguida, adiciono o módulo de formulário de contato e personalizo o botão Enviar ao meu estilo preferido:

Agora eu salvo essas configurações de botão como um botão predefinido para uso posterior.

Se eu adicionar outro botão e selecionar a predefinição do botão , veja o que acontece? Ele é estilizado automaticamente.

Para aplicar uma predefinição do grupo de opções, passe o mouse sobre a configuração e procure o ícone Configurações .

Além disso, você notou como aplicamos vários estilos personalizados em um botão em um clique sem tocar em uma única linha de código? É isso que queremos dizer quando dizemos que você economiza suas preferências de design visualmente. É o tipo de fluxo de trabalho que o Divi 5 é construído. É rápido, consistente e totalmente visual.

O que acontece nos bastidores é mágico. Divi não está apenas empilhando estilos cegamente. Toda variável de design, predefinição e configuração que você aplica é organizada em código limpo e eficiente renderizado no front -end.

A fonte da página da página projetada por Divi acima mostra que a cor primária é salva na seção raiz, assim como as variáveis ​​CSS:

E no frontend, as predefinições do seu grupo de opções são salvas automaticamente e saídas como CSS limpo direcionando as classes apropriadas (.et_pb_button, .et_pb_contact_submit).

Ambas as páginas parecem iguais, mas como elas foram construídas e mantidas são completamente diferentes.

No Bootstrap, nos beneficiamos de suas classes de utilidade, mas ainda tivemos que escrever código. Mas com o Divi 5, alcançamos o mesmo resultado sem tocar em uma linha de código, apenas usando seus recursos poderosos, como variáveis ​​de design e predefinições de grupo de opções.

Cada alteração foi aplicada em alguns cliques, sem risco de inconsistências, e ainda assim o código do front -end permaneceu limpo. A Divi armazena seus estilos em um formato estruturado e reutilizável, sem adicionar marcação desnecessária ou estilo embutido.

Como construir sua estrutura de design com divi 5

O Divi 5 oferece todas as ferramentas para criar um sistema de design escalável, mas assim como no desenvolvimento tradicional, a ordem em que você usa essas ferramentas é importante. Vamos caminhar pelas etapas e, mais importante, entender o porquê:

1. Defina suas variáveis ​​de design global

Antes de projetar uma página, comece definindo suas variáveis ​​de design global. Esses são os valores centrais em que todo o seu site confiará, como suas cores, fontes, tamanhos, unidades de espaçamento etc. Depois de definir os blocos de construção do seu site, você pode reutilizá -los em todos os lugares para manter tudo consistente, limpo e fácil de gerenciar.

No Divi 5, você tem o gerente variável para criá -los e organizá -los.

Veja como os tipos de variáveis ​​destacados desempenham um papel:

• Cores: salve as cores primárias, secundárias e de destaque da sua marca para que você não precise digitar códigos hexadecimais ou combinar tons. Salve suas variáveis ​​de cores e aplique -as com um clique.
• Fontes: defina as fontes exatas que você usa para títulos, texto corporal ou depoimentos. Em vez de selecionar as poppins em negrito toda vez que você criar um H2, salve-o como uma variável de fonte . Você poderá reutilizar o mesmo estilo nos módulos facilmente.
• Números: Armazene seus valores de design, como um raio de borda de 8px para cartões ou preenchimento de 32px para módulos de imagem, como variáveis ​​numéricas . Você também pode usar unidades avançadas dentro de variáveis ​​de números para fazer designs dinâmicos.

Depois que suas variáveis ​​principais forem definidas, todas as predefinições e páginas que você construirão dependerão delas. E se a direção do seu design mudar mais tarde (digamos, você deseja ajustar seu espaçamento base) , você só precisará atualizar a variável em um só lugar.

Depois de definir suas variáveis ​​de design corretamente, não há necessidade de caçar e modificar todas as instâncias. Basta alterar o valor uma vez no próprio gerenciador de variáveis .

2. Economize conteúdo globalmente recorrente

Usando o Variable Manager , você também pode salvar valores de conteúdo como links, texto e imagens que geralmente se repetem em seu site. Você normalmente copia e colava esses valores sempre, mas o Divi 5 permite defini -los uma vez e reutilizá -los em qualquer lugar.

Isso é especialmente útil para salvar links de mídia social, os detalhes de contato da sua empresa e outros conteúdos recorrentes que precisam ser adicionados manualmente.

Você pode salvar o conteúdo nas três variáveis ​​restantes:

• Texto: Digamos que o endereço da sua empresa apareça no rodapé, na página de contato e na seção de heróis da sua página inicial. Salve -o como uma variável de texto e selecione -a onde deseja que o endereço apareça.
• Links: salve URLs em sua página, coleções de produtos, perfis sociais ou termos e condições como variáveis ​​de link.
• Imagens: se você usar o logotipo da sua marca ou uma imagem de fundo em várias páginas, salve -a como uma variável de imagem . Imagine substituir imagens de espaço reservado em modelos em cliques!

Divi 5 permite tratar texto, links e imagens como blocos de construção reutilizáveis. Essas variáveis ​​de conteúdo podem parecer pequenas, mas impactam muito a velocidade, a precisão e a manutenção a longo prazo. Você economiza tempo, reduz erros e mantém seu site atualizado de forma consistente.

3. Crie e salve estilos principais com predefinições de grupo de opções

Depois que suas variáveis ​​de design estiverem no lugar, sua próxima etapa é definir os padrões principais de estilo do seu site usando as predefinições do grupo de opções. Salvar as configurações de design comumente usadas como predefinições e reutilizá -las em qualquer módulo.

Veja como aproveitar ao máximo as predefinições de grupo de opções:

1. Salvar predefinições para estilos comuns

Comece economizando predefinições para as configurações que você usa com mais frequência, como raio de borda, cores de fundo ou espaçamento. Digamos que eu sempre uso o preenchimento superior de 40px e a margem inferior de 10px para depoimentos, então salvei esses valores como uma predefinição de espaçamento.

Posso aplicar instantaneamente esse espaçamento aos meus depoimentos (e outros módulos, se quiser) . Faça isso para todos os grupos de configurações que você reutiliza de forma consistente: bordas, sombras de caixa, fundos de botão, etc., para que você possa reutilizá -las ao criar páginas.

2. Combine variáveis ​​de design com predefinições

Em seguida, fortaleça sua estrutura combinando variáveis ​​de design com predefinições de grupo de opções. Digamos que você salvou um raio de borda de 6px como uma variável numérica e usou -o enquanto cria sua predefinição do grupo de opções. Se você alterar a variável posteriormente, suas predefinições também serão atualizadas automaticamente em todo o site.

Da mesma forma, você pode criar tipografia fluida com um valor de grampo () para texto responsivo. Salve isso dentro de uma predefinição H1 e aplique -o de forma consistente aos títulos durante todo o seu layout. Essa combinação de predefinições e variáveis ​​é onde sua estrutura visual realmente começa a se tornar modular, escalável e fácil de manter.

Você também pode salvar as predefinições do grupo de opções como padrões , o que significa que os estilos também são aplicados automaticamente a novos módulos. Aplique os padrões em suas predefinições comuns para que você nem precise selecionar uma predefinição sempre.

4. Crie predefinições de elementos

Predefinições de elementos Preencha sua estrutura de design. Depois de salvar seus estilos preferidos como predefinições, você também deve salvar os estilos do módulo como predefinições de elementos.

Isso é especialmente útil para os módulos que você usa com frequência, como CTAs, depoimentos, brotados e formulários de contato. Por exemplo, se você denominou um botão CTA com a cor da sua marca, uma sombra suave e o preenchimento específico, você pode salvar todo esse design como uma predefinição chamada luz primária. Posteriormente, aplique -o instantaneamente a qualquer novo botão com um clique.

Definir predefinições de elementos como padrões

Você também pode definir qualquer elemento predefinido como padrão, para que todos os novos módulos desse tipo sigam automaticamente os estilos de design salvos. Salvando a predefinida do botão de luz primária acima como padrão, você verá o novo botão herdando seu estilo:

Os padrões aceleram seu fluxo de trabalho e você ainda pode substituí -los, se necessário. Mas, na maioria dos casos, ter predefinições bem definidas reduz o trabalho repetitivo e remove as suposições do design. Com esses três recursos combinados, você segue uma estrutura de design baseada em predefinição que faz com que a criação de sites sem código.

Projetando novas páginas com base em sua estrutura de design

Agora que salvei todas as minhas variáveis ​​de design preferidas, predefinições de grupo de opções e predefinições de elementos, vamos testar nossa estrutura.

Construir novas páginas tornou -se uma experiência muito mais rápida e mais fácil. Não preciso começar do zero ou restabelecer manualmente todos os módulos. Tudo o que preciso já está configurado.

Como você pode ver, apliquei várias alterações de design em apenas alguns cliques. Sim, eu importei um layout Divi pré, mas a personalizei em segundos com minha estrutura salva em vigor.

Em vez de selecionar fontes, ajustar o espaçamento ou ajustar as cores manualmente, simplesmente apliquei minhas predefinições salvas. O design do botão, os tamanhos de texto, os estilos de fundo e as fronteiras de imagens seguiram as configurações da estrutura que eu criei anteriormente.

A aplicação desses estilos manualmente em um módulo pode não ser um grande negócio. Mas quando você está personalizando uma página inteira, a diferença é clara. Você pode notar a facilidade e a velocidade com que fiz todas essas alterações. Este é o verdadeiro benefício de criar uma estrutura de design: ele acelera seu fluxo de trabalho sem sacrificar a qualidade ou consistência.

A melhor parte vem ao fazer atualizações. Se meus valores globais mudarem, só preciso modificar minhas variáveis ​​de design salvas por meio do Variable Manager. Também posso modificar meu grupo de opções e predefinições de elementos clicando no ícone de pequenas configurações.

Este é o Power Divi 5 traz para você. Ele permite criar, salvar e personalizar toda a sua estrutura de design sem tocar em uma única linha de código.

Construindo sua estrutura de design sem código visualmente

Criar uma estrutura de design não é mais apenas para desenvolvedores. Com as ferramentas certas, qualquer um pode fazê -lo, mesmo que você nunca tivesse tocado o código antes. Como você viu ao longo deste post, basta algumas etapas inteligentes para criar seu próprio sistema de design. Como? Usando o divi 5.

Divi 5 fornece as ferramentas para que isso aconteça

O Divi 5 lida com a complexidade e fornece controle total através de seus recursos avançados. Você pode construir mais rápido, manter -se consistente e fazer atualizações globais sem nunca deixar o Visual Builder. Legal, certo? Mas essa é apenas a ponta do iceberg, e estamos apenas começando!

Temos muitos outros recursos incríveis alinhados para o lançamento, e mal podemos esperar para você experimentá -los. Faça o download do alfa público hoje e crie sua própria estrutura de design sem restrições de codificação.

O Divi 5 está pronto para ser usado em novos sites , mas ainda não recomendamos migrar os existentes.