Dominar a proporção dourada no design

Seu design parece quase certo, mas algo parece errado. O espaçamento parece estranho. As proporções não funcionam. Você ajusta as margens e o preenchimento, mas essa sensação incômoda de desequilíbrio permanece. A peça que falta pode ser a proporção dourada.

Esse princípio matemático orientou um ótimo design há séculos. E nossos olhos naturalmente preferem essas proporções específicas. A maioria dos designers pula as proporções douradas ou as aplica mal por causa de quão difícil é quebrar. No entanto, com um construtor de páginas como o Divi 5, você pode aplicar proporções perfeitas sem cálculos complexos.

Vamos descobrir mais.

Qual é a proporção dourada?

A proporção dourada é igual a aproximadamente

1.618.

De onde veio? Você obtém esse número quando divide uma linha em duas partes, onde a parte mais longa dividida pela parte mais curta é igual a toda a linha dividida pela parte mais longa.

Você pode calcular a proporção dourada usando a sequência de Fibonacci. Comece com 0 e 1. Adicione -os para obter 1. Em seguida, adicione 1 e 1 para obter 2. Continue adicionando os dois últimos números: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Quando você divide qualquer número maior do número anterior, você se aproxima de 1,618.

Essa proporção aparece em toda parte da natureza. As espirais das sementes de girassol o seguem. As conchas de Nautilus crescem usando essas proporções. Até o seu rosto provavelmente segue as medidas da proporção dourada entre seus recursos. Quando algo segue essa proporção, seu cérebro o reconhece como naturalmente agradável.

Imagens cortesia: Lucas e Dynamic Wang em Unsplash e Milena Carolina dos Santos Mangueira

O símbolo φ (phi) representa uma razão matemática única que os gregos antigos descobriram em torno de 300 aC. Eles se referiram a ele como a "proporção divina", acreditando que revelou um equilíbrio visual e beleza especiais.

Por que isso importa: de edifícios antigos a web design

Os gregos usaram essa proporção para o templo de Partenon, e as pirâmides egípcias seguem essas medidas. Artistas como Leonardo da Vinci estudaram essas proporções por anos. Da Vinci atraiu o famoso "homem vitruviano", mostrando as proporções douradas no corpo humano.

Imagem representacional

Designers bem estabelecidos ainda usam isso. O logotipo da Apple usa as proporções de proporção dourada. O logotipo das aves do Twitter seguiu essas medições. As revistas colocam conteúdo importante em pontos de proporção dourada, em vez de direito no centro.

Imagens cortesia: Widewalls & Design Shack

Os cientistas estudaram por que as pessoas gostam de formas de proporção dourada. As varreduras cerebrais mostram mais atividade nas áreas de prazer quando as pessoas olham para os retângulos da proporção dourada. Isso é inerente aos seres humanos, pois isso acontece em todas as culturas e idades.

Seu cérebro processa essas proporções mais rapidamente do que outras proporções, o que significa uma melhor experiência do usuário. Quando as proporções do site chegam muito longe de 1.618, os visitantes se sentem desconfortáveis ​​e saem mais cedo.

A proporção cria equilíbrio sem ser perfeitamente par. A simetria perfeita pode parecer chata nos sites. A proporção dourada fornece assimetria suficiente para criar interesse visual, mantendo o visual limpo e profissional que os usuários esperam.

Por que seus designs se sentem "fora" (e como as proporções corrigem isso)

Você acabou de passar horas aperfeiçoando seu layout. As cores estão certas. As fontes funcionam juntas. Mas algo ainda parece errado. A barra lateral parece muito larga. O cabeçalho parece um pouco apertado. A área de conteúdo não flui com o resto.

Esta é uma experiência comum. Muitos designers ajustam os tamanhos com base no que parece certo no momento. Talvez você defina o conteúdo principal para 70 % e a barra lateral para 30 %. Esses números parecem razoáveis, mas nem sempre parecem naturais.

Nossos olhos procuram equilíbrio e padrões familiares. Quando as proporções não estão certas, todo o design parece estranho, mesmo que você não possa explicar o porquê. Pode não ser um grande erro, apenas um pequeno detalhe que o injeta.

