Como criar um modelo de galeria de rolagem com as novas opções de estouro da Divi

Procurando uma maneira criativa de exibir imagens em seu site? Continue lendo porque, neste post, mostraremos como criar uma maquete de galeria de rolagem usando apenas as opções integradas do Divi. Concretamente, vamos transformar uma seção em uma maquete e fazer com que todas as linhas da seção façam parte da maquete. Depois de adquirir a técnica, você será capaz de apresentar qualquer tipo de conteúdo que desejar em uma maquete móvel e adicionar interação às suas páginas em nenhum momento.

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 GRATUITAMENTE o Scroll Gallery Mockup Design

Para colocar suas mãos no design de maquete da galeria de rolagem gratuita, 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

Adicionar nova seção

Dimensionamento

Comece criando uma nova página ou abrindo uma existente e adicione uma seção regular a ela. Abra as configurações da seção e modifique a largura e a largura máxima nas configurações de dimensionamento.

• Largura: 25vw (desktop), 60vw (tablet), 80vw (telefone)
• Largura máxima: 25vw (desktop), 60vw (tablet), 80vw (telefone)

Espaçamento

Em seguida, vá para as configurações de espaçamento, remova todo o preenchimento padrão superior e inferior e adicione algumas margens superior e inferior para criar espaço.

• Margem superior: 9vw
• Inferior: 9vw
• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Fronteira

Continue indo para as configurações de borda da seção e crie a forma de uma maquete móvel adicionando '30px' a cada um dos cantos.

Sombra da caixa

Adicione uma sombra de caixa sutil para permitir que a forma apareça.

• Força do desfoque de sombra da caixa: 100 px
• Cor da sombra: rgba (0,0,0,0.18)

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando a primeira linha à seção usando 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: #ffffff

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e permita que a linha ocupe toda a largura da seção.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

Em seguida, remova o preenchimento padrão superior e inferior.

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

Sombra da caixa

E adicione uma sombra de caixa também.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.92)

Índice Z

Por último, mas não menos importante, vamos garantir que a linha (e especialmente sua sombra de caixa) se sobreponha à linha que vem a seguir, aumentando o índice Z nas configurações de visibilidade.

• Índice Z: 99

Adicionar Módulo de Texto à Coluna

Adicionar conteúdo H2

O único módulo de que precisamos nesta linha é um Módulo de Texto com algum conteúdo H2.

Configurações de texto H2

Depois de adicionar a cópia H2, vá para as configurações de texto H2 e faça algumas alterações.

• Fonte do Título 2: Abril Fatface
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 000000
• Tamanho do texto do título 2: 1,5 vw (desktop), 3,5 vw (tablet), 5vw (telefone)

Espaçamento

Adicione um pouco de margem superior e inferior personalizada a seguir.

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

Adicionar linha # 2

Estrutura da Coluna

Para a segunda fila! Aqui, estamos 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 seção. Também estamos modificando a altura e a altura máxima para criar um efeito de rolagem vertical nas próximas etapas.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%
• Altura: 38vw (desktop), 100vw (tablet), 120vw (telefone)
• Altura máxima: 38vw (desktop), 100vw (tablet), 120vw (telefone)

Espaçamento

Em seguida, vá 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

Estouro vertical

Conforme mencionado antes, estamos tornando essa linha rolável verticalmente. Para fazer isso, precisaremos alterar o estouro vertical nas configurações de visibilidade da linha.

• Overflow vertical: Scroll

Adicionar Módulo de Imagem à Coluna

Enviar Imagem

Vá em frente e adicione um primeiro Módulo de imagem à linha e carregue uma imagem de sua escolha. Você pode baixar as imagens que estamos usando ao longo deste tutorial acessando a postagem do Pacote de layout para planejador de casamento.

Dimensionamento

Certifique-se de habilitar a opção 'Forçar largura total' no Módulo de imagem para garantir um resultado responsivo.

• Forçar largura total: Sim

Espaçamento

Vá para as configurações de espaçamento a seguir e crie algum espaço entre este e qualquer módulo que venha a seguir, adicionando alguma margem inferior.

• Margem inferior: 1vw

Clone o módulo de imagem quantas vezes quiser

Quando terminar de modificar o primeiro Módulo de imagem, você pode cloná-lo quantas vezes quiser.

Upload de imagens diferentes

Claro, você vai querer mudar a imagem em cada uma das duplicatas.

Adicionar linha # 3

Estrutura da Coluna

Vamos para a terceira e última fileira! Estamos usando a seguinte estrutura de coluna:

Cor de fundo

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

• Cor de fundo: #ffffff

Dimensionamento

Em seguida, vá para as configurações de dimensionamento e permita que a linha ocupe toda a largura da seção.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 100%
• Largura máxima: 100%

Espaçamento

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

• Preenchimento superior: 2.1vw (desktop), 3.5vw (tablet), 5vw (telefone)
• Preenchimento inferior: 2.1vw (desktop), 3.5vw (tablet), 5vw (telefone)

Sombra da caixa

E adicione uma sombra de caixa para criar profundidade.

• Força do desfoque de sombra da caixa: 80 px
• Cor da sombra: rgba (0,0,0,0.92)

Índice Z

Para garantir que esta linha (e especialmente sua sombra de caixa) se sobreponha à linha anterior, vamos aumentar o índice Z.

• Índice Z: 99

Adicionar Módulo de Botão à Coluna

Adicionar cópia

O único módulo de que precisamos nesta linha é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão.

• Alinhamento do botão: Centro

Configurações de botão

Modifique as configurações do botão também.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 2,5vw (tablet), 3,5vw (telefone)
• Cor do texto do botão: #ffffff
• Cor de fundo do botão: # 000000
• Largura da borda do botão: 1 px
• Fonte do botão: Abril Fatface

Espaçamento

E crie a forma desejada usando valores de preenchimento personalizados.

• Preenchimento superior: 0,5vw (desktop), 1vw (tablet), 2vw (telefone)
• Preenchimento inferior: 0,5vw (desktop), 1vw (tablet), 2vw (telefone)
• Preenchimento esquerdo: 3vw (desktop), 7vw (tablet), 9vw (telefone)
• Preenchimento direito: 3vw (desktop), 7vw (tablet), 9vw (telefone)

Barra de rolagem de estilo

Adicionar CSS ID à linha 2

Você decide se deseja ou não estilizar a barra de rolagem. Se o fizer, abra a segunda linha e adicione uma classe CSS a ela.

• Classe CSS: barra de rolagem de imagem

Abra as configurações da página

Em seguida, abra as configurações de linha.

Barra de rolagem de estilo usando CSS

E adicione as seguintes linhas de código CSS à caixa Custom CSS na guia avançada:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

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 criar uma bela maquete de galeria de rolagem apenas com as opções integradas do Divi. No início deste post, você também conseguiu baixar o layout JSON gratuitamente e usá-lo em qualquer site em que estiver trabalhando. 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.