Tudo o que você precisa saber sobre o módulo de carrossel de grupo do Divi 5

Um dos mais recentes módulos do Divi 5, o Carousel do grupo, está aqui para facilitar a criação de carrosséis e animações visualmente impressionantes para o seu site da Divi. Essa adição poderosa permite que os designers da web criem carrosséis de sites envolventes sem a necessidade de plugins de terceiros ou CSS personalizados. Esteja você construindo um portfólio elegante, uma loja de comércio eletrônico ou um blog, o módulo de carrossel em grupo desbloqueia novos níveis de criatividade.

Nesta postagem, abordaremos tudo o que você precisa saber sobre o módulo de carrossel do grupo, completo com exemplos e um guia passo a passo sobre como usá-lo. Vamos mergulhar!

Qual é o módulo de carrossel do grupo?

O módulo de carrossel do grupo no Divi 5 permite criar carrosséis e controles deslizantes dinâmicos e atraentes que podem adicionar um pouco de movimento e interatividade ao seu site. Esteja você mostrando peças, membros da equipe ou produtos da equipe, este módulo versátil permite criar praticamente qualquer tipo de carrossel, incluindo os post baseados que puxam o conteúdo dinamicamente.

Cada slide é uma tela em branco, permitindo que você adicione qualquer módulo Divi, tornando -o uma ótima ferramenta para designs criativos e funcionais.

Principais recursos

O módulo de carrossel do grupo é construído com base na base otimizada do Divi 5, garantindo tempos de carregamento rápido e transições suaves. A interface de arrastar e soltar do Divi 5 permite adicionar facilmente módulos aos controles deslizantes, com controles responsivos a layouts ajustados para desktop, tablet e celular, mantendo o desempenho rápido.

Slides personalizáveis

O módulo de carrossel do grupo oferece controle completo sobre o número de controles deslizantes, seu conteúdo e configurações de animação. Você pode ajustar as opções de transições, tempo e navegação deslizantes para criar uma experiência contínua do usuário que corresponda à sua visão.

Conteúdo dinâmico com loop construtor

Integrado ao construtor de loops do Divi 5, o módulo suporta carrosséis dinâmicos com base em postagens, termos ou dados do usuário. Por exemplo, você pode criar um carrossel de depoimento usando tipos de postagens personalizados e campos personalizados avançados (ACF), puxando automaticamente as análises de clientes ou estudos de caso sem precisar de atualizações manuais.

Flexibilidade do projeto

Você pode aproveitar as configurações de design do Divi 5 para criar estilos de carrossel exclusivos. Aplique transformações, filtros, sombras de caixa ou efeitos de pairar nos slides e personalizar módulos individuais dentro do grupo para criar slides visualmente atraentes que mantêm seus visitantes envolvidos.

Como usar o módulo de carrossel do grupo

A configuração de um carrossel em grupo no Divi 5 é intuitiva e flexível. Comece adicionando uma linha de coluna única à página. Em seguida, selecione o módulo de carrossel do grupo no Visual Builder e adicione -o à sua página.

Na guia Conteúdo , clique para expandir o menu suspenso Configurações do Carrossel .

Ative a rotação automática , o modo central e defina os slides para mostrar como 3 .

Ativar Mostrar navegação por ponto no menu suspenso Elements. Você pode deixar o show setas ativadas ou desativá -lo.

Atribuir estilo ao primeiro grupo

Com nossas configurações de carrossel no lugar, podemos adicionar nosso primeiro grupo. Clique no ícone Configurações do grupo para criar as configurações.

Na guia Conteúdo , expanda o menu suspenso em segundo plano . Clique na guia Imagem em segundo plano e clique em +Adicione a imagem de fundo para adicionar uma imagem ao grupo.

Em seguida, navegue até a guia Design . Expanda o menu suspenso de layout e defina o conteúdo justificado para terminar .

Em seguida, expanda o menu suspenso de espaçamento e adicione a margem de 5% à esquerda e à direita do nosso grupo. Isso adicionará um pouco de espaço para respirar entre os grupos no carrossel.

Defina o preenchimento superior para 100%. Aplique o preenchimento de 25px à esquerda e à direita.

Adicione conteúdo ao primeiro grupo

Podemos voltar nossa atenção à adição de conteúdo ao nosso grupo. Clique no ícone Black + e adicione um módulo de divisor .

Navegue até a guia Design . Expanda o menu suspenso Line e altere a cor para #FFFFFF .

Em seguida, expanda a guia Dimensionamento. Defina o peso do divisor como 4px e a largura para 15% .