O problema real é frequentemente proporção. Quando os layouts ignoram o que parece equilibrado, seu cérebro avisa. Algo parece desligado, mesmo que você não consiga colocar o dedo nele.

Como os índices errados sabotam a experiência do usuário

Proporções ruins fazem as coisas parecerem estranhas. Seu cérebro espera que certas formas e tamanhos sejam bem juntos. Imagine uma seção de heróis que ocupe exatamente metade da sua tela. Parece rígido e estranho.

Agora, considere um que usa 43 % ou 67 % do espaço. Isso parece desequilibrado e bagunçado.

Isso pode prejudicar seu site. As pessoas decidem muito rápido se confiam no que vêem. Se a página olhar, eles podem pensar que seu negócio não é confiável. O design confuso faz as pessoas acreditarem que seu trabalho não é bom.

A proporção dourada pode ajudar a consertar isso. Em vez de tornar visível sua seção de heróis, tente 61,8 %, deixando visíveis a próxima seção 38,2 %.

Esses números não são aleatórios. Eles seguem um padrão especial chamado 1.618 que você vê na natureza, como em flores e conchas. Seus olhos conhecem esse padrão e se sentem calmos quando o vêem.

O truque é como as partes se relacionam. Tudo parece certo se o tamanho do seu cabeçalho corresponder à sua área de conteúdo usando a proporção dourada. Seu rodapé, menu e conteúdo começam a se encaixar, em vez de parecer que estão lutando pelo espaço.

Como calcular proporções de proporção dourada

Você não precisa de matemática sofisticada. Lembre -se de 62 e 38. Esses números somam 100, para que funcionem como porcentagens.

Divida qualquer espaço, dando 62% na parte maior e 38% na parte menor. Seu site tem 1000 pixels de largura. Faça seu conteúdo principal 620 pixels. Coloque sua barra lateral em 380 pixels. Proporção dourada perfeita.

Tenho uma seção de 500 pixels. Sua área principal recebe 310 pixels. O resto recebe 190 pixels.

Regras rápidas para peças do site

A seção de heróis deve levar cerca de 60% do que as pessoas veem primeiro. O resto vai para a sua pré -visualização de conteúdo principal. Faça cartões 60% tão altos quanto largos. Um cartão de 300 pixels se torna 180 pixels de altura.

Os botões funcionam da mesma maneira. Uma largura de 100 pixels significa uma altura de 60 pixels. Sua coluna de texto tem 600 pixels de largura. Pare de adicionar conteúdo em torno de 370 pixels para baixo. Em seguida, adicione sua próxima seção.

Parece certo?

Volte da tela. As peças devem parecer equilibradas agora. Seu olho flui suavemente de seção para seção. Se você continuar olhando para um local, as proporções podem estar desligadas.

Os sites populares usam essas mesmas divisões de 62/38 em todos os lugares. Você começará a ver o padrão depois de saber o que procurar. A matemática fica escondida, mas a harmonia visual se destaca imediatamente.

Erros comuns de proporção de ouro que os designers cometem

A maioria dos designers sabe que a proporção dourada existe e deseja usá -la. Aqui é onde eles geralmente lutam.

O maior erro é aplicar taxas aleatórias sem um sistema. Você usa taxas douradas para o seu cabeçalho, terços para sua grade de conteúdo e porcentagens aleatórias para o rodapé. Escolha uma abordagem e use -a de forma consistente em seu design.

Muitos designers rodada 1.618 para números fáceis, como 1,5 ou 1.7. Seu cérebro percebe a diferença entre 62% e 60%, e essa pequena lacuna afeta a harmonia visual que você está trabalhando para criar.

Outro problema comum são os elementos da razão incompatível. Por exemplo, você pode criar uma seção de heróis perfeitamente proporcionados, mas adicionar uma galeria de imagens que usa taxas de espaçamento completamente diferentes. A desconexão visual quebra o fluxo que você estabeleceu.

Alguns designers aplicam a proporção dourada ao texto sem considerar o conforto da leitura. Um comprimento de linha que segue proporções matemáticas perfeitas pode exceder a largura de leitura confortável. A legibilidade tem prioridade sobre a precisão matemática.

