Como criar uma página deslizante totalmente horizontal com Divi

Você já pensou em criar uma página totalmente horizontal que usa links deslizantes e âncora para navegar? Bem, se você já sabe e não sabe exatamente como abordá-lo, este é o post ideal para você. Vamos mostrar como criar uma página de deslizamento totalmente horizontal usando Divi. Essa técnica realmente ajuda você a fazer seu site se destacar dos outros e corresponde às tendências de design da web de 2019. O resultado que criaremos ficará ótimo em todos os tamanhos de tela.

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

Abordagem

• Vamos criar a página inteira usando apenas uma seção
• Estamos transformando essa seção em uma grade horizontal usando algumas linhas de código CSS no final do tutorial
• A grade horizontal colocará cada uma das linhas em uma coluna posicionada horizontalmente
• Você pode decidir quantas colunas horizontais uma seção contém
• Neste caso, usaremos 4 colunas diferentes que consistirão cada uma em 2 linhas
• Você pode modificar o número de colunas horizontais que você cria e determinar quantas linhas cada uma das colunas da seção contém
• Também estamos usando links de âncora para ajudar as pessoas a navegar pelas diferentes colunas de seção
• Além disso, estamos adicionando uma rolagem suave e um efeito de ajuste de rolagem de seção que facilitará a navegação para seus visitantes

Vamos começar a recriar

Adicionar nova seção

Cor de fundo

Crie uma nova página e adicione uma seção regular a ela. Abra as configurações da seção e altere a cor de fundo.

• Cor de fundo: #ffffff

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione algum preenchimento personalizado em diferentes tamanhos de tela.

• Preenchimento superior: 10.5vw (desktop), 15vw (tablet), 10vw (telefone)
• Preenchimento inferior: 3vw (desktop e tablet), 10vw (telefone)

Adicionar linha # 1

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 permita que a linha ocupe toda a largura da tela.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Vá para as configurações de espaçamento a seguir e faça algumas alterações em todos os tamanhos de tela diferentes.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px
• Preenchimento esquerdo: 6vw (tablet e telefone)
• Preenchimento direito: 6vw (tablet e telefone)
• Preenchimento inferior da coluna 1: 15vw (tablet e telefone)
• Coluna 2 Preenchimento esquerdo: 4vw (desktop), 0vw (tablet e telefone)

ID CSS

Precisamos atribuir um ID CSS à primeira linha de cada uma das colunas de seção que criamos. Isso nos ajudará a criar as setas de âncora posteriormente nesta postagem.

• ID CSS: swipe-1

CSS customizado

Conforme mencionado na seção de abordagem deste post, também estamos aplicando uma rolagem suave e um efeito de encaixe ao mecanismo. Para fazer isso, precisaremos adicionar uma única linha de código CSS à primeira linha de cada uma das colunas horizontais que criamos.

scroll-snap-align: start;

Adicionar Módulo Blurb à Coluna 1

Selecione o ícone

Agora podemos começar a adicionar módulos! Comece com um módulo Blurb na coluna 1. Abra as configurações do módulo e selecione um ícone de seta para a esquerda.

Configurações de ícone

Em seguida, vá para a guia de design e faça algumas alterações na aparência do ícone.

• Cor do ícone: rgba (255,255,255,0)
• Posicionamento de imagem / ícone: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 5vw (desktop), 13vw (tablet), 21vw (telefone)

Espaçamento

Adicione alguns valores de margem personalizados a seguir.

• Margem superior: 14vw (desktop), -11vw (tablet), -17vw (telefone)
• Margem esquerda: 60vw (tablet e telefone)

Visibilidade

Também estamos ocultando o módulo em telas menores.

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo H2

O próximo módulo de que precisamos é um Módulo de Texto na coluna 2. Adicione algum conteúdo H2.

Configurações de texto H2

Em seguida, vá para a guia de design e modifique as configurações de texto H2.

