Como criar um menu de ícone circular que se expande ao clicar em Divi

Um menu de ícone circular é uma solução elegante para adicionar um menu simples ao seu site Divi. Este estilo de menu é intuitivo e funciona muito bem como menu fixo para seus dispositivos móveis. Hoje, mostraremos como criar um menu de ícone circular no Divi de uma forma que realmente destaque os poderosos recursos de design do Divi Builder. E forneceremos um snippet de JavaScript fácil para abrir e fechar o menu ao clicar.

Vamos começar

Espiada

Aqui está uma olhada rápida no menu de ícones circulares que iremos construir.

Baixe o layout do menu do ícone do círculo GRATUITAMENTE

Para colocar suas mãos no design deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
2. Crie uma nova página no WordPress e habilite o Divi Builder para editar a página no front end (construtor visual).

Para este tutorial, usaremos os ícones integrados do Divi no módulo blurb, portanto, não há necessidade de nenhum recurso externo.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Parte 1

Depois que o Divi Builder estiver habilitado para editar a página no front end, adicione uma linha de uma coluna à seção regular padrão.

Em seguida, abra as configurações de linha e adicione o seguinte preenchimento:

Preenchimento: 300px superior

Isso é simplesmente para fornecer algum espaço para os itens do menu circular aparecerem com um clique.

Criando os ícones de menu com os módulos do Blurb

Blurb # 1

Depois que o preenchimento de linha estiver no lugar, adicione um módulo de sinopse à coluna. Este será o primeiro de 5 sinopses no total que adicionaremos para formar nosso menu circular de ícones. Vamos nos referir a este como blurb # 1.

Em seguida, atualize o conteúdo da sinopse retirando o título e o texto do corpo. Em seguida, adicione um ícone à sinopse da seguinte maneira.

Ícone de uso: Sim
Ícone: veja a captura de tela

A seguir, vamos atualizar as configurações de design da seguinte maneira:

Cor do ícone: # 29a1f2
Ícone de círculo: SIM
Cor do círculo: # 222222
Mostrar borda do círculo: SIM
Cor da borda do círculo: # 29a1f2
Use o tamanho da fonte do ícone: SIM
Tamanho da fonte do ícone: 25px
Tamanho do corpo do texto: 20 px
Margem: 0px

Além de estilizar o ícone circular, também adicionamos um tamanho de corpo de texto. Não há corpo de texto, mas isso será útil mais tarde, sempre que usarmos a unidade de comprimento em (que é relativa ao tamanho do corpo do texto pai) para espaçar nossos itens de menu / sinopses usando transform translate. Mais sobre isso mais tarde.

Depois disso, retire a imagem / animação de ícone padrão.

Animação de imagem / ícone: sem animação

Em seguida, defina o Índice Z para este módulo como 1 para que fique acima dos outros que eventualmente ficarão atrás dele.

Índice Z: 1

E, finalmente, retire a margem inferior padrão sob o ícone adicionando o seguinte CSS personalizado à imagem do Blurb.

margin-bottom: 0px;

Blurb # 2

Para criar a segunda sinopse, simplesmente duplique a sinopse # 1.

