Como criar uma barra de menu deslizante para o seu site com Divi

Todas as semanas, fornecemos pacotes de layout Divi novos e gratuitos que você pode usar em seu próximo projeto. Para um dos pacotes de layout, também compartilhamos um caso de uso que o ajudará a levar seu site para o próximo nível.

Esta semana, como parte de nossa iniciativa de design Divi em andamento, vamos mostrar como criar uma barra de menu deslizante para o seu site usando o Pacote de Layout do Corretor de Hipoteca. Essa é uma ótima maneira de adicionar interação ao seu site. Você terá a mesma experiência do usuário em todos os tamanhos de tela e pode usar essa técnica para qualquer tipo de site que estiver criando.

Vamos lá!

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Desativar navegação fixa nas opções do tema Divi

Vá para as opções do tema Divi

Vamos começar! A primeira coisa que você precisa fazer é acessar as opções de tema Divi no seu site WordPress.

Desativar navegação fixa

Aqui, vamos desativar a barra de navegação fixa. Precisamos desabilitar esta opção para nos livrarmos completamente da barra de menu principal em nossa página posteriormente neste tutorial.

• Barra de navegação fixa: desativada

Ocultar barra de menu principal na página

Habilitar Visual Builder na página inicial do pacote de layout do corretor de hipoteca

Continue indo para a página que você criou usando a página inicial do Pacote de layout do corretor de hipoteca e habilite o Visual Builder.

Abra as configurações da página

Vamos ocultar a barra de menu principal em nossa página adicionando algum código CSS. Para adicionar este código, abra as configurações da página.

Adicione o código CSS personalizado para ocultar a barra de menu principal

Em seguida, vá para a guia avançada e coloque as seguintes linhas de código CSS na caixa CSS personalizado:

#main-header {
display: none;
}

Adicionar este código ajudará a evitar que a barra de menu principal apareça na página.

Crie design de menu personalizado com Divi

Verifique se há preenchimento superior suficiente na seção Hero em todos os tamanhos de tela

Agora que eliminamos a barra de menu principal em nossa página, podemos começar a adicionar a barra de menu deslizante! A primeira coisa que você precisa fazer é certificar-se de que haja preenchimento suficiente na parte superior da página para que a barra de menu deslizante não se sobreponha a nenhum conteúdo existente. Para a página de destino do Mortgage Broker Layout Pack em particular, isso significa garantir que o preenchimento personalizado da coluna 1 permaneça '180px' em todos os tamanhos de tela.

• Preenchimento superior: 180 px

Adicionar nova seção regular ao final da página

É hora de começar a criar a barra de menu deslizante personalizada! Adicione uma seção regular ao final da sua página.

Espaçamento

Abra as configurações de seção e remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar linha

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

Cor de fundo

Abra as configurações de linha e altere a cor de fundo da linha para branco.

• Cor de fundo: #ffffff

Dimensionamento

Em seguida, abra as configurações de linha e altere as configurações de dimensionamento para permitir que a linha ocupe toda a largura da tela:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Remova todo o preenchimento superior e inferior a seguir.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

E para ter certeza de que há profundidade suficiente entre a barra de menu deslizante e a página em si, vamos adicionar uma sombra de caixa.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.55)

Adicionar Módulo de Imagem

Carregar logotipo da empresa

É hora de começar a adicionar todos os módulos que queremos mostrar na barra de menu deslizante, começando com um Módulo de imagem. Faça upload do seu logotipo usando um arquivo de imagem com largura de 226 px e altura de 100 px.

Alinhamento

Em seguida, vá para a guia de design do Módulo de imagem e altere o alinhamento da imagem.

• Alinhamento de imagem: centro

Dimensionamento

Altere as configurações de dimensionamento da imagem a seguir.

• Largura máxima: 75% (desktop), 100% (tablet e telefone)

Espaçamento

E adicione um pouco de preenchimento personalizado superior e inferior à imagem também.

