Como adicionar um logotipo responsivo ao seu módulo de menu de largura total no Divi

Publicados: 2022-06-05

Você sabia que mais de 50% do tráfego da Internet vem de dispositivos móveis? Isso significa que a versão mobile do seu site é extremamente importante e pode até ser a principal forma de alguém visitar sua página. Garantir que seu site seja responsivo e compatível com dispositivos móveis é uma etapa essencial no design de um site. Neste tutorial, mostraremos como adicionar um logotipo responsivo ao seu módulo de menu de largura total usando as opções responsivas integradas do Divi. Isso permitirá que você adicione um logotipo maior ou mais complexo que aparecerá em telas maiores e um logotipo menor ou mais simples que aparecerá em telas menores.

Vamos mergulhar!

Inscreva-se em nosso canal no Youtube

Espiada

Aqui está uma prévia do que vamos projetar. A versão desktop do site terá um logotipo expandido com texto adicional, e a versão móvel do logotipo terá apenas a marca básica do logotipo.

Design final do menu de largura total do logotipo responsivo da Divi

Menu de largura total do logotipo responsivo para celular

Por que você precisa de um logotipo responsivo

Antes de começarmos o tutorial, vamos explicar por que você pode precisar de um logotipo responsivo em seu site.

Primeiro, o que é um logotipo responsivo? Um logotipo responsivo é uma variação do seu logotipo que pode ser menor, mais simples, abreviado ou reorganizado para ficar mais visível e legível em tamanhos menores. Se o seu logotipo tiver muitos elementos detalhados, eles podem não aparecer bem em um tamanho menor. Tamanhos de fonte pequenos e tipografia extra em um logotipo responsivo também podem ser difíceis de ler em uma tela pequena. Ao implementar um logotipo responsivo em seu site adaptado ao tamanho da tela do usuário, você pode garantir que a identidade da sua marca seja claramente representada, não importa o que aconteça. Para alguns ótimos exemplos de logotipos responsivos, dê uma olhada neste site!

O que você precisa para começar

Primeiro, instale e ative o Divi Theme e verifique se você tem a versão mais recente do Divi em seu site. Em seguida, certifique-se de ter pelo menos duas versões do seu logotipo – uma para a visualização de desktop do seu site e outra para a visualização móvel. Por fim, baixe o modelo de cabeçalho e rodapé para o pacote de layout do ensino médio da Divi.

Agora, você está pronto para começar!

Como adicionar um logotipo responsivo ao seu módulo de menu de largura total no Divi

Importar o layout de cabeçalho e rodapé

Navegue até o Theme Builder no menu Divi na barra lateral. Importe o layout de Cabeçalho e Rodapé do Ensino Médio selecionando o ícone de portabilidade. Selecione a guia Importar e escolha o arquivo de layout. Em seguida, selecione Importar modelos de construtor de temas Divi.

Layout de importação do menu de largura total do logotipo responsivo Divi

Editaremos o cabeçalho e adicionaremos nosso logotipo responsivo no construtor de temas. Clique no ícone de lápis para editar o cabeçalho.

Criar o módulo de menu de largura total

Adicionar uma seção de largura total

Como o menu original é construído com um módulo de menu padrão, precisaremos modificar o layout para adicionar um módulo de menu de largura total. Primeiro, adicione uma seção de largura total ao cabeçalho global abaixo do menu existente.

Divi Responsive Logo Menu de largura total Adicionar seção de largura total

Nas configurações da seção de largura total, navegue até Avançado e, em seguida, Efeitos de rolagem.

  • Posição pegajosa: Stick to Top

Em seguida, adicione a cor de fundo.

  • Cor de fundo: #f5f0eb

Fundo da seção do menu de largura total do logotipo responsivo Divi

Adicione uma cor diferente para o fundo pegajoso.

  • Cor de fundo pegajosa: #ffffff

Logo Divi Responsive Menu de Largura Total Fundo Fixo

Adicionar um módulo de menu de largura total

Agora vamos adicionar o módulo de menu de largura total.

Divi Responsive Logo Menu de largura total Adicionar módulo de menu