Os designers da web também geralmente ignoram a capacidade de resposta. As proporções de mesa que parecem equilibradas podem parecer apertadas ou esticadas em telas menores. As proporções douradas precisam de aplicações diferentes nos tamanhos dos dispositivos.

Muitos construtores de páginas são padrão para layouts arbitrários que ignoram a harmonia proporcional. As grades padrão de três colunas usam divisões 33/33/33 em vez de mais proporções naturais.

O erro mais limitante é abandonar a abordagem após as tentativas iniciais. As proporções douradas funcionam melhor quando aplicadas sistematicamente na sua estrutura de layout, não como ajustes isolados.

Por que muitos construtores de páginas ignoram as proporções douradas?

Os construtores de páginas cresceram em torno do pensamento do programador. Os desenvolvedores adoram números que se dividem de maneira limpa. Doze colunas, quatro seções, cinquenta e cinco divisões.

Muitas empresas construtoras acreditam genuinamente que os usuários devem controlar suas próprias opções de design. Eles não querem empurrar teorias estéticas específicas para as pessoas que podem preferir abordagens diferentes. Alguns designers odeiam a proporção dourada e preferem outros sistemas de proporção. Por que forçar um princípio matemático quando a criatividade prospera nas opções?

A verdadeira questão técnica é mais confusa que a filosofia do design. As proporções douradas criam decimais estranhos que quebram em dispositivos mais antigos. Tente construir uma grade responsiva, onde uma coluna tem 61,8% de largura. Porcentagens limpas como 25% ou 33% se comportam previsivelmente em todos os dispositivos.

A maioria das empresas construtores de páginas iniciou como soluções técnicas, não como ferramentas de design. Eles são construídos em torno de layouts sistemáticos e lógicos que funcionam de maneira confiável.

Os usuários raramente reclamam de proporções. Eles reclamam dos layouts móveis quebrados e dos tempos de carregamento lento. As prioridades da empresa seguem o feedback real do usuário, não a teoria do design.

Alguns construtores se preocupam com iniciantes esmagadores. Novos usuários já enfrentam dezenas de opções de layout e a adição de considerações matemáticas pode assustar as pessoas que querem apenas algo limpo e profissional.

Construindo proporções perfeitas com Divi 5

Antes de mergulharmos nos detalhes da questão de como o Divi 5 transforma o design da proporção dourada de uma dor de cabeça matemática na simplicidade de apontar e clicar, vamos fazer um pequeno desvio e entender o que faz do Divi a escolha para os designers do WordPress que desejam resultados profissionais sem o Coding Nightmare.

O que é Divi?

Divi é um construtor de páginas do WordPress projetado para pessoas que se preocupam com o design visual sem comprometer os recursos.

Você pode arrastar e soltar mais de 200 módulos, alterar o texto e escolher novas cores. Tudo acontece bem na sua página, então você vê exatamente o que os visitantes verão.

O tema vem repleto de mais de 2000 layouts pré-fabricados. Esses não são modelos básicos, mas projetos completos para restaurantes, fotógrafos, consultores e dezenas de outras empresas. Escolha um que se encaixe no seu estilo e personalize a partir daí.

Se você vender produtos on -line, o Divi inclui mais de 20 módulos fabricados especificamente para lojas. Suas páginas de produtos parecerão profissionais e realmente ajudarão a converter navegadores em compradores.

Construa sites sem dores de cabeça

O construtor de temas permite projetar todas as partes do seu site. Você pode criar cabeçalhos personalizados que correspondam à sua marca, criar layouts exclusivos do blog e até fazer com que suas 404 páginas pareçam incríveis.

Divi Ai traz a conveniência da IA ​​diretamente em sua tela de design. Você pode gerar texto,

imagens,

código,

e seções de página inteira usando o divi ai.

Você pode até editar suas fotos existentes apenas descrevendo o que precisa.

O Divi Quick Sites resolve o maior problema que os construtores de sites enfrentam: olhando para uma página em branco sem saber por onde começar. Você pode escolher entre sites iniciais profissionais, que possuem modelos profissionais de sites, criados por nossa equipe de design, e apresenta imagens e obras de arte exclusivas que você não encontrará em nenhum outro lugar.