Em seguida, adicione um módulo de título ao grupo. Dê um título ao título .

Alterne para a guia Design . Em Texto do cabeçalho , defina o nível de cabeçalho para H2 (ou qualquer outro cabeçalho desejar) , selecione Inter para a fonte do cabeçalho , escolha Luz para o peso da fonte, #FFFFFF para a cor do texto do cabeçalho e 2em para o tamanho do texto do cabeçalho .

Antes de duplicar nosso grupo, vamos retornar à guia Design e ajustar a lacuna vertical para 10px. Isso eliminará qualquer espaço vertical desnecessário entre os módulos.

Adicionando grupos adicionais

Agora que nosso primeiro grupo foi projetado, podemos copiar o grupo de estilo e simplesmente trocar nosso conteúdo (imagem e título de fundo) pelo carrossel. Duplique o grupo oito vezes e teremos nove slides no total.

Depois de duplicar o grupo, seu carrossel em grupo deve ficar assim.

Enquanto estamos aqui, é uma boa ideia dar a cada grupo um nome único para que eles sejam mais fáceis de identificar. Clique no ícone Configurações do primeiro grupo e role para baixo até o rótulo do administrador . Nomeie o grupo Grécia.

Clique no segundo grupo no carrossel. Expanda a guia de fundo e substitua a imagem por uma nova.

Enquanto estiver na guia Conteúdo , não se esqueça de adicionar um nome ao campo da etiqueta do administrador . Em seguida, altere o título do módulo de cabeçalho para Maine .

Repita as etapas com todos os grupos adicionais. Quando terminar, seu carrossel deve ficar assim. Enquanto estiver no Visual Builder, você pode usar os pontos de navegação para percorrer o carrossel para garantir que você não tenha perdido nenhuma etapa.

Como você pode ver, o texto em alguns de nossos slides é um pouco difícil de ler. Podemos corrigir isso na guia Design no nível do carrossel sem precisar editar cada item de grupo individualmente.

Grupos de personalização e grupos ativos

No módulo de carrossel do grupo, você pode estilizar grupos ativos e inativos. A chave é que o próprio módulo de carrossel do grupo serve como uma tela em branco e você aplica estilo aos grupos de módulos dentro dele. Isso permite um alto nível de personalização, permitindo criar layouts e efeitos exclusivos.

Agora que criamos um carrossel em grupo, vá para a guia Design nas configurações do carrossel principal.

Expanda o menu suspenso dos grupos . Esta guia controla as configurações de design dos grupos de módulos contidos no carrossel do grupo. Quaisquer configurações que você aplicar aqui serão aplicadas aos módulos de grupo inativo .

Expanda a guia Background . Aplicaremos um gradiente de luz nas guias inativas para garantir que o texto seja legível. Defina a primeira parada de gradiente como #000000 com uma opacidade de 0% . Ajuste o controle deslizante ligeiramente para a direita. Ative o gradiente de local acima da imagem da imagem de fundo .

Defina a parada de 2º gradiente como #000000 com uma opacidade de 40% .

Ative o gradiente de local acima da imagem da imagem de fundo .

Em seguida, localize a guia Filtros . Reduziremos a saturação nos grupos inativos para dar às imagens de fundo um efeito em preto e branco. Localize o controle deslizante saturado e defina -o como 0 .

Em seguida, expanda o menu suspenso dos grupos ativos e clique na guia em segundo plano . Aplique as mesmas configurações de gradiente acima.

Certifique -se de ativar o gradiente do local acima da imagem da imagem de fundo .

Expanda o menu suspenso de filtros em grupos ativos e ajuste o controle deslizante de saturação para 75% . Isso colorirá apenas o item de carrossel ativo, permitindo que os usuários identifiquem o slide ativo no carrossel.

Personalize o layout responsivo

Agora que nosso carrossel em grupo está pronto para computadores, usaremos os pontos de interrupção responsivos personalizáveis da Divi 5 para estilizar a versão móvel do nosso carrossel. Por padrão, o Divi 5 permite três pontos de interrupção. Você pode usar todos os sete pontos de interrupção disponíveis se quiser mais controle sobre vários tamanhos de dispositivo. Clique no menu ElipSis no meio da barra superior do Visual Builder.

Ative os pontos de interrupção que você deseja e clique em Salvar para continuar.

Clique no ponto de interrupção do tablet para visualizar como o layout parecerá em dispositivos de tablets. Role para baixo até as configurações do carrossel e ajuste os slides para mostrar para 1 . Isso também se aplicará a pontos de interrupção menores, como todo o telefone e telefone .

