Como criar um acordeão clicável usando títulos de página fixos no Divi
Publicados: 2020-09-03As novas opções de posição adesiva do Divi abrem as portas para muitas possibilidades de design novas e empolgantes. Neste tutorial, mostraremos como combinar as opções de posição fixa do Divi com links de âncora de rolagem suave para criar uma forma semelhante a um acordeão de indexar e navegar em sua página. Construí-lo é realmente fácil com as opções integradas do Divi, então não há necessidade de CSS extra ou outro código. Uma vez feito isso, você terá uma maneira única de organizar sua página e melhorar a experiência do usuário no desktop e no celular.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Aqui você pode ver os cabeçalhos das páginas fixos nas partes superior e inferior da janela do navegador e empilhados uns sobre os outros como um acordeão.
Aqui você pode ver que clicar em um dos títulos fixos irá saltar (usando links de âncora de rolagem suave) para essa seção da página também como um acordeão.
Aqui está a funcionalidade no celular também.
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 da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando a Linha Fixa
Para começar, vamos criar nossa linha fixa. Para fazer isso, adicione uma linha de uma coluna à seção padrão.
Abra as configurações de linha. Na guia Avançado, atualize a posição fixa da seguinte maneira:
- Posição pegajosa: grudar na parte superior e inferior
Isso fará com que a linha grude na parte superior da janela do navegador conforme o usuário rola para baixo e, em seguida, grude na parte inferior da janela do navegador conforme o usuário rola para cima.
Estilizando a Sticky Row
Agora que a posição de aderência está no lugar, podemos começar a estilizar a linha usando a opção de estilo de aderência embutida que permite dar ao elemento um estilo específico sempre que a posição de aderência estiver em vigor (ou travada). Para a linha, queremos que o fundo mude para uma cor escura sempre que estiver na posição travada. Para fazer isso, abra as configurações de linha e atualize o seguinte:
- Cor de fundo (desktop): #ffffff
- Cor de fundo (aderente): # 051923
Na guia de design, atualize o seguinte:
- Usar largura de calha personalizada: SIM
- Largura da calha: 1
- Largura (tablet e telefone): 100%
- Preenchimento: 0 px superior, 0 px inferior
Em seguida, queremos dar uma borda inferior à linha para servir como uma linha divisória entre o título e o conteúdo abaixo. E, uma vez que a linha está na posição fixa, queremos mostrar uma borda esquerda.
No botão de alternância da opção de borda, atualize o seguinte:
- Cor da borda: # 6eeb83
- Largura da borda inferior (desktop): 8 px
- Largura da borda inferior (aderente): 0 px
- Largura da borda esquerda (desktop): 0 px
- Largura da borda esquerda (aderente): 8 px
Criando o Texto do Cabeçalho Fixo
Para criar o texto do título da página, adicione um novo módulo de texto à linha.
Em seguida, cole o seguinte HTML no conteúdo do corpo.
<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>
E atualize a cor de fundo ao pairar também ...
- Cor de fundo (pairar): rgba (255,255,255,0,2)
Isso tornará mais óbvio que os títulos são clicáveis para o usuário.
Definir o estilo do texto do título fixo
Na guia de design, atualize o seguinte:
- Fonte do título 2: Montserrat
- Alinhamento de Texto Título 2: Esquerda
- Cor do texto do título 2 (desktop): padrão (ou preto)
- Cor do texto do título 2 (aderente): #ffffff
- Tamanho do texto do título 2: 80 px (desktop), 22 px (fixo), 28 px (telefone)
- Altura da linha do título 2: 1,3em (desktop), 1em (aderente)
Em seguida, atualize o preenchimento da seguinte forma:
- Preenchimento (desktop): 15px superior, 15px inferior
- Preenchimento (aderente): 10px superior, 0px inferior, 20px à esquerda
- Preenchimento (tablet e telefone): 15 px superior, 15 px inferior, 15 px à esquerda, 15 px à direita
Criação do conteúdo da página simulada
Assim que a linha fixa estiver no lugar, podemos adicionar outra linha que conterá algum conteúdo de página simulada sob o título. Para fazer isso, crie uma nova linha de uma coluna sob a linha fixa.
Em seguida, adicione um novo módulo de texto à linha e cole algum conteúdo simulado.
Duplicando a seção conforme necessário para mais títulos e conteúdo de página fixa
Neste ponto, você tem o design básico pronto para criar seções de página adicionais com títulos fixos simplesmente duplicando a seção.
Seção duplicada
Para criar outra seção, duplique a seção existente que contém a linha / título fixo e a linha de conteúdo simulado. Isso irá acelerar o processo de desenvolvimento de criação da próxima seção da página.
Atualize o conteúdo do texto e a cor das bordas da linha
Na seção duplicada, atualize o texto dentro do módulo de texto e, em seguida, atualize a cor da borda nas configurações de linha.
Repita conforme necessário
Continue duplicando a seção e atualizando o conteúdo do texto e a cor da borda da linha conforme necessário. Para este exemplo, vamos duplicar a seção mais duas vezes para nos dar um total de quatro títulos de página fixos que formarão o acordeão.
Adicionando Links de Âncora aos Títulos de Página Fixos
No momento, a funcionalidade permitirá ao usuário rolar a página para baixo e ter os títulos colados na parte superior e inferior, como um acordeão. Agora queremos tornar os títulos clicáveis para que, quando o usuário clicar em um dos títulos fixos, o usuário seja levado para aquela seção da página. Isso é feito usando links de âncora.
Para adicionar um link de âncora, primeiro precisamos adicionar um ID CSS à seção para a qual queremos o link.
Adicionar seção 1 CSS ID
Abra as configurações da seção e adicione o seguinte ID CSS:
- ID CSS: um
Em seguida, abra as configurações da linha fixa e adicione o seguinte URL de link de linha:
- URL do link da linha: #one
Agora, quando o usuário clicar na linha / título, a página irá pular para esta primeira seção.
Adicionar seção 2 CSS ID
Em seguida, precisamos adicionar o link de âncora para o segundo título.
Abra as configurações da segunda seção e adicione o seguinte ID CSS:
- ID CSS: dois
Adicionar URL do link da linha fixa da seção 1
Em seguida, abra as configurações da linha fixa dentro da segunda seção e adicione o URL do link da linha:
- URL do link da linha: #two
Adicionar seção 3 CSS ID
Em seguida, precisamos adicionar o link de âncora para o terceiro título.
Abra as configurações da terceira seção e adicione o seguinte ID CSS:
- ID CSS: três
Adicionar URL do link da linha fixa da seção 1
Em seguida, abra as configurações da linha fixa dentro da terceira seção e adicione o URL do link da linha:
- URL do link da linha: #three
Adicionar seção 4 CSS ID
Finalmente, precisamos adicionar o link de âncora para o quarto título.
Abra as configurações da quarta seção e adicione o seguinte ID CSS:
- ID CSS: quatro
Adicionar URL do link da linha fixa da seção 1
Em seguida, abra as configurações da linha fixa dentro da quarta seção e adicione o URL do link da linha:
- URL do link da linha: #four
Resultado final
Aqui você pode ver os cabeçalhos das páginas fixos nas partes superior e inferior da janela do navegador e empilhados uns sobre os outros como um acordeão.
Aqui você pode ver que clicar em um dos títulos fixos irá saltar (usando links de âncora de rolagem suave) para essa seção da página também como um acordeão.
Aqui está a funcionalidade no celular também.
Pensamentos finais
Este projeto usa a opção de posição aderente de uma maneira única. Não apenas os títulos da página permanecem visíveis conforme o usuário rola, mas cada título também é clicável, levando o usuário a essa seção específica usando links de âncora. O resultado é muito parecido com um acordeão para a página inteira. Esse design definitivamente seria útil para indexar conteúdo de formato longo ou para criar um formulário de uma página amigável.
Estou ansioso para ouvir de você nos comentários.
Saúde!