Tudo o que você precisa saber sobre as unidades avançadas do Divi 5

Ótimas ferramentas de design fornecem controle sobre todos os aspectos do seu site. Seja pregando o preenchimento perfeito ou a garantia de que o texto escala na perfeição entre os dispositivos, todos os detalhes são importantes. A Divi é um companheiro de confiança para designers há anos, oferecendo uma base sólida para a construção de sites profissionais. O Divi 5 leva mais longe, introduzindo um recurso chamado Advanced Units.

As unidades avançadas no Divi 5 ajudam a melhorar a maneira como você cria sites. Desde os cálculos dinâmicos de calc () até a escala de fluido do grampo (), uma gama completa de unidades CSS como VW e REM e a flexibilidade das variáveis ​​CSS. Nesta postagem, mergulharemos profundamente em unidades avançadas, como usá -las no Visual Builder e por que elas são necessárias para todos os usuários do Divi. Se você é um layouts de ajuste fino ou sonhando com novos designs em negrito, as unidades avançadas fornecem ainda mais controle sobre a capacidade de resposta do seu design.

Vamos mergulhar.

O que são unidades avançadas no Divi 5?

As unidades avançadas no Divi 5 permitem controlar elementos de design com seu campo de unidade multifuncional. É um campo de entrada único e poderoso que aceita o espectro completo de unidades, funções e variáveis ​​CSS.

É uma pequena mudança no construtor visual que suporta todas as unidades CSS com novo suporte para variáveis ​​de conteúdo de ajuste, Unset, Calc (), Clamp () e CSS.

As unidades avançadas liberam você das restrições dos valores estáticos. Você não precisa adivinhar tamanhos de pixel ou lutar com pontos de interrupção para fazer as coisas em forma como você deseja. Sem deixar o Visual Builder, você pode criar layouts que flexionam e escalem sem esforço-com tipografia fluida, espaçamento adaptável e designs com reconhecimento de viewport. Não se trata apenas de mais opções; É sobre criatividade mais inteligente e escalável.

Explorando unidades avançadas no divi 5

O recurso de unidades avançadas da Divi 5 oferece várias opções de design, cada uma com maneiras únicas de moldar os layouts. Vamos examinar os principais jogadores e ver como eles funcionam.

Unidades CSS no Divi 5

As unidades avançadas abrem uma paleta completa de unidades CSS, muito além de pixels e porcentagens. Veja a largura da viewport (VW), por exemplo - defina a largura de uma seção para 80VW e sempre ocupará 80% da largura da viewport (horizontalmente), escalando perfeitamente do desktop para o celular.

Raiz EM (REM) Tamanhos ao tamanho da fonte raiz do site - idéia para tipografia consistente, como 4.5Rem para um título.

Você também pode tentar o conteúdo do ajuste, que tamanham um elemento com base em seu conteúdo. Por exemplo, o uso de conteúdo de ajuste para a largura do cabeçalho pode garantir que ele se adapte perfeitamente. Você pode adicionar conteúdo de ajuste ao campo de largura em uma linha para manter o cabeçalho compacto e proporcional, evitando espaço excessivo ou transbordamento, mantendo uma aparência polida.

Essas unidades se adaptam aos tamanhos e contextos da tela, dando aos layouts que parecem vivos e não trancados no lugar.

Calc () é uma calculadora dinâmica

A função CACL () é como uma mini calculadora incorporada no Divi. Ele permite misturar unidades com operações - adição, subtração, multiplicação e divisão - para obter resultados dinâmicos. Um exemplo clássico é Calc (100% - 50px) , que define a largura de uma seção para 100% e subtrai 50 pixels. Se o seu elemento estiver alinhado centralmente, 25px de ambos os lados serão reduzidos.

Você pode usar o calc () para espaçamento responsivo, como definir uma seção ou largura da linha para deixar calhas perfeitas de cada lado. Calc () ajusta em tempo real à medida que a viewport muda, garantindo que seu design permaneça equilibrado sem fazer ajustes manuais.

Grampo () para controle de fluido

