Divi Plugin Highlight: Divi Product Carousel Module

Divi Product Carousel Module é um plugin de terceiros para Divi que exibe produtos WooCommerce em um controle deslizante de carrossel. Construa um carrossel de produtos e coloque-o em qualquer layout Divi. Você pode estilizá-los e escolher várias opções de layout e exibição. Neste artigo, vamos dar uma olhada no Divi Product Carousel Module, ver seus recursos e ver como é fácil de usar.

O Divi Product Carousel Module está disponível no site do desenvolvedor e nos mercados Divi.

Módulo de carrossel de produtos Divi

Depois de fazer o upload e ativar o plugin, vá para DiviGear no menu do painel e ative sua licença. Se você tiver vários plug-ins deste desenvolvedor, precisará selecionar a guia do plug-in.

Um novo módulo é adicionado ao Divi Builder chamado Product Carousel. Inclui um ícone roxo para se destacar da multidão.

As configurações incluem as guias Conteúdo, Design e Avançado. A guia Conteúdo possui configurações para o conteúdo WooCommerce. Escolha o tipo de produto recente, em destaque, venda, mais vendido, com melhor classificação ou categoria de produto na caixa suspensa. Insira um número para a contagem de produtos que você deseja exibir. Escolha a ordem de classificação de popularidade, avaliação, data ou preço. Você também pode ativar o botão Adicionar ao carrinho e a descrição. Mostre a descrição completa ou um trecho.

As configurações do carrossel permitem que você escolha o número de colunas com base no dispositivo usado. Também inclui vários slides (permite que deslize pelo número de slides na tela ou desative para deslizar um slide por vez), espaçamento de item, duração da transição, centro, loop, reprodução automática, navegação por ponto e seta, alinhamento e efeito de slide. Outras configurações incluem o link e o plano de fundo. É interessante que você possa usar os pontos e as setas juntos. Você pode colocar os pontos à direita, no meio ou à esquerda na parte inferior do slide.

A guia Design inclui configurações de sobreposição, título, preço, descrição, crachá de venda, botão adicionar ao carrinho, revisão, seta, pontos, imagem, foco, espaçamento, borda e sombra da caixa. Outras configurações são adicionadas com base nas seleções que você escolher. Cada uma dessas configurações é extensa.

A guia Avançado inclui os recursos esperados de CSS, visibilidade e transições. O CSS personalizado inclui campos para produto, imagem, título, preço, emblema de venda, seta anterior, seta seguinte e pontos. Isso dá a você muito controle com CSS.

Configurações do módulo do carrossel do produto Divi

Você pode mover os títulos e preços para a parte superior ou inferior. Neste exemplo, movi ambos para o topo e alterei seu tamanho e cor. Eu criei o estilo do emblema de venda alterando a cor do plano de fundo e o tamanho da fonte. Eu também estilizei os pontos inativos e ativos.

Veja como fica no front end. Também adicionei uma sobreposição e o botão Adicionar ao carrinho aparece ao passar o mouse. Você pode definir o estilo desse botão para a passagem do mouse sobreposta e a passagem do botão.

Neste, selecionei 6 colunas, movi todo o texto de volta para a parte inferior, ajustei as cores do texto e adicionei alguma opacidade ao botão adicionar ao carrinho. Eu deixei a opacidade do mouse como padrão, então o botão ficará sólido se você passar o mouse sobre o próprio botão.

Para este, eu defini o layout para 4 colunas. Eu adicionei setas e mudei as cores das setas e dos pontos. Também adicionei um plano de fundo ao título, preço e descrição e alterei todo o texto para branco. Para que o texto fique bem alinhado dentro da caixa, adicionei um pouco de preenchimento de conteúdo. Também inclui preenchimento de conteúdo para a parte superior (no caso de você colocar o título ou preço acima da imagem).

Veja como fica no front end. A seta à direita é mais clara para indicar que está no final dos produtos que pode exibir. Se eu configurasse para loop, seria a cor normal.

Veja como fica com Overflow selecionado. Ele fornece um bom efeito de cartão 3D. Você pode ajustar a quantidade de rotação e ativar a sombra do slide.

Neste exemplo, dei aos cartões uma sombra de caixa e ajustei o desfoque. Também mudei as setas para um círculo e ajustei as cores.

Veja como fica no front end com o Center Slide habilitado. Este é o layout de 4 colunas. Ele é exibido de maneira diferente quando você seleciona Centralizar Slide.

Este é o layout de 5 colunas usando as mesmas configurações do exemplo acima.

O carrossel de produtos se encaixa bem nos layouts Divi. Neste exemplo, substituí o módulo Divi shop pelo Divi Product Carousel Module e o estilizei para combinar com o layout.

Neste, movi o título para o topo, adicionei um pouco de preenchimento na parte superior e inferior e deixei os títulos semi-negrito. Também alterei a cor do botão Adicionar ao carrinho para corresponder ao layout.