Por fim, clique no botão Visualizar no canto superior esquerdo da tela para ver seu carrossel em grupo em uma nova guia.

Depois de terminar, seu carrossel em grupo deve se parecer com o vídeo abaixo.

É isso! Construir um carrossel em grupo no Divi 5 é direto e oferece resultados incríveis.

Integração com o construtor de loops do Divi 5

O Loop Builder do Divi 5 é um recurso poderoso que pode transformar o módulo de grupo em uma tela de conteúdo dinâmico. Esse recurso permite que os designers criem carrosséis dinâmicos e automatizados que retiram o conteúdo diretamente do WordPress, transformando conteúdo estático em displays de produtos, arquivos de categoria ou carrosséis membros da equipe com alguns cliques.

Ao integrar o Loop Builder ao carrossel do grupo, o Divi 5 capacita os usuários a criar carrosséis sofisticados e orientados por conteúdo com um trabalho manual mínimo, tornando-o um recurso de destaque para o dinâmico design da web.

O Loop Builder permite que o carrossel do grupo pague dinamicamente através de postagens, termos ou dados do usuário, criando carrosséis que refletem automaticamente o conteúdo mais recente do seu site. Como o Loop Builder extrai dados diretamente do seu banco de dados do WordPress, você pode mostrar facilmente postagens, categorias de produtos ou perfis de usuário.

Por exemplo, você pode criar uma postagem de blog com carrossel usando um tipo de postagem ou um controle deslizante de categoria de produto usando termos de WooCommerce, tornando o módulo incrivelmente versátil para necessidades de conteúdo dinâmico.

Exemplos do mundo real do módulo de carrossel do grupo

A flexibilidade do módulo de carrossel do grupo o torna adequado para vários casos de uso. Aqui estão alguns exemplos do mundo real para mostrar o que é possível.

Slider de largura total / de tela cheia personalizada

Neste exemplo, criamos um controle deslizante de largura/tela cheia para apresentar shakes para uma sorveteria. Definimos o carrossel para exibir um slide de cada vez, cada um contendo uma imagem de fundo, dois títulos e um botão de frase de chamariz. Também definimos a animação para avançar para o próximo slide após um atraso de 3 segundos. Você pode alcançar essa aparência definindo o carrossel do grupo e a seção para 100VH.

Showcase de membros da equipe

Quando você deseja apresentar aos membros da equipe em seu site, o uso do módulo de carrossel do grupo é uma ótima maneira de fazê -lo. Neste exemplo, configuramos um layout de 3 colunas em nosso carrossel. Cada slide inclui um tiro na cabeça, nome, função e links de mídia social usando o módulo Social Follow da Divi. Defina o carrossel para rolar um slide de cada vez para uma aparência limpa e profissional.

Categoria mostra

O módulo de carrossel de grupo do Divi 5 funciona perfeitamente com o construtor de loops. Isso permite criar controles deslizantes envolventes que apresentam as categorias de produtos do seu site. Cada slide puxa dinamicamente o nome da categoria e a imagem em destaque, tornando -a uma ótima maneira de mostrar seus produtos. Neste exemplo, usamos efeitos de filtro para

Depoimentos

O módulo de carrossel do grupo também é ótimo para criar um controle deslizante de depoimento. Você pode mostrar facilmente suas melhores avaliações de clientes, depoimentos de clientes e muito mais. Graças ao módulo de carrossel do grupo, você não está mais restrito a colunas estáticas ou plugins externos.

Baixe os arquivos

Baixe gratuitamente

Junte -se ao boletim informativo Divi e enviaremos um e -mail para você uma cópia do pacote de layout da página de destino do Divi Ultimate, além de toneladas de outros recursos, dicas e truques incríveis e gratuitos. Siga adiante e você será um mestre em divi em pouco tempo. Se você já está inscrito, basta digitar seu endereço de e -mail abaixo e clique em Download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Verifique seu endereço de e -mail para confirmar sua assinatura e ter acesso a pacotes semanais de layout semanal gratuitos!

Desbloquear possibilidades criativas com o módulo de carrossel da Divi 5

O módulo de carrossel de grupo do Divi 5 é uma adição poderosa que desbloqueia novas possibilidades para criar sites dinâmicos de divi. Desde a criação de controles deslizantes de produtos envolventes a depoimentos, este módulo facilita a adição de conteúdo interativo aos seus sites DIVI.

Agora que a renovação da Divi 5 abriu o caminho para mais recursos, é o momento perfeito para mergulhar! Você já experimentou o módulo de carrossel do grupo? Informe -nos nos comentários abaixo.