6 designs de borda exclusivos para suas imagens do módulo Divi Gallery

O Módulo Divi Gallery é um ótimo lugar para mostrar uma galeria de imagens em seu site. Por padrão, o módulo da galeria exibirá as suas imagens em um layout de grade sem muito estilo, o que é ótimo para manter as imagens como o elemento de design principal. No entanto, se você deseja ser um pouco criativo, pode enquadrar suas imagens com diferentes designs de borda para ajudar a destacar sua galeria de imagens. O módulo Galeria torna esse processo muito fácil de fazer e os resultados podem surpreendê-lo.

Neste tutorial, vou mostrar como criar designs de borda exclusivos para suas galerias de imagens usando o módulo Divi Gallery.

Vamos começar!

Espiada

# 1 Galeria de imagens Polaroid

Comece a construir o design # 1

# 2 Design de grade limpa

Comece a construir o projeto # 2

# 3 Imagem de fundo personalizada atrás de toda a galeria

Comece a construir o projeto # 3

# 4 Imagem de fundo personalizada atrás de cada item da galeria

Comece a construir o projeto # 4

# 5 Box Shadow e Border Combo

Comece a construir o projeto # 5

# 6 Film Strip Border Design

Comece a construir o projeto # 6

O que você precisa para começar

Inscreva-se no nosso canal no Youtube

Para este tutorial, você precisará do tema Divi instalado e ativo. Você também precisará de 12 imagens adicionadas à sua biblioteca de mídia para serem usadas na construção da galeria de imagens. Para um módulo de galeria Divi usando um layout de grade, o tamanho de suas imagens deve ser em torno de 1500px por 800px se você planeja abri-las em uma exibição lightbox para que preencham a tela bem na maioria dos desktops.

Configurando sua nova página

Para começar, você precisará criar uma nova página, dar um título a ela e implantar o Divi Builder. Selecione a opção “Build from Scratch” e publique sua página. Em seguida, clique para construir no front end.

Salvando um modelo de módulo da Divi Gallery

Uma vez que iremos projetar 5 estilos de borda diferentes para o módulo Divi Gallery, seria útil ter um modelo de módulo de galeria básico salvo em nossa biblioteca para que não tenhamos que começar do zero cada vez que projetarmos uma nova galeria .

Crie uma nova seção com uma linha de coluna e, em seguida, adicione o Módulo Gallery à linha.

Divi irá preencher o módulo da galeria com algumas imagens de sua galeria de mídia em uma exibição em grade como a seguinte:

Nas configurações do módulo da galeria, clique no ícone de adição cinza para adicionar 12 imagens à galeria. Estou usando imagens do layout da página da galeria do restaurante.

Em seguida, atualize as configurações do Módulo Divi Gallery da seguinte maneira:

Número das imagens: 12
Mostrar título e legenda: NÃO
Mostrar paginação: NÃO

Isso funcionará como um bom modelo no futuro. Para salvar o módulo Gallery em sua biblioteca Divi, clique no ícone Salvar na biblioteca no menu cinza do módulo ao passar o mouse sobre o módulo. Em seguida, nomeie o modelo “Gallery Module Template” e salve-o na biblioteca.

Quando você quiser adicionar o módulo de galeria salvo à sua página, tudo que você precisa fazer é clicar para adicionar um novo módulo normalmente. Em seguida, selecione a guia Adicionar da Biblioteca no pop-up e clique no módulo da galeria com o nome “Modelo de Módulo da Galeria”.

É isso. Agora vamos aos designs de borda!

# 1 Galeria de imagens Polaroid

O próximo desenho é uma borda popular para imagens que se parecem com uma foto polaroid. Este é um layout especialmente útil se você deseja exibir os títulos das suas imagens.

Veja como fazer.

Configurações da seção

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima). Antes de editar o módulo Galeria, abra as configurações da seção e adicione uma cor de fundo cinza para que nossas bordas brancas apareçam um pouco.

Plano de fundo: #dddddd

Configurações de linha

Em seguida, atualize as configurações de linha com o seguinte:

Largura da calha: 1

Isso eliminará o espaçamento de margem padrão entre as imagens. Adicionaremos nosso próprio espaçamento personalizado posteriormente.

Configurações do módulo da galeria

Abra as configurações do módulo da Galeria e atualize o seguinte:

Mostrar título e legenda: SIM

