Como construir um slider de tela cheia personalizada com Divi 5 (Download grátis)

Um dos lançamentos mais recentes da Divi 5 apresenta o módulo de carrossel do grupo, um recurso para criar controles deslizantes e carrosséis de envolvimento personalizados para o seu site WordPress. Você pode mostrar facilmente seu portfólio, produtos, um herói imersivo ou um controle deslizante de tela cheia e levar o design do seu site a novos patamares.

Nesta postagem, forneceremos um guia passo a passo para criar um controle deslizante de tela cheia usando o módulo de carrossel do grupo. Vamos mergulhar!

Compreendendo o módulo de carrossel do grupo

O módulo de carrossel do grupo é uma adição versátil ao Divi 5, permitindo que você crie controles deslizantes e carrosséis dinâmicos.

Diferentemente dos módulos tradicionais, ele suporta uma ampla gama de layouts, desde carrosséis simples de imagem a controles deslizantes complexos e pós-baseados em Loop Builder. Essa flexibilidade o torna perfeito para mostrar conteúdo como portfólios, depoimentos ou galerias de produtos de uma maneira atraente.

Principais características do módulo de carrossel do grupo

O módulo de carrossel do grupo brilha com recursos robustos. Ele suporta loops de conteúdo dinâmico, permitindo que você puxe postagens, páginas ou tipos de postagem personalizados diretamente no seu controle deslizante usando o loop Builder.

O módulo também permite que você use qualquer módulo Divi para criar belos controles deslizantes envolventes usando linhas aninhadas e grupos de módulos. Você pode personalizar a navegação com setas e pontos de paginação, personalizando sua posição, cor e outros estilos para combinar com seu site.

As opções de reprodução automática, velocidades ajustáveis ​​e recursos de pausa, proporcionam uma experiência atraente para seus visitantes, garantindo que eles permaneçam no seu site por mais tempo. Além disso, o módulo é totalmente personalizável, permitindo que você crie layouts de tela cheia e largura completa, tornando -o ideal para seções de herói, serviço ou recurso em seu site.

Como construir um controle deslizante de tela cheia com o módulo de carrossel de grupo Divi 5

Neste tutorial, mostraremos como usar o módulo de carrossel do grupo para criar um controle deslizante de tela cheia para seus próximos sites Divi 5. No final, você terá o conjunto de habilidades para construir controles deslizantes cativantes para incentivar seus visitantes a agir.

Etapa 1: Configurando uma nova página

Crie uma nova página, adicione um título e clique em Use o Divi Builder para começar.

Quando o Visual Builder abrir, escolha Build From Scratch sob as opções Criar sua página .

Passe o mouse sobre a seção em sua nova página para revelar o ícone de configurações . Clique nele para revelar as configurações da seção.

Navegue até a guia Design . Clique no menu suspenso Layout . Sob justificar o conteúdo , selecione Center . No campo de itens alinhados , selecione Center . Isso permitirá que o conteúdo de nossa seção seja centralizado horizontal e verticalmente.

Em seguida, ajustaremos as configurações de espaçamento da seção. Expanda o menu suspenso de espaçamento . Defina a margem para 0px , superior e inferior. Em preenchimento , defina a parte superior e inferior como 0px .

Com as configurações da seção no lugar, clique no ícone Green + para adicionar uma nova linha.

Selecione a linha de coluna única em colunas iguais .

Em seguida, adicione o módulo de carrossel do grupo à linha.

Antes de adicionar conteúdo, devemos configurar o módulo de carrossel de linha e grupo com o Flexbox e os controles de espaçamento.

Etapa 2: definir as configurações de linha

Criar um controle deslizante de tela cheia exige que definamos a linha e o módulo de carrossel do grupo com 100% de largura . Clique no ícone de camadas para ajustar facilmente as seções. Isso é crucial ao trabalhar com seções e linhas de largura total, especialmente quando o preenchimento e a margem foram definidos como 0. facilita a ver a estrutura de layout da sua página

Na visualização das camadas, clique para selecionar a linha única que abriga o módulo de carrossel do grupo. Navegue até as configurações de design. No menu suspenso de layout, ajuste a lacuna horizontal para 0 .

Além disso, defina itens alinhados para centralizar a linha.

Defina a largura e a largura máxima na guia Dimensionamento como 100%.

Na guia Espaçamento , defina a margem superior e inferior e o preenchimento para 0px .

