Como criar uma navegação fixa de 4 cantos com Divi

Um design de navegação exclusivo pode dar a qualquer site uma vantagem. A navegação fixa em 4 cantos, por exemplo, é uma boa maneira de dar aos visualizadores mais opções para interagir com o design do seu site. Na verdade, ele adiciona outra camada ao seu design UX em todo o site.

Neste post, vamos mostrar como criar sua própria navegação fixa de 4 cantos. Explicaremos como criar dois estilos ligeiramente diferentes, mas esses são apenas a ponta do iceberg. Uma vez que a navegação é criada com os elementos integrados do Divi, as possibilidades de personalização são infinitas.

Esperamos que esta ideia o inspire a criar incríveis designs de navegação fixa de 4 cantos para seus próximos projetos Divi.

Vamos começar.

Previews

Vamos dar uma olhada rápida na navegação de 4 cantos que criaremos hoje. O primeiro estilo posiciona os botões na borda da tela e o outro possui um flutuador interno.

Estilo # 1

Estilo 2

Inscreva-se no nosso canal no Youtube

Crie uma nova página em branco

Abra uma nova página e antes de editar com Divi, selecione 'Página em Branco' nos Atributos da Página. Depois de fazer isso, ative o Divi Builder.

Fazer upload do layout da página inicial de criptomoeda

Uma vez no Divi Visual Builder, carregue a página inicial do Cryptocurrency Layout Pack a partir da guia Premade Layouts.

2. Crie uma nova seção com uma linha de 4 colunas

Adicionar uma nova seção regular com linha de 4 colunas

Para criar os 4 itens de navegação, precisamos de uma nova seção com uma linha de 4 colunas. Role até o final da página e adicione uma nova seção regular. Em seguida, escolha uma linha com 4 colunas de tamanhos iguais.

Remova o preenchimento padrão da seção

Antes de adicionar módulos, certifique-se de remover o preenchimento da seção adicionando '0px' na parte superior e inferior. Além disso, verifique se a seção não tem cor de fundo ou fundo gradiente.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Aumente o índice Z

Queremos que esta seção esteja acima de todas as outras conforme avançamos. É por isso que precisamos aumentar o valor do índice Z da seção. Para fazer isso, abra a guia Avançado e vá até as configurações de visibilidade e aumente o Z Index.

• Índice Z: 10

3. Ajuste o tamanho da linha

Em seguida, precisamos ajustar as configurações de dimensionamento da linha. Abra a guia de design e ajuste as configurações de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Não
• Largura: 100%
• Largura máxima: 100%

Remova o preenchimento padrão da linha

Para garantir que nenhum espaço permaneça na parte inferior de nossa página, remova o preenchimento padrão da linha. Na guia Design, altere as entradas Spacing para '0px' para o preenchimento superior e inferior.

Adicione módulos às colunas.

Agora é hora de adicionar alguns módulos a cada coluna, começando da esquerda para a direita.

• Coluna 1: Imagem
• Coluna 2: Botão
• Coluna # 3: Acompanhamento de mídia social
• Coluna # 4: Botão

4. Estilo de cada coluna

Coluna # 1 - Módulo de imagem

Adicionar um logotipo de empresa

Abra o Módulo de imagem na coluna # 1. Faça upload do seu logotipo (largura de 220 px e altura de 100 px). Certifique-se de que é uma imagem transparente onde o logotipo está centralizado.

Alinhe o Módulo

Queremos que o logotipo seja colocado no canto superior esquerdo de nossa página, portanto, precisamos alinhar o módulo à esquerda. Abra a guia Design no Módulo de imagem e selecione Alinhamento de imagem à esquerda.

• Alinhamento: esquerda

Adicione CSS personalizado para corrigir a posição do módulo

Para garantir que a posição do módulo permaneça fixa, vá para a guia Avançado e adicione CSS personalizado ao elemento principal.

position: fixed;
top: 0;
left: 0;

Coluna # 2 - Botão

Adicionar um botão

Agora, na coluna # 2, adicione um Módulo de botão.

Estilize o botão

Na guia Conteúdo, adicione texto para seu botão.

• Content-Text: Mine for Bitcoin

Em seguida, na guia Design, escolha Alinhamento do botão esquerdo.

