Você gostaria de adicionar um logotipo responsivo ao seu módulo Fullwidth Menu de Divi para que ele se adapte à visualização no celular?
Você sabia que mais de 50% dos tráfego Internet vem de dispositivos móveis? Isso significa que a versão móvel do seu site da Web é extremamente importante e pode até ser a principal forma de alguém visitar sua página.
Certifique-se de que o seu site da Web seja responsivo e compatível com dispositivos móveis é uma etapa essencial no design de um site da Web.
Neste tutorial, mostraremos como adicionar um logotipo responsivo ao seu módulo Fullwidth Menu 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 começar!
Visão geral
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.
O que você precisa para começar
Todos primeiro, instale e ative o tema Divi 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 visualização em desktop do seu site e outra para visualização em dispositivos móveis. Por fim, baixe o modelo Modelos de cabeçalho e rodapé para o pacote de layout de ensino médio da Divi.
Agora você está pronto para começar!
Como adicionar um logotipo responsivo ao seu módulo de cabeçalho de largura total no Divi
Crie o módulo de cabeçalho de largura total
Leia também: Divi: Como exibir o módulo Fullwidth Header em tela cheia
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 cabeçalho de largura total.
Primeiro, adicione uma seção de largura total (Largura completa) para o cabeçalho global no menu existente.
Nas configurações da seção de largura total, navegue até Avançado, À Puis Efeitos de rolagem.
- Posição pegajosa: Stick to Top
Em seguida, adicione a cor de fundo.
- Plano de fundo: #f5f0eb
Adicione uma cor diferente para o plano de fundo no estado adesivo.
- Plano de fundo (fixo): #ffffff
Adicionar um módulo de cabeçalho de largura total
Agora vamos adicionar o módulo Fullwidth Header.
Abra as configurações do módulo e remova o plano de fundo.
Para replicar facilmente a aparência do menu original, podemos usar o recurso Copiar estilos para copiar algumas das configurações personalizadas.
Veja também: Divi: Como alterar o gradiente de um plano de fundo ao passar o mouse
Abra as configurações do menu inicial e clique com o botão direito do mouse em Texto do Menu e selecione Copiar Estilos de Texto do Menu.
Uma vez copiado, clique nos três pontos do módulo Fullwidth Header e selecione Estilos de texto do menu anterior.
Agora vamos repetir as mesmas etapas com as configurações do menu suspenso.
Repita mais uma vez para os ícones.
Defina o alinhamento do texto para a direita.
- Alinhamento de texto: à direita
Defina a altura máxima do logotipo em DesignDepois Dimensionamento.
- Altura máxima do logotipo: 50px
Adicione o seguinte CSS à seção Link do Menu em CSS personalizado.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Por fim, ajuste o preenchimento superior e inferior.
- Preenchimento superior: 10px
- Padding-inferior: 10px
Agora exclua a seção do menu original.
Adicionar logotipo responsivo
Agora vamos adicionar o logotipo responsivo. Felizmente, o Divi facilita isso com opções responsivas integradas.
Sous Conteúdo, abra as configurações do logotipo e carregue a versão para desktop do seu logotipo.
Selecione o ícone do modo móvel para usar as opções responsivas e substitua o logotipo móvel pelo seu logotipo responsivo.
Criar uma nova página com um layout predefinido
Para ver o menu de largura total com o logotipo responsivo em ação, vamos criar uma nova página com um layout predefinido da biblioteca Divi.
Para este projeto, usaremos a página inicial do ensino médio do Pacote de layout do ensino médio para corresponder ao cabeçalho e rodapé.
Adicione uma nova página ao seu site e dê um título a ela e selecione a opção Usar o Construtor Divi. 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 Procurar layouts.
Encontre e selecione o layout Página inicial do ensino médio.
selecionar Usar este layout para adicionar o layout à sua página.
Resultado final
Agora vamos dar uma olhada no nosso design final.
Baixe o DIVI agora!!!
Conclusão
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, independente do tamanho da tela.
Esperamos que este tutorial o inspire para seus próximos projetos Divi. Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.
Você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
