Ir para o conteúdo principal

Como criar um menu flutuante no Divi

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Toda semana, fornecemos novas idéias de design que você pode usar em seus vários projetos Divi. Esses tutoriais geralmente incluem casos de uso que ajudarão você a mover seu site para o próximo nível.

Nesta semana, como parte da nossa iniciativa de design Divi, mostraremos como criar um belo menu de apresentação flutuante que se estende quando você passa o mouse ou clica nele. Vamos começar com algumas etapas gerais. Continuaremos adicionando itens de menu usando os módulos do Blurb e concluiremos permitindo que você escolha entre um efeito de passar o mouse ou clicar.

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 vá para o Divi Builder.

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

Quando a barra de menus principal estiver oculta, podemos começar a adicionar o menu de apresentação. Para fazer isso, adicionaremos uma nova seção regular na parte inferior da 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 superior e inferior padrão 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 altere a intensidade do desfoque da sombra da caixa pairando.

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

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

Usaremos os parâmetros de dimensionamento da seção para fazer essa técnica funcionar, mas para garantir que nada exceda o contêiner da seção, teremos que ocultar os estouros. Também aumentamos o índice Z para garantir que a seção permaneça na parte superior do restante da página.

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

3. Defina o tamanho do menu para todos os tamanhos de tela

Adicionar linha 1

Estrutura da coluna

Depois de definir as configurações básicas da seção, é hora de adicionar todo o conteúdo que você deseja exibir no menu. Você pode criar o design de sua escolha usando os elementos e opções internos do Divi, mas verifique se ele se encaixa perfeitamente na altura de "100px" para todos os tamanhos de tela. Para fazer isso, usaremos a unidade de largura da janela de exibição durante todo o processo de compilação e ajustaremos os valores para diferentes tamanhos de tela. Comece adicionando uma nova linha à sua seção usando a seguinte estrutura de colunas:

dimensionamento

Sem adicionar mais módulos, abra os parâmetros da linha e verifique se eles ocupam 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

Alterne para as configurações de espaçamento e exclua todo o preenchimento superior e inferior por padrão.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

  • 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 '=' à área de 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

Vá 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 mais módulos, abra os parâmetros da linha e deixe ocupar toda a largura da tela.

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

espaçamento

Alterne para as configurações de espaçamento e adicione um 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, adicionaremos uma única linha de código CSS ao elemento principal da linha.

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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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

Vá 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 (computador), 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.

Edite cópia, ícone e link para cada duplicação do Blurb individualmente

Certifique-se de alterar a cópia, o ícone e o link para cada item de menu do Blurb individualmente.

4. Faça a seção brega

défaut

Depois de adicionar todos os itens que você deseja exibir em sua seção, verifique se a seção permanece no canto superior esquerdo da página, adicionando as duas linhas a seguir do código CSS ao elemento principal da seção. :

posição: fixa; top: 0;

Passe o mouse (importante!)

Ative a opção de rolagem no elemento principal da seção e verifique se a seção também permanece pegajosa nesse estado.

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 estourou ou clique. O menu suspenso se comportará como um menu de clique em dispositivos menores. Se você decidir escolher a opção de passagem, abra as configurações da seção novamente, vá para os parâmetros de tamanho e altere a largura e a altura do seu 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 é aberto apenas por clique, deve 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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

  • 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 de gorjeta, precisaremos de algum código JQuery e CSS. Comece adicionando um módulo de código a uma nova linha na parte inferior da 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:

<script> jQuery (function ($) {$ ("# fullwidth-open"). clique (function () {$ ('smooth-transform'). toggleClass ('suavizar-transformar-ativo');}); }); </ Script>
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 belo módulo de apresentação que se desenvolve clicando / passando o mouse (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 dúvidas ou sugestões, deixe um comentário na seção reservada abaixo.

Este artigo contém comentários 2
  1. 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!

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
4 ações
ação4
chilrear
Enregistrer