Abra as configurações do módulo e remova o plano de fundo.

Divi Responsive Logo Menu de largura total Excluir plano de fundo

Para replicar facilmente a aparência do menu original, podemos usar a função copiar estilos para copiar algumas das configurações personalizadas. Abra as configurações do menu original, clique com o botão direito do mouse em Estilos de texto do menu e selecione Copiar estilos de texto do menu.

Depois de copiado, clique nos três pontos do módulo de menu de largura total e selecione Colar estilos de texto do menu.

Agora vamos repetir as mesmas etapas com as configurações do menu suspenso. Abra as configurações do menu original, clique com o botão direito do mouse em Estilos de menu suspenso e selecione Copiar estilos de menu suspenso. Clique nos três pontos do módulo de menu de largura total e selecione Colar estilos de menu suspenso.

Repita mais uma vez para os estilos de ícone. Abra as configurações do menu original, clique com o botão direito do mouse em Estilos de ícone e selecione Copiar estilos de ícone. Clique nos três pontos do módulo de menu de largura total e selecione Colar estilos de ícone.

Divi Responsive Logo Menu Largura Total Copiar Colar Estilos de Ícones

Defina o alinhamento do texto para a direita.

  • Alinhamento do Texto: Direita

Alinhamento de texto do menu de largura total do logotipo responsivo Divi

Defina a altura máxima do logotipo em Design e, em seguida, Dimensionamento.

  • Altura máxima do logotipo: 50px

Logo responsivo Divi Largura total do menu Altura máxima do logotipo

Adicione o seguinte CSS à seção Menu Link em CSS personalizado.

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

Divi Responsive Logo Menu de largura total CSS personalizado

Por fim, defina o preenchimento superior e inferior.

  • Preenchimento superior: 10px
  • Preenchimento inferior: 10px

Divi Responsive Logo Menu de largura total Adicionar preenchimento

Agora exclua a seção do menu original.

Divi Responsive Logo Menu de largura total Excluir seção

Adicione um logotipo responsivo

Agora vamos adicionar o logotipo responsivo. Felizmente, o Divi facilita isso com as opções responsivas integradas.

Em Geral, abra as configurações do logotipo e carregue a versão para desktop do seu logotipo.

Menu de largura total do logotipo responsivo Divi Adicionar logotipo

Selecione o ícone do telefone para usar as opções responsivas e substitua o logotipo do celular pelo seu logotipo responsivo.

Divi Responsive Logo Menu de largura total Carregar Logo Responsive

Criar uma nova página com um layout pré-fabricado

Para ver o menu de largura total com o logotipo responsivo em ação, vamos criar uma nova página com um layout pré-definido da biblioteca Divi. Para este design, usaremos a página inicial do High School do High School Layout Pack para combinar o cabeçalho e o rodapé.

Adicione uma nova página ao seu site e dê um título a ela, depois selecione a opção Usar o Divi Builder. Como importamos o layout de cabeçalho e rodapé como cabeçalho e rodapé globais, use o layout padrão para esta página.

Divi Responsive Logo Menu de largura total Criar página

Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Browse Layouts.

Divi Responsive Logo Menu de largura total Navegar pelos layouts

Pesquise e selecione o layout da página inicial do High School.

Selecione Usar este layout para adicionar o layout à sua página.

Menu de largura total do logotipo responsivo Divi Usar layout

Resultado final

Agora vamos dar uma olhada no nosso design final.

Design final do menu de largura total do logotipo responsivo da Divi

Menu de largura total do logotipo responsivo para celular

Pensamentos finais

Ter um site compatível com dispositivos móveis e responsivo é mais importante do que nunca. E graças às opções responsivas integradas do Divi, construir um é mais fácil do que nunca! Com um logotipo responsivo, a identidade da sua marca sempre será clara, não importa o tamanho da tela. Se você estiver interessado em saber mais sobre as opções responsivas do Divi, confira este tutorial sobre conteúdo de depoimento responsivo. Como você implementou designs responsivos em seu site? Adoraríamos ouvir seus pensamentos nos comentários!