Construtor Visual DIVI – Capítulo 03

Aplicando Unidades de Comprimento CSS em Divi

Ao criar um site com o Divi, você precisa tomar muitas decisões relacionadas ao tamanho. Pode ser a largura de uma linha, o tamanho de uma fonte ou o preenchimento para adicionar a um módulo. E para tornar as coisas mais desafiadoras, devemos decidir sobre os tamanhos apropriados para todos os dispositivos. No mundo do CSS, o tamanho (ou comprimento) de um elemento é expresso por unidades de comprimento. Unidades de comprimento são pequenas letras/símbolos que seguem um valor numérico (10px, 2em, 100%, etc.) para estabelecer o comprimento de um elemento. Usamos unidades de comprimento o tempo todo. E apesar de o Divi ter facilitado muito o processo, as unidades de comprimento ainda fazem parte do negócio cotidiano de projetar um website.
É por isso que hoje vou tentar dar um guia que ajudará você a entender e aplicar as unidades de comprimento corretas com o Divi.

Nesta postagem, abordarei os seguintes elementos que usam um valor unitário de comprimento:

  • Largura
  • Margem
  • Preenchimento
  • Bordas
  • Texto (tamanho da fonte, espaçamento entre letras, altura da linha)

Visão rápida das unidades de comprimento

Unidades de comprimento são frequentemente separadas em duas categorias principais: absoluta e relativa.

Unidades de comprimento absoluto

Unidades de comprimento absoluto são consideradas absolutas porque não são relativas a nenhum outro elemento.
Essas unidades não serão dimensionadas para o tamanho do navegador e permanecerão sempre do mesmo tamanho.

Estes incluem o seguinte:

pt – pontos
px – pixels
em – polegadas
cm – centímetros
mm – milímetros
pc – picas

Os pixels são realmente a única unidade de comprimento CSS absoluta que devemos considerar usar para a web.
Os outros são usados ​​principalmente para medição física (não digital), como impressão.

Uma unidade de pixel refere-se ao tamanho de um “ponto” da tela do dispositivo (que pode variar um pouco em cada dispositivo).
Por causa disso, os pixels são comumente usados ​​em coisas que não precisam necessariamente escalar com os tamanhos dos navegadores.

Unidades de comprimento relativo

As unidades de Comprimento Relativas são consideradas relativas porque mudam/escalam dependendo do comprimento de outros elementos. Um exemplo comum é a porcentagem, que depende do comprimento do elemento pai.

em – em relação ao tamanho da fonte do elemento
rem – relativo ao tamanho da fonte do elemento raiz
vw – em relação a 1% da largura da janela de visualização do seu navegador
vh – em relação a 1% da altura da janela de visualização do navegador
vmin – em relação a 1% da menor das duas dimensões da janela de visualização do navegador (altura ou largura).
vmax – relativo a 1% da maior das duas dimensões da janela de visualização do navegador (altura ou largura).
% – relativo a 1/100 da largura do elemento pai.

Todas essas unidades são usadas para a web.

Para este post, não vou me concentrar em rem, vmin ou vmax porque eles são menos comuns e não funcionam tão bem com o Divi.

Dimensionamento da Caixa Divi

unidades de comprimento

Divi determina o dimensionamento da caixa com a propriedade CSS border box. Isso basicamente significa que a largura e a altura de uma seção, linha ou módulo são determinadas pela soma de seu conteúdo, preenchimento e borda. Se você criou sites com Divi, já sabe como isso funciona. Pense em uma linha como uma caixa.

Digamos que você crie uma linha com largura de 1000 px. Adicionar conteúdo à linha (como outras caixas / módulos) não altera a largura da linha. Adicionar preenchimento à linha não alterará a largura da linha, mas será aplicado dentro da caixa. Se você adicionar uma borda à linha, a borda também será aplicada dentro da caixa e não afetará a largura do conjunto. Em outras palavras, adicionar 50px de preenchimento à direita e à esquerda não resultará em uma linha de 1100px, assim como adicionar uma borda de 10px ao redor da linha não aumentará a largura de sua linha de 1020px. A única coisa que mudará é a altura à medida que você adiciona mais preenchimento ou borda de conteúdo. Margem é o que adiciona espaço fora da caixa e é o que é usado para separar caixas (seções, linhas e módulos) na página.

Eu menciono isso porque é útil entender o bloco de construção (ou caixas) de como o Divi funciona para que você possa saber o que adicionar os valores da unidade de comprimento (30px, 5em, 50% etc.) aos elementos da sua página.

Largura

Unidades de comprimento sugeridas:%, vw e px (como largura máxima)

unidades de comprimento

A propriedade width usa unidades de comprimento para definir a largura de um elemento.

O Divi permite ajustar facilmente a largura de qualquer seção, linha ou módulo.

unidades de comprimento

Usando px para largura

Raramente você deve definir um elemento para uma largura de pixel, a menos que planeje ajustar essa largura nos pontos de interrupção necessários para dispositivos móveis. Isso simplesmente não é uma boa prática no mundo do design responsivo, adaptativo e fluido. No entanto, é útil definir uma largura máxima usando um valor de pixel, desde que a largura seja definida como uma porcentagem. Mais sobre isso depois.

Usando% e px para ajustar a largura máxima do design responsivo

Como você sabe, o Divi permite ajustar a largura de qualquer módulo, linha ou seção. Essa largura será ajustada por unidade percentual por padrão, mas você também pode inserir um valor de unidade de pixel. Mas o valor de largura definido é tecnicamente a largura máxima. A verdadeira largura real do css é 100%. Todas as seções, linhas, colunas e módulos são inerentemente 100% de largura, porque são todos construídos usando o elemento div block. E os elementos de bloco sempre abrangem toda a largura do contêiner (largura de 100%).

O que você sabe… Divi é construído com Divs.

Aqui está um pequeno teste. Vamos atualizar a largura do módulo para 1000px para este módulo de texto na coluna da esquerda. Eu dei ao módulo um fundo cinza para fácil reconhecimento.

unidades de comprimento

Observe que, na verdade, ele não atinge o total de 1000px, pois isso é tecnicamente uma largura máxima. No entanto, se eu quisesse substituir a largura padrão de 100% e declarar uma largura real de 1000px, eu poderia ir para a guia avançada e definir o elemento principal para ter uma largura de 1000px.

Agora olhe para o módulo.

unidades de comprimento

O problema é que você está usando um valor absoluto cercado por elementos com valores relativos. Portanto, mesmo que você reduza o seu navegador, o módulo permanecerá em 1000px.

É por isso que o Divi ajusta a largura máxima de seus elementos em vez da largura real.

É comum usar pixels em combinação com unidades de tamanho relativo (como porcentagem) para criar sites responsivos. Divi usa este método para definir a largura do conteúdo para todas as suas páginas. Se você acessar o Tema Personalizador> Configurações Gerais> Configurações de Layout , verá que a largura do conteúdo principal está configurada para 1080px

unidades de comprimento

