Como distribuir imagens em rolagem para promover uma galeria de imagens em Divi
Publicados: 2020-05-08Saber como distribuir imagens com os efeitos de rolagem do Divi pode ser um elemento de design sutil e impressionante para ajudar a promover uma galeria de imagens em uma página de destino. A ideia é envolver os usuários à medida que eles rolam a página, espalhando imagens como uma mão de cartas de baralho.
Neste tutorial, vamos criar um layout de seção limpa para promover uma galeria de imagens que inclui uma coleção de imagens que se espalham na rolagem. Você pode usar qualquer imagem que desejar com este design e seria uma boa adição a qualquer página de destino.
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
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.
Parte 1: Criando o Layout e Conteúdo Simulado
Para esta primeira parte do tutorial, vamos construir o layout da seção com uma linha de duas colunas que tem um título e um botão na coluna esquerda. Na segunda parte, adicionaremos as imagens fan-out na coluna da direita.
Configurações da seção
Antes de adicionarmos qualquer coisa ao layout, atualize as configurações da seção padrão da seguinte maneira:
- Preenchimento: 10vw superior, 10vw inferior
- Excesso horizontal: oculto
- Estouro vertical: oculto
Adicionando a linha
Em seguida, adicione uma nova linha com uma estrutura de coluna de dois terços e um terço.
Configurações de linha
Em seguida, atualize as configurações de linha com uma imagem de plano de fundo personalizada. Estou usando um do layout predefinido da página inicial da loja de artigos de papelaria. Depois dessa atualização, o seguinte:
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: canto superior esquerdo
- Largura máxima: 900px
Adicionando o Módulo de Texto para Criar o Título
Quando a linha estiver pronta, adicione um novo módulo de texto à coluna 1 para criar o título.
Conteúdo de Texto
Adicione o seguinte Título H1 ao conteúdo do corpo:
<h1>Our Gallery</h1>
Configurações de texto
Em seguida, atualize as configurações de texto da seguinte forma:
- Fonte do título: Bellefair
- Alinhamento do texto do título (tablet e telefone): à direita
- Tamanho do texto do cabeçalho: 150 px (desktop e tablet), 110 px (telefone)
Adicionando o Botão
No módulo de texto, adicione um novo módulo de botão.
Botão de texto
Atualize o texto do botão com “Exibir Galeria”.
Configurações de botão
Na guia de design, atualize o seguinte:
- Alinhamento (tablet e telefone): certo
- Tamanho do texto do botão: 14 px
- Cor do texto do botão: #ffffff
- Cor de fundo do botão: # 121212
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 3px
- Fonte do botão: Montserrat
- Estilo da fonte do botão: TT
- Margem: 7vw superior
Parte 2: Criando as imagens com o efeito de rolagem em leque
Nesta segunda parte do tutorial, criaremos as imagens com o efeito de rolagem fan-out. Começaremos com a imagem do meio. Estou usando as imagens do Layout Premade da Página da Galeria de Moda. Eles devem ser todos do mesmo tamanho para um design consistente. Os que estou usando têm 400 px por 600 px.
Criando a imagem do meio
Adicione um novo módulo de imagem à coluna da direita.
Em seguida, carregue uma imagem para o módulo.
Configurações de imagem
Atualize a largura e a margem máximas para monitores móveis da seguinte maneira:
- Largura máxima (tablet e telefone): 200 px
- Margem (tablet e telefone): 0 px restante
Criando a imagem do meio à direita
Para criar a segunda imagem (ou imagem do meio à direita), duplique o primeiro módulo de imagem.
Configurações de imagem
Em seguida, abra as configurações do módulo de imagem duplicada e atualize o seguinte:
Posição
- Posição: Absoluta
Origem da transformação
- Origem da transformação: centro inferior
Efeitos de rolagem
Em Movimento horizontal, atualize o seguinte:
- Habilitar movimento horizontal: SIM
- Compensação inicial: 0 (em 20%)
- Deslocamento médio: 0,5 (em 50%)
- Compensação final: 0,5 (em 100%)
Em Rotação, atualize o seguinte:
- Habilitar rotação: SIM
- Rotação inicial: 0 graus (a 20%)
- Rotação média: 20 graus (a 50%)
- Rotação final: 20 graus (a 100%)
Criando a imagem certa
Para criar a terceira imagem que se espalhará na extrema direita, duplique a segunda imagem que criamos.
Atualizar efeitos de rolagem
Em Movimento horizontal, atualize o seguinte:
- Offset médio: 1
- Compensação final: 1
Em Rotação, atualize o seguinte:
- Rotação média: 40 graus
- Rotação final: 40 graus
Se você não percebeu, estamos essencialmente aumentando o deslocamento horizontal em incrementos de 0,5 e o deslocamento rotativo em incrementos de 20 graus com cada imagem. Isso criará um espaçamento igual entre as imagens. E como a animação do efeito de rolagem é baseada na origem da transformação inferior central, ela dará a impressão de que as imagens estão se espalhando como uma mão de cartas de jogar.
Rotular imagens na caixa de camadas
Antes de criarmos as duas últimas imagens, vamos atualizar os rótulos das imagens atuais para não ficarmos confusos.
Criando a imagem do meio esquerdo
Para criar a imagem do meio esquerdo, podemos duplicar a imagem do meio direito.
Em seguida, arraste-o acima da imagem do meio para o topo da coluna.
Você também pode atualizar esse rótulo de imagem.
Atualizar efeitos de rolagem
Abra as configurações da imagem central esquerda e atualize os seguintes efeitos de rolagem:
Em movimento horizontal ...
- Deslocamento médio: -0,5
- Compensação final: -0,5
NOTA: Tudo o que estamos fazendo é alterar o valor de deslocamento para um negativo.
Em Rotação ...
- Rotação média: -20 graus
- Rotação final: -20 graus
Criando a imagem à esquerda
Finalmente, vamos criar a imagem esquerda final duplicando a imagem direita e arrastando-a para o topo da coluna.
Você também pode atualizar o rótulo.
Atualizar efeitos de rolagem
Abra as configurações da imagem à esquerda e atualize os efeitos de rolagem:
Sob Movimento Horizontal:
- Offset médio: -1
- Compensação final: -1
Em Rotação ...
- Rotação média: -40 graus
- Rotação final: -40 graus
Índice Z da coluna 1
No momento, as imagens da coluna irão se sobrepor ao conteúdo da coluna 1. Para alterar isso, abra as configurações da coluna 1 e atualize o índice z da seguinte maneira:
- Índice Z: 10
Adicionar novas imagens e filtros
Agora, tudo o que precisamos fazer é atualizar cada uma das imagens com novas / diferentes.
Para um efeito único, adicione os seguintes filtros a todas as imagens (usando multisseleção), exceto a imagem certa.
- Saturação: 20%
- Opacidade: 85%
Resultado
Aqui está o resultado até agora ...
Girando a coluna
Para mudar um pouco o design, podemos girar a coleção de imagens girando a coluna pai.
Para fazer isso, abra as configurações da coluna 2 e adicione a seguinte opção de transformação:
- Transformar e girar eixo Z: 40 graus
Resultado final
Aqui está o resultado final.
Área de Trabalho
Tábua
Telefone
Pensamentos finais
Neste tutorial, aprendemos como espalhar imagens usando os efeitos de rolagem do Divi, mas você não precisa parar por aí! Você pode usar facilmente essa mesma técnica para distribuir qualquer coleção de módulos (estou pensando em sinopses). Limitei a distância de deslocamento com os efeitos de rolagem de cada imagem para que o design não seja realmente funcional (ou seja, você não pode realmente ver todas as imagens em sua totalidade). Mas, você pode aumentar os deslocamentos para tornar as imagens mais visíveis, se desejar.
Estou ansioso para ouvir de você nos comentários.
Saúde!