Criação de navegação lateral de coluna personalizada para One-Pagers com Divi

Quando você decide criar um one-page, a experiência do usuário de navegação torna-se totalmente diferente. Embora as pessoas não devam sair da página, você deseja que elas permaneçam amigáveis. É por isso que a maioria dos usuários de uma página usa links âncora in-page. Você pode colocar esses links de âncora em um menu superior tradicional ou escolher a navegação lateral. Neste tutorial, vamos mostrar como criar um belo design de navegação lateral de coluna para sua página usando as novas opções de colunas do Divi. Ajustaremos todos os elementos em uma altura de 100 viewport para criar uma experiência de tela inteira. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout de navegação lateral da coluna GRATUITAMENTE

Para colocar suas mãos no layout de navegação lateral da coluna livre, 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!

Vamos começar a recriar!

Inscreva-se no nosso canal no Youtube

Criar nova página em branco

A primeira coisa que você precisa fazer é criar uma nova página em branco. Depois de fazer isso, mude para o Visual Builder.

Adicionar nova seção

Cor de fundo

Vamos ajustar todo o conteúdo da nossa página em uma seção, uma linha e duas colunas. Adicione uma nova seção regular à sua página com uma cor de fundo branca.

• Cor de fundo: #FFFFFF

Espaçamento

Remova todo o preenchimento padrão superior e inferior da seção.

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

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento de acordo:

• Equalize Alturas de Coluna: Sim
• Largura: 100%
• Largura máxima: 100%
• Altura: 100vh

Espaçamento

Passe para as configurações de espaçamento e remova todo o preenchimento padrão superior e inferior.

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

Configurações da coluna 1

Depois de concluir as configurações gerais de linha, abra as configurações da coluna 1.

Cor de fundo

Adicione uma cor de fundo branca.

• Cor de fundo: #FFFFFF

Sombra da caixa

Junto com uma sombra de caixa sutil.

• Posição horizontal da sombra da caixa: 80px
• Força do desfoque de sombra da caixa: 75 px
• Cor da sombra: rgba (0,0,0,0,07)

Escala de transformação

Também estamos diminuindo o tamanho da coluna na área de trabalho.

• Parte inferior: 75% (desktop), 100% (tablet e telefone)
• À direita: 75% (desktop), 100% (tablet e telefone)

Transformar Traduzir

Altere a posição da coluna usando algumas configurações de conversão de transformação personalizadas a seguir.

• Parte inferior: -5vw (desktop), 0px (tablet e telefone)
• Certo: 0px

Configurações da coluna 2

Continue abrindo as configurações da coluna 2.

Espaçamento

Vá para a guia de design e adicione os seguintes valores de preenchimento esquerdo e direito em diferentes tamanhos de tela:

• Preenchimento esquerdo: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Preenchimento direito: 2vw (desktop), 4vw (tablet), 5vw (telefone)

Classe CSS

Mais tarde na postagem, adicionaremos uma rolagem suave e ocultaremos a barra de rolagem. Para fazer isso, precisaremos adicionar uma classe CSS personalizada à coluna.

• Classe CSS: scroll-column

Visibilidade

Os módulos que adicionarmos na segunda coluna representarão o conteúdo da nossa página. Para permitir a rolagem, vamos alterar as configurações de estouro.

• Excesso horizontal: oculto
• Overflow vertical: Scroll

Adicionar Módulo de Texto de Item de Menu à Coluna 1

Adicionar cópia

Vamos começar a adicionar módulos! Adicione um primeiro item de menu Módulo de texto à coluna 1 com algum conteúdo de sua escolha.

Adicionar Link

Adicione um link de âncora ao item de menu.

• URL do link do módulo: www.yourwebsite.com/yourpage/#home

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Montserrat
• Alinhamento de Texto: Centro
• Cor do texto: # 383838
• Tamanho do texto: 3vw
• Espaçamento entre letras do texto: -3px (desktop), -2px (tablet), -1px (telefone)

Espaçamento

Adicione alguns valores personalizados de margem superior e inferior a seguir.

• Margem superior: 23vw (desktop), 3vw (tablet e telefone)
• Margem inferior: 3vw (desktop), 2vw (tablet), 1vw (telefone)

Clonar item de menu duas vezes

Depois de concluir o primeiro item do menu, clone-o duas vezes.

Alterar o conteúdo de ambas as duplicatas

Altere o conteúdo do item de menu de ambas as duplicatas.

Alterar links de ambas as duplicatas

Junto com os links de âncora.

• Duplicado 1: / # sobre
• Duplicado 2: / # serviços

Alterar o espaçamento de ambas as duplicatas

Complete as duplicatas alterando os valores de espaçamento de acordo:

• Margem superior: 3vw (desktop), 2vw (tablet), 1vw (telefone)
• Margem inferior: 3vw (desktop), 2vw (tablet), 1vw (telefone)

Adicionar Módulo Divisor à Coluna 1

Visibilidade

Adicione um Módulo Divisor entre o primeiro e o segundo Módulos de Texto na coluna 1. Certifique-se de que a opção 'Mostrar Divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Altere a cor da linha a seguir.

• Cor da linha: # ffebc9

Dimensionamento

Junto com as configurações de dimensionamento.

• Peso do divisor: 1vw
• Altura: 0 px

Clone Divider Module

Clone o Módulo Divisor e coloque a duplicata abaixo do segundo Módulo de Texto.

Adicionar Módulo de Acompanhamento de Mídia Social à Coluna 1

Adicionar redes sociais

O próximo e último módulo de que precisamos na coluna 1 é um Módulo de Acompanhamento de Mídia Social. Adicione as redes sociais de sua escolha.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do módulo.