O 1080px é na verdade a largura máxima do seu conteúdo. A largura real do css é de 80%. É por isso que quando você aumenta a largura do seu navegador, a largura do conteúdo vai parar de se expandir em 1080px. E se você diminuir a largura do navegador abaixo de 1080px, o conteúdo continuará a ser dimensionado de acordo com 80% do elemento pai.

Adicionando valores de largura personalizados no Divi Builder

Ao usar o construtor Divi, suas linhas são consideradas o conteúdo do site e herdarão uma configuração padrão de largura de 80% e largura máxima de 1080px. Se você alterar a largura de uma linha usando o Divi Builder definindo uma largura personalizada, o novo valor de largura será uma largura máxima, independentemente de ela ser definida como uma porcentagem ou um valor de pixel.

unidades de comprimento

Se você alterar uma linha para largura total, tanto a largura quanto a largura máxima serão definidas como 89%. Isso significa que a linha sempre terá 89% do elemento pai (a seção), que é 100% da janela do navegador.

unidades de comprimento

Em resumo, o construtor Divi é inteligente o suficiente para usar largura máxima automaticamente ao ajustar a largura de suas seções, linhas ou módulos.

Usando vw para ajustar a largura

Largura da viewport (vw) é muito semelhante ao valor da porcentagem. A diferença é que o valor vw é sempre relativo à largura da janela / porta de visualização do navegador. O valor percentual é sempre relativo ao elemento pai. Tenha cuidado ao configurar suas seções para 100vw (em css personalizado), pois isso pode causar alguns problemas ao ultrapassar a barra de rolagem que aparece ao rolar a página para baixo.

Como o Divi é construído em larguras percentuais, a menos que você esteja criando um design especial que exija vw, eu ficaria com valores percentuais.

Margem

Unidades de comprimento sugeridas: px,% e vw

unidades de comprimento

A propriedade de margem usa unidades de comprimento para adicionar espaçamento fora do elemento. Também é útil para posicionar um elemento usando valores positivos e negativos.

Divi permite ajustar a margem de qualquer seção, linha ou módulo.

unidades de comprimento

Usando px para margens

Usar pixels para margens e / ou preenchimento é bom, desde que você entenda que esses valores de comprimento não serão ajustados com os diferentes tamanhos de tela, a menos que você atribua valores de comprimento específicos para diferentes tamanhos de tela.

Evite usar pixels para margem esquerda ou direita

Em geral, você desejará evitar o uso de pixels para ajustar as margens, especialmente para as margens esquerda e direita. Ter um comprimento absoluto para as margens não será dimensionado adequadamente com o seu conteúdo e, por fim, deixará você com mais ou menos margem do que o desejado em determinadas larguras de navegador. Há exceções para isso, onde você desejará ter margens absolutas para propósitos de design. Apenas certifique-se de ajustar o comprimento da margem para dispositivos móveis quando necessário.

Usando pixels para margem superior e inferior

Há momentos em que usar pixels para margem é bastante útil. Por exemplo, se você estiver querendo mover um elemento para cima ou para baixo em uma página, dar ao elemento um valor de pixel positivo ou negativo permitirá mover esse elemento em um local preciso verticalmente. Se você usar uma porcentagem para isso, o elemento será movido para cima ou para baixo conforme você altera a largura do navegador.

Usando porcentagem para margens

unidades de comprimento

Usar porcentagem para margens é uma ótima maneira de criar sites que sejam responsivos. Como mencionado anteriormente, os valores percentuais são relativos ao comprimento dos elementos pais. Divi usa porcentagens para margem direita para criar espaço entre colunas. Essa porcentagem de margem é facilmente ajustada alterando a largura da medianiz nas configurações de linha. A largura da medianiz é basicamente a porcentagem de margem que você deseja entre suas colunas.

Com a largura da medianiz definida para 3, a margem entre colunas é de 5,5%. Observe como o espaço é dimensionado ao ajustar a largura do navegador.

unidades de comprimento

Portanto, se você precisar ajustar a margem direita ou esquerda de um módulo, lembre-se de que será melhor usar porcentagens para manter as coisas dimensionadas adequadamente.

Use a margem percentual para posicionar objetos horizontalmente

Às vezes, certos projetos criativos exigem a movimentação de objetos da esquerda para a direita para sobrepor objetos ou criar desenhos assimétricos. Nesse caso, você pode usar um valor percentual negativo para uma margem direita ou esquerda. Isso moverá o objeto, mas ainda se ajustará às larguras do navegador.

Aqui está um exemplo do uso de valores percentuais para sobrepor uma imagem com outra imagem. Observe o uso de valores percentuais para posicionamento horizontal e o uso de pixels para posicionamento superior e inferior. Isso ocorre porque o valor percentual é relativo à largura do elemento pai (a coluna). Portanto, se você colocar uma margem superior de 30%, a imagem será movida para cima e para baixo conforme a largura da coluna for alterada. É por isso que, na maioria dos casos, você desejará posicionar elementos verticais com um valor de comprimento absoluto, como pixels.

unidades de comprimento

Usando vw e vh para margem personalizada

Como porcentagens, as unidades de comprimento vw e vh podem ser úteis para adicionar margens entre seções, linhas ou módulos de uma maneira que se adapte à sua viewport do navegador. A diferença é que vw e vh são sempre relativos ao tamanho da viewport, não ao elemento pai (como porcentagens).

Preenchimento

Unidades de Comprimento Sugeridas: px,%, em, vw e vh

unidades de comprimento

O Divi permite personalizar o preenchimento de seções, linhas, colunas e módulos.

unidades de comprimento

Usando pixels para preenchimento

Houve um tempo em que usei pixels para preenchimento de praticamente tudo. Mas eu voltei a meus sentidos. Como a margem, você pode usar pixels para preenchimento se quiser ter um comprimento absoluto de preenchimento, independentemente do tamanho do navegador. Mas geralmente, o preenchimento deve ser dimensionado para o tamanho do navegador. Então, em vez disso, sugiro usar porcentagens de preenchimento.

É comum no design da Web responsivo usar pixels para preenchimento superior e inferior a fim de manter um espaçamento vertical consistente entre os elementos enquanto a largura do navegador muda. Divi faz isso para seções e linhas. Dependendo da altura da seção ou da linha que você selecionar (1-10) no Customizador de temas, sua seção e / ou linhas terão um preenchimento superior e inferior maior ou menor.

unidades de comprimento

Mas se você olhar para o CSS, você notará que o preenchimento superior e inferior é definido como um valor percentual em um determinado ponto de interrupção e um valor de pixel para outros. Por exemplo, se você deixar a altura da seção padrão com o valor de 4, em larguras de tela maiores (maiores que 1350px), o preenchimento superior e inferior será de 54px. Em larguras de tela entre 980px-1350px, o preenchimento superior e inferior será definido como 4% (que é 4% da largura da seção). Em tamanhos de tela inferiores a 980px, o preenchimento superior e inferior é definido para 50px. Essa técnica é ótima para definir um valor de preenchimento mínimo para smartphones e um preenchimento máximo para monitores grandes, enquanto a escala de preenchimento é preenchida com o valor percentual para dispositivos entre os dois extremos.

