Rotulando cantos de imagens em uma impressionante grade de galeria com Divi
Publicados: 2019-06-29Procurando uma maneira única e bonita de exibir imagens em uma galeria em seu site? Em caso afirmativo, temos certeza que você vai adorar este post. Vamos mostrar como cortar cantos de imagem com Módulos de Texto como parte de um belo design que permanece 100% responsivo em todos os tamanhos de tela. Esta é uma ótima maneira de adicionar rótulos numerados às suas imagens, mantendo um design incrível. Você também poderá baixar o arquivo JSON do exemplo de design gratuitamente.
Vamos lá!
Antevisão
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
Baixe o layout da seção da galeria GRATUITAMENTE
Para colocar suas mãos no layout da seção da galeria 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.
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!
Inscreva-se no nosso canal no Youtube
Vamos começar a recriar
Adicionar nova seção
Espaçamento
A primeira coisa que você precisa fazer é adicionar uma nova seção à página em que está trabalhando. Abra as configurações da seção e remova todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Cor de fundo
Adicione uma cor de fundo branca a seguir.
- Cor de fundo: #ffffff
Dimensionamento
Passe para as configurações de dimensionamento e remova todo o espaço entre as colunas, linha e seção aplicando as seguintes configurações:
- Usar largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 100%
- Largura máxima: 100%
Espaçamento
Continue removendo todo o preenchimento padrão superior e inferior.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Coluna 1, 2, 3 e 4 Elemento Principal
Agora, para garantir que uma estrutura de 4 colunas seja mantida em todos os tamanhos de tela, vamos garantir que cada uma das colunas mantenha sua largura de 25% adicionando a seguinte linha de código CSS a cada elemento principal da coluna individualmente:
width: 25% !important;
Adicionar Módulo de Imagem à Coluna 1
Carregar imagem 1: 1
É hora de começar a adicionar módulos! Adicione um novo Módulo de Imagem à primeira coluna e carregue uma imagem quadrada de sua escolha (ou use uma que você possa encontrar na pasta compactada que você baixou no início deste post).
Lightbox
A seguir, habilite a opção lightbox nas configurações de link.
- Abrir no Lightbox: Sim
Dimensionamento
Para garantir que a imagem permaneça responsiva em todos os tamanhos de tela, vamos habilitar a opção 'Forçar largura total' também.
- Forçar largura total: Sim
Filtros padrão
Também estamos mudando o brilho.
- Brilho: 50%
Filtros Hover
E vamos trazê-lo de volta para '100%' ao pairar.
- Brilho: 100%
Índice Z padrão
Passe para as configurações de visibilidade e certifique-se de que o Índice Z permaneça '0' em seu estado padrão.
- Índice Z: 0
Hover Z Index
Mas, ao passar o mouse, queremos que ele se sobreponha ao rótulo numerado Módulo de texto que adicionaremos nas próximas etapas. Para fazer isso, aumentaremos o valor do índice Z de foco.
- Índice Z: 100
Clonar Módulo de Imagem 3 Vezes e Colocar nas Colunas Restantes
Depois de concluir o Módulo de imagem na coluna 1, você pode cloná-lo três vezes. Coloque as duplicatas nas três colunas restantes da linha.
Mudar imagens
Altera as imagens nas duplicatas.
Adicionar Margem Superior ao Módulo de Imagem na Coluna 2
E adicione uma margem superior ao Módulo de imagem na segunda coluna.
- Margem superior: 24,7vw
Adicionar Módulo de Texto Abaixo do Módulo de Imagem Nº 1
Adicionar conteúdo
O próximo módulo de que precisamos na coluna 1 é um Módulo de Texto. Adicione um número à caixa de conteúdo.
Cor de fundo
Altere a cor do plano de fundo a seguir. Essa cor precisa corresponder a qualquer cor de fundo que você atribuiu à linha.
- Cor de fundo: #ffffff
Configurações de texto
Vá para a guia de design e altere as configurações de texto.
- Fonte do Texto: Lora
- Alinhamento de Texto: Direito
- Cor do texto: # 000000
- Tamanho do texto: 3vw
- Altura da linha de texto: 3vw
Dimensionamento
Também estamos diminuindo a largura do módulo.
- Largura: 7vw
Espaçamento
Crie algum espaço para o módulo nas configurações de espaçamento a seguir.
- Preenchimento superior: 0,5vw
- Preenchimento inferior: 2,5vw
- Preenchimento direito: 0,9vw
Índice Z
E aumente o Z Index.
- Índice Z: 99
Clonar Módulo de Texto 3 Vezes
Depois de concluir as etapas gerais para o Módulo de Texto, você pode cloná-lo três vezes.
Posicionamento
Posicione as duplicatas de acordo:
Personalizar Módulos de Texto
Módulo de Texto # 1
Margem superior negativa
É hora de começar a personalizar os diferentes módulos de texto de acordo com sua posição! Abra o Módulo de texto na coluna 1 e adicione alguma margem superior negativa.
- Margem superior: -5,9vw
Sombra da caixa
Também estamos adicionando uma sombra de caixa usando as seguintes configurações:
- Posição horizontal da sombra da caixa: 7vw
- Posição vertical da sombra da caixa: 5,9vw
- Força de propagação da sombra da caixa: 0px
- Cor da sombra: rgba (35,50,255,0,94)
Módulo de Texto # 2
Mudar a numeração
Continue abrindo o Módulo de Texto na segunda coluna e altere o número.
Alinhamento de Texto
Modifique o alinhamento do texto também.
- Alinhamento de Texto: Esquerda
Alinhamento de Módulo
E altere o alinhamento do módulo nas configurações de dimensionamento.
- Alinhamento do Módulo: Direito
Espaçamento
Passe para as configurações de espaçamento e adicione alguma margem superior negativa. Adicione o preenchimento à esquerda em vez de também à direita.
- Margem superior: -6vw
- Preenchimento esquerdo: 0,9vw
Sombra da caixa
Conclua o projeto do Módulo de texto adicionando uma sombra de caixa.
- Posição horizontal da sombra da caixa: 7vw
- Posição vertical da sombra da caixa: -6vw
- Força de propagação da sombra da caixa: 0px
- Cor da sombra: #ededed
Módulo de Texto # 3
Mudar a numeração
Vá para o Módulo de Texto na coluna 3! Altere o número na caixa de conteúdo.
Margem superior negativa
Vá para a guia de design e adicione alguma margem superior negativa.
- Margem superior: -6vw
Sombra da caixa
Use uma sombra de caixa também.
- Posição horizontal da sombra da caixa: -7vw
- Posição vertical da sombra da caixa: -6vw
- Força de propagação da sombra da caixa: 0px
- Cor da sombra: # ff2323
Módulo de Texto # 4
Mudar a numeração
Para o próximo e último Módulo de Texto. Altere o número aqui também.
Alinhamento de Texto
Em seguida, altere o alinhamento do texto.
- Alinhamento de Texto: Esquerda
Alinhamento de Módulo
Modifique também o alinhamento do módulo nas configurações de dimensionamento.
- Alinhamento do Módulo: Direito
Alterar espaçamento
Modifique as configurações de espaçamento a seguir.
- Margem superior: 24,7vw
- Margem inferior: -6vw
- Preenchimento esquerdo: 0,9vw
Sombra da caixa
E complete o design do Módulo de Texto adicionando uma sombra de caixa com as seguintes configurações:
- Posição horizontal da sombra da caixa: -7vw
- Posição vertical da sombra da caixa: -5,9vw
- Força de propagação da sombra da caixa: 0px
- Cor da sombra: # 000000
Clonar linha inteira
Depois de concluir a linha, você pode cloná-la quantas vezes quiser, dependendo de quantas imagens deseja exibir.
Alterar numeração e imagens
Certifique-se de alterar todas as imagens e números e pronto!
Antevisão
Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.
Pensamentos finais
Neste artigo, mostramos como criar uma galeria bonita com cantos de imagem rotulados. Esta é uma forma única de apresentar as suas imagens de uma forma esteticamente apelativa. Você também conseguiu baixar o arquivo JSON no início do tutorial. 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.