Alterando o número de colunas no módulo Divi Gallery em diferentes pontos de interrupção

O Módulo Divi Gallery permite que você crie uma bela galeria de imagens em um layout de grade responsivo. A galeria é considerada responsiva porque dimensiona o tamanho de suas imagens e ajusta o número de colunas na grade de acordo com as diferentes larguras do navegador.

Por padrão, o módulo da galeria tem três pontos de interrupção (pontos onde o estilo muda em certas larguras do navegador) que ajustam o número de colunas na grade. Ele exibirá sua galeria de imagens em quatro colunas na área de trabalho e, em seguida, se dividirá em três colunas no tablet, duas colunas em tablets pequenos (e telefones grandes) e uma coluna em telefones.

Essa configuração padrão geralmente funciona na maioria dos casos, mas às vezes você pode precisar de mais controle sobre o número de colunas exibidas em certas larguras de navegador. É por isso que, neste tutorial, mostrarei como completar o número de colunas exibidas no Módulo Divi Gallery, não apenas para desktop, mas também para três pontos de interrupção adicionais do navegador.

Espiada

Aqui está uma prévia do que construiremos neste tutorial. Observe o número diferente de colunas para a galeria de imagens em larguras de navegador diferentes.

Preparando Seus Elementos de Design

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.

Implementando o espaçamento personalizado para o módulo Divi Gallery

Configurando uma nova página

Para começar, crie uma nova página, dê um título à sua página e implante o Divi Builder. Selecione a opção “Build from Scratch” e publique sua página. Em seguida, clique para construir no front end.

Criação da galeria de imagens

Com o Divi Builder implantado, vá em frente e crie uma nova seção regular com uma linha de uma coluna e adicione um Módulo Divi 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.

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

Ajuste as configurações de linha para fazer galeria de largura total sem largura de medianiz

Para que nossa nova estrutura de colunas funcione, a principal coisa que precisamos fazer é eliminar o espaçamento / margem padrão que existe entre nossas imagens na galeria. Para fazer isso, tudo o que precisamos fazer é definir a largura da medianiz como 1. Além disso, como uma opção, você pode aumentar a largura da linha para que a galeria de imagens ocupe toda a largura do navegador. Para fazer isso, abra as configurações de linha e atualize o seguinte:

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

Se você quiser adicionar espaçamento entre as imagens na galeria, sugiro usar este método, pois precisamos manter a largura da medianiz definida como 1.

Como a galeria responde a larguras de navegadores diferentes por padrão

Conforme mencionado anteriormente, por padrão, o módulo da galeria Divi exibirá sua galeria de imagens em quatro colunas na área de trabalho e, em seguida, se dividirá em três colunas no tablet, duas colunas em tablets pequenos (e telefones grandes) e uma coluna em telefones.

No entanto, vamos mudar isso para incluir um número personalizado de colunas em certos pontos de interrupção usando alguns trechos de CSS personalizado.

Definir um número específico de colunas para todos os tamanhos de navegador

Se você deseja alterar o número de colunas exibidas na galeria para que o número de colunas permaneça o mesmo em todos os tamanhos de navegador, existe uma maneira simples de fazer isso. Isso pode ser útil se você deseja exibir sua galeria em apenas uma coluna, duas colunas ou três colunas. Dessa forma, você pode ter imagens realmente grandes no desktop e imagens menores no celular, mantendo o mesmo número da coluna. Ter quatro ou mais colunas provavelmente não funcionará, pois as imagens serão muito pequenas para telas de telefones.

Digamos que você queira exibir três colunas em todos os tamanhos de navegador. Para fazer isso, abra as configurações do módulo da galeria Divi e adicione o seguinte CSS personalizado ao item da galeria:

width: 33.33% !important;
margin: 0 !important;
clear: none !important;

Agora sua galeria manterá a estrutura de três colunas em todos os tamanhos de navegadores.

Se você quiser um layout de 2 colunas para todos os tamanhos de navegador, tudo o que você precisa fazer é alterar o valor da propriedade de largura para 50%.

Se você quiser um layout de 1 coluna, basta atualizar a largura para 100%.

É isso.

Mas, se você deseja obter mais controle sobre o número de colunas em certos pontos de interrupção, continue lendo.

Alterando o número de colunas para pontos de interrupção específicos

