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, nós fornecemos a você novas idéias de design que você pode usar em seus vários projetos Divi. Esses tutoriais normalmente incluem casos de uso que ajudarão você a migrar seu site para o próximo nível.

Esta semana, como parte da nossa iniciativa de design Divi em andamento, mostraremos como criar um belo menu de apresentação flutuante que se estende uma vez que você passa o mouse ou clica nele. Vamos começar com alguns passos gerais. Continuaremos adicionando itens de menu usando os módulos Blurb e terminaremos permitindo que você escolha entre um efeito de foco ou clique.

Vamos!

exame

Antes de mergulhar no tutorial, vamos dar uma rápida olhada 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, baixe o 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 do menu 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 de nossa página.

Cor de fundo

Abra as configurações da seção e adicione uma cor de fundo branca ligeiramente transparente.

  • Cor de fundo: rgba (255,255,255,0.98)

espaçamento

Alterne para a guia Design e remova todos os preenchimentos 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 mude a intensidade do borrão da sombra da caixa.

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

Esconder overruns da seção e aumentar o índice Z

Usaremos os parâmetros de dimensionamento de seção para fazer essa técnica funcionar, mas para garantir que nada exceda o contêiner de seção, teremos que ocultar os transbordamentos. Também aumentamos 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. Definir 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 desenho de sua escolha usando elementos e opções de design internos do Divi, mas deve se certificar de que ele se encaixa perfeitamente a uma 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 construção e ajustaremos os valores para diferentes tamanhos de tela. Comece adicionando uma nova linha à sua seção usando a seguinte estrutura de coluna:

dimensionamento

Sem adicionar mais módulos, abra os parâmetros de linha e verifique se eles ocupam toda a largura da seção.

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]

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

espaçamento

Alterne para as configurações de espaçamento e exclua todos os preenchimentos superior e inferior por padrão.

  • Top Padding: 0px
  • Preenchimento inferior: 0px

Adicione 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 sinta-se à 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 (área de trabalho), 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 personalizados:

  • Preenchimento superior: 2.5vw (desktop), 3.5vw (tablet), 5vw (telefone)
  • Estofado na parte inferior: 2.5vw (área de trabalho), 3.5vw (tablet), 5vw (telefone)

Adicione a linha 2

Estrutura da coluna

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

dimensionamento

Sem adicionar mais módulos, abra os parâmetros da linha e deixe-a ocupar toda a largura da tela.

  • Use uma largura de medianiz 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 (desktop), 4vw (tablet), 6vw (telefone)
  • Estofado na parte inferior: 2vw (área de trabalho), 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 Blurb à primeira coluna da linha e insira o conteúdo de sua escolha.

Selecione o ícone

Escolha um ícone ao lado.

Adicionar um link

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

  • URL do título do link: #

Configurações do ícone

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

  • Cor do ícone: #ff3314
  • Posicionamento de ícones: superior
  • Use o tamanho da fonte do ícone: Sim
  • Tamanho da fonte do ícone: 2vw (área de trabalho), 3vw (tablet), 4vw (telefone)

Configurações de texto de título

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

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]

  • 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 (desktop), 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 corpo: 0.9vw (área de trabalho), 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% (desktop), 65% (tablet), 80% (telefone)

Animação

Também removemos a animação de ícones 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 ter concluído 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 esqueça de mudar o ícone e o link.

Clone a linha duas vezes

Depois de concluir os dois módulos Blurb na linha, você poderá duplicar a linha inteira duas vezes.

Editar cópia, ícone e link para cada duplicação de anúncio individualmente

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

4. Faça a seção brega

falha

Depois de adicionar todos os itens que você deseja exibir à sua seção, certifique-se de que a seção permaneça no canto superior esquerdo da página, adicionando as duas linhas de código CSS a seguir 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 certifique-se de que a seção permaneça fixa nesse estado também.

posição: fixa;

5. Escolha um método: A) menu Overflight 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 sobrevoou ou clique. O menu suspenso se comportará como um menu de clique em dispositivos menores. Se você decidir escolher a opção de sobrevoo, abra as configurações da seção novamente, vá para os parâmetros de dimensionamento e altere a largura e a altura do menu de acordo:

  • Largura: 8vw (área de trabalho), 12vw (tablet), 20vw (telefone)
  • Altura: 7.4vw (desktop), 12vw (tablet), 16vw (telefone)

Seção de foco

Altere os valores de rollover para criar um menu de expansão.

  • Largura: 80%
  • Altura: 100vh

B) Menu ao clicar

Adicione uma classe CSS a uma seção

Se você quiser um menu que abre apenas por clique, você 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.

  • 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.

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. [FREE]

  • Classe CSS: smooth-transform

Dimensionamento da seção

Em seguida, modificamos a largura e a altura da nossa seção.

  • Largura: 8vw (área de trabalho), 12vw (tablet), 20vw (telefone)
  • Altura: 7.4vw (desktop), 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 inclinação, vamos precisar 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.

Adicione um módulo de código à 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; }

Últimos pensamentos

Neste tutorial, mostramos como criar um belo módulo de apresentação que se desenvolve clicando / pairando (dependendo das suas preferências). É uma ótima maneira de adicionar interatividade extra ao menu, mantendo um resultado responsivo para todos os tamanhos de tela. Se você tiver dúvidas ou sugestões, por favor, deixe um comentário na seção reservada abaixo.

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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

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