Ou deixe o Divi ai criar layouts personalizados com base na descrição da sua empresa.

Este site gerado pela AI não é apenas uma estrutura de arame. Ele conterá títulos, cópias e imagens relevantes por sua descrição. Você pode pedir ao Divi AI para gerar todas as imagens, usar uma do UNSLASH ou usar espaços reservados para que você possa substituí -las você mesmo.

Você pode até pré-selecionar suas fontes e cores e deixar a IA correr com elas. E, é claro, os sites permanecem editáveis, como sites regulares, para que você possa ajustar o que precisar de acordo com o seu gosto.

Obtenha divi

Divi 5: o próximo passo

Os sites de construção devem parecer naturais, como esboçar idéias no papel. Você tem uma visão, e suas ferramentas devem ajudar a dar vida a ela sem atrapalhar. Foi exatamente isso que nos levou a reconstruir o Divi desde o início completamente.

O Divi 5, disponível hoje como alfa e pronto para ser usado em novos sites , representa anos ouvindo o que você precisa ao criar sites. Não são sinos e assobios ou recursos que ninguém realmente usa, mas melhorias reais que tornam seu trabalho mais rápido e mais agradável. Mantivemos tudo o que você ama no Divi e o levamos para o próximo nível.

Reconstruímos tudo do zero usando novas ferramentas da web. As páginas carregam mais rápido agora e os controles funcionam melhor. Você pode manter seus designs iguais em todo o site sem trabalho extra.

O que é melhorado? O que há de novo?

• Reconstrução completa da estrutura se livra de códigos de brechas antigas. Tudo funciona com um novo código baseado em blocos que carrega mais rápido e funciona melhor.
• A edição com um clique permite clicar em qualquer parte da sua página para editá-la imediatamente. Não há mais caça por pequenos ícones ou cavando menus.
• Os pontos de interrupção personalizáveis ​​oferecem sete tamanhos de tela para trabalhar em vez de três. Você pode alterar cada um para atender às suas necessidades exatas.
• O suporte de unidades avançadas permite usar o calc (), o clamp (), o min (), o max () e todas as novas unidades CSS diretamente no construtor.
• As variáveis ​​de design permitem salvar cores, fontes, tamanhos, imagens, texto e links em um só lugar. Altere -os uma vez e eles atualizarão em qualquer lugar do seu site.
• Predefinições de grupo de opções permitem salvar e reutilizar estilos para bordas, fontes, sombras e espaçamento. Isso funciona em diferentes partes do seu site.
• Linhas aninhadas permitem colocar linhas dentro de outras linhas. Você pode criar layouts complexos sem seções especiais.
• Grupos de módulos combinam vários módulos em uma unidade. Isso facilita o gerenciamento de layouts complexos. Você também pode fazer seus módulos personalizados.
• O espaço de trabalho com vários painéis permite colocar painéis onde você os deseja. Você pode trabalhar com várias configurações abertas ao mesmo tempo.
• O gerenciamento de atributos fornece controle exato ao copiar, colar e redefinir estilos, conteúdo e predefinições entre diferentes partes.
• O modo claro/escuro permite escolher o tema que é mais fácil nos seus olhos enquanto trabalha.
• A escala de tela permite redimensionar sua área de trabalho para ver como o site fica em telas diferentes. Não há necessidade de alternar os modos de visualização.
• As melhorias de desempenho tornam as páginas carregadas mais rápidas, exibem mais rápidas e se sintam mais suaves quando estiver construindo.

Tente divi 5 hoje

O Divi 5 já está disponível para novos projetos de sites. Nós o reconstruímos desde o início para tornar seu fluxo de trabalho mais rápido e mais fácil. Faça o download do alfa público e experimente no seu próximo novo site para ver as melhorias. É gratuito para todos os membros da Divi, novos e antigos.

Sugerimos usá -lo apenas para novos sites enquanto melhoramos o sistema de migração para os sites Divi 4 existentes. Se você está começando fresco, agora é um ótimo momento para experimentar a interface atualizada e melhor desempenho.

Como usar proporções douradas usando o divi 5

