Como criar uma roda de menu giratória ao pairar
Publicados: 2019-08-04Criar uma roda de menu giratória ao passar o mouse é uma maneira divertida de exibir links úteis em seu site. Essa seria uma ótima maneira de fornecer várias frases de chamariz em um cabeçalho para direcionar os usuários aonde eles precisam ir. E também seria um menu de subcategorias legal para o seu blog.
Neste tutorial, vou mostrar como criar uma roda de menu giratória ao pairar no Divi. Isso pode ser feito usando uma combinação de opções Divi integradas e alguns trechos de CSS customizado.
Espiada
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs 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.
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.
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?
Inscreva-se no nosso canal no Youtube
O que você precisa para começar
Para começar, você precisará ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando o Design da Roda do Menu Giratório no Divi
A ideia básica
A roda é criada transformando uma linha em um elemento circular, dando a ela uma altura e largura de 500 px e 50% dos cantos arredondados. Cada link de menu é criado em um módulo de texto separado e é alinhado ao longo do perímetro da linha circular, girando cada módulo de texto ao longo do raio (centro) da linha. Esta configuração é semelhante a como você criaria um texto curvo no Divi.
Crie a seção e a linha 1
Crie uma seção regular com uma linha de uma coluna.
Em seguida, adicione um módulo de texto à linha com o seguinte conteúdo.
Em seguida, atualize o design do texto da seguinte forma:
Fonte do texto: Compartilhar tecnologia
Espaçamento entre letras do texto: 1px
Título 2 Tamanho do texto: 8vw
Adicione a linha 2 para construir a roda
Em seguida, precisamos adicionar uma nova linha de uma coluna na Linha 1.
Antes de começarmos a adicionar nossos módulos de texto para nossos links, precisamos projetar nossa linha como uma roda. Haverá um bom número de otimizações necessárias para a linha para fazer o design de nossa roda. Para começar, abra as configurações da Linha 2 e atualize o seguinte:
Cor de fundo: # 02366b
Cor do gradiente de fundo à esquerda: rgba (0,0,0,0.45)
Cor certa do gradiente de fundo: # 02366b
Tipo de gradiente: radial
Direção Radial: Centro
Posição inicial: 36%
Posição final: 0%
Usar largura de calha personalizada: SIM
Largura da calha: 1
Largura: 500px
Largura máxima: 500 px (desktop), auto (tablet e telefone)
Altura: 500 px (desktop), automático (tablet e telefone)
Preenchimento (desktop): 0 px superior, 0 px inferior
Preenchimento (tablet e telefone): 20px superior, 20px inferior, 20px esquerdo
Margem (telefone): -10% certo
Precisamos definir a altura e a largura da linha em 500px para que seja um quadrado perfeito. Isso nos permitirá dar uma forma circular perfeita usando a opção de cantos arredondados (raio da borda) em Divi.
Cantos arredondados: 50%
Então, podemos adicionar outro nível de desenho de círculo usando uma sombra de caixa da seguinte maneira:
Sombra da caixa: veja a imagem
Força do desfoque de sombra da caixa: 0 px
Força de propagação da sombra da caixa: 210 px
Cor da sombra: rgba (2,54,107,0,66)
Em seguida, vamos adicionar um pequeno trecho de CSS para tornar o conteúdo de nossa linha centralizado verticalmente. Na guia avançada, adicione o seguinte CSS personalizado no Elemento principal.
display:flex; align-items:center;
Isso cuida das configurações de linha por enquanto. Voltaremos para adicionar nosso efeito de foco giratório mais tarde.
Adicionando os Links
Cada link na roda será criado com um módulo de texto. Vamos criar um total de seis módulos de texto. Cinco dos módulos de texto conterão os links para a roda e um dos módulos de texto conterá o título do menu.
Comece criando um novo módulo de texto.
Em seguida, atualize as configurações de texto da seguinte forma:
Conteúdo do corpo: “Item do link”
Fonte do texto: Compartilhar tecnologia
Cor do texto do texto: #ffffff
Tamanho do texto do texto: 16px (padrão), 20px (foco)
Espaçamento entre letras do texto: 1px
Altura da linha de texto: 60px
Largura: 250 px (desktop), auto (tablet e telefone)
Altura: 60px
Preenchimento: 20 px restantes
Salve as configurações por enquanto. Em seguida, duplique o módulo de texto 4 vezes para criar um total de 5 módulos de texto.
Posicionando os Links / Módulos de Texto
Agora estamos prontos para posicionar nossos links ao longo do perímetro da roda. Para fazer isso, atualizaremos cada módulo de texto com opções de transformação que movem / traduzem e giram o módulo no lugar.
Para tornar isso mais fácil, implante o modo de visualização de wireframe e rotule os módulos de texto começando com Link 1 na parte superior até o Link 5 na parte inferior.
Link 1
Começaremos com a edição do Link 1. Abra as configurações do módulo de texto para o Link 1 e atualize o seguinte:
Transformar traduzir o eixo Y: 120 px (desktop), 0 px (tablet e telefone)
Transformar e girar eixo Z: 60deg (desktop), 0px (tablet e telefone)
Origem da transformação: 50% 100% (centro direito)
Link 2
Abra as configurações do módulo de texto para o Link 2 e atualize o seguinte:
Transformar traduzir o eixo Y: 60px (desktop), 0px (tablet e telefone)
Transformar e girar eixo Z: 30deg (desktop), 0px (tablet e telefone)
Origem da transformação: 50% 100% (centro direito)
Link 3
Como o módulo de texto para o link 3 está no meio, podemos deixá-lo no lugar.
Link 4
Abra as configurações do módulo de texto para o Link 2 e atualize o seguinte:
Transformar traduzir o eixo Y: -60px (desktop), 0px (tablet e telefone)
Transformar e girar eixo Z: -30deg (desktop), 0px (tablet e telefone)
Origem da transformação: 50% 100% (centro direito)
Link 5
Abra as configurações do módulo de texto para o Link 2 e atualize o seguinte:
Transformar traduzir o eixo Y: -120 px (desktop), 0 px (tablet e telefone)
Transformar e girar eixo Z: -60deg (desktop), 0px (tablet e telefone)
Origem da transformação: 50% 100% (centro direito)
Agora vamos verificar o resultado até agora. Observe como os links / texto nos módulos de texto giram perfeitamente ao longo do perímetro do círculo.
Adicionando o rótulo do menu
Para adicionar o rótulo do menu, precisaremos adicionar outro módulo de texto no topo dos cinco módulos de texto que já temos. Vá em frente e adicione um novo módulo de texto acima do Link 1.
Em seguida, atualize o conteúdo do corpo com o seguinte:
<p>menu</p>
Certifique-se de que o rótulo do menu esteja contido na tag ap. Isso garantirá que a altura da linha seja reconhecida nas configurações de texto.
Em seguida, para acelerar o design, copie os estilos dos módulos do módulo de texto para o Link 3 e cole esses estilos de módulo no novo módulo de texto.
Em seguida, atualize o seguinte:
Altura da linha: 300 px (desktop), 20 px (tablet e telefone)
Altura: restaura a configuração padrão (automático)
A altura da linha precisa ser 300px para que seja igual à altura da coluna de conteúdo, que também é 300px (5 módulos de texto cada um com uma altura de 60px é igual a 300px). Isso garantirá que o texto permaneça centralizado verticalmente.
Em seguida, precisamos girar o módulo de texto do rótulo do menu 180 graus para que ele apareça corretamente no lado oposto da roda. Isso permitirá que o visitante veja o rótulo do menu antes do estado de foco que gira os links na visualização.
Transformar e girar eixo Z: 180 graus (desktop), 0 graus (tablet e telefone)
Origem da transformação: 50% 100% (centro direito)
Uma vez feito isso, precisamos dar ao módulo de texto do rótulo do menu uma posição absoluta. Para fazer isso, adicione o seguinte CSS personalizado ao elemento principal:
position: absolute !important;
Agora verifique o resultado. Você deve ver que o item de menu está de cabeça para baixo à direita da roda.
Adicionando o efeito de pairar giratório à linha / roda
Para adicionar o efeito de foco giratório à linha, atualize as configurações da linha da seguinte maneira:
Transformar Girar eixo Z: 180deg (desktop), 0deg (pairar, 0deg (tablet e telefone)
Em seguida, atualize as configurações de transição da seguinte forma:
Duração da transição: 450ms
Curva de velocidade de transição: Ease-in-out
Agora verifique como a roda gira ao pairar.
Fazendo um Layout de Duas Colunas para a Seção
No momento, o layout consiste em duas linhas de uma coluna empilhadas uma em cima da outra. No entanto, podemos usar a propriedade flex css para alinhar as duas linhas horizontalmente. Para fazer isso, podemos adicionar um pequeno snippet de CSS personalizado à seção. Uma vez feito isso, precisaremos ajustar um pouco o espaçamento para que as coisas pareçam corretas.
Abra as configurações da seção e adicione o seguinte css personalizado ao elemento principal:
display:flex;
Atualizar espaçamento da linha 1
Em seguida, atualize o tamanho e o espaçamento para a linha 1 da seguinte maneira:
Largura: 40% (desktop), 100% (tablet e telefone)
Margem (desktop): 5% restante
Margem (tablet): 5% à esquerda, 5% à direita
Margem (telefone): 5% certo
Toques Finais
Na tela do tablet e telefone, você precisará adicionar alguma margem superior ao módulo Link 1 Text.
Margem (tablet): 30px superior
E você sempre pode adicionar um divisor de seção à seção para tornar o design completo.
Resultado final
Agora vamos conferir o resultado final.
Design alternativo de meia roda
Um design alternativo legal é ocultar a metade direita da roda fora da seção para que os links fiquem ocultos e, em seguida, sejam revelados ao passar o mouse. Para fazer isso, vá em frente e duplique toda a seção que contém o design que acabamos de fazer. Na seção de duplicatas, atualize as configurações da linha 1 da seguinte maneira:
Largura: 70% (desktop)
Em seguida, atualize as configurações da linha 2 para empurrar a roda para fora da seção da seguinte forma:
Margem: -250px direito
Precisamos usar -250 px porque a largura total da roda é 500 px e queremos ocultar exatamente a metade da linha.
Em seguida, defina a visibilidade da seção como oculta da seguinte forma:
Aqui está o design final.
Pensamentos finais
Uma roda de ligação giratória é um daqueles elementos de design elegantes que podem envolver os visitantes com um efeito de flutuação sutil e exclusivo. E é incrível o quanto desse design você pode fazer apenas com as configurações de design integradas do Divi. Espero que isso acrescente algo extra em seu conjunto de ferramentas de design para o seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!