Etapa 3: Defina as configurações de carrossel do grupo

Em seguida, definiremos as configurações de carrossel do grupo. Expanda o menu suspenso Configurações do Carrossel na guia Conteúdo. Você pode ativar a rotação automática , escolha a velocidade de rotação automática na configuração padrão de 2000ms e permitir uma pausa no mouse .

Na guia Elements , desative a navegação DOT e deixe as setas Show habilitadas. Você também pode escolher um ícone personalizado para as setas esquerda e direita.

Clique para expandir a guia Arrows na guia Design. Atribua #FFFFFF como a cor da seta , deixe o tamanho da seta no padrão 48px e deixe a posição de seta definida como dentro .

Expanda a guia de fundo e atribua #000000 como a cor do plano de fundo .

Etapa 4: estilo o primeiro grupo

Podemos adicionar conteúdo ao primeiro slide com as configurações de seção, linha e carrossel em grupo no lugar. Clique na guia Conteúdo no módulo de carrossel do grupo e clique no ícone Configurações para o grupo.

Expanda o menu suspenso em segundo plano e selecione a guia Gradiente .

Clique no primeiro controle deslizante de gradiente para atribuir uma nova cor. Digite #efb648 no campo de cores .

Em seguida, clique no slider de 2º gradiente e atribua #f28f52 como a cor.

No campo do tipo gradiente , selecione circular .

Em seguida, navegue até a guia Design . Expanda a guia Espaçamento e atribua a 5% de preenchimento à parte superior e inferior do grupo.

Etapa 5: adicione conteúdo ao primeiro grupo

Agora que as configurações do nosso grupo estão configuradas, podemos começar a adicionar conteúdo ao grupo. Clique no ícone Black + para adicionar um módulo.

Quando a caixa de diálogo Módulo de Inserção ou linha aparecer, clique na guia Novo Linha . Na seção de colunas iguais , selecione a linha de coluna única .

Adicione um módulo de título

Selecione e insira o módulo de cabeçalho .

Expanda o menu suspenso de texto e insira o suco de laranja como o título .

Navegue até a guia Design . Expanda o menu suspenso de texto do cabeçalho . Selecione H1 Como o nível de cabeçalho , use Bebas Neue como a fonte do cabeçalho , defina o estilo da fonte do cabeçalho para a maçaneta , o alinhamento do texto do cabeçalho no centro , a cor do texto do título #FFFFFF e o tamanho do texto do cabeçalho para 20em .

Use os controles responsivos do Divi 5 para ajustar o tamanho do texto do cabeçalho para 15em no tablet e 8em no celular.

Adicione uma nova linha

Em seguida, adicionaremos uma nova linha sob a linha única que contém o módulo de título. Clique no ícone Black + para adicionar um novo módulo.

Clique na guia Nova linha . Em colunas de deslocamento , escolha a opção 1/4 + 1/2 + 1/4.

Na guia Design , expanda a guia Dimensionamento e digite 70% para a largura e a largura máxima . Defina o alinhamento no centro .

Adicione um módulo de título

Selecione o módulo de cabeçalho e adicione -o à primeira coluna .

Dê ao título um título e vá para a guia Design . Expanda o menu suspenso de texto do cabeçalho . Selecione H2 para o nível de cabeçalho , Bebas Neue como a fonte do cabeçalho , a maçaneta como o estilo da fonte do cabeçalho , #FFFFFF como a cor do texto do cabeçalho e 6em como o tamanho do texto do cabeçalho .

Use os controles responsivos da Divi para ajustar o tamanho do texto do cabeçalho para o 4EM .

Adicione um módulo de texto

Adicione um módulo de texto sob o título na primeira coluna. Digite algum texto do corpo e mude para a guia Design . Selecione Poppins como fonte de texto , defina a cor do texto como #FFFFFF e o tamanho do texto como 16px .

Adicione um módulo de botão

Adicione um módulo de botão no módulo de texto na primeira coluna. Atribua texto ao botão na guia Conteúdo e trocou para a guia Design. Expanda o menu suspenso do botão e habilite os estilos personalizados para o botão . Em seguida, expanda o menu de fundo do botão . Na guia de cor de fundo , adicione #528bf2 como a cor do botão.

Use os controles do flurno da Divi 5 para atribuir #6A7C9D como a cor do mouse para o botão.

Volte para a visualização da área de trabalho. Expanda a guia suspenso de borda do botão . Adicione 100px no raio da borda do botão e defina a largura da borda do botão como 0px .