Usando% para preenchimento

Às vezes, é muito mais fácil usar um valor percentual (não pixels) para preenchimento, a fim de manter as coisas bem escalonadas sem a necessidade de adicionar valores adicionais em determinados pontos de interrupção. E, para aqueles que estão interessados ​​em manter conteúdo importante “acima da dobra”, usar porcentagens em vez de pixels para preenchimento superior e inferior ajudará a simplificar esse processo.

Aqui está um exemplo de uma seção com um conjunto de preenchimento superior a 50 px. Observe como o mesmo preenchimento de 50px não parece tão bom em smartphones quanto em desktops porque há muito espaço entre as seções.

unidades de comprimento

Aqui está um exemplo de uma seção com um preenchimento superior definido como 4%. Observe como ela é bem dimensionada do desktop para o smartphone. Em uma janela do navegador que tem 1920px de largura, o preenchimento superior é 76px (0,04 vezes 1920). Mas quando você dimensiona a janela do navegador para 375 pixels de largura, o preenchimento de 4% equivale a 15 px (0,04 vezes 375).

unidades de comprimento

OBSERVAÇÃO: é importante lembrar que os valores percentuais superior e inferior sempre serão relativos à largura do elemento, não à altura.

Usando em para preenchimento

Usando o valor em comprimento para preenchimento é surpreendentemente útil. Digamos que você tenha um módulo de texto com tamanho de corpo de texto de 22 px para desktop, 18 px para tablet e 14 px para smartphone. 1em seria igual a 22px na área de trabalho, 18px no tablet e 14px no smartphone. Ficar comigo. Adicionando um preenchimento de 2em para o módulo de texto irá ajustar de acordo com o tamanho do texto. Na área de trabalho, o preenchimento será de 44px porque 2em seria 2 vezes 22px. No tablet, o preenchimento será de 36px. E no smartphone, o preenchimento será de 28px. Isso ajuda a dimensionar o preenchimento de acordo com o tamanho da fonte, o que funciona muito bem para o design responsivo.

Usando vh e vw para preenchimento

Você pode usar vh e vw para preenchimento da mesma maneira que faria com porcentagem. A diferença é que vh e vw são
sempre relativos ao tamanho da viewport. A porcentagem é sempre relativa ao elemento pai.

Neste exemplo, tirei todo o preenchimento da seção e linha e dei a cada módulo de texto o seguinte preenchimento:

2vh Top, 5vw à direita, 2vh inferior, 5vw à esquerda

Observe como o ajuste da altura do navegador diminuirá ou aumentará o preenchimento superior e inferior de cada módulo.

unidades de comprimento

Fronteiras

Unidades de comprimento sugeridas: px, em e vw

unidades de comprimento

Usando pixels para bordas

O uso de pixels para bordas é bastante comum e é recomendado, a menos que você queira que a borda seja dimensionada de acordo com o tamanho do tamanho da fonte pai (em) ou com a porta de visualização do navegador (vh, vw).

Bordas não suportam a unidade%

Você deve ter notado no cabeçalho acima que não incluí a porcentagem como uma opção. Isso ocorre porque o valor percentual não é uma unidade suportada para bordas. Mas você pode ter suas bordas escalonadas usando as outras unidades de comprimento relativo (em, vh, vw).

Using em for borders

Usar em para fronteiras é semelhante à ideia de usar padding em torno de módulos de texto. O valor em será relativo ao tamanho da fonte pai e será ajustado conforme o tamanho da fonte for alterado.

Aqui está um exemplo de um módulo de texto com uma borda de 1em. Eu também dou ao módulo um preenchimento de 1em. Observe o que acontece quando você ajusta o tamanho da fonte. A borda (e preenchimento) será alterada conforme o tamanho da fonte aumenta e diminui.

unidades de comprimento

Isso também funciona com bordas de botões. Aqui está um exemplo de um botão com uma largura de borda de 0,5em. Observe como ele é dimensionado com o tamanho do texto do botão.

unidades de comprimento

Usando vw e vh para bordas

Se você quiser dimensionar a largura da borda de acordo com o tamanho da janela de exibição do navegador, poderá usar a unidade de tamanho vw ou vh. Eu não vi muito isso, mas é interessante pensar nisso.

Texto

Unidades de comprimento sugeridas: px, em e talvez vw

unidades de comprimento

O Divi Builder Permite adicionar valores de tamanho personalizados para personalizar seu texto. Essas opções incluem tamanho do texto, espaçamento entre letras e altura da linha.

unidades de comprimento

Você pode usar qualquer um dos valores de comprimento CSS para essas opções de texto, mas para este post eu vou cobrir os mais comuns – px, em e vw.

Usando px para o tamanho do texto

É comum definir seus tamanhos de fonte para um valor de pixel porque você deseja que esses tamanhos permaneçam consistentes. Você ainda pode alterar o tamanho da fonte de acordo com a largura do navegador usando consultas de mídia. O Divi torna isso muito fácil, permitindo que você insira três tamanhos de fonte de dispositivo diferentes em todos os módulos Divi.

unidades de comprimento

Usando px para espaçamento entre letras

É comum usar o px para espaçamento entre letras. Apenas observe que, se você planeja alterar consideravelmente o tamanho da sua fonte entre os dispositivos, provavelmente terá que ajustar o espaçamento das letras também. Para tornar o espaçamento entre letras dimensionável com o tamanho do seu texto, você poderia usar o valor em comprimento em vez disso.

Usando px para a altura da linha

A unidade px não é a melhor opção para a altura da linha porque se torna um incômodo alterar a altura da linha toda vez que você altera o tamanho da fonte. É por isso que normalmente é usado (mais sobre isso depois).

Usando em para tamanhos de fonte

Você pode usar em para tamanhos de fonte personalizados. O valor de 1em será igual ao tamanho da fonte da tag pai mais imediata. Ao adicionar um valor em a um elemento de texto em um módulo, o tamanho de fonte da marca pai mais imediata é o que você definiu no personalizador de tema. Então, em Divi, se você tiver sua fonte de corpo definida como 16px, 1em é igual a 16px, 2em é igual a 32px e assim por diante.

Usando em para Altura da Linha

Digamos que você esteja usando um módulo de texto e mude a fonte do corpo para 18 px. Como em sempre é relativo à tag pai mais imediata, o valor de em é alterado para esse módulo e agora 1em é igual a 18px. Isso é útil para entender porque o Divi define a altura da linha como um valor de comprimento. Definir sua fonte de texto de 18px para ter um valor de 1.5em definirá a altura da linha como 27px (1,7 vezes 18px). Portanto, se você decidir alterar o tamanho da fonte mais tarde, a altura da linha será ajustada de acordo.

Usando em para espaçamento entre letras

O uso do em para espaçamento entre letras pode ser útil e eu definitivamente o recomendaria. A principal razão para usar o em para o espaçamento entre letras é para que o espaço aumente e diminua dependendo do tamanho do seu texto.

Veja o espaçamento entre letras na imagem a seguir. Observe como o espaçamento entre letras de 5px não muda quando você altera o tamanho do texto do cabeçalho.