• Fonte do título 2: Source Serif Pro
• Alinhamento de Texto Título 2: Esquerda
• Tamanho do texto do título 2: 3vw (desktop), 7vw (tablet e telefone)

Dimensionamento

Modifique a largura nas configurações de dimensionamento a seguir.

• Largura: 77%

Espaçamento

E adicione alguma margem inferior para tamanhos de tela menores.

• Margem inferior: 15vw (tablet e telefone)

Adicionar Módulo de Botão à Coluna 2

Adicionar conteúdo

Logo abaixo do Módulo de Texto que você adicionou, vá em frente e adicione um Módulo de Botão. Insira alguma cópia.

Configurações de botão

Em seguida, vá para a guia de design e altere as configurações do botão.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 0,9vw (desktop), 2vw (tablet), 3,5vw (telefone)
• Cor do texto do botão: # 000000
• Largura da borda do botão: 1 px

• Cor da borda do botão: # 000000
• Raio da borda do botão: 0 px
• Fonte do botão: Mukta
• Intensidade da fonte: Negrito
• Estilo da fonte: maiúsculas

Espaçamento

Adicione um pouco de margem e preenchimento personalizados a seguir.

• Margem superior: 6vw (desktop), 4vw (tablet e telefone)
• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 50 px
• Preenchimento direito: 50 px

Adicionar Módulo Blurb à Coluna 3

Selecione o ícone

O próximo e último módulo de que precisamos nesta linha é outro Módulo Blurb na coluna 3. Selecione um ícone de sua escolha.

Ligação

Em seguida, vá para as configurações de link e adicione um link que levará os visitantes à segunda coluna horizontal da seção.

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-2

Configurações de ícone

Vá em frente e altere as configurações do ícone também.

• Cor do ícone: # 333333
• Posicionamento do ícone da imagem: topo
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 5vw (desktop), 13vw (tablet), 21vw (telefone)

Espaçamento

Continue adicionando algumas margens superior e esquerda personalizadas em diferentes tamanhos de tela.

• Margem superior: 14vw (desktop), -11vw (tablet), -17vw (telefone)
• Margem esquerda: 60vw (tablet e telefone)

Adicionar linha # 2

Estrutura da Coluna

A segunda linha de que precisamos usa a seguinte estrutura de coluna:

Cor de fundo

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a cor de fundo.

• Cor de fundo: # f7f7f7

Dimensionamento

Modifique as configurações de dimensionamento a seguir.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Junto com o preenchimento personalizado e os valores de margem nas configurações de espaçamento.

• Margem superior: -3,5vw (desktop), -10vw (tablet), -17vw (telefone)
• Preenchimento superior: 8vw (desktop), 15vw (tablet), 20vw (telefone)
• Preenchimento inferior: 8vw (desktop), 15vw (tablet), 20vw (telefone)
• Preenchimento esquerdo: 24vw (desktop), 5vw (tablet e telefone)
• Preenchimento direito: 24vw (desktop), 5vw (tablet e telefone)
• Coluna 1 Preenchimento direito: 2vw (desktop), 0vw (tablet e telefone)
• Coluna 2 Preenchimento esquerdo: 2vw (desktop), 0vw (tablet e telefone)

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

Vá em frente e adicione um Módulo de Texto à primeira coluna. Insira alguma cópia de sua escolha (incluindo um título H3).

Configurações de texto

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

• Fonte do texto: Open Sans
• Tamanho do texto: 0,65vw (desktop), 1,8vw (tablet), 2,7vw (telefone)
• Altura da linha de texto: 1.8em

Configurações de texto H3

Junto com as configurações de texto H3.

• Fonte do título 3: Mukta
• Peso da fonte do cabeçalho 2: negrito
• Estilo da fonte do título 3: maiúsculas
• Cabeçalho 3 Tamanho do texto: 0,8vw (desktop), 3vw (tablet), 4vw (telefone)
• Altura da linha do título 3: 1.8em

Espaçamento

Adicione alguma margem inferior para tamanhos de tela menores também.

