Como deslizar para baixo para revelar o título e a legenda da imagem da sua galeria com Divi

Publicados: 2021-06-04

Se você estiver construindo um site onde as imagens desempenham um papel central no design, você pode querer incluir uma galeria em algum momento. É aí que entra o Módulo Divi Gallery. Ele permite que você selecione imagens diretamente de sua biblioteca de mídia e as exiba em uma estrutura organizada. Por padrão, você também pode mostrar dinamicamente o título e a legenda de cada imagem. No entanto, se você deseja limitar a quantidade de texto que aparece em seu design, pode deslizar para baixo para revelar o título e a legenda de uma imagem ao pairar sobre ela. Neste tutorial, mostraremos exatamente como fazer isso. Você também poderá baixar o arquivo JSON gratuitamente!

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

legenda do título da galeria

Móvel

legenda do título da galeria

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.

Baixe os arquivos
Download de graça

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!

https://youtu.be/p6Bh7wz3HMc

Inscreva-se no nosso canal no Youtube

1. Faça upload de imagens com títulos e legendas

Vá para a biblioteca de mídia

A primeira parte deste tutorial concentra-se em adicionar as imagens com títulos e legendas dentro de sua biblioteca de mídia. Para chegar lá, navegue até o Painel do WordPress> Mídia> Biblioteca.

legenda do título da galeria

Enviar imagens

Uma vez lá, faça upload das imagens que deseja incluir em sua galeria.

legenda do título da galeria

Adicionar títulos e legendas

Você precisará adicionar um título e uma legenda a cada imagem individualmente. Para obter o resultado ideal, tente manter um comprimento de texto semelhante para cada imagem.

legenda do título da galeria

2. Crie Design com Divi

Crie uma nova página ou abra uma existente

Uma vez que suas imagens foram carregadas, é hora de construir o design no Divi. Crie uma nova página ou abra uma nova e ative o Visual Builder na parte superior.

legenda do título da galeria

Adicionar Seção # 1

Cor de fundo

Adicione uma nova seção à sua página e abra as configurações da seção. Aplique a seguinte cor de fundo:

  • Cor de fundo: #ededed

legenda do título da galeria

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha usando a seguinte estrutura de coluna:

legenda do título da galeria

Espaçamento

Sem adicionar módulos ainda, abra as configurações de linha, vá para a guia de design e aplique as seguintes margens superior e inferior:

  • Margem superior: 5%
  • Margem inferior: 5%

legenda do título da galeria

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo H2

É hora de adicionar módulos, começando com um Módulo de texto na coluna 1 contendo algum conteúdo H2.

legenda do título da galeria

Configurações de texto H2

Vá para a guia de design do módulo e altere as configurações de texto H2 de acordo:

  • Fonte do título 2: Montserrat
  • Tamanho do texto do título 2:
    • Desktop: 62px
    • Tablet: 48px
    • Telefone: 32px
  • Altura da linha do título 2: 1,3em

legenda do título da galeria

Dimensionamento

Modifique a largura máxima do módulo em diferentes tamanhos de tela também.

  • Largura máxima:
    • Desktop: 500px
    • Tablet: 400px
    • Telefone: 250px

legenda do título da galeria

Adicionar Módulo Divisor à Coluna 1

Visibilidade

O próximo e ú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

legenda do título da galeria

Linha

Em seguida, vá para a guia de design e altere a cor da linha.

  • Cor da linha: # ffc000

legenda do título da galeria

Dimensionamento

Modifique as configurações de dimensionamento do módulo também.

  • Peso do divisor: 5px
  • Largura máxima: 100 px
  • Altura: 5px

legenda do título da galeria

Adicionar Módulo de Texto à Coluna 2

Adicionar conteúdo

Na coluna 2, o único módulo de que precisamos é um Módulo de Texto com algum conteúdo de descrição.

legenda do título da galeria

Configurações de texto

Altere as configurações de texto do módulo da seguinte forma:

  • Fonte do texto: Lato
  • Altura da linha de texto: 2.2em

legenda do título da galeria

Espaçamento

Aplique alguma margem superior também.

  • Margem superior: 50px

legenda do título da galeria

Adicionar Seção # 2

Adicione outra seção abaixo da anterior.

legenda do título da galeria

Fundo Gradiente

Abra as configurações da seção e aplique um fundo gradiente.

  • Cor 1: #ededed
  • Cor 2: #ffffff
  • Tipo de gradiente: Linear
  • Posição inicial: 20%
  • Posição final: 20%

legenda do título da galeria

Espaçamento