unidades de comprimento

Agora olhe o mesmo texto de exemplo usando 0.1em para o espaçamento entre letras. Se o tamanho da fonte for 50px, 0.1em será igual a 5px. Mas se você diminuir o tamanho da fonte para 25px, 0.1em será igual a 2.5px.

unidades de comprimento

Usando rem para elementos de texto

Usar rem é geralmente mais previsível do que usar em porque é sempre relativo ao tamanho da fonte raiz. O elemento raiz na sua tag html. Essa é a tag que envolve todo o seu site. Em Divi, o html está configurado para ter um tamanho de fonte de 100%. Isso pode parecer um pouco estranho. Quero dizer, 100% do que exatamente? Na verdade, essa é uma prática bastante comum. Você pode não saber disso, mas definir o tamanho da fonte root / html como 100% é uma maneira de declarar o mesmo tamanho de fonte do seu navegador. A maioria dos navegadores tem um tamanho de fonte padrão de 16px, portanto, em Divi, o valor de 1rem é de 16px (ou o tamanho da fonte é definido nas configurações do navegador). Não é o que você definiu como o texto do corpo padrão no personalizador de temas.

Por exemplo, observe o que acontece quando adiciono 1rem ao tamanho do texto do corpo de um módulo de texto. Na verdade, o tamanho do texto aumenta de 14px (o que defini como fonte do corpo do tema no personalizador de temas) para 16px (meu tamanho de fonte padrão do navegador).

unidades de comprimento

Agora, se eu alterar o tamanho da fonte do meu navegador para algo maior, o texto nesse módulo de texto também aumentará.

unidades de comprimento

Portanto, se você estiver interessado em ter um texto que se ajuste às configurações do navegador do usuário, o valor de rem pode ser útil. Mas, na maioria das vezes, usar rem em Divi será apenas mais problema do que vale a pena, a menos que você queira começar a alterar a estrutura básica do Divi Theme (ou seja, alterar o tamanho da fonte raiz para outra coisa).

Usando vw para elementos de texto

Esse é talvez o valor de comprimento mais interessante a ser usado para texto. Não vou entrar em grandes detalhes sobre as possibilidades aqui, mas vou apresentar a ideia.

Usando vw para o tamanho da fonte permite que você dimensione completamente o seu texto com a janela do seu navegador. Isso pode ser útil se quiser que o comprimento da linha permaneça constante.

Veja o que acontece com este texto de título quando eu ajustar o tamanho da janela / viewport do meu navegador. O título tem um tamanho de texto de 15vw (que é 15% da viewport do broswer).

unidades de comprimento

Se você quiser dar um passo adiante, você pode definir um preenchimento customizado para o título que será escalonado automaticamente com o texto do título. Isso só funcionará se você aplicar o preenchimento de em à tag de título para que você precise adicioná-lo à caixa de título de CSS personalizado na guia avançada.

Observe como o preenchimento acima e abaixo do título é dimensionado com o título.

unidades de comprimento

Casos Especiais de Uso

Usando vh para criar cabeçalhos de altura total

O módulo de cabeçalho Fullwidth tem a opção de alterar o layout do seu cabeçalho para tela cheia. Isso garante que o cabeçalho ocupe toda a tela quando a página for carregada, independentemente do tamanho da tela.

Você pode realizar esse mesmo efeito com qualquer seção usando o construtor divi. Tudo o que você precisa fazer é acessar a guia avançada Section Settings e inserir o seguinte CSS personalizado na caixa de entrada Main Element:

height100vh;

Se você ainda não adivinhou, isso garante que sua seção ocupe toda a altura da janela de visualização do navegador.

Usando vw e em para criar grandes botões escalonáveis

Se você ainda não sabe, o preenchimento padrão dos botões do Divi é o seguinte:

0.3em Top, 1em Right, 0.3em Bottom, 1em Left

Mas você pode mudar isso ajustando o preenchimento do módulo de botão para algo como isto:

0.5em Top, 2.5em Right, 0.5em Bottom, 2.5em Left

Seu preenchimento personalizado será dimensionado com o tamanho da fonte do seu botão.

Então você pode alterar o tamanho da fonte para um valor de 4vw.

unidades de comprimento

Isso exibirá um botão muito grande em monitores grandes e dimensionará bem conforme você ajusta a janela do navegador. Para evitar que o botão seja muito pequeno nos telefones, você pode definir um valor de pixel para o seu botão para smartphones.

Outros recursos úteis

Vamos revisar. Devemos?

Largura – Use porcentagens para larguras personalizadas. Além disso, os pixels são aceitáveis ​​no construtor Divi porque esse é um valor de largura máxima e manterá a capacidade de resposta no celular.

Margem – Como o Divi usa porcentagens que já adicionam margens entre colunas em sua grade de temas, faria sentido continuar usando porcentagens, a menos que você tenha um motivo específico para não usar. Você também pode usar vw e vh para as margens, desde que você entenda o que está fazendo.

Padding – Você tem muitas opções que funcionam bem para preenchimento. Em geral, eu usaria porcentagens para preenchimento de linhas e seções para consistência. Mas eu usaria em para preenchimento de módulo, a fim de dimensionar com tamanhos de fonte. Os pixels são sempre bons para preenchimento, mas, na minha opinião, devem ser evitados, a menos que você tenha uma razão de design específica para isso.

Tamanho da fonte – Use pixels para tamanho de fonte personalizado. Em também é aceitável se você deseja que o tamanho da fonte seja relativo ao tamanho da fonte pai, facilitando a alteração de todos os tamanhos de fonte alterando-se o pai. Usar vw para o tamanho da fonte é uma boa opção para cabeçalhos ou para designs que precisam de texto para escalar com a viewport do navegador.

Espaçamento entre letras – Use em para espaçamento entre letras para aumentar a escala ao alterar o tamanho da fonte mais tarde.

Altura da linha – Use em para a altura da linha para que ela se ajuste ao tamanho da fonte.

Bordas – Você não pode errar usando pixels para bordas, mas não ignore as outras opções. O uso de em ajustará sua borda ao tamanho da fonte nativa (útil para botões). E usar vw para bordas é um pensamento interessante.

Pensamentos finais

Felizmente, o construtor Divi tem uma tonelada de recursos integrados que permitem criar sites responsivos bonitos sem precisar ser um especialista em unidades de comprimento CSS. Mas é útil entender o tamanho das unidades a serem usadas sempre que você decidir fazer personalizações em sua página. Ter seu site está ótimo em todos os tamanhos de tela é uma necessidade absoluta e usando os valores de comprimento certo irá tornar seu trabalho muito mais fácil no caminho.

Espero que este guia tenha sido útil. E como sempre, estou ansioso para ouvir de você nos comentários.

Felicidades!

