Toda semana, fornecemos novas ideias de design que você pode usar em seus diferentes projetos Divi. Esses tutoriais geralmente incluem casos de uso que ajudarão você a site da Web no nível superior.
Esta semana, como parte de nossa iniciativa de design Divi Em andamento, mostraremos como criar um belo menu de layout flutuante que se expande quando você passa o mouse ou clica nele. Vamos começar com alguns passos gerais. Continuaremos adicionando itens de menu usando os módulos do Blurb e terminaremos permitindo que você escolha entre um efeito de foco ou clique.
Vamos!
Visão geral
Antes de mergulhar no tutorial, vamos dar uma olhada rápida no resultado que podemos obter. Mas isso pode ser diferente porque você provavelmente desejará personalizar o que aprender.
1. Crie uma página em branco e use o modelo de página de turismo
Adicione uma nova página em branco e ative o Divi Builder
A primeira coisa a fazer é criar uma nova página em branco. Dê um título à sua página e prossiga para Divi Construtor.
Baixe uma página de destino turístico
Depois de ativar o Divi Builder, faça o download do layout da página de destino do Sightseeing Layout Pack.
2. Adicione uma nova seção regular na parte inferior da página
Assim que a barra de menu principal estiver oculta, podemos começar a adicionar o menu de visão geral. Para fazer isso, adicionaremos uma nova seção regular na parte inferior de nossa página.
Cor de fundo
Abra as configurações da seção e adicione uma cor de fundo branco ligeiramente transparente.
- Cor de fundo: rgba (255,255,255,0.98)
espaçamento
Alterne para a guia Design e remova todo o preenchimento padrão superior e inferior da seção.
- Top Padding: 0px
- Preenchimento inferior: 0px
Sombra padrão
Adicione uma sombra de caixa à próxima seção.
- Força de desfoque de sombra de caixa: 18px
- Cor da tonalidade: #383838
Sombra da Caixa Hover
E mude a intensidade do desfoque da sombra da caixa flutuante.
- Força de desfoque de sombra de caixa: 1000px
Ocultar estouros de seção e aumentar o índice Z
Usaremos as configurações de dimensionamento de seção para fazer essa técnica funcionar, mas para garantir que nada vá além do contêiner de seção, teremos de ocultar os estouros. Também estamos aumentando o índice Z para garantir que a seção permaneça no topo do restante da página.
- Estouro horizontal: oculto
- Estouro vertical: oculto
- Índice Z: 9999
3. Configure o tamanho do menu para corresponder a todos os tamanhos de tela
Adicionar linha 1
Estrutura da coluna
Depois de definir os parâmetros básicos da seção, é hora de adicionar todos os conteúdo que você deseja exibir no menu. Você pode criar qualquer design que desejar usando os elementos de design e opções integradas do Divi, mas precisa ter certeza de que ele se adapta perfeitamente a uma altura de “100px” para todos os tamanhos de tela. Para fazer isso, usaremos a unidade de largura da janela de visualização durante todo o processo de construção e ajustaremos os valores em diferentes tamanhos de tela. Comece adicionando uma nova linha à sua seção usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e certifique-se de que preencham toda a largura da seção.
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
espaçamento
Vá para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.
- Top Padding: 0px
- Preenchimento inferior: 0px
Adicionar um módulo de texto a uma coluna
Adicione um símbolo
Continue adicionando um módulo de texto à coluna da linha. Adicione o símbolo '=' à caixa conteúdo ou fique à vontade para usar qualquer outro símbolo de sua escolha.
Cor de fundo
Altere a cor de fundo do módulo depois.
- Cor de fundo: #000000
Configurações de texto
Alterne para a guia Design e altere as configurações de texto também.
- Fonte do texto: Open Sans
- Alinhamento do texto: centro
- Cor do texto: #ffffff
- Tamanho do texto: 3vw (computador), 5vw (tablet), 7vw (telefone)
- Altura da linha de texto: 1em
espaçamento
Também adicionamos espaço na parte superior e inferior do módulo usando os seguintes valores de preenchimento personalizado:
- Preenchimento superior: 2.5vw (computador), 3.5vw (tablet), 5vw (telefone)
- Estofados na parte inferior: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefone)
Adicione a linha 2
Estrutura da coluna
Continue adicionando uma segunda linha usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e deixe-o preencher toda a largura da tela.
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
espaçamento
Vá para as configurações de espaçamento e adicione preenchimento personalizado na parte superior e inferior.
- Preenchimento superior: 2vw (computador), 4vw (tablet), 6vw (telefone)
- Estofados na parte inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
display
Para garantir que as duas colunas fiquem lado a lado em tamanhos de tela menores, vamos adicionar uma única linha de código CSS ao elemento da linha principal.
exibição: flex;
Adicione o módulo Blurb à coluna 1
Adicionar conteúdo
É hora de começar a adicionar os itens do menu! Adicione um novo módulo do Blurb à primeira coluna da linha e insira o conteúdo De sua escolha.
Selecione o ícone
Escolha um ícone próximo.
Adicionar um link
E insira um link de página correspondente ao item de menu.
- URL do título do link: #
Configurações de ícone
Mude para a guia Design e altere as configurações do ícone de acordo:
- Cor do ícone: # ff3314
- Posicionamento de ícones: superior
- Usar tamanho da fonte do ícone: Sim
- Tamanho da fonte do ícone: 2vw (desktop), 3vw (tablet), 4vw (telefone)
Configurações de texto do título
Altere também as configurações de texto do título.
- Título Policial: PT Serif
- Estilo da fonte do título: Sublinhado
- Cor de sublinhado do título: # ff3314
- Título do texto: alinhamento ao centro
- Tamanho do título do texto: 1.8vw (computador), 2.3vw (tablet), 3.3vw (telefone)
Configurações de texto do corpo
Em seguida, altere as configurações de texto do corpo.
- Fonte do corpo: Lato
- Alinhamento do corpo do texto: centro
- Cor do texto do corpo: # c6c6c6
- Tamanho do texto do corpo: 0.9vw (computador), 1.7vw (tablet), 2.1vw (telefone)
- Altura do corpo: 1.8em
dimensionamento
E altere a largura do módulo em diferentes tamanhos de tela usando os seguintes valores:
- Largura: 60% (computador), 65% (tablet), 80% (telefone)
Animação
Também removemos a animação do ícone nas configurações de animação.
- Animação de ícone: sem animação
Clone o módulo e coloque a cópia na coluna 2
Depois de concluir o módulo Blurb, você pode cloná-lo e colocar a duplicata na segunda coluna da linha.
Alterar cópia
Certifique-se de alterar a cópia. Não se esqueça de alterar o ícone e o link.
Clone a linha duas vezes
Depois de concluir os dois módulos do Blurb na linha, você poderá duplicar a linha inteira duas vezes.
Altere a cópia, o ícone e o link para cada duplicação do blurb individualmente
Certifique-se de alterar a cópia, o ícone e o link para cada um dos itens de menu da sinopse individualmente.
4. Faça a seção brega
défaut
Depois de adicionar todos os elementos que deseja exibir à sua seção, você pode fazer com que a seção permaneça no canto superior esquerdo da sua página, adicionando as duas linhas de código CSS a seguir ao elemento da seção principal. :
posição: fixa; top: 0;
Passe o mouse (importante!)
Habilite a opção de foco no elemento principal da seção e certifique-se de que a seção permaneça fixa nesse estado também.
posição: fixa;
5. Escolha um método: A) Menu de sobrevôo ou B) Clique no menu
A) Menu pairando
Dimensionamento de seção padrão
Na próxima parte do tutorial, você precisará escolher um método preferido. um menu suspenso ou clique. O menu suspenso se comportará como um menu de clique em dispositivos menores. Se você decidir escolher a opção de foco, abra as configurações da seção novamente, vá para as configurações de dimensionamento e altere a largura e a altura do menu de acordo:
- Largura: 8vw (computador), 12vw (tablet), 20vw (telefone)
- Altura: 7.4vw (computador), 12vw (tablet), 16vw (telefone)
Seção de foco
Altere os valores de sobreposição para criar um menu de expansão.
- Largura: 80%
- Altura: 100vh
B) Menu ao clicar
Adicionar uma classe CSS a uma seção
Se você deseja um menu que só abre clicando, você precisa abrir o módulo de texto que contém o símbolo do menu. Vá para a guia Avançado e adicione uma classe CSS personalizada.
- Classe CSS: fullwidth-open
Adicione uma classe CSS ao módulo de texto
Em seguida, abra os parâmetros da seção e adicione outra classe CSS.
- Classe CSS: smooth-transform
Dimensionamento da seção
Em seguida, modificamos a largura e a altura da nossa seção.
- Largura: 8vw (computador), 12vw (tablet), 20vw (telefone)
- Altura: 7.4vw (computador), 12vw (tablet), 16vw (telefone)
Adicione um código à página
Adicione uma nova linha na parte inferior da seção
Agora, para criar o efeito flip, vamos precisar de algum código JQuery e CSS. Comece adicionando um módulo de código a uma nova linha na parte inferior de sua seção.
Inclua um módulo de código na seção e insira um código de alternância JQuery
Copie as seguintes linhas do código JQuery e cole-as na caixa de código:
jQuery(function($){
$("#fullwidth-open").click(function() {
$('.smooth-transform').toggleClass('smooth-transform-active');
});
});
Adicionar código CSS personalizado às configurações da página
Por último, mas não menos importante, abra as seguintes configurações de página e adicione as seguintes linhas de código CSS:
.smooth-transform-active {altura: 100vh; largura: 80%; } .smooth-transform {-webkit-transition: todos os 0.5s facilitam; -moz-transition: todos os 0.5s facilitam; -o-transition: todos os 0.5s facilitam; -ms-transition: todos os 0.5s facilitam; transição: todos os 0.5s facilitam; }
Considerações finais
Neste tutorial, mostramos como criar um módulo de apresentação bonito que se expande clicando / pairando (dependendo de suas preferências). É uma ótima maneira de adicionar interatividade extra ao seu menu, mantendo um resultado responsivo para todos os tamanhos de tela. Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção reservada abaixo.
Oi! Ele não reconhece a parte # main-header ou .smooth - eu obtenho uma janela vermelha que diz "RGRADE esperado" ou algo parecido. Obrigado pela informação!!!
Obrigado por este ótimo tutorial! Que script posso adicionar para que o menu apareça apenas rolagem? (Gostaria de evitar tê-lo no cabeçalho da tela cheia). Agradecemos antecipadamente!
Você pode usar o código jQuery que oculta o menu e o mostra quando um certo número de pixels é rolado. Isso é antigo, mas pode funcionar: https://github.com/sxalexander/jquery-scrollspy