O Divi tem uma limitação de no máximo 6 colunas por linha e, na seção Especializada, são 4 colunas no máximo. Precisei colocar 7 imagens em linha e, pra isso, é preciso um pouco de código.
O primeiro passo é adicionar uma linha de coluna única. Depois acrescentar o tipo de módulo que você deseja que, no caso, era imagem. No módulo imagem então, é necessário acrescentar a classe seven-columns. Após, deve-se duplicar esse módulo as vezes necessárias e alterar as imagens. Aí adiciona-se o seguinte código:
/***Logos - 7 colunas***/
.seven-columns {
width: 14.28%;
float: left;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Tablet*/
@media (max-width: 980px){
.seven-columns {
width: 25%;
}
}
/*Celular*/
@media all and (max-width: 767px) {
.seven-columns {
width: 100%;
}
}O top e o transform são para centralizar verticalmente as imagens. O meu segundo problema foi que, para tablet, precisava que fizesse uma linha de quatro e outra de 3. Aí acrescentei a classe tres-colunas apenas nas imagens que precisavam quebrar na segunda linha e acrescentei este código:
/*Tablet*/
@media (max-width: 980px){
.seven-columns.tres-colunas-tablet {
width: 33%;
}
}
/*Celular*/
@media all and (max-width: 767px) {
.seven-columns.tres-colunas-tablet {
width: 100%;
}
}Nesse artigo no blog do Elegant Themes, tem o cálculo para até 10 colunas: https://www.elegantthemes.com/blog/divi-resources/add-more-columns-to-your-divi-builder-posts-or-pages.
