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.

Visão geral do menu Divi

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.

Lance o construtor divi

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.

Baixar layout de passeios turísticos2. 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.

Seção regular diviCor 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)

Parâmetro de Seção

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

Preenchimento da seção Divi

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

Escolha a caixa de sombra divi

Sombra da Caixa Hover

E mude a intensidade do desfoque da sombra da caixa flutuante.

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

Shadow at hover divi

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

Configuração de estouro Divi

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:

Escolha o layout dividimensionamento

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%

Use largura de divi personalizada

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

Personalize a margem divi interna

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.

Adicionar igual no módulo de texto divi

Cor de fundo

Altere a cor de fundo do módulo depois.

  • Cor de fundo: #000000

Parâmetro de texto do módulo Divi

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

Modificação de parâmetro de texto

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)

Espaçamento do módulo de texto divi

Adicione a linha 2

Estrutura da coluna

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

Escolha o layout da linha 2 divi

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%

Linha divi personalizadaespaç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)

Personalize a margem da coluna divi 2

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;

Ajuste de linha Divi

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.

Módulo Divi com textoSelecione o ícone

Escolha um ícone próximo.

Use o módulo de ícone blurb divi

Adicionar um link

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

  • URL do título do link: #

Módulo de link de título resume diviConfiguraçõ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)

Personalize o ícone do módulo divi

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)

Atualizar as informações do módulo de resumo

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

Retomar a configuração do texto do divi body

dimensionamento

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

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

Retomar a largura do módulo diviAnimação

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

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

Nenhum resumo do módulo de ícone de 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.

Copiar módulo diviAlterar cópia

Certifique-se de alterar a cópia. Não se esqueça de alterar o ícone e o link.

Editar informações do módulo de texto

Clone a linha duas vezes

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

Copiar módulo de texto divi

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;

Modificar o layout da seção diviPasse 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;

Visão geral da seção Divi

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)

Divi de largura máximaSeção de foco

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

  • Largura: 80%
  • Altura: 100vh

Personalização da dimensão ao passar o mouse

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

Adicionar uma classe cssAdicione 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

Adicione uma classe à subseção

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)

Personalize a dimensão da seção divi

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.

Adicione o código à página
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');
});
});
Código na páginaAdicionar 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; }

Configuração de animações diviConsideraçõ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.