Ao criar um site com o Divi, você precisa tomar muitas decisões relacionadas ao tamanho. Pode ser a largura de uma linha, o tamanho de uma fonte ou o preenchimento para adicionar a um módulo. E para tornar as coisas mais desafiadoras, devemos decidir sobre os tamanhos apropriados para todos os dispositivos.No mundo do CSS, o tamanho (ou comprimento) de um elemento é expresso por unidades de comprimento. Unidades de comprimento são pequenas letras / símbolos que seguem um valor numérico (10px, 2em, 100%, etc.) para estabelecer o comprimento de um elemento.Usamos unidades de comprimento o tempo todo. E apesar de o Divi ter facilitado muito o processo, as unidades de comprimento ainda fazem parte do negócio cotidiano de projetar um website. É por isso que hoje vou tentar dar um guia que ajudará você a entender e aplicar as unidades de comprimento corretas com o Divi.

Nesta postagem, abordarei os seguintes elementos que usam um valor unitário de comprimento:

  • Largura
  • Margem
  • Preenchimento
  • Fronteira
  • Texto (tamanho da fonte, espaçamento entre letras, altura da linha)

Visão rápida das unidades de comprimento

Unidades de comprimento são frequentemente separadas em duas categorias principais: absoluta e relativa.

Unidades de comprimento absoluto

Unidades de comprimento absoluto são consideradas absolutas porque não são relativas a nenhum outro elemento. Essas unidades não serão dimensionadas para o tamanho do navegador e permanecerão sempre do mesmo tamanho. Estes incluem o seguinte:

pt – pontos
px – pixels
em – polegadas
cm – centímetros
mm – milímetros
pc – picas

Os pixels são realmente a única unidade de comprimento CSS absoluta que devemos considerar usar para a web. Os outros são usados ​​principalmente para medição física (não digital) (como impressão). Uma unidade de pixel refere-se ao tamanho de um “ponto” da tela do dispositivo (que pode variar um pouco em cada dispositivo). Por causa disso, os pixels são comumente usados ​​em coisas que não precisam necessariamente escalar com os tamanhos dos navegadores.

Unidades de comprimento relativo

As unidades de Comprimento Relativo são consideradas relativas porque mudam / escalam dependendo do comprimento de outros elementos. Um exemplo comum é a porcentagem, que depende do comprimento do elemento pai.

em – em relação ao tamanho da fonte do elemento
rem – relativo ao tamanho da fonte do elemento raiz
vw – em relação a 1% da largura da janela de visualização do seu navegador
vh – em relação a 1% da altura da janela de visualização do navegador
– em relação a 1% da menor das duas dimensões da janela de visualização do navegador (altura ou largura).
vmax – relativo a 1% da maior das duas dimensões da janela de visualização do navegador (altura ou largura).
% – relativo a 1/100 da largura do elemento pai.

Todas essas unidades são usadas para a web. Para este post, não vou me concentrar em rem, vmin ou vmax porque eles são menos comuns e não funcionam tão bem com o Divi. Embora eu adoraria ouvir casos de uso sugeridos.

Dimensionamento da Caixa Divi

unidades de comprimento

Divi determina o dimensionamento da caixa com a propriedade CSS border box. Isso basicamente significa que a largura e a altura de uma seção, linha ou módulo são determinadas pela soma de seu conteúdo, preenchimento e borda. Se você criou sites com Divi, já sabe como isso funciona. Pense em uma linha como uma caixa.

Digamos que você crie uma linha com largura de 1000 px. Adicionar conteúdo à linha (como outras caixas / módulos) não altera a largura da linha. Adicionar preenchimento à linha não alterará a largura da linha, mas será aplicado dentro da caixa. Se você adicionar uma borda à linha, a borda também será aplicada dentro da caixa e não afetará a largura do conjunto. Em outras palavras, adicionar 50px de preenchimento à direita e à esquerda não resultará em uma linha de 1100px, assim como adicionar uma borda de 10px ao redor da linha não aumentará a largura de sua linha de 1020px. A única coisa que mudará é a altura à medida que você adiciona mais preenchimento ou borda de conteúdo. Margem é o que adiciona espaço fora da caixa e é o que é usado para separar caixas (seções, linhas e módulos) na página.

Eu menciono isso porque é útil entender o bloco de construção (ou caixas) de como o Divi funciona para que você possa saber o que adicionar os valores da unidade de comprimento (30px, 5em, 50% etc.) aos elementos da sua página.

Largura

Unidades de comprimento sugeridas:%, vw e px (como largura máxima)

unidades de comprimento

A propriedade width usa unidades de comprimento para definir a largura de um elemento.

O Divi permite ajustar facilmente a largura de qualquer seção, linha ou módulo.

unidades de comprimento

Usando px para largura

Raramente você deve definir um elemento para uma largura de pixel, a menos que planeje ajustar essa largura nos pontos de interrupção necessários para dispositivos móveis. Isso simplesmente não é uma boa prática no mundo do design responsivo, adaptativo e fluido. No entanto, é útil definir uma largura máxima usando um valor de pixel, desde que a largura seja definida como uma porcentagem. Mais sobre isso depois.

Usando% e px para ajustar a largura máxima do design responsivo

Como você sabe, o Divi permite ajustar a largura de qualquer módulo, linha ou seção. Essa largura será ajustada por unidade percentual por padrão, mas você também pode inserir um valor de unidade de pixel. Mas o valor de largura definido é tecnicamente a largura máxima. A verdadeira largura real do css é 100%. Todas as seções, linhas, colunas e módulos são inerentemente 100% de largura, porque são todos construídos usando o elemento div block. E os elementos de bloco sempre abrangem toda a largura do contêiner (largura de 100%).

O que você sabe… Divi é construído com Divs.

Aqui está um pequeno teste. Vamos atualizar a largura do módulo para 1000px para este módulo de texto na coluna da esquerda. Eu dei ao módulo um fundo cinza para fácil reconhecimento.

unidades de comprimento

Observe que, na verdade, ele não atinge o total de 1000px, pois isso é tecnicamente uma largura máxima. No entanto, se eu quisesse substituir a largura padrão de 100% e declarar uma largura real de 1000px, eu poderia ir para a guia avançada e definir o elemento principal para ter uma largura de 1000px.

Agora olhe para o módulo.

unidades de comprimento

O problema é que você está usando um valor absoluto cercado por elementos com valores relativos. Portanto, mesmo que você reduza o seu navegador, o módulo permanecerá em 1000px.

É por isso que o Divi ajusta a largura máxima de seus elementos em vez da largura real.

É comum usar pixels em combinação com unidades de tamanho relativo (como porcentagem) para criar sites responsivos. Divi usa este método para definir a largura do conteúdo para todas as suas páginas. Se você acessar o Tema Personalizador> Configurações Gerais> Configurações de Layout , verá que a largura do conteúdo principal está configurada para 1080px

unidades de comprimento

O 1080px é na verdade a largura máxima do seu conteúdo. A largura real do css é de 80%. É por isso que quando você aumenta a largura do seu navegador, a largura do conteúdo vai parar de se expandir em 1080px. E se você diminuir a largura do navegador abaixo de 1080px, o conteúdo continuará a ser dimensionado de acordo com 80% do elemento pai.

Adicionando valores de largura personalizados no Divi Builder