Expanda o menu suspenso de texto do botão . Atribua poppins como a fonte do botão , #FFFFFF como a cor do texto do botão e 16px como o tamanho do texto do botão .

Expanda as configurações do ícone do botão e desative a alternância do ícone Mostrar botão .

Finalmente, expanda o menu suspenso de espaçamento . Adicione 15px de preenchimento à parte superior e inferior e 35px à esquerda e à direita.

Adicione um módulo de imagem

Coloque um módulo de imagem na segunda coluna. Quando as configurações aparecerem, passe o mouse sobre o campo da imagem para revelar as configurações. Clique no ícone Configurações para carregar a biblioteca de mídia e fazer upload de uma imagem no módulo.

Em seguida, adicionaremos uma interação à imagem para criar um efeito de mouse. Navegue até a guia avançada . Expanda o menu de interações para revelar suas configurações. Clique no botão +Adicionar interação .

Selecione o mouse, digite quando as opções aparecerem.

Digite a inclinação da imagem no campo Rótulo do administrador , selecione Mouse Entre como o evento de gatilho, espelhar o movimento do mouse como ação de efeito, selecione a imagem como o módulo de destino, inclinar como o tipo de movimento e 15 para sensibilidade. Por fim, clique no botão Salvar interação para ativar a interação.

Adicione um módulo de contadores de barra

Clique para adicionar o módulo de contadores de barras na 3ª coluna. Na guia Conteúdo. Na guia Elements , desative a porcentagem de exibição .

Em seguida, expanda a guia Background. Adicione #FFFFFF como a cor de fundo.

Troque para a guia Design e expanda o menu suspenso de barras . No campo da cor de fundo da barra , adicione #528bf2 como a cor.

Expanda o menu suspenso de texto do título . No campo da fonte do título , selecione Bebas Neue . Selecione #FFFFFF como a cor do texto do título e 22px como o tamanho do texto do título .

Troque de volta para a guia Conteúdo. Desta vez, clique no ícone Configurações para o primeiro item de contador de barras.

Digite o texto no campo do título e defina o campo percentual para 75 .

Clique para voltar à guia Principal de conteúdo para o módulo de contadores de barras.

Agora que nossas configurações de design estão definidas, você pode copiar facilmente o primeiro item de contador de barras para preservar as configurações.

Duplique o item do contador de barras e altere o título e a porcentagem para as configurações desejadas.

Etapa 6: Adicionar animações

Para tornar o grupo mais imersivo, adicionaremos alguns efeitos de animação. Primeiro, adicionaremos um efeito de zoom ao nosso título principal. Clique para selecionar o cabeçalho principal do grupo. Navegue até a guia Design e role para baixo para expandir a guia Animação. Selecione Zoom para a animação. Deixe todas as configurações como está.

Em seguida, clique para expandir a segunda linha (linha de três colunas). Clique nas configurações da primeira coluna.

Clique na guia Design e role para baixo para revelar a guia Animação. Escolha Slide para o estilo de animação e correto para a direção da animação. Deixe todas as outras configurações como estão.

Clique de volta na guia Principal de conteúdo para a linha. Desta vez, selecione a 3ª coluna. Navegue até a guia Design, expanda a guia Animação e escolha Slide> Esquerda para a animação. Deixe as outras configurações em seus padrões.

Etapa 7: linhas sobrepostas

Para adicionar um pouco de toque extra ao layout, ajustaremos a margem na segunda linha para criar um efeito de sobreposição. Isso empurrará a linha para cima, permitindo que ela se sobreponda ao cabeçalho principal para um bom efeito. Selecione a segunda linha no layout e navegue até a guia Design. Expanda a guia Espaçamento para revelar as configurações. Na margem superior, defina o valor para -8%.

Em seguida, aplicaremos um valor de índice z para colocar a segunda linha acima do 1º. Navegue até a guia Avançado, expanda as configurações de posição e aplique 999999 no campo do índice Z.

Ao visualizar o controle deslizante, verá que a segunda linha foi empurrada para se sobrepor levemente a 1ª linha, criando um bom efeito de sobreposição.

Etapa 8: Responsabilidade do teste

Antes de copiarmos o primeiro grupo, é uma boa ideia testar a capacidade de resposta do layout. Use pontos de interrupção responsivos personalizáveis ​​do Divi 5 para fazer qualquer ajuste.