Se você deseja obter controle total sobre o número de colunas exibidas quando o navegador atinge certos pontos de interrupção, podemos usar alguns trechos de CSS com consultas de mídia que visam certas larguras de navegador.

Adicione a classe CSS ao módulo Divi Gallery

Antes de adicionarmos o CSS personalizado, primeiro precisamos fornecer ao nosso módulo de galeria uma classe CSS personalizada para que possamos fazer referência a essa classe específica em nosso CSS. Isso garantirá que nosso css seja aplicado apenas a este módulo específico da galeria. Para fazer isso, abra as configurações do módulo da galeria e adicione a seguinte classe CSS na guia avançada:

Classe CSS: col-width

Não se esqueça de retirar o css personalizado adicionado ao Item da Galeria na seção anterior deste artigo, se você o adicionou.

Depois disso, salve suas configurações.

Adicione o CSS personalizado às configurações da página

Com sua classe CSS implementada, você está pronto para adicionar o CSS personalizado. Abra as configurações da página clicando no ícone de engrenagem na barra de configurações da página na parte inferior da página (ou você pode usar o atalho de teclado “o”).

Em seguida, adicione o seguinte CSS personalizado na guia avançada.

/** Desktop **/
@media (min-width: 981px){
.col-width .et_pb_gallery_item {
width: 16.66% !important; /*six columns*/
clear: none !important;
}
}

/** Tablet **/
@media (max-width: 980px){
.col-width .et_pb_gallery_item {
width: 25% !important; /*four columns*/
clear: none !important;
}
}

/** Small Tablet and Large Phone **/
@media (max-width: 767px){
.col-width .et_pb_gallery_item {
width: 33.33% !important; /*three columns*/
clear: none !important;
}
}

/** Phone **/
@media (max-width: 479px){
.col-width .et_pb_gallery_item {
width: 50% !important; /*two columns*/
clear: none !important;
}
}

Este CSS adicionará um número personalizado de colunas a certos pontos de interrupção da seguinte maneira:

Desktop: 6 colunas
Tablet: 4 colunas
Tablet pequeno e telefone grande: 3 colunas
Telefone: 2 colunas

Compreendendo e ajustando o CSS

Olhando para o CSS, você notará que ele está dividido em quatro consultas de mídia separadas. A consulta de mídia principal adiciona estilo aos navegadores de desktop (navegadores com largura mínima de 981 px). A segunda consulta de mídia adiciona um estilo aos navegadores do tamanho de um tablet e assim por diante.

Em cada consulta de mídia, o CSS mais importante a não ser retirado é a propriedade width. Isso designa o tamanho de cada item da galeria e também define a largura da coluna da galeria.

Por exemplo, a consulta de mídia principal para desktop define a largura do item da galeria em 16,66%.

Isso é equivalente a um sexto da largura total de seu contêiner (ou linha). Portanto, a galeria exibirá um layout de seis colunas na área de trabalho.

Para ajustar o número de colunas da área de trabalho, tudo o que você precisa fazer é alterar a propriedade de largura para um valor diferente. Aqui está uma lista de porcentagens de largura que você pode experimentar.

12 colunas: 8,33%
10 colunas: 10%
8 colunas: 12,5%
6 colunas: 16,66%
5 colunas: 20%
4 colunas: 25%
3 colunas: 33,33%
2 colunas: 50%
1 coluna: 100%

Resultado final

Aqui está o resultado final nas diferentes larguras do navegador.

Desktop (6 colunas)

Tablet (4 colunas)

Tablet pequeno e telefone grande (3 colunas)

Telefone (2 colunas)

Pensamentos finais

Espero que este tutorial tenha sido útil para aqueles que buscam obter mais controle sobre o número de colunas que sua galeria exibe em determinados dispositivos ou pontos de interrupção. Com esta configuração, você pode adicionar qualquer número de colunas que desejar para qualquer largura do navegador para criar exibições de galeria com o usuário em mente.

Os pontos de interrupção que usei no CSS personalizado são os pontos de interrupção que o Divi já usa. Sinta-se à vontade para verificar nossa postagem sobre como ajustar seus designs com consultas de mídia para obter mais informações sobre este conceito.

Até a próxima vez, estou ansioso para ouvir de você nos comentários.

Saúde!