Como criar um menu do Blurb ao passar o mouse / clicar para acessar sua página 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 um menu de sinopse impressionante que se expande assim que você passa o mouse ou clica nele. Começaremos passando por algumas etapas gerais. Continuaremos adicionando itens de menu usando os Módulos do Blurb e terminaremos permitindo que você escolha entre um efeito de passar o mouse ou clicar.

Vamos lá!

Antevisão

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

Hover Modus

Área de Trabalho

Móvel

Clique em Modus

Área de Trabalho

Móvel

1. Crie uma página em branco e carregue a página de destino dos pontos turísticos

Adicionar nova página em branco e ativar Divi Builder

A primeira coisa que você precisa fazer é criar uma nova página em branco. Dê um título à sua página e mude para o Divi Builder.

Carregar página de destino de passeios turísticos

Depois de habilitar o Divi Builder, carregue o layout da página de destino do Sightseeing Layout Pack.

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

Assim que a barra de menu principal estiver oculta, podemos começar a adicionar o menu de sinopses. Para fazer isso, vamos adicionar uma nova seção regular ao final 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

Vá para a guia de design e remova todo o preenchimento padrão superior e inferior da seção.

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

Sombra de caixa padrão

Adicione uma sombra de caixa à próxima seção.

• Força do desfoque de sombra da caixa: 18 px
• Cor da sombra: # 383838

Hover Box Shadow

E mude a força do borrão da sombra da caixa ao pairar.

• Força do desfoque de sombra da caixa: 1000 px

Ocultar estouros de seção e aumentar o índice Z

Estaremos usando as configurações de dimensionamento de seção para fazer essa técnica funcionar, mas para garantir que nada exceda o contêiner de seção, precisaremos ocultar os overflows. Também estamos aumentando o Índice Z para garantir que a seção permaneça no topo do resto da página.

• Excesso horizontal: oculto
• Estouro vertical: oculto
• Índice Z: 9999

3. Certifique-se de que todo o conteúdo do menu de seção seja criado usando Vw e se encaixa em 100 altura de viewport em todos os tamanhos de tela

Adicionar linha # 1

Estrutura da Coluna

Depois de concluir as configurações básicas da seção, é hora de adicionar todo o conteúdo que deseja exibir no menu. Você pode criar qualquer design que desejar usando os elementos de design e opções integradas do Divi, mas deve ter certeza de que tudo se encaixa em uma altura de '100vh' em todos os tamanhos de tela. Para fazer isso, vamos usar a unidade de largura da janela de visualização em todo o processo de construção e ajustar 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 ocupe toda a largura da seção.

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

Espaçamento

Passe para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.

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

Adicionar Módulo de Texto à Coluna

Adicionar Símbolo

Continue adicionando um Módulo de Texto à coluna da linha. Adicione o símbolo '=' à caixa de conteúdo ou sinta-se à vontade para usar qualquer outro símbolo de sua escolha.

Cor de fundo

Altere a cor de fundo do módulo a seguir.

• Cor de fundo: # 000000

Configurações de texto

Vá para a guia de design e altere as configurações de texto também.

• Fonte do texto: Open Sans
• Alinhamento de Texto: Centro
• Cor do texto: #ffffff
• Tamanho do texto: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Altura da linha de texto: 1em

Espaçamento

Também estamos adicionando algum espaço na parte superior e inferior do módulo usando os seguintes valores de preenchimento personalizado:

• Preenchimento superior: 2,5vw (desktop), 3,5vw (tablet), 5vw (telefone)
• Preenchimento inferior: 2,5vw (desktop), 3,5vw (tablet), 5vw (telefone)

Adicionar linha # 2

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e permita 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

Passe para as configurações de espaçamento e adicione um pouco de preenchimento personalizado superior e inferior a seguir.

• Preenchimento superior: 2vw (desktop), 4vw (tablet), 6vw (telefone)
• Preenchimento inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Exibição

Para garantir que as duas colunas permaneçam próximas uma da outra em tamanhos de tela menores, vamos adicionar uma única linha de código CSS ao elemento principal da linha.

display: flex;

Adicionar Módulo Blurb à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar os itens do menu! Adicione um novo Módulo Blurb à primeira coluna da linha e insira algum conteúdo de sua escolha.

Selecione o ícone

Escolha um ícone a seguir.

Adicionar Link

E insira um link de página que corresponda ao item de menu.