No Divi 5, agora existem 7 pontos de interrupção em vez do Divi 4's 3. Você pode usar esses pontos de interrupção para garantir que seu layout pareça incrível em qualquer tamanho de tela. Navegue pelos pontos de interrupção e faça os ajustes necessários antes de copiarmos o primeiro grupo.

Um dos melhores novos recursos do Divi 5 é a capacidade de alterar a ordem das colunas para dispositivos móveis. Essa é uma ótima maneira de manter o design funcional e eficaz em todos os tamanhos de tela. Enquanto estiver em visualização móvel, selecione a 2ª coluna da 2ª linha em nosso layout (linha de 3 colunas).

Na guia Conteúdo , expanda a guia Order . A partir daí, defina o pedido de exibição como -1 . Isso colocará a coluna com a imagem na parte superior, permitindo que a imagem sobreponha o título, como acontece nas vistas de mesa e tablet.

Etapa 9: Grupos de duplicação

Depois de termos tudo se encaixar, podemos copiar facilmente o primeiro grupo e alterar o gradiente de fundo, o texto e a imagem sem repetir todas as etapas. Na guia Principal de conteúdo do grupo de carrossel, clique para duplicar o primeiro grupo.

Antes de copiar, atribua um rótulo de administrador ao grupo para facilitar a identificação.

A partir daí, mude o título, troque a imagem e atribua um novo gradiente de fundo ao grupo. Use #fc6a3c para o primeiro slider de gradiente e #c52f00 para o segundo.

Você também deseja alterar o botão e as cores do contador de barras para #3DFCCA e #C52F00 no Hover.

Também precisamos ajustar o tempo de animação para o 2º grupo. Isso garante que as animações não sejam carregadas para outros slides até que o controle deslizante avança. No módulo principal , navegue até a guia Design , expanda o menu de animação e defina o atraso da animação para 2000ms .

Faça o mesmo com a linha de 3 colunas. Na primeira e terceira colunas , defina o atraso de animação para 2000ms .

Mudanças no terceiro grupo

Para o terceiro grupo, use #71B953 e #617A56 para o gradiente de fundo .

Para os módulos de botão e contadores de barras , use #BA54B3 e #654F64 para a cor do pairar.

Você também precisará alterar o atraso da animação no módulo de título e a primeira e a terceira colunas da 2ª linha para 4000ms .

Mudanças no quarto grupo

Para o gradiente de segundo plano , use #ad52b7 e #ad52b7 .

Use #83B853 e #83B853 para o contador de barras e os módulos de botão.

Finalmente, defina o atraso de animação para 6000ms no título principal do grupo, juntamente com a primeira e a terceira colunas da linha de 3 colunas.

Etapa 10: Visualize e salve o controle deslizante

A etapa final é salvar o layout e visualizá -lo para garantir que nenhuma etapa tenha sido perdida. No Visual Builder, clique no botão Salvar no canto superior direito.

Clique no botão Visualizar para abrir o layout em uma nova guia.

Uma vez concluído, seu controle deslizante deve ficar assim:

É isso! O módulo de carrossel do grupo é uma nova adição versátil ao Divi 5. Ele permite criar controles deslizantes e carrosséis para qualquer projeto e oferece opções de personalização ilimitadas.

Baixe o layout de carrossel de tela cheia

Se você deseja usar o layout que recriamos nesta postagem, pode acessá -lo através do formulário abaixo. Depois de baixar e descompactar a pasta, você encontrará um arquivo JSON. Navegue até a sua biblioteca Divi para fazer o upload do arquivo, para que você possa acessar e usá -lo para qualquer página que você criar.

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!

Construa seu primeiro carrossel no Divi 5 hoje

Criar um controle deslizante de tela cheia personalizada com o módulo de carrossel de grupo do Divi 5 abre um mundo de possibilidades para criar experiências envolventes em seus sites. Seguindo as etapas deste post, você aprendeu a usar os recursos do módulo, desde opções avançadas de personalização, como animações, pontos de interrupção responsivos e efeitos interativos. A flexibilidade do Módulo Carrossel do Grupo permite criar slides para qualquer coisa que possa imaginar, mantendo uma aparência profissional e perfeita em todos os tamanhos de tela.

Faça o download do mais recente Divi 5 Public Alpha, experimente o módulo de carrossel do grupo e informe -nos o que você pensa nos comentários ou em nossos canais de mídia social.