O suficiente disse. Vamos mergulhar profundamente e ver como podemos implementar índices dourados em seu site usando o Divi 5 e, melhor ainda, como eles podem ser padronizados para que você não precise se esforçar com matemática toda vez que criar uma nova seção ou página.

As variáveis ​​de design permitem salvar e reutilizar valores em seu site. Eles formam o DNA de identidade visual do seu site. O Divi 5 possui seis tipos: cores, fontes, imagens, cordas de texto, links e números. Cada um tem um papel específico:

• As variáveis ​​de cores contêm cores da marca, fundos, cores de texto e outros tons usados ​​em todo o site.
• As variáveis ​​de fonte mantêm fontes consistentes para títulos, texto corporal e elementos especiais.
• As variáveis ​​de imagem armazenam gráficos comuns, como logotipos ou padrões de fundo para facilitar o uso.
• Variáveis ​​de sequência de texto salvam conteúdo reutilizável, como slogans, contatos e notas legais.
• As variáveis ​​de link mantêm os URLs que você costuma usar, como mídia social ou páginas -chave.
• As variáveis ​​de números lidam com medições em pixels, porcentagens, EMs, REMs e unidades de viewport e trabalham com funções CSS como Calc () para manter as proporções diretamente em qualquer tela.

Configurando suas variáveis ​​de proporção dourada

Abra seu painel Divi 5 e encontre o ícone do Variable Manager na barra lateral esquerda.

Clique nele para abrir o painel Variáveis. Adicione suas cores, fontes, imagens, texto e link variáveis.

Em seguida, vá para a guia Números para criar suas variáveis ​​de proporção dourada. Comece adicionando estas variáveis ​​de número:

Variáveis ​​de tipografia

• Tamanho H1: grampo (47px, 4,7VW, 76px)
  • 47px Mínimo: Mesmo nos menores telefones (320px de largura), seu H1 permanece grande o suficiente para estabelecer hierarquia. Qualquer coisa menor perde o impacto como um título principal.
  • 4.7VW Valor médio: Esta unidade de largura de viewport torna a escala de texto sem problemas. Com 1000px de largura da tela, 4,7VW = 47px. A 1600px, cresce para 75px
  • 76px Máximo: obtemos isso multiplicando 18px × 1,618 três vezes (18 × 1,618 × 1,618 × 1,618 = 76.244px)
• Tamanho H2: grampo (29px, 3,5VW, 47px)
  • 29px Mínimo: Mantém o H2 visivelmente menor que o H1 no celular enquanto permanece legível
  • Scalamento de 3.5VW: dimensionamento proporcionalmente menor que o H1 para manter a hierarquia
  • 47px máximo: exatamente 76px ÷ 1.618 = 47.122px
• Tamanho H3: Clamp (18px, 2,9VW, 29px)
  • 18px Mínimo: corresponde ao tamanho do texto do corpo no celular para salvar o espaço vertical
  • 2,9VW Escala: cresce mais suavemente do que os títulos maiores
  • 29px Máximo: precisamente 47px ÷ 1.618 = 29.124px
• Tamanho H4: CLAMP (14px, 2.2VW, 22,4px): Continue dividindo ~ 29px ÷ 1.618 = 17.994px, mas definimos mínimo para 22,4px para legibilidade
• Tamanho H5: CLAMP (13px, 1.8VW, 18px): Nosso tamanho base da fonte de 18px se encaixa perfeitamente na escala aqui
• Tamanho do texto do corpo: grampo (16px, 1.6VW, 18px): base padrão de 18px de que todos os cálculos resultam de

A função Clamp () permite que o texto redimensione suavemente entre as telas. São necessários três valores: o menor tamanho para os telefones, o valor médio para escala e o maior para desktops. Usamos a largura da Viewport (VW) no meio, porque faz com que o texto cresça gradualmente à medida que as telas aumentam. Não há saltos repentinos entre os tamanhos.

Na área de trabalho, nos atendemos às proporções douradas perfeitas. As telas móveis precisam de pequenos ajustes para manter o texto legível. Cálculos puros podem sugerir 11px para alguns títulos, mas isso lidera os olhos de seus visitantes. Definir mínimos práticos como 14px preserva a harmonia visual da proporção de ouro, garantindo que todos possam ler confortavelmente seu conteúdo. Os relacionamentos proporcionais permanecem intactos; Eles apenas mudaram um pouco para a legibilidade.