A função Clamp () ajuda a controlar os tamanhos que se ajustam suavemente através dos tamanhos das tela. Ele usa três valores: um tamanho mínimo, um tamanho preferido e um tamanho máximo. Um bom exemplo é o grampo (36px, 4VW, 48px) .

Isso significa que o tamanho começa em 36px, aumenta com base em 4% da largura da viewport, mas nunca vai acima de 48px. É ótimo para texto, como um módulo de título que fica bem nos telefones pequenos e nas telas grandes. CLAMP () garante que seu design permaneça equilibrado e legível, independentemente do dispositivo.

Variáveis ​​CSS para flexibilidade global

Variáveis ​​CSS (ou propriedades personalizadas) permitem definir valores reutilizáveis, como –font-size: 5em , nas opções de temas da Divi ou no campo CSS Configurações da página. Ao adicionar variáveis ​​CSS no Divi 5, certifique -se de incluí -las no elemento pai como este:

:root {
--font-size:5em;
}

Depois de definido, você pode soltar var (–font-size) no campo de tamanho de texto de um título para aplicá-lo.

É um economizador que mantém seu design consistente e editável em tempo real.

Valores sem unidade

As unidades avançadas do Divi 5 também incluem valores iniciais, desviados e de automóveis. A propriedade inicial redefine uma propriedade CSS para seu valor padrão, conforme definido pela especificação CSS. Por exemplo, as configurações da cor: Inicial em um parágrafo o reverte para preto, ignorando qualquer estilo personalizado ou herdado. A Unset limpa uma propriedade de volta ao seu estado natural, agindo como inicial para propriedades não-herdadas ou revertendo para valores herdados quando aplicável. Enquanto isso, o automóvel permite que o navegador decida um valor com base no contexto, como a altura de uma seção para ajustar seu conteúdo.

Como as unidades avançadas funcionam no divi 5

As unidades avançadas no Divi 5 trazem um novo nível de controle diretamente para o Visual Builder, facilitando a criação de projetos dinâmicos e responsivos. Você pode digitar instantaneamente qualquer unidade, função ou variável CSS - como VW, Calc () ou Clamp () - e ver resultados. Veja como as unidades avançadas funcionam no Divi.

Largura da seção responsiva com Calc ()

Digamos que você queira uma seção que abranja 80% da altura da viewport, mas remove algum estofamento de cima e inferior. Navegue até a guia Design da seção, localize o campo de altura e adicione Calc (80VH - 60px) no campo.

Esse cálculo permite que a seção escala com fluidamente com a viewport, mantendo 80% da altura da viewport enquanto subtraia 30px da parte superior e inferior.

Tipografia fluida com grampo ()

CLAMP () pode ser útil se você precisar de títulos que crescem com o tamanho da tela, mas permaneçam legíveis. Na guia Design de um módulo de cabeçalho, defina o tamanho do texto do cabeçalho como grampo (52px, 2VW, 36px) .

Isso define o texto em 52px, aumenta com base em 2% da largura da viewport e captura o tamanho de 36px - fornecendo sem esforço a tipografia responsiva e equilibrada.

Tamanhos de fonte orientada a variável

As variáveis ​​CSS do Divi 5 são uma ótima maneira de obter uniformidade no espaçamento, texto e outras áreas. Você pode definir variáveis ​​uma vez e depois usá -las repetidamente em seus designs simplesmente adicionando -as a um campo de unidade de módulo, coluna, linha ou seção. Por exemplo, digamos que você queira tamanhos de cabeçalho consistente sem defini -los manualmente ou usar um grupo de opções predefinindo para defini -los.

Você pode adicionar o seguinte nas opções de temas ou configurações de página , em Avançado> CSS personalizado :

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

A partir daí, basta adicionar uma variável ao tamanho do texto do cabeçalho em qualquer módulo de título. Por exemplo, para este título em nossa seção de heróis, simplesmente adicionamos var (–Text-size-h1) . O Divi o reconhecerá como uma variável e atribuirá o estilo apropriado ao seu título.