Ao usar o construtor Divi, suas linhas são consideradas o conteúdo do site e herdarão uma configuração padrão de largura de 80% e largura máxima de 1080px. Se você alterar a largura de uma linha usando o Divi Builder definindo uma largura personalizada, o novo valor de largura será uma largura máxima, independentemente de ela ser definida como uma porcentagem ou um valor de pixel.

unidades de comprimento

Se você alterar uma linha para largura total, tanto a largura quanto a largura máxima serão definidas como 89%. Isso significa que a linha sempre terá 89% do elemento pai (a seção), que é 100% da janela do navegador.

unidades de comprimento

Em resumo, o construtor Divi é inteligente o suficiente para usar largura máxima automaticamente ao ajustar a largura de suas seções, linhas ou módulos.

Usando vw para ajustar a largura

Largura da viewport (vw) é muito semelhante ao valor da porcentagem. A diferença é que o valor vw é sempre relativo à largura da janela / porta de visualização do navegador. O valor percentual é sempre relativo ao elemento pai. Tenha cuidado ao configurar suas seções para 100vw (em css personalizado), pois isso pode causar alguns problemas ao ultrapassar a barra de rolagem que aparece ao rolar a página para baixo.

Como o Divi é construído em larguras percentuais, a menos que você esteja criando um design especial que exija vw, eu ficaria com valores percentuais.

Margem

Unidades de comprimento sugeridas: px,% e vw

unidades de comprimento

A propriedade de margem usa unidades de comprimento para adicionar espaçamento fora do elemento. Também é útil para posicionar um elemento usando valores positivos e negativos.

Divi permite ajustar a margem de qualquer seção, linha ou módulo.

unidades de comprimento

Usando px para margens

Usar pixels para margens e / ou preenchimento é bom, desde que você entenda que esses valores de comprimento não serão ajustados com os diferentes tamanhos de tela, a menos que você atribua valores de comprimento específicos para diferentes tamanhos de tela.

Evite usar pixels para margem esquerda ou direita

Em geral, você desejará evitar o uso de pixels para ajustar as margens, especialmente para as margens esquerda e direita. Ter um comprimento absoluto para as margens não será dimensionado adequadamente com o seu conteúdo e, por fim, deixará você com mais ou menos margem do que o desejado em determinadas larguras de navegador. Há exceções para isso, onde você desejará ter margens absolutas para propósitos de design. Apenas certifique-se de ajustar o comprimento da margem para dispositivos móveis quando necessário.

Usando pixels para margem superior e inferior

Há momentos em que usar pixels para margem é bastante útil. Por exemplo, se você estiver querendo mover um elemento para cima ou para baixo em uma página, dar ao elemento um valor de pixel positivo ou negativo permitirá mover esse elemento em um local preciso verticalmente. Se você usar uma porcentagem para isso, o elemento será movido para cima ou para baixo conforme você altera a largura do navegador.

Usando porcentagem para margens

unidades de comprimento

Usar porcentagem para margens é uma ótima maneira de criar sites que sejam responsivos. Como mencionado anteriormente, os valores percentuais são relativos ao comprimento dos elementos pais. Divi usa porcentagens para margem direita para criar espaço entre colunas. Essa porcentagem de margem é facilmente ajustada alterando a largura da medianiz nas configurações de linha. A largura da medianiz é basicamente a porcentagem de margem que você deseja entre suas colunas.

Com a largura da medianiz definida para 3, a margem entre colunas é de 5,5%. Observe como o espaço é dimensionado ao ajustar a largura do navegador.

unidades de comprimento

Portanto, se você precisar ajustar a margem direita ou esquerda de um módulo, lembre-se de que será melhor usar porcentagens para manter as coisas dimensionadas adequadamente.

Use a margem percentual para posicionar objetos horizontalmente

Às vezes, certos projetos criativos exigem a movimentação de objetos da esquerda para a direita para sobrepor objetos ou criar desenhos assimétricos. Nesse caso, você pode usar um valor percentual negativo para uma margem direita ou esquerda. Isso moverá o objeto, mas ainda se ajustará às larguras do navegador.

Aqui está um exemplo do uso de valores percentuais para sobrepor uma imagem com outra imagem. Observe o uso de valores percentuais para posicionamento horizontal e o uso de pixels para posicionamento superior e inferior. Isso ocorre porque o valor percentual é relativo à largura do elemento pai (a coluna). Portanto, se você colocar uma margem superior de 30%, a imagem será movida para cima e para baixo conforme a largura da coluna for alterada. É por isso que, na maioria dos casos, você desejará posicionar elementos verticais com um valor de comprimento absoluto, como pixels.

unidades de comprimento

Usando vw e vh para margem personalizada

Como porcentagens, as unidades de comprimento vw e vh podem ser úteis para adicionar margens entre seções, linhas ou módulos de uma maneira que se adapte à sua viewport do navegador. A diferença é que vw e vh são sempre relativos ao tamanho da viewport, não ao elemento pai (como porcentagens).

Preenchimento

Unidades de Comprimento Sugeridas: px,%, em, vw e vh

unidades de comprimento

O Divi permite personalizar o preenchimento de seções, linhas, colunas e módulos.

unidades de comprimento

Usando pixels para preenchimento

Houve um tempo em que usei pixels para preenchimento de praticamente tudo. Mas eu voltei a meus sentidos. Como a margem, você pode usar pixels para preenchimento se quiser ter um comprimento absoluto de preenchimento, independentemente do tamanho do navegador. Mas geralmente, o preenchimento deve ser dimensionado para o tamanho do navegador. Então, em vez disso, sugiro usar porcentagens de preenchimento.

É comum no design da Web responsivo usar pixels para preenchimento superior e inferior a fim de manter um espaçamento vertical consistente entre os elementos enquanto a largura do navegador muda. Divi faz isso para seções e linhas. Dependendo da altura da seção ou da linha que você selecionar (1-10) no Customizador de temas, sua seção e / ou linhas terão um preenchimento superior e inferior maior ou menor.

unidades de comprimento

Mas se você olhar para o CSS, você notará que o preenchimento superior e inferior é definido como um valor percentual em um determinado ponto de interrupção e um valor de pixel para outros. Por exemplo, se você deixar a altura da seção padrão com o valor de 4, em larguras de tela maiores (maiores que 1350px), o preenchimento superior e inferior será de 54px. Em larguras de tela entre 980px-1350px, o preenchimento superior e inferior será definido como 4% (que é 4% da largura da seção). Em tamanhos de tela inferiores a 980px, o preenchimento superior e inferior é definido para 50px. Essa técnica é ótima para definir um valor de preenchimento mínimo para smartphones e um preenchimento máximo para monitores grandes, enquanto a escala de preenchimento é preenchida com o valor percentual para dispositivos entre os dois extremos.

Usando% para preenchimento

Às vezes, é muito mais fácil usar um valor percentual (não pixels) para preenchimento, a fim de manter as coisas bem escalonadas sem a necessidade de adicionar valores adicionais em determinados pontos de interrupção. E, para aqueles que estão interessados ​​em manter conteúdo importante “acima da dobra”, usar porcentagens em vez de pixels para preenchimento superior e inferior ajudará a simplificar esse processo.