• URL do link do título: #

Configurações de ícone

Vá para a guia de design e altere as configurações do ícone de acordo:

• Cor do ícone: # ff3314
• Posicionamento do ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 2vw (desktop), 3vw (tablet), 4vw (telefone)

Configurações de texto do título

Modifique as configurações de texto do título também.

• Fonte do título: PT Serif
• Estilo da fonte do título: sublinhado
• Cor do sublinhado do título: # ff3314
• Alinhamento do Texto do Título: Centro
• Tamanho do texto do título: 1.8vw (desktop), 2.3vw (tablet), 3.3vw (telefone)

Configurações do corpo do texto

Em seguida, altere as configurações do corpo do texto.

• Fonte do corpo: Lato
• Alinhamento do corpo do texto: centro
• Cor do corpo do texto: # c6c6c6
• Tamanho do corpo do texto: 0,9vw (desktop), 1,7vw (tablet), 2,1vw (telefone)
• Altura da linha corporal: 1,8em

Dimensionamento

E altere a largura do módulo em diferentes tamanhos de tela usando os seguintes valores:

• Largura: 60% (desktop), 65% (tablet), 80% (telefone)

Animação

Também estamos removendo a animação do ícone nas configurações de animação.

• Animação de ícone: Sem animação

Clone o módulo do Blurb e coloque a duplicata na coluna 2

Depois de concluir o Módulo Blurb, você pode cloná-lo e colocar a duplicata na segunda coluna da linha.

Mudar Cópia

Certifique-se de alterar a cópia.

Alterar ícone

Junto com o ícone.

Alterar Link

E o link da página que corresponde ao novo item de menu.

Clonar linha duas vezes

Depois de concluir os dois módulos do Blurb na linha, você pode clonar a linha inteira duas vezes.

Alterar cópia, ícone e link para cada cópia 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. Tornar a seção aderente

Predefinição

Depois de adicionar todos os elementos que deseja mostrar à sua seção, você pode fazer com que a seção se fixe no canto superior esquerdo da página, adicionando as seguintes duas linhas de código CSS ao elemento principal da seção:

position: fixed;
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 neste estado também.

position: fixed;

5. Escolha um método: A) Menu ao passar o mouse ou B) Menu ao clicar

A) Menu ao passar o mouse

Dimensionamento de seção padrão

Na próxima parte do tutorial, você precisará escolher um método preferido; um menu ao passar o mouse ou clicar. 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 seu menu de acordo:

• Largura: 8vw (desktop), 12vw (tablet), 20vw (telefone)
• Altura: 7,4vw (desktop), 12vw (tablet), 16vw (telefone)

Dimensionamento da seção de pairar

Modifique os valores ao passar o mouse para criar um menu expansível.

• Largura: 80%
• Altura: 100vh

B) Menu ao clicar

Adicionar classe CSS ao módulo de texto

Se você deseja um menu que abre somente com um clique, você terá que abrir o Módulo de Texto que contém o símbolo do menu. Vá para a guia avançada e adicione uma classe CSS personalizada.

• Classe CSS: fullwidth-open

Adicionar classe CSS à seção

Abra as configurações da seção a seguir e adicione uma classe CSS diferente.

• Classe CSS: smooth-transform

Dimensionamento da Seção

Estamos modificando a largura e a altura de nossa seção a seguir.

• Largura: 8vw (desktop), 12vw (tablet), 20vw (telefone)
• Altura: 7,4vw (desktop), 12vw (tablet), 16vw (telefone)

Adicionar código à página

Adicionar nova linha ao fundo da seção

Agora, para criar o efeito de alternância, vamos precisar de um pouco de código JQuery e CSS. Comece adicionando um Módulo de Código a uma nova linha na parte inferior de sua seção.

Adicionar Módulo de Código à Seção e Inserir Código de Alternância JQuery

Copie as seguintes linhas do código JQuery e cole-as na caixa de código:

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

Adicionar código CSS personalizado às configurações da página

Por último, mas não menos importante, abra as configurações da página a seguir e adicione as seguintes linhas de código CSS:

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Antevisão

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

Hover Modus

Área de Trabalho

Móvel

Clique em Modus

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como criar um lindo módulo de blurb que se expande ao clicar / passar (dependendo de sua preferência). Esta é uma ótima maneira de adicionar interatividade extra ao seu menu, mantendo um resultado responsivo em todos os tamanhos de tela. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.