Para este, ajustei as bordas dos slides e das imagens para criar cantos arredondados. Eu fui em frente e fiz as imagens em círculos. Eu também adicionei uma sombra de caixa.

Parece excelente no layout. No entanto, ele esconde a maior parte do crachá de venda. Provavelmente existe uma maneira de contornar isso com CSS.

Este usa Overflow com o layout de 3 colunas.

Para este, removi a borda da imagem, mas mantive a borda para os slides. Eu adicionei uma sombra de caixa e ajustei sua força e posição.

Ele também mostra a classificação por estrelas dos comentários ao passar o mouse. Ele coloca a classificação ao lado do botão Adicionar ao carrinho. Ele os reúne com uma animação legal. Estas são as configurações padrão. Você pode definir o estilo das cores do plano de fundo e das estrelas.

Neste, eu estilizei as classificações para combinar com os elementos do layout.

Para este, movi o preço para a parte superior e o título para a parte inferior. Eu adicionei uma descrição e uma sobreposição. Mudei a navegação de pontos para a direita. Tive que adicionar um pouco de preenchimento para a sombra da caixa aparecer nas laterais. Sem o acolchoamento, ele posiciona o produto na borda do espaço do módulo.

Demonstrações do módulo do carrossel do produto Divi

Existem atualmente 13 demos para download no site do desenvolvedor. Esses são layouts que você pode carregar na Biblioteca Divi e usar com qualquer layout Divi. Todos incluem estilo para o módulo Divi Product Carousel e alguns incluem outros módulos com estilo e planos de fundo. Esses são bons para obter um ponto de partida com os designs do carrossel do produto e para mostrar algumas das coisas que podem ser feitas com o módulo. Vejamos alguns deles.

Este coloca os títulos na parte superior, estilos na parte superior e inferior para combinar, adiciona setas circuladas fora das imagens e inclui pontos. Também possui uma borda inferior para destacar os slides. Eu gosto das cores fortes. A parte superior e inferior têm um pouco de transparência, de modo que os padrões de fundo aparecem. Este layout inclui um módulo de texto estilizado para o título.

Vários dos layouts incluem outros módulos com estilo. Este usa um layout de duas colunas para adicionar uma chamada à ação usando módulos de texto e botão.

Veja como fica do front end. Inclui uma borda, títulos na parte superior e duas cores para o botão Adicionar ao carrinho. As setas aparecem dentro das imagens do módulo.

Este inclui um fundo verde e slides estilizados para combinar. O botão Adicionar ao carrinho fica verde claro quando você passa o mouse sobre o produto e verde escuro quando você passa o mouse sobre o botão. Inclui um módulo de texto estilizado para o título.

Este inclui o estilo azul para os crachás de venda, setas redondas fora das imagens e o botão Adicionar ao carrinho. Ele adiciona uma pequena borda aos slides. Ele exibe os slides com o efeito Overflow.

Este também exibe produtos com o efeito Overflow. Também usa azul para as setas e o botão Adicionar ao carrinho. O título é movido para o topo. A sobreposição é branca com alta opacidade e o emblema de venda é vermelho.

Este inclui um plano de fundo estilizado e adiciona uma borda, botão Adicionar ao carrinho estilizado, emblema de venda e setas circuladas. A sobreposição é branca. Ele coloca o preço no topo e todos os outros dados na parte inferior.

Preço e documentação do módulo de carrossel de produtos Divi

Existem duas opções de compra para o Módulo Carrossel de Produtos Divi:

• Único site - $ 19
• Sites ilimitados - $ 39

Ele está disponível no site do desenvolvedor e nos mercados.

A documentação é fornecida por um vídeo do YouTube que o conduz pelos recursos. Você encontrará um link para ele no menu DiviGear no painel. Se você tiver mais de um produto DiviGear, selecione a guia do produto e selecione Documentação.

Reflexões finais

O Divi Product Carousel é fácil de usar e ótimo para destacar seus produtos. Mesmo se você não quiser exibi-los como um controle deslizante, há várias opções de estilo e apresentação de produtos para valer a pena considerá-los. Não funcionei muito bem com o Extra. Eu adoraria ver o Extra suportado, pois ele já tem muitos recursos do WooCommerce e é uma ótima plataforma para construir lojas WooCommerce.

Eu gosto de ter demos para download. Eles incluem os planos de fundo e o estilo do módulo. Eles são ótimos para dar a você um ponto de partida ou despertar sua imaginação para apresentar seus produtos WooCommerce dentro de seus layouts Divi.

Se você estiver interessado em apresentar seus produtos WooCommerce em um carrossel, ou apenas ter mais algumas opções de design, vale a pena dar uma olhada no Divi Product Carousel Module. Ele está disponível no site do desenvolvedor e nos mercados Divi.

Nós queremos ouvir de você. Você já experimentou o Divi Product Carousel Module? Deixe-nos saber o que você pensa sobre isso nos comentários.

Letras de imagens em destaque-Shmetters / shutterstock.com