Em seguida, abra as configurações para a nova sinopse (sinopse # 2), altere o ícone e defina o Índice Z de volta para o padrão (0).

Depois disso, vamos reduzir o ícone usando a escala de transformação da seguinte maneira:

Escala de transformação: 70%

Criando Blurbs # 3, # 4 e # 5

As próximas três sinopses podem ser criadas duplicando a sinopse # 2 e atualizando o ícone de cada uma.

Empilhando os Blurbs na mesma posição absoluta

O estado padrão de nosso menu terá todas as sinopses em uma posição absoluta com as quatro sinopses de itens de menu empilhadas atrás da sinopse do ícone do menu de hambúrguer principal. Para colocar nossas sinopses na mesma posição absoluta, use o recurso multiselect (segure ctrl / cmd e clique em cada um) para selecionar todos os cinco módulos de sinopses. Em seguida, abra as configurações de uma das sinopses selecionadas para atualizar as configurações do elemento para todos os 5 ao mesmo tempo.

Em seguida, adicione o seguinte CSS personalizado ao elemento principal:

position: absolute !important;
bottom: 20px;
left: 20px;

Isso posiciona as sinopses na parte inferior esquerda da linha.

Posicionando os ícones de menu usando Transform Translate

Assim que todas as sinopses estiverem posicionadas para o estado padrão, podemos começar a posicionar os itens de menu para o estado de clique (onde eles irão parar depois de clicar no botão do menu principal). Para fazer isso, podemos usar a propriedade transform translate dentro do Divi builder. Não há estado de clique disponível no construtor Divi (como o foco), pois isso é algo manipulado por JavaScript. Portanto, vamos posicionar nossos itens de menu onde queremos que eles estejam com um clique agora. Em seguida, usaremos o Javascript para ativar e desativar essa posição ao clicar no botão do menu principal.

Queremos manter o blurb # 1 no lugar porque é o botão do menu principal. No entanto, queremos mover os blurb # 2, # 3, # 4 e # 5. E como nossas sinopses agora estão empilhadas no construtor visual, vamos implantar o modo wireframe para atualizar as posições de cada sinopse.

Posição Blurb # 2

Abra as configurações da blurb # 2 e atualize o seguinte:

Transformar o eixo Y da tradução: -10em

Aqui está a nova posição da sinopse # 2.

Posição Blurb # 3

Abra as configurações da blurb # 3 e atualize o seguinte:

Transformar o eixo Y da tradução: -8.6em
Transformar Traduzir eixo X: 5em

Aqui está a nova posição da sinopse nº 3.

Posição Blurb # 4

Abra as configurações da blurb # 4 e atualize o seguinte:

Transformar o eixo Y da tradução: -5em
Transformar Traduzir eixo X: 8.6em

Aqui está a nova posição da sinopse nº 4.

Posição Blurb # 5

Abra as configurações da blurb # 5 e atualize o seguinte:

Transformar traduzir eixo Y: 0px
Transformar Traduzir eixo X: 10em

Aqui está a nova posição da sinopse nº 5.

Adicionando classes CSS personalizadas ao Blurbs

Para que nosso JavaScript funcione corretamente, precisamos adicionar algumas classes CSS que servirão como seletores para estilos e funcionalidades adicionais.

Adicionar classe CSS ao Blurb # 1

No modo de visualização de wireframe, abra as configurações do blurb # 1 e adicione a seguinte classe CSS:

Classe CSS: transform_target

Adicionar classes CSS aos Blurbs # 2, # 3, # 4 e # 5

As outras quatro sinopses compartilharão as mesmas classes CSS, portanto, podemos usar o recurso multisseleção para selecionar as marcas Blurb # 2, # 3, # 4 e # 5 e atualizar a classe CSS para todas as quatro da seguinte maneira:

Classe CSS: has-transform toggle-transform-animation

Observe que há duas classes css separadas por um espaço.

Adicionando CSS Externo e JavaScript com um Módulo de Código

Uma vez que nossas classes CSS foram adicionadas às sinopses, estamos prontos para adicionar nosso código à página usando um módulo de código. Para fazer isso, adicione um módulo de código na publicidade nº 5.

Em seguida, cole o seguinte código no módulo de código:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Este é o CSS externo usado em combinação com o código jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

E esta é a necessidade do JavaScript para que os itens de menu do ícone circular se estendam ao clicar no botão de menu.

Certifique-se de manter a tag de style envolvida em CSS e a tag de script envolvida em JavaScript / jQuery.

Verifique o resultado final da funcionalidade na página ao vivo.

Adicionando URLs de itens de menu

Como este é um menu, os quatro itens de menu precisarão de links / URLs. Para adicionar os URLs necessários para cada item de menu, abra as configurações do módulo blurb para cada um dos 4 itens de menu e adicione um URL de link do módulo.

Tornando o botão do menu fixo (ou fixo)

Como esse menu é pequeno e intuitivo para dispositivos móveis, você pode querer torná-lo fixo para que fique fixo no canto inferior esquerdo do navegador.

Para fazer isso, selecione todas as cinco sinopses usando o recurso multisseleção e, em seguida, atualize o CSS personalizado no elemento principal, substituindo o valor de posição “absoluto” por “fixo”.

position: fixed !important;
bottom: 20px;
left: 20px;

Agora o menu permanecerá fixo na parte inferior esquerda da janela do navegador.

Para garantir que o menu fique acima do outro conteúdo na página, atualize o índice z para a linha da seguinte maneira:

Índice Z: 11

Em seguida, retire o preenchimento da linha:

Preenchimento: 0 px superior, 0 px inferior

Design final

Aqui está o design final do ícone circular fixo com um layout predefinido.

E aqui está no celular.

Como ajustar o tamanho e o espaçamento do menu com facilidade

Como mencionado anteriormente, o menu foi projetado usando a unidade de comprimento em para o posicionamento do item de menu nos eixos xey (usando transformar, traduzir). A unidade de comprimento em é relativa ao tamanho do texto do corpo principal. Portanto, como cada um de nossos módulos de sinopses tem o mesmo tamanho de texto de corpo de 20 px, podemos usar multiselect para alterar o texto do corpo de todas as sinopses de uma vez.

Isso aumentará ou diminuirá o espaçamento entre os itens de menu conforme necessário.

E você também pode fazer o mesmo para o tamanho da fonte do ícone. Basta usar multiselect para ajustar o tamanho da fonte do ícone para todos os itens de menu de uma vez.

Pensamentos finais

Quem diria que adicionar um menu de ícone circular fixo a uma página poderia ser tão simples com o Divi. É o tipo de menu perfeito para celular também! Claro, são necessários alguns trechos de código customizados, mas o fato de você poder projetar e posicionar o estado de clique dos itens de menu usando o construtor visual é muito legal. Não se esqueça de explorar diferentes cores, tamanhos e designs de foco que podem facilmente fazer o menu corresponder ao seu próprio site.

Estou ansioso para ouvir de você nos comentários.

Saúde!