Aqui está um exemplo de uma seção com um conjunto de preenchimento superior a 50 px. Observe como o mesmo preenchimento de 50px não parece tão bom em smartphones quanto em desktops porque há muito espaço entre as seções.

unidades de comprimento

Aqui está um exemplo de uma seção com um preenchimento superior definido como 4%. Observe como ela é bem dimensionada do desktop para o smartphone. Em uma janela do navegador que tem 1920px de largura, o preenchimento superior é 76px (0,04 vezes 1920). Mas quando você dimensiona a janela do navegador para 375 pixels de largura, o preenchimento de 4% equivale a 15 px (0,04 vezes 375).

unidades de comprimento

OBSERVAÇÃO: é importante lembrar que os valores percentuais superior e inferior sempre serão relativos à largura do elemento, não à altura.

Usando em para preenchimento

Usando o valor em comprimento para preenchimento é surpreendentemente útil. Digamos que você tenha um módulo de texto com tamanho de corpo de texto de 22 px para desktop, 18 px para tablet e 14 px para smartphone. 1em seria igual a 22px na área de trabalho, 18px no tablet e 14px no smartphone. Ficar comigo. Adicionando um preenchimento de 2em para o módulo de texto irá ajustar de acordo com o tamanho do texto. Na área de trabalho, o preenchimento será de 44px porque 2em seria 2 vezes 22px. No tablet, o preenchimento será de 36px. E no smartphone, o preenchimento será de 28px. Isso ajuda a dimensionar o preenchimento de acordo com o tamanho da fonte, o que funciona muito bem para o design responsivo.

Usando vh e vw para preenchimento

Você pode usar vh e vw para preenchimento da mesma maneira que faria com porcentagem. A diferença é que vh e vw são
sempre relativos ao tamanho da viewport. A porcentagem é sempre relativa ao elemento pai.

Neste exemplo, tirei todo o preenchimento da seção e linha e dei a cada módulo de texto o seguinte preenchimento:

2vh Top, 5vw à direita, 2vh inferior, 5vw à esquerda

Observe como o ajuste da altura do navegador diminuirá ou aumentará o preenchimento superior e inferior de cada módulo.

unidades de comprimento

Fronteiras

Unidades de comprimento sugeridas: px, em e vw

unidades de comprimento

Usando pixels para bordas

O uso de pixels para bordas é bastante comum e é recomendado, a menos que você queira que a borda seja dimensionada de acordo com o tamanho do tamanho da fonte pai (em) ou com a porta de visualização do navegador (vh, vw).

Bordas não suportam a unidade%

Você deve ter notado no cabeçalho acima que não incluí a porcentagem como uma opção. Isso ocorre porque o valor percentual não é uma unidade suportada para bordas. Mas você pode ter suas bordas escalonadas usando as outras unidades de comprimento relativo (em, vh, vw).

Using em for borders

Usar em para fronteiras é semelhante à ideia de usar padding em torno de módulos de texto. O valor em será relativo ao tamanho da fonte pai e será ajustado conforme o tamanho da fonte for alterado.

Aqui está um exemplo de um módulo de texto com uma borda de 1em. Eu também dou ao módulo um preenchimento de 1em. Observe o que acontece quando você ajusta o tamanho da fonte. A borda (e preenchimento) será alterada conforme o tamanho da fonte aumenta e diminui.

unidades de comprimento

Isso também funciona com bordas de botões. Aqui está um exemplo de um botão com uma largura de borda de 0,5em. Observe como ele é dimensionado com o tamanho do texto do botão.

unidades de comprimento

Usando vw e vh para bordas

Se você quiser dimensionar a largura da borda de acordo com o tamanho da janela de exibição do navegador, poderá usar a unidade de tamanho vw ou vh. Eu não vi muito isso, mas é interessante pensar nisso.

Texto

Unidades de comprimento sugeridas: px, em e talvez vw

unidades de comprimento

O Divi Builder Permite adicionar valores de tamanho personalizados para personalizar seu texto. Essas opções incluem tamanho do texto, espaçamento entre letras e altura da linha.

unidades de comprimento

Você pode usar qualquer um dos valores de comprimento CSS para essas opções de texto, mas para este post eu vou cobrir os mais comuns – px, em e vw.

Usando px para o tamanho do texto

É comum definir seus tamanhos de fonte para um valor de pixel porque você deseja que esses tamanhos permaneçam consistentes. Você ainda pode alterar o tamanho da fonte de acordo com a largura do navegador usando consultas de mídia. O Divi torna isso muito fácil, permitindo que você insira três tamanhos de fonte de dispositivo diferentes em todos os módulos Divi.

unidades de comprimento

Usando px para espaçamento entre letras

É comum usar o px para espaçamento entre letras. Apenas observe que, se você planeja alterar consideravelmente o tamanho da sua fonte entre os dispositivos, provavelmente terá que ajustar o espaçamento das letras também. Para tornar o espaçamento entre letras dimensionável com o tamanho do seu texto, você poderia usar o valor em comprimento em vez disso.

Usando px para a altura da linha

A unidade px não é a melhor opção para a altura da linha porque se torna um incômodo alterar a altura da linha toda vez que você altera o tamanho da fonte. É por isso que normalmente é usado (mais sobre isso depois).

Usando em para tamanhos de fonte

Você pode usar em para tamanhos de fonte personalizados. O valor de 1em será igual ao tamanho da fonte da tag pai mais imediata. Ao adicionar um valor em a um elemento de texto em um módulo, o tamanho de fonte da marca pai mais imediata é o que você definiu no personalizador de tema. Então, em Divi, se você tiver sua fonte de corpo definida como 16px, 1em é igual a 16px, 2em é igual a 32px e assim por diante.

Usando em para Altura da Linha

Digamos que você esteja usando um módulo de texto e mude a fonte do corpo para 18 px. Como em sempre é relativo à tag pai mais imediata, o valor de em é alterado para esse módulo e agora 1em é igual a 18px. Isso é útil para entender porque o Divi define a altura da linha como um valor de comprimento. Definir sua fonte de texto de 18px para ter um valor de 1.5em definirá a altura da linha como 27px (1,7 vezes 18px). Portanto, se você decidir alterar o tamanho da fonte mais tarde, a altura da linha será ajustada de acordo.

Usando em para espaçamento entre letras

O uso do em para espaçamento entre letras pode ser útil e eu definitivamente o recomendaria. A principal razão para usar o em para o espaçamento entre letras é para que o espaço aumente e diminua dependendo do tamanho do seu texto.

Veja o espaçamento entre letras na imagem a seguir. Observe como o espaçamento entre letras de 5px não muda quando você altera o tamanho do texto do cabeçalho.

unidades de comprimento

Agora olhe o mesmo texto de exemplo usando 0.1em para o espaçamento entre letras. Se o tamanho da fonte for 50px, 0.1em será igual a 5px. Mas se você diminuir o tamanho da fonte para 25px, 0.1em será igual a 2.5px.

unidades de comprimento

Usando rem para elementos de texto

