Como adicionar um logotipo responsivo ao seu módulo de menu de largura total no Divi
Publicados: 2022-06-05Você 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.
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.
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.
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
Adicione uma cor diferente para o fundo pegajoso.
- Cor de fundo pegajosa: #ffffff
Adicionar um módulo de menu de largura total
Agora vamos adicionar o módulo de menu de largura total.
Abra as configurações do módulo e remova o 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.
Defina o alinhamento do texto para a direita.
- Alinhamento do Texto: Direita
Defina a altura máxima do logotipo em Design e, em seguida, Dimensionamento.
- Altura máxima do logotipo: 50px
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;
Por fim, defina o preenchimento superior e inferior.
- Preenchimento superior: 10px
- Preenchimento inferior: 10px
Agora exclua a seção do menu original.
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.
Selecione o ícone do telefone para usar as opções responsivas e substitua o logotipo do celular pelo seu logotipo responsivo.
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.
Usaremos um layout pré-fabricado da biblioteca Divi para este exemplo, então selecione Browse Layouts.
Pesquise e selecione o layout da página inicial do High School.
Selecione Usar este layout para adicionar o layout à sua página.
Resultado final
Agora vamos dar uma olhada no nosso design final.
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!