Como construir uma lista interativa na rolagem com as opções fixas da Divi
Publicados: 2021-02-21As opções fixas do Divi permitem adicionar interação sem esforço às páginas que você cria e projeta. Se você está procurando uma maneira de mencionar vários itens sem apenas criar uma lista estática, você gostará deste tutorial. Hoje, estamos mostrando como construir uma lista interativa na rolagem usando as opções adesivas do Divi. Conforme as pessoas rolam para baixo na seção, diferentes itens são adicionados à lista à esquerda. Isso ajuda a manter uma visão geral. Você também poderá baixar o arquivo JSON grátis!
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 GRATUITAMENTE
Para colocar as mãos no layout gratuito, 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!
Criar Estrutura de Elemento
Adicionar nova seção
Cor de fundo
Comece adicionando uma nova seção à página em que está trabalhando. Adicione uma cor de fundo à seção.
- Cor de fundo: # f2f2f2
Adicionar linha
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Dimensionamento
Sem adicionar módulos ainda, abra as configurações de linha e altere as configurações de dimensionamento da seguinte forma:
- Largura: 100%
- Largura máxima: 100%
Cor de fundo da coluna 1
Em seguida, abra as configurações da coluna 1 e adicione uma cor de fundo.
- Cor de fundo: # f2f2f2
Espaçamento da coluna 1
Modifique as configurações de espaçamento da coluna a seguir.
- Enchimento superior:
- Tablet: 20px
- Telefone: 20px
- Preenchimento inferior:
- Tablet: 20px
- Telefone: 20px
- Preenchimento esquerdo: 3%
- Preenchimento direito: 3%
Índice Z da coluna 1
E aumente o índice z da coluna na guia avançada.
- Índice Z: 12
Adicione o Módulo de Texto # 1 à Coluna 1
Adicionar conteúdo
É hora de adicionar módulos, começando com um primeiro Módulo de texto na coluna 1. Adicione algum conteúdo de sua escolha.
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:
- Fonte do texto: Playfair Display
- Peso da fonte do texto: negrito
- Estilo da fonte do texto: itálico
- Cor do texto: #bfbfbf
- Tamanho do texto:
- Desktop: 2vw
- Tablet: 5vw
- Telefone: 8vw
- Altura da linha de texto: 1em
Adicionar Módulo de Texto # 2 à Coluna 2
Adicionar conteúdo H3
Adicione outro Módulo de Texto à coluna com algum conteúdo H3 de sua escolha.
Configurações de texto H3
Vá para a guia de design do módulo e altere as configurações de texto H3 da seguinte forma:
- Fonte do título 3: Playfair Display
- Peso da fonte do cabeçalho 3: negrito
- Cor do texto do título 3: # 000000
- Tamanho do texto do título 3:
- Desktop: 3vw
- Tablet: 10vw
- Telefone: 12vw
Espaçamento
Adicione um pouco de margem superior e inferior personalizada a seguir.
- Margem superior: 2vh
- Margem inferior: 2vh
Escala de transformação
Em seguida, aplique algumas configurações de escala de transformação personalizada.
- Ambos: 300%
Transformar Traduzir
E conclua as configurações do módulo aplicando as seguintes configurações de conversão de transformação:
- Inferior: 30%
Adicionar Módulo Divisor à Coluna 1
Visibilidade
O último módulo de que precisamos na coluna 1 é um Módulo divisor. Certifique-se de que a opção “Mostrar divisor” esteja habilitada.
- Mostrar divisor: Sim
Linha
Vá para a guia de design do módulo e altere as configurações de linha de acordo:
- Cor da linha: # 000000
- Estilo de linha: Sólido
- Posição da linha: topo
Dimensionamento
Modifique as configurações de dimensionamento do módulo também.
- Peso do divisor: 4px
- Altura do divisor: 4px
Adicionar Módulo de Imagem à Coluna 2
Deixe a caixa de imagem vazia
Na coluna 2, o primeiro módulo que adicionaremos é um Módulo de imagem. Deixe a caixa da imagem vazia.
Imagem de fundo
Em vez disso, use uma imagem de plano de fundo.
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: centro
Espaçamento
E para permitir que a imagem de fundo apareça, vamos modificar as configurações de espaçamento da seguinte forma:
- Margem superior:
- Desktop: 15vh
- Tablet e telefone: 0vh
- Enchimento superior: 33vh
- Preenchimento inferior: 33vh
Adicionar Módulo de Texto à Coluna 2
Adicionar conteúdo
O próximo e último módulo de que precisamos é um Módulo de Texto abaixo do Módulo de Imagem. Adicione algum conteúdo descritivo de sua escolha.
Configurações de texto
Vá para a guia de design do módulo e altere as configurações de texto da seguinte forma:
- Fonte do Texto: Cabine
- Cor do texto: # 000000
- Tamanho do texto:
- Desktop: 1.2vw
- Tablet: 2.3vw
- Telefone: 3.4vw
- Altura da linha de texto: 1,6em
Espaçamento
Conclua as configurações do módulo, alterando as configurações de espaçamento do módulo de acordo:
- Preenchimento esquerdo:
- Tablet e telefone: 5%
- Preenchimento direito: 5%
Aplicar efeitos pegajosos
Tornar a coluna # 1 fixa
Agora que todos os elementos estão no lugar, podemos começar a aplicar as configurações fixas. Abra as configurações da coluna 1 e use as seguintes configurações de aderência responsiva na guia avançada:
- Posição pegajosa: grudar no topo
- Limite inferior aderente
- Desktop: Seção
- Tablet e telefone: linha
- Compensado de elementos aderentes circundantes:
- Desktop: Sim
- Tablet e telefone: não
- Estilos padrão de transição e fixos: Sim
Módulo de texto nº 1 na coluna nº 1: configurações fixas
Altura
Agora que a coluna 1 ficou fixa, podemos começar a aplicar algumas configurações fixas aos elementos dentro desta coluna. Começaremos com a altura do primeiro Módulo de Texto.
- Altura: 0 px
- Altura aderente: Auto
Opacidade
Estamos modificando a opacidade também.
- Opacidade: 0%
- Opacidade pegajosa: 100%
Módulo de texto nº 2 na coluna nº 1: configurações fixas
Escala de transformação
A seguir, abriremos o segundo Módulo de texto na coluna 1. Traga de volta os valores da escala de transformação para “100%” em um estado fixo.
- Ambos fixos: 100%
Transformar Traduzir
Altere as configurações de conversão de transformação aderente também.
- Parte inferior pegajosa: 0%
Transição
E conclua as configurações do módulo aumentando a duração da transição na guia avançada.
- Transição: 1000ms
Módulo divisor: configurações fixas
Largura máxima
Por último, mas não menos importante, também modificaremos a largura máxima do Módulo divisor.
- Largura máxima: 0 px
- Largura máxima aderente: 120 px
Clonar linha duas vezes
Depois que sua primeira linha for concluída, você pode cloná-la duas vezes.
Alterar todo o conteúdo e imagens
Certifique-se de alterar todo o conteúdo e imagens e pronto!
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 como ser criativo com as opções pegajosas do Divi. Mais especificamente, mostramos como construir uma lista interativa na rolagem. Conforme as pessoas rolam para baixo no design da seção, diferentes itens de sua lista são coletados no lado esquerdo. Isso oferece uma visão geral estruturada e ajuda a criar um design interativo. Você pode usar essa abordagem para qualquer tipo de lista que deseja compartilhar em suas páginas! Você também pode baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para deixar 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.