• Preenchimento superior: 15 px (tablet), 25 px (telefone)
• Preenchimento inferior: 15 px (tablet), 25 px (telefone)

Adicionar Módulo de Botão

Adicionar cópia

O segundo módulo de que precisamos é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Modifique a aparência do botão a seguir.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0.8vw (desktop), 1.4vw (tablet), 2.1vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 40eccc
• Largura da borda do botão: 0 px
• Raio da borda do botão: 50 px
• Espaçamento entre letras dos botões: 2 px
• Fonte do botão: Lato
• Peso da fonte: pesado
• Estilo da fonte: maiúsculas

Espaçamento

E crie a forma desejada usando valores de margem e preenchimento personalizados.

• Margem superior: 15px
• Margem inferior: 15px
• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 40px
• Preenchimento direito: 40px

Adicionar Módulo de Texto # 1

Adicionar item de menu à caixa de conteúdo

O próximo módulo de que precisamos em nossa barra de menu deslizante é um Módulo de texto. Aqui, vamos adicionar o título da página à caixa de conteúdo.

Adicionar Link

Passe para as configurações de link e adicione o link correto ao Módulo de Texto.

Cor de fundo

Modifique a cor de fundo a seguir.

• Cor de fundo: # f2f2f2

Configurações de texto

Em seguida, altere as configurações de texto.

• Fonte do texto: Lato
• Peso da fonte do texto: negrito
• Cor do texto: # 000000
• Tamanho do texto: 0,9vw (desktop), 1,9vw (tablet), 2,4vw (telefone)
• Orientação do Texto: Centro

Espaçamento

E adicione um pouco de preenchimento personalizado superior e inferior ao módulo também.

• Enchimento superior: 30px
• Preenchimento inferior: 30 px

Clonar Módulo de Texto x5 Vezes

Assim que terminar de modificar o Módulo de Texto, você pode cloná-lo 5 vezes.

Mudar Cópia

Certifique-se de alterar o título da página em cada uma dessas duplicatas.

Mudar links

Junto com os links.

Alterar cores de fundo

Modifique as cores de fundo do segundo, quarto e sexto item de menu a seguir.

• Cor de fundo: #ffffff

Adicionar CSS personalizado à linha

Elemento Principal

Agora, para garantir que a barra de menu deslizante fique no topo da página, precisaremos adicionar algumas linhas de código CSS ao elemento principal da linha.

position:fixed;
top: 0px;
z-index: 99;

Elemento Principal da Coluna

Também estamos transformando a coluna em uma grade que nos permite rolar. As porcentagens que você pode ver no código CSS abaixo indicam quanto espaço cada um dos módulos ocupa na grade. Você pode modificar esses valores se quiser que sua grade tenha uma aparência diferente.

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

Classe CSS da coluna

E para se livrar da barra de rolagem, vamos adicionar uma classe CSS à linha também.

Remover barra de rolagem

Na página

Você pode remover a barra de rolagem da própria página abrindo as configurações da página e adicionando as seguintes linhas de código CSS à caixa CSS personalizada:

.swipe-menu::-webkit-scrollbar {
display: none;
}

Em todo o site

Se você não quiser repetir a mesma etapa de ocultar a barra de rolagem em cada página individualmente, você também pode ir para as opções de tema Divi e fazer o código CSS se aplicar a todo o site, rolando para baixo a guia geral e adicionando as seguintes linhas de código CSS para a caixa CSS personalizada:

.swipe-menu::-webkit-scrollbar { display: none; }

Salvar como seção como item global

Assim que a barra de menu deslizante estiver funcionando corretamente, você pode salvá-la na sua biblioteca Divi como um item global e usá-la em outras páginas também!

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como criar uma barra de menu deslizante para qualquer site que você estiver criando usando Divi. Esta é uma ótima técnica para adicionar outra dimensão ao seu site. Este tutorial é parte de nossa iniciativa de design Divi em andamento, onde tentamos colocar algo extra em sua caixa de ferramentas de design a cada semana. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!