Um efeito interessante que os clientes gostam e que não está disponível no Divi é o carrossel. Porém, achei um tutorial bem simples de como fazer qualquer módulo Divi virar um carrossel. http://divisoup.com/r41-how-to-create-a-scrolling-module-carousel-in-divi/. Ele tem reprodução automática e o efeito de parar quando passa o mouse por cima.
A primeira coisa a fazer é criar uma seção e acrescentar uma linha de uma única coluna. Deixar a linha ocupando 100% da tela e diminuir espaço de calha para 1. Depois, acrescentar a classe ds-carousel na aba Avançado da linha.
Aí é o momento de adicionar os módulos. É preciso criar o primeiro módulo e estilizá-lo de acordo. Para que as imagens não fiquem coladas umas nas outras, deve ser definido um espaçamento ou margem no módulo. Depois, copiar aquele módulo quantas vezes necessárias e trocar o conteúdo de cada um. Quando estiver pronto, é necessário duplicar cada módulo e reordenar para que fique assim: 1 2 3 1 2 3. Quando isso estiver pronto, é hora do CSS. Esse código trabalha com variáveis, então a única coisa a modificar efetivamente são as variáveis.
/*Variáveis*/
:root {
--ds-module-number: 36;
--ds-columns-desktop: 8;
--ds-columns-tablet: 5;
--ds-columns-mobile: 3;
--ds-speed-desktop: 60s;
--ds-speed-tablet: 60s;
--ds-speed-mobile: 60s;
}A primeira variável é o número de módulos x2, ou seja, se são 18 logos como na imagem destacada e eu dupliquei todos os módulos, então são 36 módulos. A segunda, terceira e quarta variável, são os números de colunas em cada tipo de dispositivo e a quinta, sexta e sétima, a velocidade de rolagem. O restante do código não precisa ser alterado.
/*Responsive*/
@media all and (min-width: 981px) {
:root {
--ds-column-width: auto;
--ds-module-width: calc(100vw / var(--ds-columns-desktop));
--ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
--ds-scroll-speed: var(--ds-speed-desktop);
}
}
@media all and (max-width: 980px) {
:root {
--ds-column-width: auto;
--ds-module-width: calc(100vw / var(--ds-columns-tablet));
--ds-column-animation: calc(var(--ds-module-width) - (var(--ds-module-width) * 2));
--ds-scroll-speed: var(--ds-speed-tablet);
}
}
@media all and (max-width: 479px) {
:root {
--ds-module-width: calc(100vw / var(--ds-columns-mobile));
--ds-scroll-speed: var(--ds-speed-mobile);
}
}
/*Linha*/
.ds-carousel {
overflow: hidden;
}
/*Grid e Animação*/
.ds-carousel .et_pb_column {
display: grid;
grid-template-columns: repeat(var(--ds-module-number), var(--ds-module-width));
width: var(--ds-column-width);
-webkit-animation: scroll var(--ds-scroll-speed) linear infinite;
animation: scroll var(--ds-scroll-speed) linear infinite;
}
/*Mobile*/
.ds-carousel .et_pb_module {
width: var(--ds-module-width) !important;
}
/*Definir a Animação*/
@-webkit-keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
}
}
@keyframes scroll {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
transform: translateX(calc(var(--ds-column-animation) * (var(--ds-module-number) / 2)));
}
}
/*Pausa animação on hover*/
.ds-carousel .et_pb_column:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}Eu também fiz um carrossel de depoimentos na loja virtual de uma cliente. Eram 6 depoimentos, divididos em 3 colunas. Nesse caso, colocar uma margem não dava o efeito esperado por causa do fundo cinza do módulo, então coloquei uma borda branca de 20px na direita e na esquerda.
Também existe outro tutorial ensinando a fazer um carrossel com botões de rolagem. Fica aqui para arquivo: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-clickable-carousel-of-divi-modules.
