Como otimizar o dimensionamento do seu logotipo responsivo no módulo de menu de largura total do Divi

Publicados: 2022-08-31

O módulo de menu de largura total do Divi oferece aos usuários do Divi muito controle sobre seu design. Isso inclui a capacidade de tornar qualquer logotipo completamente responsivo. Um conjunto de controles, a largura do logotipo e a largura máxima do logotipo, funcionam muito bem juntos para especificar o tamanho do logotipo. Com apenas alguns ajustes, qualquer usuário do Divi pode garantir que seu logotipo funcione bem em qualquer tela. Neste post, veremos como otimizar o tamanho do logotipo responsivo do Divi no módulo Fullwidth Menu do Divi.

Vamos começar.

Sobre o meu exemplo de configurações do módulo de menu de largura total

Antes de começarmos, vamos dar uma olhada no meu exemplo e suas configurações. Podemos ver que o logotipo é grande para o cabeçalho. Este é um logotipo quadrado. Também veremos como ajustar as configurações para outros tamanhos e formas. Isso nos dá um ponto de partida e veremos como ajustá-lo à medida que avançamos. Também mostrará por que precisamos ajustá-lo.

Aqui estão minhas configurações:

Logo: 150×150
Cor de fundo: #f4f4f4
Estilo: alinhado à esquerda (também mostrarei o logotipo centralizado em linha quando ajudar a demonstrar a configuração)
Direção do menu suspenso: para baixo
Tornar os links do menu de largura total: Não
Fonte do menu: Arvo
Cor do Texto: Preto
Tamanho da fonte: 16px
Preenchimento: 2vh superior e inferior

Aqui está o cabeçalho quando visto em uma área de trabalho.

Sobre o meu exemplo de configurações do módulo de menu de largura total

Aqui está o cabeçalho em um tablet. O tamanho do logotipo se destaca ainda mais.

Sobre o meu exemplo de configurações do módulo de menu de largura total

Finalmente, aqui está a visualização do telefone. Este torna o cabeçalho muito grande.

Sobre o meu exemplo de configurações do módulo de menu de largura total

Esses exemplos demonstram bem por que um logotipo no módulo Fullwidth Menu precisa ser responsivo.

Sobre o tamanho do logotipo

O tamanho do logotipo recomendado varia na web. O tamanho mais recomendado é geralmente entre 250×100 e 250×150. Os logotipos que incluímos em nossos layouts Divi geralmente estão na faixa de 160 × 50 ou 225 × 100, mas alguns são muito diferentes com base em sua forma.

Estou usando um logotipo em 150×150, e mostrarei alguns exemplos com logotipos de tamanhos diferentes. Você precisará brincar com suas configurações com base no tamanho da imagem do seu logotipo.

Configurações de dimensionamento de logotipo do módulo de menu de largura total

Existem 10 configurações na seção Dimensionamento. Quatro dessas configurações visam o logotipo.

As configurações incluem:

Largura do logotipo – uma porcentagem da largura máxima. O padrão é Automático.
Logo Max Width – define a largura máxima em pixels que a largura não pode exceder. O padrão é 100%.
Altura do logotipo – uma porcentagem da Altura máxima. O padrão é Automático.
Altura máxima do logotipo – define a altura máxima em pixels que a Altura não pode exceder. O padrão é 100%.

Configurações de dimensionamento de logotipo do módulo de menu de largura total

As configurações de largura funcionam juntas e as configurações de altura funcionam juntas, mas a largura e a altura não devem ser usadas juntas. Essas configurações nos dão um controle preciso sobre a largura ou altura do logotipo. Quando usado com as configurações de Desktop, Tablet e Telefone, sempre teremos um logotipo perfeitamente responsivo, independentemente do tamanho da tela do usuário.

Para este tutorial, vamos nos concentrar em Logo Width e Logo Max Width. Ao usar as configurações de largura, a Altura deve ser definida como Automática e a Altura máxima deve ser definida como 100%.

Largura do logotipo e largura máxima do logotipo

A configuração Largura do logotipo define a largura do logotipo como uma porcentagem do valor Largura máxima. O valor Max Width geralmente é definido em pixels ou vw. A altura é dimensionada para corresponder, mantendo a forma do logotipo à medida que o tamanho muda.

Por exemplo, se Max Width for definido como 50 pixels e Width for definido como 80%, o logotipo exibirá uma largura de 40px.

Ao definir o número máximo de pixels para a largura e, em seguida, definir a largura do logotipo como uma porcentagem desse máximo para cada tamanho de tela, podemos garantir que o logotipo sempre responda perfeitamente.

Exemplos de largura e largura máxima

Vamos ver alguns exemplos bons e ruins para demonstrar a capacidade de resposta do logotipo. Este exemplo mostra ambas as configurações de largura em seu padrão. Selecionei Inline Centered Logo para mostrar a largura em ambos os lados do logotipo.