• Alinhamento: esquerda

Depois disso, deslize os Estilos de botão personalizados para sim e ajuste os valores de acordo:

• Estilos de botão personalizados: Sim
  • Tamanho do texto do botão: Área de trabalho; 25px, Tablet: 20px, Telefone: 20px
  • Cor do texto do botão: branco, #ffffff
  • Cor de fundo do botão: gradiente
    • Cor superior: # 1c076d, cor inferior: # 185475
    • Tipo de gradiente: Linear
  • Raio da borda do botão: 7 px
  • Fonte do botão: Tantillium Web (igual ao layout)
  • Mostrar ícone do botão: Sim
  • Ícone de botão: Cone de trânsito
  • Cor do ícone do botão: branco, #ffffff
  • Posicionamento do ícone do botão: Direito

Adicione CSS personalizado para corrigir a posição do módulo

Por fim, abra a guia Avançado e adicione CSS personalizado para corrigir a posição do módulo no canto esquerdo inferior da página.

position: fixed;
bottom: 0;
left: 0;

Coluna nº 3 - Acompanhamento de mídia social

Adicionar um Módulo de Acompanhamento de Mídia Social

Passe para a terceira coluna. Desta vez, precisaremos de um Módulo de Acompanhamento de Mídia Social. Adicione três redes sociais à sua escolha.

Em seguida, na guia Design, escolha o Alinhamento de Módulo correto.

• Alinhamento: Direito

Estilize os ícones de mídia social

Abra as configurações individuais da primeira rede social, vá para a guia de design e altere as configurações do ícone de acordo:

• Cor do ícone: Branco #ffffff
• Usar tamanho de ícone personalizado: Sim
  • Tamanho da fonte do ícone: Área de trabalho; 25px, Tablet: 20px, Telefone: 20px
• Antecedentes: Nenhum

Copie e cole os estilos de item

Volte para a janela principal do Social Media Follow, clique com o botão direito no primeiro item e selecione 'Copiar estilos de item'. Em seguida, clique com o botão direito nas duas redes sociais restantes e cole os estilos.

Adicionar CSS personalizado ao módulo

Por fim, na guia Avançado, adicione o seguinte código CSS para fazer o módulo ficar no canto superior direito da página:

position: fixed; 
top: 0; 
right: 0;

Coluna # 4 - Botão

Copie os estilos de módulo do módulo 2 e ajuste

Para fazer com que o botão no Módulo 4 tenha a mesma aparência do botão no Módulo 2, usaremos a opção 'Copiar Estilos de Módulo'. Primeiro, clique com o botão direito no Módulo de botão na coluna 2, clique em 'Copiar estilos de módulo' e cole-o no Módulo de botão na coluna 4.

Agora é hora de alterar as configurações na guia Conteúdo. Primeiro, altere o conteúdo do texto.

• Texto: de “Mine for Bitcoin” para “Leia nosso blog”

Em seguida, altere o Alinhamento do botão.

• Alinhamento: da esquerda para a direita

Por fim, altere o código CSS personalizado na guia Avançado:

• Altere o código para:

position: fixed; 
bottom: 0; 
right: 0;

Resultado

5. Altere o CSS personalizado para obter o exemplo do segundo estilo

No primeiro exemplo de estilo, os cantos estão presos aos cantos. Para obter o segundo estilo, você só precisa ajustar o código CSS para fazer os módulos de canto flutuarem um pouco para dentro.

Basta ajustar o CSS personalizado na guia avançada de todos os quatro módulos

Módulo 1

position: fixed; 
top: 1vw; 
left: 1vw;

Módulo 2

position: fixed; 
bottom: 2vw; 
left: 2vw;

Módulo # 3

position: fixed; 
top: 3vw; 
left: 2vw;

Módulo 4

position: fixed; 
bottom: 2vw; 
right: 2vw;

Resultado final

Conclusão

Este tutorial apenas examina a superfície do que você pode fazer com a navegação fixa de 4 cantos usando Divi. Por fim, você pode escolher qualquer módulo para cada coluna, desde que mantenha o CSS personalizado que fornecemos. Esperamos que este tutorial criativo inspire você a fazer sua própria navegação fixa de 4 cantos. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!