Divi Plugin Highlight: Divi Carousel Module

O DIVI Carousel Module é um plug-in de terceiros para Divi e Extra que adiciona um controle deslizante de carrossel avançado ao Divi Builder. Você tem controle de quase tudo no módulo para criar praticamente qualquer tipo de carrossel de que precisa para o seu site Divi ou Extra. Neste artigo, vamos dar uma olhada no Divi Carousel Module e ver o que ele pode fazer e como é fácil de usar.

Instalação e ativação do módulo Divi Carousel

Faça upload e ative o plugin normalmente. Um novo item de menu é adicionado ao painel denominado DiviGear. Acesse este menu e adicione sua chave de licença.

Módulo Carrossel Divi no Divi Builder

Um novo módulo é adicionado ao Divi Builder chamado Divi Carousel.

O módulo inclui uma área para adicionar novos itens. A guia Conteúdo tem as configurações do controle deslizante, que permite escolher quantos slides mostrar com base no dispositivo que o usuário está usando, habilitar o multislide, definir a duração da transição, etc. Habilitar slide central, loop, reprodução automática, navegação por setas e navegação por pontos . Defina o espaçamento do item, habilite a altura igual e o alinhamento vertical. As configurações avançadas permitem que você escolha o efeito do controle deslizante.

A guia Design inclui configurações de sobreposição, imagem (largura), borda da imagem, título e corpo do texto, cor, espaçamento e borda. Isso inclui personalizações de cores para navegação com setas e pontos.

A guia Avançado tem todos os campos CSS que você espera, além de configurações para visibilidade e transição. Ele adiciona campos CSS para título, conteúdo, imagem e botão.

As configurações de item do carrossel também incluem as três guias. Essas configurações substituem tudo o que está definido nas configurações do módulo principal. A guia Conteúdo possui uma área para o conteúdo principal, título e link da imagem, configurações de botão, configurações de imagem e plano de fundo.

A guia Design inclui configurações para o texto do título, estilo do conteúdo (corpo do texto), botão, espaçamento e sombra da caixa. Estas são as configurações de design padrão que você veria na maioria dos módulos Divi. A guia Avançado contém as configurações básicas encontradas na maioria dos módulos.

Para as configurações de imagem, você pode usar imagens ou ícones.

Adicione quantos slides desejar. Os slides são exibidos lado a lado de acordo com o número que você definiu para exibir. Este está configurado para exibir quatro. Claro, você pode arrastá-los e soltá-los na ordem que desejar.

Neste, ajustei o espaçamento do item para 100. A principal diferença que mostra no meu exemplo é o texto. Agora exibe menos palavras por linha.

Este usa navegação por setas. Eu configurei para mostrar do lado de fora do slide. Eu defini o espaçamento do item para 1. É mais óbvio se você usar cores de fundo.

Eu configurei este para mostrar dois slides. Ele está mostrando a navegação por pontos.

Aqui está uma olhada nas configurações avançadas. Eu defini o efeito do controle deslizante para Coverflow. Isso abre uma opção de rotação e sombra. Este recurso mostra o que realmente diferencia o módulo de um controle deslizante padrão. Estas são as configurações padrão.

Agora eu configurei a rotação para 100. Os slides são inclinados ainda mais 3D para o lado esquerdo, longe da tela.

Aqui está a mesma rotação, mas sem a sombra Coverflow.

Exemplos de módulo de carrossel Divi

Um dos meus usos favoritos para um carrossel é mostrar logotipos de clientes ou produtos. Para este exemplo, adicionei o módulo à página de portfólio da página inicial do desenvolvedor de aplicativos. Eu o configurei para mostrar 3 logotipos de empresas, para fazer um loop de rolagem e para reproduzir automaticamente para que o visitante não precise navegar por eles.

Também funciona para mostrar os projetos nos quais você trabalhou. Para este, adicionei vários projetos com botões para que o visitante possa ver o projeto. Mudei a cor do texto do botão para branco e adicionei uma sombra de caixa ao botão. Tornei as setas brancas e defini a opacidade de seu plano de fundo para quase transparente.

Aqui, adicionei um plano de fundo ao slide, tornei-o semitransparente e adicionei sombra de caixa. O espaçamento inclui o botão, a imagem e o preenchimento do conteúdo. Adicionei espaçamento ao botão e à imagem.

Este usa o efeito de controle deslizante Overflow. Estas são as configurações padrão.

Para este, eu o configurei para centralizar o slide. Quando usado com as configurações de estouro, ele centraliza o slide do meio e os inclina em ambos os lados para que fiquem um de frente para o outro. Ele está configurado para exibir quatro slides.

Este está configurado para exibir 3 slides. Eu configurei o Rotate para 80.

Este está configurado para exibir 6 slides. Girar é definido como padrão (50).

Este mostra 6 slides sem Center Slide ou Overflow habilitado.

