Usando as novas opções de altura e largura da Divi para criar um design responsivo

Embora geralmente não sejam a primeira coisa que os visitantes notam sobre o seu site, as propriedades CSS de largura e altura ajudam a manter o site unido e com uma aparência incrível. E agora, com as novas opções de dimensionamento arrastáveis ​​do Divi, você pode literalmente controlar a largura de cada elemento, largura máxima, altura mínima, altura e altura máxima dentro do próprio construtor. Isso lhe dá a liberdade de criar sites que são altamente responsivos em diferentes tamanhos de tela.

Agora, tudo isso parece ótimo, mas como isso se traduz em um belo site, praticamente falando? É exatamente sobre isso que falaremos neste post. Começaremos explicando a diferença entre todas as propriedades de altura e largura disponíveis nas configurações Divi e, em seguida, usá-las em diferentes cenários para fazer com que os designs de nossa página se comportem exatamente da maneira que desejamos.

Vamos lá!

Inscreva-se no nosso canal no Youtube

Compreendendo a diferença entre propriedades

Antes de usar largura e largura máxima em nossos processos de design diários, é importante entender o que eles fazem. Esta é a explicação teórica:

Largura - a largura real de um elemento de design. Se for 100%, é tão largo quanto o recipiente permite. A largura geralmente é expressa em%. Quanto menor for a porcentagem da largura, mais estreito será o elemento de design.

Largura máxima - a largura máxima tem poder sobre a largura. Se a largura de um módulo for definida como 100%, ele seguirá esse valor , desde que fique abaixo do valor de largura máxima. Assim que o valor da largura máxima for alcançado, ele não o excederá.

Mas como isso se traduz em design responsivo? Para ajudar a explicar a diferença, vamos criar uma comparação visual habilitando o Visual Builder em uma página totalmente nova. Vamos adicionar uma seção com uma linha de uma coluna. Em seguida, insira um Módulo de Texto com algum conteúdo, uma cor de fundo e algum preenchimento personalizado.

Mudando a largura

Ao alterar a largura do Módulo de texto para 80%, você verá o Módulo de texto diminuir de tamanho. A possibilidade de alinhar o módulo da maneira que você quiser também aparece.

Alterando a largura máxima

Quando você altera a largura máxima, o valor atribuído só começará a ser aplicado a partir do momento em que a largura real exceder o valor da largura máxima. Vamos demonstrar isso muito rápido:

Não Excedido

Excedido

Além de largura e largura máxima, você também será capaz de encontrar altura mínima, altura e altura máxima nas configurações de dimensionamento de cada elemento. Isso é o que você pode entender teoricamente a partir destes termos:

Altura mínima - a altura mínima que você deseja atribuir a um elemento. Se este valor for maior do que a entrada de altura, a entrada de altura mínima irá dominar.

Altura - define a altura real que você deseja atribuir ao elemento.

Altura máxima - este valor se torna a nova altura quando a altura excede o valor que foi atribuído à altura.

Alterar a altura mínima

Se você alterar a altura mínima de um elemento, esse valor se torna a norma. Ao testá-lo, você verá automaticamente a altura da mudança do Módulo de Texto em tempo real.

Mudando a Altura

Se você estiver combinando uma altura mínima e uma altura, terá que se certificar de que a altura é maior do que a altura mínima. Caso contrário, a altura será ignorada. Nos dois GIFs abaixo, você poderá ver a diferença em tempo real.

Não excede

Excede

Alterar a altura máxima

A altura máxima assume se exceder a altura mínima, mas for menor que a altura. Se, por exemplo, você atribuísse um valor mais alto à altura mínima do que à altura máxima, a altura mínima dominaria.

Alterando a largura máxima para linhas

Uma das melhores práticas em web design é decidir sobre uma largura máxima específica para todo o seu site. Isso ajuda a manter tudo responsivo em diferentes tamanhos de tela. Também ajuda os designers a criar wireframes precisos.

Alterando a largura máxima global

Você pode ou não saber que pode definir uma determinada largura máxima padrão para o seu conteúdo no Customizador de Tema, indo para as Configurações Gerais e continuando para as Configurações de Layout. Manter a largura máxima persistente ajuda a capacitar a capacidade de resposta.

Altere a largura máxima de uma linha em particular

Com a nova atualização de dimensionamento arrastável, você também terá a oportunidade de definir individualmente uma largura máxima para as linhas. Isso é ótimo para exceções em que faz mais sentido ir com uma largura máxima maior.

Dando aos Módulos a Mesma Altura

Outra técnica que você deve ter em mente se concentra em dar a elementos semelhantes a mesma altura. Isso é esteticamente agradável aos olhos e ajuda os visitantes a digitalizar o conteúdo com facilidade. Existem duas maneiras comuns de abordar isso:

Usando o Equalizador de Coluna

O primeiro método é aquele que já existe há muito tempo com a Divi. Se você deseja criar a mesma altura para cada uma das colunas em sua linha, você pode habilitar o Equalizador de Coluna nas configurações de dimensionamento de sua linha. Se estiver usando cores de fundo de coluna, você notará rapidamente a diferença.

Atribuição de altura a cada módulo

Outra maneira de abordar isso é atribuindo uma altura predefinida aos módulos que você está adicionando.

Alinhando o conteúdo dentro de um módulo

Depois de atribuir uma altura a todos os módulos, você também pode brincar com o alinhamento do conteúdo. Para fazer isso, você pode usar preenchimento personalizado para determinar manualmente o espaço em branco em um módulo ou usar algumas linhas de código CSS para alinhar automaticamente o conteúdo.

display: flex;
flex-wrap: wrap;
align-content: center;

Escolhendo Design Element Height ou Width & Turn Overflow into Scroll

Outra coisa legal que você pode fazer com as novas opções de tamanho arrastáveis ​​é transformar o estouro em rolagem. Isso o ajudará facilmente a economizar espaço em suas páginas e adicionar interação extra. Existem duas etapas para isso; configura uma altura para o seu elemento e altera o estouro nas configurações de visibilidade. Comece alterando a altura do seu elemento.

Em seguida, vá para as configurações de visibilidade do seu elemento e altere o estouro vertical para rolagem.

Criação de uma seção Hero em tela cheia em todos os tamanhos de tela

Vamos para a próxima e última dica! Quer criar uma seção de herói em tela cheia? Abra a seção de herói em sua página, vá para as configurações de dimensionamento e altere a altura. É importante que você use a unidade da janela de visualização de altura para garantir que tudo permaneça responsivo em todos os tamanhos de tela.

• Altura: 100vh

Deseja alinhar centralmente o conteúdo em sua seção de herói em tela cheia? Adicione também as seguintes linhas de código CSS personalizadas ao elemento principal da sua seção:

display: flex;
flex-wrap: wrap;
align-content: center;

Pensamentos finais

Neste post, examinamos as novas opções de largura e altura que vêm com a atualização de tamanho arrastável do Divi. Mostramos como eles funcionam e como você pode usá-los para criar um design de página responsivo para qualquer tipo de site que estiver construindo. Se você tiver dúvidas ou sugestões, deixe um comentário 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.