Crie uma lista de navegação de portfólio rolável com efeitos de rolagem do Divi
Publicados: 2020-06-11As páginas de portfólio são a desculpa perfeita para ser criativo com seu web design. Neste tutorial, mostraremos como montar uma lista de navegação de portfólio rolável e atraente para incrementar qualquer página de portfólio. Usando os efeitos de rolagem do Divi, os itens do menu ganham vida quando atingem o meio da tela. Botões com links de âncora ajudam o usuário a navegar para as seções correspondentes.
Continue lendo para recriar o design ou baixe o arquivo JSON gratuitamente.
Antevisão
Antes de começarmos com o tutorial, vamos dar uma olhada no design em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Wireframe
Esta lista de navegação de portfólio rolável responsiva é criada com uma série de linhas repetidas e alternadas. Por esse motivo, incluímos uma captura de tela da visualização wireframe. Isso o ajudará a seguir a ordem das linhas e seus respectivos módulos. Sugerimos que você rotule cada linha de acordo para manter o controle. Também adicionamos essas instruções nas etapas do tutorial.
Baixe as seções Hero GRATUITAMENTE
Para colocar suas mãos no layout da lista de navegação de portfólio rolável grátis, 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!
1. Crie uma nova seção
Adicionar Seção
Fundo
Comece com uma seção regular dentro de uma página nova ou existente. Antes de adicionar quaisquer linhas ou módulos, adicione uma cor de fundo à seção.
- Cor de fundo: # 222831
Espaçamento
Adicione espaçamento suficiente à seção para que os efeitos de rolagem também façam sua mágica.
- Preenchimento superior e inferior: 660 px
2. Crie uma lista de navegação de portfólio com rolagem
Adicionar linha 1
Estrutura da Coluna
Adicione a primeira linha e escolha a seguinte estrutura de coluna:
Dimensionamento
Ajuste a largura da próxima linha.
- Largura: 90%
- Largura máxima: 2560px
Espaçamento
Em seguida, ajuste as configurações de espaçamento.
- Preenchimento esquerdo
- Desktop: 130px
- Tablet e telefone: 50px
Rótulo de Admin
E rotule a linha.
- Rótulo do administrador: linha 1
Adicionar Módulo de Texto à Coluna
Contente
Adicione um módulo de texto para o título. Insira algum conteúdo H1 de sua escolha.
Texto do Título
Vá para a guia de design e estilize o texto do título da seguinte maneira:
- Nível de direção: H1
- Fonte: Alata
- Peso: Negrito
- Cor: # a3f7bf
- Tamanho
- Desktop: 190px
- Tablet: 120px
- Telefone: 50px
- Espaçamento entre Letras
- Desktop e tablet: 7px
- Telefone: 8px
Efeitos de rolagem
Por último, mas não menos importante, adicione um efeito de rolagem com aparecimento e desaparecimento gradual na guia avançada.
- Ativar efeito: Fading In e Out
- Viewport Bottom
- Posição: 100%
- Opacidade inicial: 100%
- Opacidade média
- Posição: 50%
- Médio: 100%
- Topo da janela de visualização
- Posição: 80%
- Opacidade final: 20%
Adicionar linha 2
Estrutura da Coluna
Agora é hora de adicionar os itens de navegação. Adicione uma nova linha com duas colunas de tamanhos iguais.
Rótulo de Admin
Identifique a linha.
- Rótulo do administrador: linha 2
Dimensionamento
Ajuste as configurações de dimensionamento também.
- Largura da calha: 1
- Largura: 80%
- Largura máxima: 1920 px
Configurações da coluna 1
CSS customizado
Antes de adicionar módulos, adicione uma linha de código CSS aos elementos principais das colunas para garantir que as proporções permaneçam as mesmas em tamanhos de tela menores. Comece com a coluna 1:
- Elemento principal: largura: 20%! Importante
width: 20% !important }
Configurações da coluna 2
CSS customizado
Faça o mesmo para a segunda coluna.
- Elemento principal: largura: 80%! Importante
width: 80% !important }
Adicionar Módulo de Botão à Coluna 1
Contente
Agora, adicione um módulo de botão à coluna 1 com alguma cópia de sua escolha.
- Texto do Botão: Ver
Ligação
Adicione um link de âncora ao próximo módulo. Adicionaremos um ID CSS correspondente para este link de âncora posteriormente no tutorial.
- URL do link do botão: #VB
Alinhamento
Vá para a guia de design e altere o alinhamento do botão.
- Alinhamento do botão: Centro
Botão
Em seguida, defina o estilo do botão de acordo:
- Estilos personalizados para botão: Sim
- Tamanho do texto
- Desktop: 30px
- Tablet: 25px
- Telefone: 20px
- Cor: Branco #ffffff
- Plano de fundo: Cinza Escuro # 222831
- Largura da borda: 0 px
- Raio da borda: 0px
- Espaçamento entre letras: 1px
- Fonte: Alata
- Mostrar ícone do botão: Não
Espaçamento
Faça alterações nas configurações de espaçamento também.
- Top Padding
- Desktop: 25px
- Tablet: 15px
- Telefone: 5px
Efeitos de rolagem
E adicione um efeito de rolagem de aparecimento e desaparecimento gradual.
- Ativar efeito: Fading In e Out
- Viewport Bottom
- Posição: 40%
- Opacidade inicial: 0%
- Opacidade média
- Abaixo: 45%
- Médio: 100%
- Topo: 55%
- Topo da janela de visualização
- Cargo: 60%
- Opacidade final: 0%
Sombra da caixa
Antes de passar para o próximo módulo, adicione uma sombra de caixa às configurações de foco do botão.
- Sombra da caixa: 4ª opção
- Posição horizontal: 0px
- Posição vertical
- Hover: 5px
- Força do borrão: 0px
- Força de propagação: 0px
- Cor da sombra: Verde Aqua # a3f7bf
Adicionar Módulo de Texto à Coluna 2
Contente
Continue adicionando um módulo de texto à coluna 2 com algum conteúdo H3 de sua escolha.
Texto do Título
Vá para a guia de design e estilize o texto do título da seguinte maneira:
- Nível de direção: H3
- Fonte: Alata
- Cor
- Desktop: Branco #ffffff
- Hover: Aqua Green # a3f7bf
- Tamanho do texto
- Desktop: 80px
- Tablet: 65px
- Telefone: 38px
Efeitos de rolagem
E conclua as configurações do módulo adicionando um efeito de rolagem com aparecimento e desaparecimento gradual na guia avançada.
- Ativar efeito: Fading In e Out
- Viewport Bottom
- Posição: 40%
- Opacidade inicial: 15%
- Opacidade média
- Abaixo: 45%
- Médio: 100%
- Topo: 55%
- Topo da janela de visualização
- Cargo: 60%
- Opacidade final: 15%
Duplicar linha 2
Para completar a lista de navegação, duplique esta linha três vezes. As novas linhas serão renumeradas; 2, 3 e 4.
Ajustar linha 3
Rótulo de administração de linha
Altere o rótulo de administrador da linha de 2 para 3.
- Rótulo do administrador: linha 3
Módulo de Botão
Altere o link de âncora de #VB para #WEB.
- URL do link do botão: #WEB
Módulo de Texto
Altere também o conteúdo H3 no módulo de texto.
- Corpo do texto: sites
Ajustar linha 4
Rótulo de administração de linha
Altere o rótulo de administrador da linha de 2 para 4.
- Rótulo de Admin: Linha 4
Módulo de Botão
Altere o link de âncora de #VB para #MA.
- URL do link do botão: #MA
Módulo de Texto
Altere o conteúdo H3 também.
- Corpo do texto: Aplicativos para celular
Ajustar linha 5
Rótulo de administração de linha
Altere o rótulo de administrador da linha de 2 para 5.
- Rótulo de Admin: Linha 5
Espaçamento entre linhas
Adicione alguma margem inferior.
- Margem inferior
- Desktop 230px
- Tablet: 100px
- Telefone: 60px
Módulo de Botão
Mude o link da âncora de #VB para #UX.
- URL do link do botão: #UX
Módulo de Texto
E mude o conteúdo do H3 aqui também.
- Texto do corpo: UX Design
3. Criar itens de portfólio
Adicionar linha 6
Estrutura da Coluna
A lista de navegação rolável do portfólio se vincula a itens do portfólio. Cada item é composto por duas linhas. Uma linha com uma divisória invisível e outra com um módulo de apelo à ação. Os IDs CSS são adicionados à linha com o divisor. Dessa forma, a navegação da âncora não irá parar no topo do item do portfólio, mas sim no meio.
Vamos criar os itens agora. Adicione uma linha com uma coluna.
Rótulo de Admin
Não se esqueça de rotular a nova linha.
- Rótulo de Admin: Linha 6
CSS ID e classes
Insira um ID CSS correspondente na guia avançada.
- ID CSS: VB
Adicionar Módulo Divisor à Linha 6
Visibilidade
Adicione um divisor invisível à coluna da linha.
- Mostrar divisor: Não
Duplicar linha 6
Duplique esta linha três vezes. As novas linhas serão renumeradas; 8, 10 e 12.
Ajustar linha 8
Rótulo de Admin
Altere o rótulo do administrador de 6 para 8.
- Rótulo de Admin: Linha 8
CSS ID e classes
Altere o ID CSS de VB para WEB.
- ID CSS: WEB
Ajustar linha 10
Rótulo de Admin
Altere o rótulo do administrador de 6 para 10.
- Rótulo de Admin: Linha 10
CSS ID e classes
Altere o ID CSS de VB para MA.
- ID CSS: MA
Ajustar linha 12
Rótulo de Admin
Altere o rótulo do administrador de 6 para 12.
- Rótulo de Admin: Linha 12
CSS ID e classes
Rótulo de Admin
Altere o ID CSS de VB para UX.
- CSS ID: UX
Adicionar linha 7
Estrutura da Coluna
Deixe as quatro linhas com divisórias onde estão por enquanto. Adicione uma nova linha com uma coluna.
Fundo
Sem adicionar um módulo ainda, abra as configurações de linha e estilize o plano de fundo da seguinte maneira:
- Imagem de fundo: foto
- Mistura de imagem: Multiplicar
- Gradiente de Fundo
- Cor 1: cinza escuro # 222831
- Cor 2: Transparente
- Tipo: Linear
- Direção: 90 graus
- Posição inicial: 50%
- Posição final: 100%
- Colocar gradiente acima da imagem de fundo: Sim
Rótulo de Admin
Identifique a linha.
- Rótulo do administrador: linha 7
Dimensionamento
Ajuste as configurações de dimensionamento da próxima linha.
- Largura: 80%
- Largura máxima: 2560px
- Alinhamento: Centro
Fronteira
Adicione alguns cantos arredondados também.
- Cantos arredondados: 25px
Efeitos de rolagem
E permite um efeito de rolagem de aparecimento e desaparecimento gradual.
- Ativar efeitos: Fading In e Out
- Opacidade inicial: 0%
- Opacidade média: 100%
- Posição: 80%
- Opacidade final: 20%
Adicionar Módulo de Chamada à Ação à Linha 7
Contente
Agora adicione um módulo de apelo à ação à linha.
- Título: Visual Branding
- Botão: Saiba mais
- Corpo: Texto Descritivo
Fundo
Remova a cor de fundo padrão.
- Antecedentes: Nenhum
Ligação
Adicione um link para a página correspondente. Vamos inserir um # por enquanto.
- Ligação: #
Texto do Título
Defina o estilo do texto do título a seguir.
- Nível de direção: H2
- Fonte: Alata
- Cor: Branco #ffffff
- Tamanho
- Desktop: 70px
- Tablet: 60px
- Telefone: 48px
- Espaçamento entre letras: 1px
Texto de corpo
Defina também o estilo do corpo do texto.
- Fonte: Lato
- Cor: Branco #ffffff
- Tamanho
- Desktop: 19px
- Tablet: 20px
- Telefone: 18px
- Altura da linha: 1.8em
Botão
Passe para as configurações do botão e aplique as seguintes alterações:
- Estilos Personalizados: Sim
- Tamanho do texto: 20px
- Cor do texto: cinza escuro # 222831
- Plano de fundo: Aqua Green # a3f7bf
- Raio da borda: 9px
- Espaçamento entre letras: 1px
- Fonte do botão: Alata
- Margem superior: 35px
Dimensionamento
Ajuste o tamanho do módulo também.
- Largura: 50%
- Largura máxima
- Desktop: 50%
- Tablet e telefone: 100%
- Alinhamento: Esquerda
Espaçamento
Adicione um pouco de preenchimento ao módulo também.
- Preenchimento esquerdo:
- Desktop: 90px
- Preenchimento esquerdo e direito:
- Tablet: 50px
- Telefone: 40px
CSS customizado
Por último, mas não menos importante, adicione uma linha de código CSS ao título da promoção na guia avançada.
- Título da promoção: padding-bottom: 30px;
padding-bottom: 30px; }
Duplicar linha 7
Duplique a linha 7 três vezes. As novas linhas serão renumeradas; 9, 11 e 13.
Ajustar linha 9
Fundo
Mude a imagem de fundo e mude a direção do gradiente.
- Imagem de fundo: nova foto
- Gradiente de Fundo
- Cor 1: Transparente
- Cor 2: cinza escuro # 222831
- Posição inicial: 0%
- Posição final: 50%
Rótulo de Admin
Atualize o rótulo de administrador da linha de 7 para 9.
- Rótulo do administrador: linha 9
Ajuste o módulo de apelo à ação na linha 9
Contente
Atualize o conteúdo do módulo.
- Título: Websites
- Corpo: Novo texto descritivo
Ligação
Atualize o link também.
- Link: Novo link
Dimensionamento
Altere o alinhamento do módulo da esquerda para a direita.
- Alinhamento do Módulo: Direito
Espaçamento
Altere o preenchimento da área de trabalho da esquerda para a direita. As configurações do tablet e celular precisam permanecer as mesmas.
- Preenchimento direito
- Desktop: 90px
Ajustar linha 11
Fundo
Altere a imagem de fundo na nova linha.
- Imagem de fundo: outra foto
Rótulo de Admin
Atualize o rótulo de administrador da linha de 7 para 11.
- Rótulo do administrador: linha 11.
Ajuste o Módulo de Chamada para Ação na Linha 11
Contente
Altere o conteúdo dentro do módulo de apelo à ação.
Ligação
Modifique o link também.
- Link: Novo link
Ajustar linha 13
Fundo
Mude a imagem de fundo e mude a direção do gradiente.
- Imagem de fundo: nova foto
- Gradiente de Fundo
- Cor 1: Transparente
- Cor 2: cinza escuro # 222831
- Posição inicial: 0%
- Posição final: 50%
Rótulo de Admin
Abra a guia do rótulo do administrador e atualize o número da linha para 13.
Ajuste o Módulo de Chamada para Ação na Linha 13
Contente
Atualize o conteúdo do módulo.
- Título: UX Design
- Corpo: Novo texto descritivo
Ligação
Atualize o link também.
- Link: Novo link
Dimensionamento
Altere o alinhamento do módulo da esquerda para a direita.
- Alinhamento do Módulo: Direito
Espaçamento
Altere o preenchimento da área de trabalho da esquerda para a direita. As configurações do tablet e celular precisam permanecer as mesmas.
- Preenchimento direito
- Desktop: 90px
Reorganizar linhas
Mova as linhas 7, 9 e 11.
Coloque as linhas na ordem certa, de acordo com seu rótulo de administrador.
Compare seu Wireframe
Verifique novamente o wireframe dos itens e lista de navegação rolável do portfólio. As linhas devem estar em ordem para que os links de âncora funcionem corretamente. Aqui está outra olhada em nossa visualização de wireframe:
Antevisão
Concluímos todas as etapas para recriar a lista de navegação rolável do portfólio. Vamos dar uma outra olhada em como o design fica em diferentes tamanhos de tela.
Área de Trabalho
Móvel
Pensamentos finais
Neste tutorial passo a passo, recriamos uma lista de navegação de portfólio rolável com os efeitos de rolagem do Divi. Além disso, adicionamos itens de portfólio. A navegação é controlada com links âncora e CSS IDs. Esta é uma ótima maneira de exibir itens do portfólio de forma interativa. Deixe-nos um comentário se gostou ou se tiver alguma dúvida!