Este mostra 6 com o Center Slide habilitado.

Para este exemplo, estou usando o módulo como um controle deslizante do menu de comida. Ao adicionar uma imagem, um texto e um botão, ele na verdade cria um controle deslizante de sinopses. As imagens são definidas para largura de 100. Eu adicionei uma sobreposição, um botão para comprar cada item (o botão leva você para a página do produto para o item) e navegação por pontos. Eu estilizei a sobreposição e o ícone de sobreposição, bem como os pontos para os slides ativos e não ativos. Ele se encaixa perfeitamente no layout do café.

Para este, eu adicionei a navegação por seta e o estilizei para combinar com os botões. Tenho que mostrar as setas ao pairar. Você pode definir as setas dentro ou fora do controle deslizante e alterar sua cor. Você não pode alterar seu tamanho nas configurações do módulo.

Este usa o efeito Coverflow. Estou passando o mouse sobre o slide esquerdo para mostrar a sobreposição e as setas.

Para este, adicionei um fundo e uma sombra de caixa a apenas um dos slides. Isso pode ser usado para mostrar o que está em promoção ou destacar a melhor oferta.

Para este, estou usando apenas ícones. Coloquei o módulo próximo a um conjunto de módulos de blurb e configurei 6 links de mídia social. Eles são estilizados para combinar com as sinopses. Clicar no ícone abre a rede social. Eu o configurei para deslizar a cada segundo automaticamente.

A exibição de vários slides corta parte de um ícone, o que proporciona um bom visual à medida que o controle deslizante é animado.

Para este exemplo, eu queria construir um controle deslizante de tabela de preços simples. Simplifiquei os preços do pacote de layout do campo de golfe.

Agora adicionei a sombra da caixa. No início, não consegui fazer com que a sombra vertical ficasse abaixo do slide. Então percebi que os slides estavam tocando as laterais do contêiner do módulo. Eu adicionei o preenchimento do módulo e pude adicionar sombras de caixa em todos os lados dos slides.

Você também pode ajustar botão, imagem e preenchimento de conteúdo para cada slide individualmente. Neste exemplo, estou ajustando o preenchimento do slide à esquerda.

Eu adicionei setas e as estilizei para combinar com os elementos do layout.

Para este exemplo, adicionei imagens, alterei a sombra da caixa e adicionei um pouco mais de preenchimento de conteúdo para que a sombra da caixa seja exibida totalmente. Também movi as setas para fora dos slides.

Agora adicionei um botão. Eu ajustei os estilos dos botões, incluindo cores, raio da borda, tamanho do texto e adicionei uma caixa de sombra que combina com os slides.

Claro, como o módulo inclui uma área de conteúdo, você pode adicionar qualquer tipo de conteúdo que desejar, incluindo mídia. Adicionei imagens que correspondem ao layout. Todo o conteúdo é colocado sob o título. As imagens parecem ótimas neste local.

Esta é a aparência do módulo no layout do campo de golfe. O layout original tinha muitos recursos de preço. Usando o módulo Divi Carousel, todos os preços ainda estão lá, mas são mostrados nos slides. Parece que pertence a este layout.

Também funciona muito bem com o Extra. Neste exemplo, configurei a página para não mostrar uma barra lateral.

Veja como fica com uma barra lateral (embora eu não tenha adicionado nenhum widget para a barra lateral, o tamanho é o mesmo). Você pode ver aqui que o módulo é responsivo.

Preço do módulo Divi Carousel

O Divi Carousel Module está disponível no site do desenvolvedor. Existem duas opções disponíveis:

• Único site - $ 15
• Sites ilimitados - $ 29

Documentação e suporte do módulo Divi Carousel

A documentação está disponível no menu do painel DiviGear. Selecione a guia Documentação. Isso fornece links para um vídeo passo a passo de 4 minutos no canal DiviGear no YouTube. O suporte a tíquetes é fornecido por meio do Freshdesk.

Reflexões finais

O Divi Carousel Module é uma maneira fácil de adicionar um controle deslizante de carrossel ao Divi Builder. É intuitivo e, na verdade, tem mais personalizações do que eu esperava. Algumas vezes não consegui clonar um slide corretamente, mas isso pode ter sido um problema para mim. Lembre-se de dar a cada slide um rótulo de administrador ou eles mostrarão o nome do item dentro do módulo, o que torna difícil diferenciá-los.

Gosto que tenha imagens, conteúdo e botões separadamente. Isso permite que você crie cartões, sinopses, imagens, texto, ícones de exibição ou qualquer coisa que você precise mostrar em um controle deslizante. Você pode adicionar uma imagem ao topo do controle deslizante e ainda ser capaz de adicionar mais à área de conteúdo.

Divi Carousel Module é um excelente controle deslizante de carrossel. Ele está disponível no site do desenvolvedor e nos mercados Divi.

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

Imagem em destaque via Anatolir / shutterstock.com