Como Alterar o Número de Colunas no Mobile com o Divi (inclui Global Presets)

Se alguma vez já tentou alterar o número de colunas num site em que utiliza o Divi, provavelmente já teve alguma dificuldade em personalizar o número de colunas para tablet e mobile. A solução que apresento abaixo, utilizando algum código css, é bastante simples e pode ser implementada em apenas 2 minutos! Com este código é possível ter o controlo total do número de colunas, num máximo de seis.

Esta é uma solução mais robusta comparativamente a outros métodos como por exemplo o display:flex ou o width:50%.
Manteremos a consistência usando o mesmo tipo de código que o Divi já usa para colunas de desktop e aplicando-o também para telas menores.

No final do artigo, está também explicado como também é possível economizar tempo usando o Divi Global Presets para alterar o número de colunas no mobile e no tablet – sem ter que adicionar classes CSS personalizadas às suas linhas.

1. Adicione CSS para habilitar múltiplas colunas em mobile e tablets no Divi

A primeira etapa para alterar o número de colunas no Divi para mobile e tablets é adicionar algum CSS personalizado.

  1. Faça login no seu painel do WordPress
  2. Vá para Divi » Theme Costumizer » Additional CSS
  3. Copie e cole o CSS abaixo:

Sugestão: copiar todo o snippet CSS para acessar todas as opções de colunas adicionais para mobile e tablet. Se precisar apenas de uma opção específica, por exemplo, 2 colunas no mobile, só irá precisar de copiar essa parte específica do snippet (linhas 3 a 21 abaixo).

/*** Change Mobile Columns By DiviMundo.com ***/

/* 2 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .two-col-mob .et_pb_column {
width:47.25% !important;
}

html .et-db .two-col-mob .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}

html .et-db .two-col-mob .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}

/* 3 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .three-col-mob .et_pb_column {
width:29.6667% !important;
}

html .et-db .three-col-mob .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}

html .et-db .three-col-mob .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}

/* 4 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .four-col-mob .et_pb_column {
width:20.875% !important;
}

html .et-db .four-col-mob .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}

html .et-db .four-col-mob .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}

/* 5 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .five-col-mob .et_pb_column {
width:15.6% !important;
}

html .et-db .five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}

html .et-db .five-col-mob .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}

/* 6 Columns Mobile */
@media all and (max-width: 767px) {
html .et-db .six-col-mob .et_pb_column {
width:12.083% !important;
}

html .et-db .six-col-mob .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}

html .et-db .six-col-mob .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}

/*** Change Tablet Columns By DiviMundo.com ***/

/* 1 Column Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .one-col-tab .et_pb_column {
margin-right:0 !important;
width:100% !important;
}

html .et-db .one-col-tab .et_pb_column:not(:last-child) {
margin-bottom:30px !important;
}
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .two-col-tab .et_pb_column {
width:47.25% !important;
}

.two-col-tab .et_pb_column:nth-last-child(-n+2) {
margin-bottom:0;
}

html .et-db .two-col-tab .et_pb_column:not(:nth-child(2n)) {
margin-right:5.5% !important;
}
}

/* 3 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .three-col-tab .et_pb_column {
width:29.6667% !important;
}

html .et-db .three-col-tab .et_pb_column:nth-last-child(-n+3) {
margin-bottom:0;
}

html .et-db .three-col-tab .et_pb_column:not(:nth-child(3n)) {
margin-right:5.5% !important;
}
}

/* 4 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .four-col-tab .et_pb_column {
width:20.875% !important;
}

html .et-db .four-col-tab .et_pb_column:nth-last-child(-n+4) {
margin-bottom:0;
}

html .et-db .four-col-tab .et_pb_column:not(:nth-child(4n)) {
margin-right:5.5% !important;
}
}

/* 5 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .five-col-tab .et_pb_column {
width:15.6% !important;
}

.five-col-mob .et_pb_column:nth-last-child(-n+5) {
margin-bottom:0;
}

html .et-db .five-col-tab .et_pb_column:not(:nth-child(5n)) {
margin-right:5.5% !important;
}
}

/* 6 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
html .et-db .six-col-tab .et_pb_column {
width:12.083% !important;
}

html .et-db .six-col-tab .et_pb_column:nth-last-child(-n+6) {
margin-bottom:0;
}

html .et-db .six-col-tab .et_pb_column:not(:nth-child(6n)) {
margin-right:5.5% !important;
}
}

2. Adicionar classes CSS às suas Divi Rows para alterar o número de colunas em celulares e tablets

Para aplicar a nova contagem de colunas para mobile e tablet, só precisa de adicionar as classes CSS correspondentes à sua linha Divi.

  1. Habilite o Divi Visual Builder na página que você deseja editar
  2. Edite a linha (é a caixa com borda verde) clicando na roda dentada
  3. Vá para Avançado »ID CSS e classes» Classe CSS
  4. Adicione uma ou duas classes CSS, correspondentes ao número de colunas que você deseja usar, na tabela abaixo.

Nota: Às vezes, o Divi Visual Builder não exibe a nova estrutura de colunas da maneira correta no backend. Guarde e visualize no frontend para ver o resultado final.

Mobile Classes:

two-col-mob
three-col-mob
four-col-mob
…

Tablet Classes

two-col-tab
three-col-tab
four-col-tab
…

Nota: Para uma coluna simples não é necessário utilizar nenhuma classe. O campo poderá ficar simplesmente vazio.

3. Alterar os números das linhas no mobile através do Divi Global Presets

  1. Certifique-se de ter adicionado o CSS personalizado no Theme Costumizer (Ponto 1.)
  2. Crie uma nova linha numa página, post ou layout na Biblioteca Divi. Não importa qual estrutura de coluna escolhe para a linha.
  3. Feche o “Insert Module” e abra as “Row Settings” clicando na roda dentada
  4. Vá para Advanced » CSS ID & Classes
  5. Insira a(s) classe(s) CSS que você deseja adicionar à sua predefinição (Ponto 2.): por exemplo two-col-mob four-col-tab
  6. Agora, clique no botão Predefinição: Padrão na barra superior roxa das Row Settings
  7. Clique em Criar nova predefinição a partir dos estilos atuais
  8. Dê um nome claro ao seu novo Preset, por exemplo 2 col mob | 4 col tab
  9. Certifique-se de que Assign Preset To Default esteja definido como NO e guarde clicando no botão de marca de seleção verde
  10. Repita o processo para adicionar quantas predefinições de linha desejar.

E pronto! Para alterar o número de colunas no celular e no tablet, basta clicar no botão Predefinir nas configurações de linha e escolher uma da sua própria lista.

Palavras Chave: Divi