Melhores práticas para unidades avançadas

Para tirar o máximo proveito das unidades avançadas no Divi 5, uma abordagem pensativa pode economizar tempo e garantir que seus designs brilhem. Aqui estão algumas práticas recomendadas para guiá -lo:

Comece simples

Se você é novo no uso de funções e variáveis ​​CSS, facilite as unidades familiares como pixels (PX) ou porcentagens (%), experimente o calc () para ajustes dinâmicos básicos. Por exemplo, tente calc (100% - 40px) para uma largura de seção antes de mergulhar nas variáveis ​​CLAMP () ou CSS. Isso cria confiança sem sobrecarregá -lo desde o início.

Alavancar variáveis ​​para estilos comuns

Defina variáveis ​​CSS nas opções de temas para consistência em todo o site. Por exemplo, configuração –Gutter: 30px permite reutilizar esse espaçamento entre seções, linhas e módulos. As variáveis ​​CSS também podem ser boas para definir um tamanho de texto uniforme para todos os seus títulos. Um edite atualiza tudo, acelerando o processo de design e mantendo seu design coeso.

Teste a capacidade de resposta

O sistema de visão responsiva da Divi é uma ótima maneira de projetar seu design em vários tamanhos de tela. Depois de aplicar unidades como VW ou Clamp (), alterne entre a área de trabalho, o tablet e a visualização móvel para garantir que seu layout se adapte sem problemas. Um conjunto de título para grampo (20px, 3VW, 40px) pode parecer perfeito em uma área de trabalho, mas pode precisar de ajustar para telas menores, portanto, teste -o para ter certeza.

Não fique muito complicado

Embora você possa aninhar funções como Calc (CLAMP (20px, 5VW, 50px) - 10px), você deve seguir fórmulas simples, pelo menos enquanto estiver aprendendo. A complexidade excessiva pode retardar o desempenho e dificultar a solução de problemas quando as coisas não aparecem como deveriam. Atenha -se a cálculos limpos e propositados para facilitar a vida.

Por que as unidades avançadas elevam o divi 5

As unidades avançadas são ótimas para simplificar o processo de design. Aqui estão algumas das principais vantagens que acompanham esse novo recurso:

• Liberdade criativa: misturar unidades, funções e variáveis ​​desbloqueia layouts que demoravam mais tempo para alcançar nas versões anteriores do Divi. As fórmulas simples permitem ajustar alturas, larguras, tamanhos de fonte e muito mais. Essa flexibilidade permite criar melhor e executar mais rapidamente, tudo dentro do Visual Builder.
• Designs melhores responsivos: as unidades avançadas mudam o divi para projetos de fluidos que se adaptam sem esforço. O uso de VW ou Clamp () garante que seu site pareça natural em qualquer dispositivo, reduzindo a necessidade de substituições manuais e oferecendo uma experiência polida.
• É à prova de futuro: as unidades avançadas estão alinhadas com a missão da Divi 5 de modernizar o construtor visual para a web de hoje. Ao abraçar todo o poder do CSS, o Divi 5 o equipa com as ferramentas necessárias para construir sites modernos. Não se trata apenas de acompanhar; Trata -se de ficar à frente da curva com ferramentas que refletem o que os desenvolvedores profissionais usam.

Baixe o último divi 5 alfa

As unidades avançadas são um recurso útil que foi adicionado recentemente ao Divi 5. Desde a precisão de Calc () até a fluidez do grampo () e a eficiência das variáveis ​​CSS, essas ferramentas tornam o espaçamento, o dimensionamento e a escalabilidade mais intuitivos do que nunca. Se você está usando o Divi há anos ou apenas o descobriu, pode criar sites dinâmicos e responsivos com menos esforço.

Pronto para ver você mesmo? Faça o download do Divi 5 Alpha agora e comece a experimentar unidades avançadas. Brinque com VW e VH para espaçamento de viewport, teste de teste () para tipografia ou configure variáveis ​​para repensar como você constrói. É uma chance de empurrar seus projetos ainda mais e descobrir o que é possível.