• Alinhamento do Módulo: Centro

Espaçamento

Modifique os valores da margem a seguir.

• Margem superior: 12vw (desktop), 5vw (tablet e telefone)
• Margem inferior: 3vw (tablet e telefone)

Fronteira

E adicione '50vw' a cada um dos cantos para criar uma forma circular.

Adicionar Módulo de Imagem à Coluna 2

Enviar Imagem

Vamos para a segunda coluna! Adicione todos os módulos que desejar, mas não se esqueça de adicionar um CSS ID a cada módulo ao qual deseja que um link âncora se refira. Se você deseja recriar o design exato que foi mostrado na visualização deste post, comece adicionando um Módulo de Imagem e carregue uma imagem de sua escolha.

Alinhamento

Vá para a guia de design e escolha o alinhamento à esquerda da imagem.

• Alinhamento de imagem: esquerda

Dimensionamento

Altere as configurações de dimensionamento a seguir.

• Forçar largura total: Sim

Espaçamento

E adicione algum preenchimento correto.

• Preenchimento direito: 20vw

ID CSS

Por último, vá para a guia avançada e adicione o primeiro ID CSS. Certifique-se de que corresponda ao link âncora do primeiro item de menu.

• CSS ID: Home

Adicionar Módulo de Título de Texto à Coluna 2

Adicionar conteúdo H2

Passe para o próximo módulo, que é um Módulo de Texto. Insira algum conteúdo H2 de sua escolha.

Configurações de texto H2

Vá para a guia de design e altere as configurações de texto H2 de acordo:

• Fonte do título 2: Montserrat
• Alinhamento de Texto Título 2: Esquerda
• Cor do texto do título 2: # 383838
• Tamanho do texto do título 2: 2vw (desktop), 4vw (tablet), 5vw (telefone)
• Cabeçalho 2 espaçamento entre letras: -1 px

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: 6vw (desktop), 10vw (tablet), 12vw (telefone)
• Margem inferior: 2vw (desktop), 4vw (tablet), 6vw (telefone)

Adicionar Módulo Divisor à Coluna 2

Visibilidade

O próximo módulo de que precisamos é um Módulo Divisor. Certifique-se de que a opção 'Mostrar divisor' esteja habilitada.

• Mostrar divisor: Sim

Linha

Modifique a cor da linha.

• Cor da linha: # ffebc9

Dimensionamento

E altere as configurações de dimensionamento de acordo:

• Peso do divisor: 15px
• Largura: 16%
• Alinhamento do Módulo: Esquerda

Adicionar Módulo de Corpo de Texto à Coluna 2

Adicionar conteúdo

Adicione outro Módulo de Texto à segunda coluna com algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Vá para a guia de design e altere as configurações de texto de acordo:

• Fonte do texto: Roboto
• Alinhamento de Texto: Justificar
• Cor do texto: # a8a8a8
• Tamanho do texto: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Espaçamento entre letras do texto: 1px
• Altura da linha de texto: 2vw (desktop), 3,5vw (tablet), 4,5vw (telefone)

Espaçamento

Adicione alguns valores de espaçamento personalizados a seguir.

• Margem superior: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Margem inferior: 3vw (desktop), 5vw (tablet), 7vw (telefone)
• Margem direita: 20vw (desktop e tablet), 5vw (telefone)

Adicionar Módulo de Botão à Coluna 2

Adicionar conteúdo

Continue adicionando um Módulo de Botão com alguma cópia de sua escolha.

Alinhamento

Selecione o alinhamento do botão esquerdo na guia de design.

• Alinhamento do botão: Esquerda

Botão

Altere as configurações do botão de acordo:

• Usar estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2vw (tablet), 3vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 0072ff
• Largura da borda do botão: 0 px
• Raio da borda do botão: 0 px
• Fonte do botão: Montserrat
• Peso da fonte do botão: Semi negrito

Espaçamento

E brinque com os valores de espaçamento também.

• Margem superior: 4vw (desktop), 6vw (tablet), 8vw (telefone)
• Margem inferior: 4vw (desktop), 6vw (tablet), 8vw (telefone)
• Preenchimento superior: 1.5vw (desktop), 3vw (tablet), 4vw (telefone)
• Preenchimento inferior: 1,5 vw (desktop), 3vw (tablet), 4vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 6vw (tablet), 8vw (telefone)
• Preenchimento direito: 3vw (desktop), 6vw (tablet), 8vw (telefone)

Clone todos os módulos na coluna 2 duas vezes e coloque na mesma ordem

Depois de concluir todos os módulos na coluna 2, você pode cloná-los duas vezes e colocá-los na ordem certa.

Alterar ID CSS do Módulo de Imagem Duplicada nº 1

Altere o ID CSS do primeiro Módulo de imagem duplicado.

• ID CSS: sobre

Alterar ID CSS do Módulo de Imagem Duplicada nº 2

Faça o mesmo para o segundo Módulo de imagem duplicado.

• ID CSS: serviços

Ocultar barra de rolagem e adicionar rolagem suave

Abra as configurações da página

Agora, para criar um efeito de rolagem suave e ocultar a barra de rolagem da coluna 2, vamos adicionar algumas linhas de código CSS. Abra as configurações da página.

Adicionar CSS personalizado

Em seguida, vá para a guia avançada e adicione algum código CSS. Depois de concluir esta etapa, você está pronto!

.scroll-column::-webkit-scrollbar {
display: none;
}

.scroll-column {
scroll-behavior: smooth;
}

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos a você como criar uma bela navegação lateral da coluna para o seu one-page com as novas opções de coluna do Divi. Essa é uma ótima maneira de adicionar links âncora à sua página que ajudarão a melhorar a experiência do usuário do seu site. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.