Variáveis ​​de espaçamento

Cada valor multiplica o anterior por exatamente 1.618:

• Espaço XS: Clamp (8px, 1VW, 10px)
  • Por que 10px Base: este é o menor preenchimento de alvo de toque confortável no celular. A sabedoria da indústria recomenda alvos mínimos de toque de 44px e preenchimento de 10px por todos os lados, além de o conteúdo o leva lá. Menor que 10px faz com que os elementos pareçam apertados.
  • Por que 8px mínimo: em telefones com menos de 360px de largura, até 10px podem parecer muito espaçosos. Deixamos cair para 8px para maximizar o espaço de conteúdo, mantendo os elementos distinguíveis.
  • Por que 1VW: cresce o espaçamento proporcionalmente e oferece exatamente 10px a 1000px Largura da tela
• Espaço pequeno: CLAMP (13px, 1.6VW, 16.18px): Ideal para preenchimento de botões e espaçamento de campo.
• SPACE Medium: Clamp (21px, 2,6VW, 26.18px): Ótimo para espaçamento entre blocos de conteúdo relacionados.
• Espaço grande: grampo (34px, 4,2VW, 42,36px): cria espaço para respirar entre as principais seções enquanto dimensiona com o tamanho da tela.
• Espaço XL: CLAMP (55px, 6.8VW, 68,54px): Ótimo para o preenchimento superior/inferior nas seções de heróis e os principais blocos de recursos. As seções de heróis precisam de estofamento substancial, mesmo no celular. Abaixo de 50px, o conteúdo do herói parece apertado contra as bordas.
• Espaço XXL: CLAMP (89px, 11VW, 110,89px): Use com moderação. Talvez para seções especiais que precisam de espaço dramático para respirar.

Variáveis ​​de layout

• Largura da coluna primária: 61,803%
  • Como obtemos: divida 1 por 1.618 = 0,61803 (ou 61,803%)
  • Use isso para sua área de conteúdo principal em qualquer layout de duas colunas
• Largura da coluna secundária: 38,197%
  • Use para sua coluna da barra lateral na mesma linha
  • Derivado de 100% - 61,803% = 38,197%
• Largura máxima de contêineres: 1165px
  • O texto se torna difícil de ler quando as linhas se estendem além de 72 caracteres,
    • e assumindo 10px como o tamanho mínimo do texto, a largura ideal de leitura (720px) × Golden Ratio (1,618) = 1165px
  • Aplique à sua seção ou linha principal que mantém seu conteúdo
• Relação de altura dourada: Calc (100% / 1,618)
  • Isso pode ser usado como um valor nas alturas para grupos de módulos/módulos, como imagens, caixas de chamada para ação, seções de heróis, cartões de membros da equipe etc.
  • Isso criaria retângulos em vez de quadrados ou formas aleatórias. Seu cérebro acha essas proporções naturalmente atraentes, como uma foto perfeitamente emoldurada.
  • Como conseguimos isso? A proporção dourada diz que, se largura = 1,618, altura = 1. Portanto, se largura = 100%, altura = 100%÷ 1,618 = 61,8%. Esta fórmula faz essa matemática automaticamente.

Salve essas variáveis ​​no gerente variável do Divi 5. Em seguida, use-os em qualquer lugar clicando no ícone Variáveis ​​ao lado dos campos de largura, altura ou largura máxima. Após a configuração inicial, nenhuma matemática é necessária. Além disso, nenhum desses rótulos variáveis ​​é corrigido; Você pode trocar os rótulos com algo que faz sentido.

Criando uma seção de herói com proporções douradas

Vamos construir uma seção de heróis para a página de destino de um livro, inspirada em um dos designs da coleção de sites iniciais, usando as variáveis ​​de proporção dourada que acabamos de criar. E essa é a parte divertida. Você pode pegar essas variáveis ​​cuidadosamente calculadas e observar como elas afetam uma seção de herói real.