Peso da fonte do título: negrito
Estilo da fonte do título: TT
Alinhamento do Texto do Título: Centro
Altura da linha do título: 2em

Largura da borda superior da imagem: 10 px
Cor da borda superior da imagem: #ffffff
Largura da borda esquerda da imagem: 10 px
Cor da borda esquerda da imagem: #ffffff
Largura da borda direita da imagem: 10 px
Cor da borda direita da imagem: #ffffff

Para criar espaçamento entre nossas imagens, adicione a seguinte borda aos itens da galeria:

Largura da borda: 10px
Cor da borda: #dddddd (corresponde à cor do fundo da seção)

Para colorir a parte inferior de nosso desenho de borda polaroid, precisamos adicionar um fundo branco ao módulo.

Cor de fundo: #ffffff

Resultado final

Aqui está o resultado final do desenho da borda polaróide.

# 2 Design de grade limpa

Se você está procurando um estilo de grade simples e limpo para suas imagens, este design de borda é uma boa opção. É bem equilibrado e agradável aos olhos.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima).

Configurações de linha

Antes de editar o módulo Galeria, abra as configurações da seção e atualize o seguinte:

Largura da calha: 1
Preenchimento personalizado: 0 px superior, 0 px inferior
Largura da borda: 10px
Cor da borda: #dddddd

Essa borda de linha é necessária para combinar o espaçamento externo de nossa galeria com o espaçamento entre as imagens.

Configurações do módulo da galeria

Agora abra as configurações do módulo da galeria e adicione uma borda aos itens da galeria e às imagens da galeria, atualizando o seguinte:

Largura da borda da imagem: 20 px
Cor da borda da imagem: #ffffff

Largura da borda: 10px
Cor da borda: transparente (isso é importante para mostrar a cor de fundo)

Agora adicione uma cor de fundo ao módulo da galeria para completar o design.

Cor de fundo: #dddddd (corresponde à cor da borda da linha)

Como a borda do item da sua galeria é transparente, ela herda a cor do plano de fundo.

Design final

Mudando as cores da borda, mudando a cor de fundo

Se quiser brincar com diferentes cores de borda, você pode atualizar a cor de fundo para o que quiser. Mas, você precisará remover a borda da linha e adicionar o seguinte espaçamento ao módulo:

Preenchimento personalizado: 10px superior, 10px inferior, 10px à esquerda, 10px à direita

Agora você pode ajustar a cor de fundo para o que quiser:

# 3 Imagem de fundo personalizada atrás de toda a galeria

Este design permite que você use uma imagem de fundo para servir como uma espécie de fundo de textura para as bordas de suas imagens. Esta é uma boa maneira de tornar cada borda da imagem única, pois mostra uma área específica da imagem de fundo do módulo. A configuração é muito semelhante ao Clean Grid Design acima.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima).

Configurações de linha

Antes de editar o módulo Galeria, abra as configurações da seção e atualize o seguinte:

Largura da calha: 1
Preenchimento personalizado: 0 px superior, 0 px inferior

Configurações do módulo da galeria

Agora atualize as configurações do Módulo da Galeria da seguinte forma:

Imagem de fundo: [adicionar imagem] (você não poderá ver ainda)
Cor de fundo: #dddddd (só aparece se você usar uma imagem de fundo PNG com transparência)
Largura da borda da imagem: 10 px
Cor da borda da imagem: #ffffff

Largura da borda (para módulo): 10px
Cor da borda: #ffffff

Em seguida, adicione o seguinte CSS personalizado ao item da galeria:

padding: 3%;

Isso cria a separação entre os itens da galeria para completar o design.

Resultado final

# 4 Imagem de fundo personalizada atrás de cada item da galeria

Este design permite que você use uma imagem de fundo para servir como borda para cada um dos itens da galeria individualmente. Você pode criar qualquer imagem personalizada que desejar ou usar uma das imagens de fundo incluídas em nossos layouts predefinidos. Estou usando um do Layout da página de destino do Meetup.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima).

Configurações de linha

Antes de editar o módulo Galeria, abra as configurações da seção e atualize o seguinte:

Tornar esta linha com largura total: SIM
Largura da calha: 2

Configurações do módulo da galeria

Agora atualize as configurações do Módulo da Galeria da seguinte forma:

Largura da borda da imagem: 10 px
Cor da borda da imagem: #ffffff

Em seguida, adicione o seguinte CSS personalizado ao item da Galeria:

padding: 30px;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: right;