Usar rem é geralmente mais previsível do que usar em porque é sempre relativo ao tamanho da fonte raiz. O elemento raiz na sua tag html. Essa é a tag que envolve todo o seu site. Em Divi, o html está configurado para ter um tamanho de fonte de 100%. Isso pode parecer um pouco estranho. Quero dizer, 100% do que exatamente? Na verdade, essa é uma prática bastante comum. Você pode não saber disso, mas definir o tamanho da fonte root / html como 100% é uma maneira de declarar o mesmo tamanho de fonte do seu navegador. A maioria dos navegadores tem um tamanho de fonte padrão de 16px, portanto, em Divi, o valor de 1rem é de 16px (ou o tamanho da fonte é definido nas configurações do navegador). Não é o que você definiu como o texto do corpo padrão no personalizador de temas.

Por exemplo, observe o que acontece quando adiciono 1rem ao tamanho do texto do corpo de um módulo de texto. Na verdade, o tamanho do texto aumenta de 14px (o que defini como fonte do corpo do tema no personalizador de temas) para 16px (meu tamanho de fonte padrão do navegador).

unidades de comprimento

Agora, se eu alterar o tamanho da fonte do meu navegador para algo maior, o texto nesse módulo de texto também aumentará.

unidades de comprimento

Portanto, se você estiver interessado em ter um texto que se ajuste às configurações do navegador do usuário, o valor de rem pode ser útil. Mas, na maioria das vezes, usar rem em Divi será apenas mais problema do que vale a pena, a menos que você queira começar a alterar a estrutura básica do Divi Theme (ou seja, alterar o tamanho da fonte raiz para outra coisa).

Usando vw para elementos de texto

Esse é talvez o valor de comprimento mais interessante a ser usado para texto. Não vou entrar em grandes detalhes sobre as possibilidades aqui, mas vou apresentar a ideia.

Usando vw para o tamanho da fonte permite que você dimensione completamente o seu texto com a janela do seu navegador. Isso pode ser útil se quiser que o comprimento da linha permaneça constante.

Veja o que acontece com este texto de título quando eu ajustar o tamanho da janela / viewport do meu navegador. O título tem um tamanho de texto de 15vw (que é 15% da viewport do broswer).

unidades de comprimento

Se você quiser dar um passo adiante, você pode definir um preenchimento customizado para o título que será escalonado automaticamente com o texto do título. Isso só funcionará se você aplicar o preenchimento de em à tag de título para que você precise adicioná-lo à caixa de título de CSS personalizado na guia avançada.

Observe como o preenchimento acima e abaixo do título é dimensionado com o título.

unidades de comprimento

Casos Especiais de Uso

Usando vh para criar cabeçalhos de altura total

O módulo de cabeçalho Fullwidth tem a opção de alterar o layout do seu cabeçalho para tela cheia. Isso garante que o cabeçalho ocupe toda a tela quando a página for carregada, independentemente do tamanho da tela.

Você pode realizar esse mesmo efeito com qualquer seção usando o construtor divi. Tudo o que você precisa fazer é acessar a guia avançada Section Settings e inserir o seguinte CSS personalizado na caixa de entrada Main Element:

height100vh;

Se você ainda não adivinhou, isso garante que sua seção ocupe toda a altura da janela de visualização do navegador.

Usando vw e em para criar grandes botões escalonáveis

Se você ainda não sabe, o preenchimento padrão dos botões do Divi é o seguinte:

0.3em Top, 1em Right, 0.3em Bottom, 1em Left

Mas você pode mudar isso ajustando o preenchimento do módulo de botão para algo como isto:

0.5em Top, 2.5em Right, 0.5em Bottom, 2.5em Left

Seu preenchimento personalizado será dimensionado com o tamanho da fonte do seu botão.

Então você pode alterar o tamanho da fonte para um valor de 4vw.

unidades de comprimento

Isso exibirá um botão muito grande em monitores grandes e dimensionará bem conforme você ajusta a janela do navegador. Para evitar que o botão seja muito pequeno nos telefones, você pode definir um valor de pixel para o seu botão para smartphones.

Outros recursos úteis

Vamos revisar. Devemos?

Largura – Use porcentagens para larguras personalizadas. Além disso, os pixels são aceitáveis ​​no construtor Divi porque esse é um valor de largura máxima e manterá a capacidade de resposta no celular.

Margem – Como o Divi usa porcentagens que já adicionam margens entre colunas em sua grade de temas, faria sentido continuar usando porcentagens, a menos que você tenha um motivo específico para não usar. Você também pode usar vw e vh para as margens, desde que você entenda o que está fazendo.

Padding – Você tem muitas opções que funcionam bem para preenchimento. Em geral, eu usaria porcentagens para preenchimento de linhas e seções para consistência. Mas eu usaria em para preenchimento de módulo, a fim de dimensionar com tamanhos de fonte. Os pixels são sempre bons para preenchimento, mas, na minha opinião, devem ser evitados, a menos que você tenha uma razão de design específica para isso.

Tamanho da fonte – Use pixels para tamanho de fonte personalizado. Em também é aceitável se você deseja que o tamanho da fonte seja relativo ao tamanho da fonte pai, facilitando a alteração de todos os tamanhos de fonte alterando-se o pai. Usar vw para o tamanho da fonte é uma boa opção para cabeçalhos ou para designs que precisam de texto para escalar com a viewport do navegador.

Espaçamento entre letras – Use em para espaçamento entre letras para aumentar a escala ao alterar o tamanho da fonte mais tarde.

Altura da linha – Use em para a altura da linha para que ela se ajuste ao tamanho da fonte.

Bordas – Você não pode errar usando pixels para bordas, mas não ignore as outras opções. O uso de em ajustará sua borda ao tamanho da fonte nativa (útil para botões). E usar vw para bordas é um pensamento interessante.

Pensamentos finais

Felizmente, o construtor Divi tem uma tonelada de recursos integrados que permitem criar sites responsivos bonitos sem precisar ser um especialista em unidades de comprimento CSS. Mas é útil entender o tamanho das unidades a serem usadas sempre que você decidir fazer personalizações em sua página. Ter seu site está ótimo em todos os tamanhos de tela é uma necessidade absoluta e usando os valores de comprimento certo irá tornar seu trabalho muito mais fácil no caminho.

Espero que este guia tenha sido útil. E como sempre, estou ansioso para ouvir de você nos comentários.

Felicidades!

Você tem os princípios básicos. Agora é hora aprender mais!

Você aprendeu os conceitos sobre medidas no DIVI. As principais partes de uma página e os tamanhos de cada divisão ou módulos e as unidades de medida de largura e altura, bem como margens superior, inferior, esquerda e direita e os espaçamentos que se podem a plicar a cada um deles, bem como os tamanhos e unidades de medidas de fontes, espaço entre letras e altura de linhas, mas há muito mais para aprender.

Temos dezenas e dezenas de tutoriais que cobrem todos os aspectos da manutenção de seu website. Quando terminar você será um expert e poderá colocar o seu site em um novo patamar!

Print Friendly, PDF & Email