• Margem inferior: 5vw (tablet e telefone)

Clonar Módulo de Texto e Colocar na Coluna 2

Quando terminar de modificar o Módulo de texto na coluna 1, você pode cloná-lo e colocar a duplicata na segunda coluna.

Mudar o Conteúdo

Certifique-se de alterar o conteúdo.

Clone a linha # 1 três vezes

Quando as duas linhas estiverem prontas, você pode clonar a primeira linha 3 vezes.

Alterar Duplicado # 1

Alterar ID CSS da linha

Precisamos alterar o ID CSS da primeira duplicata.

• ID CSS: swipe-2

Alterar a cor do ícone do módulo Blurb (coluna 1)

Junto com a cor do primeiro Módulo Blurb.

• Cor do ícone: # 333333

Alterar os links dos dois módulos do Blurb

Para fazer os links âncora funcionarem, você terá que alterar o link de cada uma das setas de acordo:

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-1

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-3

Alterar Duplicado # 2

Alterar ID CSS da linha

Altere o ID CSS da segunda duplicata.

• ID CSS: deslize-3

Alterar a cor do ícone do módulo Blurb (coluna 1)

Junto com a cor do ícone do primeiro Módulo Blurb.

• Cor do ícone: # 333333

Alterar os links dos dois módulos do Blurb

E, novamente, altere os links de cada Módulo Blurb de acordo:

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-2

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-4

Alterar Duplicado # 3

Alterar ID CSS

Altere também o ID CSS da terceira linha duplicada.

• ID CSS: swipe-4

Alterar o ícone do módulo Blurb (coluna 2)

E selecione outro ícone para o Módulo Blurb na coluna 3.

Alterar link do módulo Blurb (coluna 2)

Certifique-se de que, ao clicar, o visitante será redirecionado para a primeira coluna da seção, modificando o URL do link do módulo de acordo:

• URL do link do módulo: https://www.yourwebsite.com/page/#swipe-1

Clone a linha # 2 três vezes

Para a próxima linha. Clone esta linha três vezes também.

Alterar a cor de fundo da linha da duplicata # 1

Altere a cor de fundo da primeira duplicata.

• Cor de fundo: #dcdced

Alterar a cor de fundo da linha da duplicata # 2

A segunda duplicata usa a seguinte cor de fundo:

• Cor de fundo: # ffeed1

Alterar a cor de fundo da linha da duplicata # 3

Altere também a cor de fundo da terceira linha duplicada.

• Cor de fundo: # d6ffe5

Adicionar CSS ID e código CSS à seção

Agora que temos todas as linhas de que precisamos, podemos fazer a mágica acontecer. Adicione um CSS ID a toda a seção. Posteriormente neste post, usaremos este ID CSS para ocultar a barra de rolagem.

• ID CSS: barra de rolagem da seção

Em seguida, vá para as opções Custom CSS e adicione algumas linhas de código CSS ao elemento principal.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Quanto mais colunas de seção você deseja criar, mais colunas você terá que adicionar no código CSS. Então, digamos, por exemplo, que você queira ter a mesma estrutura, mas permitir 7 deslizamentos em vez de 4, você terá que modificar a linha de código CSS das colunas do modelo de grade de acordo:

grid-template-columns: repeat(7, 100%);

Mas lembre-se de que você terá que adicionar mais linhas se estiver aumentando o número da coluna. Portanto, neste caso, se você quiser que duas linhas apareçam por coluna de seção, você precisará de 14 linhas.

Ocultar barra de rolagem

Você também pode optar por ocultar a barra de rolagem usando a seção CSS ID e adicionando as seguintes linhas de código CSS às configurações da página:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

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

Ao projetar sites com Divi, a coisa mais simples a fazer é construir de baixo para cima. Mas só porque é a coisa mais direta de se fazer, não significa que você está limitado a essa opção. Você também pode criar uma página de deslizamento totalmente horizontal. Neste tutorial, mostramos como obter um design incrível de furto horizontal na web usando Divi. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!