Em seguida, você precisará carregar a imagem de fundo personalizada que deseja colocar atrás de cada um dos itens da sua galeria. Para este exemplo, estou usando uma imagem de um de nossos pacotes de layout predefinidos. Assim que a imagem for carregada para a galeria de mídia do WordPress, copie o URL da imagem para a área de transferência.

Agora volte e abra as configurações do módulo da galeria e cole o URL no CSS personalizado onde diz “insira o url da imagem aqui”. Certifique-se de manter o url dentro das citações.

Resultado final

Aqui está o resultado final.

# 5 Box Shadow e Border Combo

Sombras de caixa são ótimas para dar um toque personalizado à sua galeria. Você pode usar sombras de caixa nas imagens do módulo da galeria Divi para criar um design de grade quebrado que enquadra as imagens de uma maneira única. Você também pode combinar a sombra da caixa com designs de borda para todos os tipos de possibilidades.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima).

Adicionar borda de imagem e sombra de caixa

Abra as configurações da Galeria e atualize o seguinte:

Largura da borda da imagem: 10 px
Cor da borda da imagem: #ffffff

Sombra da caixa de imagem: veja a captura de tela
Posição horizontal da sombra da caixa: -30px
Posição vertical da sombra da caixa: -30px
Força de propagação da sombra da caixa: -10px
Cor da sombra: # e08474

Adicionar a borda do item da galeria

O design da sombra da caixa parece bom como está agora. Mas, você também pode adicionar uma borda adicional para seu item de galeria, atualizando o seguinte:

Largura da borda direita: 7 px
Cor da borda direita: #dddddd
Estilo da borda direita: pontilhada
Largura da borda inferior: 7 px
Cor da borda inferior: #dddddd
Estilo da borda inferior: pontilhada

Eu adicionei um estilo de borda pontilhada apenas para lembrá-lo dos diferentes estilos disponíveis. Sinta-se à vontade para usar outros estilos (como sólido ou tracejado).

Configurações de linha

Para dar ao seu projeto mais espaço, abra as configurações de linha e atualize o seguinte:

Largura total da linha: SIM

Design final

Aqui está o design final.

# 6: Design de borda de tira de filme

Para este último design, pensei em mostrar a vocês algo um pouco mais exclusivo. Este design usa um estilo de borda tracejada apenas no lado direito e esquerdo dos itens da galeria, o que divide cada coluna de imagens de uma forma que se assemelha a tiras de filme.

Veja como fazer.

Crie uma nova seção regular com uma linha de uma coluna. Em seguida, adicione o modelo de módulo da Galeria Divi salvo da biblioteca (explicado acima).

Configurações de linha

Antes de editar o módulo Galeria, abra as configurações de linha e altere a largura da medianiz para 1.

Largura da calha: 1

Isso eliminará o espaçamento de margem padrão entre as imagens.

Configurações do módulo da galeria

Em seguida, abra as configurações da Galeria e atualize o seguinte:

Adicionar bordas de imagem tracejadas

Largura da borda direita da imagem: 8 px
Cor da borda direita da imagem: #dddddd
Estilo da borda direita da imagem: tracejado
Largura da borda esquerda da imagem: 8 px
Cor da borda esquerda da imagem: #dddddd
Estilo da borda esquerda da imagem: tracejado

Adicionar borda de item da galeria para espaçamento

Largura da borda esquerda: 20 px
Cor da borda esquerda: #ffffff
Largura da borda direita: 20 px
Cor da borda direita: #ffffff

Adicionar sombra da caixa de imagem

Sombra da caixa de imagem: veja a captura de tela
Força do desfoque de sombra da caixa: 0 px
Força de propagação da sombra da caixa: -10px
Cor da sombra: # 222222

Adicionar cor de fundo

Cor de fundo: # 222222

Em seguida, adicione o seguinte CSS personalizado ao item da Galeria:

padding: 5px 10px;

O Resultado Final

Agora verifique o resultado.

Pensamentos finais

Espero que esses seis exemplos de design de borda forneçam alguma inspiração para a criação de alguns designs de borda personalizados para suas imagens ao usar o Módulo Divi Gallery. Depois de controlar as configurações disponíveis no módulo Divi Gallery, basta um pouco de criatividade. Portanto, divirta-se explorando novas opções de design com diferentes imagens, cores e espaçamentos.

Estou ansioso para ouvir de você nos comentários.

Saúde!