Comece criando uma nova seção no Visual Builder da Divi 5. Defina a altura usando sua variável da relação de altura dourada. Isso torna natural que seu cérebro reconheça como agradável.

Adicione sua variável Space XL ao preenchimento superior e inferior. Isso fornece espaço de respiração suficiente no celular enquanto se expande adequadamente na área de trabalho.

Para o plano de fundo da seção, você tem duas opções principais usando suas variáveis ​​de design:

Opção 1: fundo de cor sólida

• Clique no campo de cores de fundo e selecione sua variável de cor primária no suspensão. Isso mantém sua seção de herói consistente com a identidade da sua marca. Se a sua cor primária for muito leve para o contraste de texto, use sua variável de cor secundária. Certifique -se de que a cor que você escolher ofereça contraste suficiente para que seu texto permaneça legível. Acompanhando nossa inspiração, adicionaremos um gradiente de fundo e cores primárias com uma parada de 72% e a 90 °.

Opção 2: Fundo da imagem

• Aplique sua variável de imagem do herói (se você criou uma) através do campo de imagem de fundo. Clique no ícone Variáveis ​​ao lado da configuração da imagem em segundo plano e selecione sua variável de imagem salva. Ao usar imagens em segundo plano, adicione uma sobreposição para a legibilidade do texto. Defina a cor de sobreposição na sua variável de cor primária e ajuste a opacidade para 40-60%. Isso escurece a imagem o suficiente para tornar o texto branco nítido e legível.
• Você também pode usar sua variável de cor secundária para a sobreposição se ela contrastar melhor a imagem de fundo escolhida.

Criando o layout de duas colunas

Adicione uma linha com duas colunas.

Defina a largura da coluna esquerda na sua variável de largura da coluna primária e a coluna direita para sua variável de largura da coluna secundária. Também ativaremos a opção "Equalizar alturas da coluna". Em seguida, a variável de largura máxima do contêiner será aplicada para manter o conteúdo legível em telas maiores. Isso impede que as linhas de texto se estendam muito bem, especialmente em telas mais amplas.

Também habilitaremos “Use a largura da calha personalizada” e a definiremos como 1. Isso nos ajudará a usar espaçamentos de proporção dourada entre nossos módulos.

Aplique sua variável média espacial à direita da primeira coluna e ao preenchimento esquerdo da segunda coluna para adicionar espaço respiratório entre as colunas. Isso cria separação suficiente entre as colunas sem que elas se sintam desconectadas.

A coluna maior manterá sua mensagem principal e chamada de ação. A coluna menor pode conter uma imagem de herói simples ou permanecer vazia para um design limpo e focado no texto.

Configurando tipografia que flui

Na sua coluna principal, adicione dois módulos de título.

Defina o primeiro como H5 e aplique a variável de tamanho H5. Neste exemplo, este módulo de texto carrega o conteúdo "autor mais vendido". Também usaremos a cor secundária para este texto e aplicaremos um estilo de fonte em maiúsculas. Também aplicaremos a fonte do corpo ao texto para torná -lo distinto e aumentar seu peso a negrito.

Defina o segundo para H1 e aplique sua variável de tamanho H1. Esta se torna sua principal manchete. Neste exemplo, usaremos o nome do autor, que foi adicionado anteriormente, como uma variável de design. Se você está com pouco em idéias, pode usar o Divi AI para ajudá -lo com um ótimo texto de título.

Abaixo disso, adicione um módulo de texto para o seu parágrafo de suporte. Aplique a variável do tamanho do seu corpo e a variável de cor. Mantenha isso para 2-3 frases explicando sua proposta de valor central. Para este exemplo, adicionaremos uma breve introdução ao nosso autor. Você também pode usar o Divi AI para ajudá -lo com a cópia aqui.

Espaço esses elementos usando seu meio espacial como margem entre o título e o parágrafo.

Em seguida, adicione um módulo de botão abaixo do seu texto. Aplique suas cores. Estamos usando a variável de design de cores primárias e o texto do botão.

Adicione sua variável de meio espaço ao preenchimento esquerdo e direito e espaço pequeno na parte superior e inferior para as dimensões do botão. Isso cria um botão proporcional ao seu texto sem ser superdimensionado. Use seu espaço grande variável como a margem superior para separá -la do parágrafo.