Vá para a guia de design da seção e remova todo o preenchimento padrão superior e inferior.

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

legenda do título da galeria

Adicionar linha # 1

Estrutura da Coluna

Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:

legenda do título da galeria

Cor de fundo

Sem adicionar módulos ainda, abra as configurações de linha e aplique uma cor de fundo.

  • Cor de fundo: # f4f4f4

legenda do título da galeria

Dimensionamento

Passe para as configurações de dimensionamento da linha a seguir e aplique as seguintes alterações:

  • Usar largura de calha personalizada: Sim
  • Largura da calha: 2
  • Largura: 90%
  • Largura máxima: 1580 px

legenda do título da galeria

Espaçamento

Estamos personalizando os valores de preenchimento também.

  • Enchimento superior: 150px
  • Preenchimento inferior: 0 px
  • Preenchimento esquerdo: 5%
  • Preenchimento direito: 5%

legenda do título da galeria

Adicionar Módulo de Galeria à Coluna

Selecione as imagens carregadas

É hora de adicionar as imagens, usando um Módulo de Galeria! Selecione as imagens que você carregou para sua biblioteca de mídia na primeira parte deste tutorial.

legenda do título da galeria

Elementos

O efeito de foco só faz sentido no desktop. Em tamanhos de tela menores, não há foco e o toque acionará um efeito lightbox. Por esse motivo, estamos exibindo apenas o título e a legenda na área de trabalho e os desativamos em telas menores. Também estamos desativando a paginação. Você pode encontrar essas opções nas configurações dos elementos.

  • Mostrar título e legenda
    • Desktop: Sim
    • Tablet e telefone: não
  • Mostrar paginação: Não

legenda do título da galeria

Layout

Vá para a guia de design do módulo e altere o layout a seguir.

  • Layout: Grade
  • Orientação da miniatura: retrato

legenda do título da galeria

Sobreposição

Estamos modificando as configurações de sobreposição também.

  • Cor do ícone de sobreposição: #ffffff
  • Sobreposição de cor de fundo: rgba (0,0,0,0.25)

legenda do título da galeria

Configurações de texto

A seguir, vamos mudar a cor do texto nas configurações de texto.

  • Cor do Texto: Claro

legenda do título da galeria

Configurações de texto do título

Em seguida, definiremos o estilo do texto do título.

  • Nível do título do título: H3
  • Fonte do título: Montserrat
  • Tamanho do texto do título: 20px

legenda do título da galeria

Configurações de texto de legenda

Estamos alterando as configurações de texto da legenda também.

  • Fonte da legenda: Lato
  • Cor do texto da legenda: #efefef
  • Espaçamento entre letras de legenda: 0,5 px
  • Altura da linha de legenda: 1,9em

legenda do título da galeria

CSS do item da galeria

Em seguida, passaremos para a guia avançada. Uma vez lá, adicionaremos as seguintes linhas de código CSS à caixa CSS do título do item da galeria: 

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

legenda do título da galeria

CSS da legenda do item da galeria

E usaremos essas linhas de código dentro da caixa CSS da legenda do item da galeria: 

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

legenda do título da galeria

3. Aplicar efeito de revelação

Adicionar CSS ID ao Módulo da Galeria

Agora que nosso design está pronto, podemos nos concentrar em algumas etapas necessárias para criar o efeito de revelação. A primeira coisa que faremos é adicionar um CSS ID ao nosso módulo Gallery.

  • CSS ID: divi-gallery

legenda do título da galeria

Adicionar módulo de código abaixo do módulo de galeria

Em seguida, adicionaremos um Módulo de Código abaixo do Módulo Galeria.

legenda do título da galeria

Adicionar etiquetas de estilo

Para criar o efeito, vamos usar algum código CSS. Para preparar nosso Módulo de Código para esse código, colocaremos algumas tags de estilo dentro da caixa de código.

legenda do título da galeria

Insira o código CSS entre as tags de estilo

E vamos copiar e colar as seguintes linhas de código CSS entre as tags de estilo: 

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

legenda do título da galeria

É isso! Salve as configurações da página e saia do Visual Builder para visualizar o resultado ao passar o mouse sobre um dos itens da galeria.

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

legenda do título da galeria

Móvel

legenda do título da galeria

Pensamentos finais

Nesta postagem, mostramos como ser criativo com o Módulo Gallery integrado do Divi. Mais especificamente, mostramos como deslizar para baixo para revelar o título e a legenda de uma imagem ao passá-la na área de trabalho. Isso ajuda a manter um design visual sem exibir muito texto de uma vez. Você também conseguiu 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.