O texto do botão deve usar a variável do tamanho do seu corpo para manter a consistência com o texto do seu parágrafo. Também aplicaremos a variável de design do link do botão que adicionamos anteriormente.

Estilizando a coluna certa

A coluna certa pode conter qualquer coisa, desde uma imagem até um formulário de integração. Se estiver usando uma imagem na coluna menor, mantenha -a simples. Uma foto da sua equipe, seu escritório ou uma ilustração limpa funciona bem. Não pense demais no posicionamento da imagem: centralize -o normalmente dentro da coluna. Para este exemplo, incluiremos a variável de design de imagem de um livro recente. E também adicione uma sombra de caixa para destacá -la.

Também ajustaremos a largura da imagem em cerca de 90%, para que pareça mais alinhada.

Para sites de consultoria, às vezes deixando a coluna certa vazia cria uma aparência mais limpa e profissional que coloca o foco total em sua mensagem.

O resultado

O seguinte é o resultado:

Use o escala de tela do Divi 5 para testar a aparência do seu herói em diferentes tamanhos de tela. As funções Clamp () em suas variáveis ​​devem lidar com a capacidade de resposta automaticamente.

Embora as variáveis ​​da proporção dourada forneçam excelente harmonia proporcional, você pode precisar de pequenos ajustes com base no seu conteúdo específico. Manchetes longas podem precisar de texto um pouco menor. As slogans curtas e perfuradas podem lidar com tamanhos maiores. Alguns estilos de marca exigem espaçamento mais apertado ou mais frouxo.

A beleza das variáveis ​​de design é que essas mudanças levam apenas dois cliques. Abra o gerenciador de variáveis, ajuste o tamanho H1 ou o espaço grande e observe o turno Aplicar instantaneamente em todo o site.

Seu H1 deve permanecer proeminente, mas legível no celular (mínimo de 47px). Seu espaçamento deve parecer generoso, mas não excessivo em qualquer tamanho de tela. A divisão de duas colunas oferece um layout profissional clássico que funciona bem para empresas de serviços, onde a confiança e a clareza são mais do que os elementos chamativos de design.

Mantendo os índices dourados em todo o local com predefinições de grupo de opções

As variáveis ​​de design lidam com os números, mas as predefinições do grupo de opções garantem que sejam usadas de forma consistente em todo o site.

Crie sua primeira seção usando as variáveis ​​que criamos. Obtenha a tipografia, o espaçamento e o layout exatamente certo. Em seguida, clique no ícone predefinido ao lado de cada grupo de estilo (tipografia, espaçamento, borda etc.) e salve -os como predefinições de grupo de opções.

Isso cria blocos de design reutilizáveis ​​que já contêm suas proporções de proporção dourada. Em vez de começar do zero, aplique essas predefinições toda vez que adicionar uma nova seção ou módulo.

Quando você precisar ajustar as proporções em todo o local, altere a variável uma vez. Cada predefinição de usá -lo atualiza em todo o seu site instantaneamente. Sem caça através de páginas individuais para fazer alterações.

Suas proporções douradas permanecem consistentes sem o trabalho manual.

Math to Beautiful Design, Divi 5 facilita

Essa sensação incômoda quando os layouts parecem "quase certos" finalmente fazem sentido. Você não estava sendo exigente: seu cérebro estava captando relacionamentos proporcionais que se sentiam desligados.

As proporções douradas oferecem um ponto de partida confiável, mas a maioria dos construtores faz você fazer as contas todas as vezes. As variáveis ​​de design do Divi 5 mudam completamente isso. Calcule suas proporções 1.618 uma vez, salve -as como variáveis ​​e clique para aplicá -las em qualquer lugar do seu site.

Precisa ajustar o espaçamento em cinquenta páginas? Altere uma variável em vez de editar cada página individualmente. Deseja tipografia consistente que segue as proporções douradas? Defina seus valores de grampo () uma vez e observe -os escalar perfeitamente em todos os dispositivos.

A matemática funciona em todos os lugares, mas o Divi 5 realmente torna prático usar de forma consistente.