Como personalizar o controle deslizante Divi para alterar elementos específicos a cada slide

Todos nós sabemos que os controles deslizantes são maravilhosos para maximizar a seção superior acima da dobra do seu site. Eles são ótimos! Os usuários são recebidos com vários CTAs e recursos importantes que aparecem sem precisar rolar a página para baixo. Mas, às vezes, muitas mudanças no design e no conteúdo de um slide para outro podem distrair ou sobrecarregar os visitantes. É por isso que, neste tutorial, mostrarei como personalizar seu controle deslizante Divi para alterar apenas elementos específicos a cada transição de slide. Isso permite que você mantenha o conteúdo central e os componentes de design de seu controle deslizante consistentes enquanto altera apenas um elemento específico (como uma única palavra ou botão) em cada slide. Os visitantes serão capazes de processar facilmente a mudança e entender claramente sua chamada à ação.

Vamos mergulhar!

Divi Slider Sneak Peek

Ouça é uma prévia do design e da funcionalidade do controle deslizante Divi que construiremos no tutorial de hoje.

Observe como isso altera apenas uma palavra no corpo do texto em cada slide.

Observe como, com este exemplo, tanto a palavra do corpo do texto quanto as cores dos botões e o período mudam a cada slide.

O conceito básico explicado

Por padrão, o controle deslizante Divi anima o texto de descrição com cada transição para um novo slide que aparece gradualmente e move ligeiramente o conteúdo para cima no lugar.

Mas, com uma linha simples de CSS personalizado, podemos desativar a animação ascendente do texto. E, se duplicarmos o slide, eliminar o fundo e alterar apenas um dos elementos (como a palavra no corpo do texto), você verá apenas uma palavra mudando a cada slide.

Você pode usar esse conceito para alterar apenas textos, botões ou cores específicos, enquanto mantém o restante dos elementos de design em jogo com cada slide.

Começando

Inscreva-se no nosso canal no Youtube

Para este tutorial, tudo que você precisa é o Divi Theme instalado e ativo. Estaremos construindo nosso controle deslizante Divi do zero usando o construtor Divi na parte frontal.

Para começar, crie uma nova página e dê um título a ela. Em seguida, clique para usar o Divi Builder e selecione a opção “Build from Scratch”. Em seguida, clique no botão “Construir no Front End”.

Agora você está pronto para começar com o design.

Configurando o conteúdo do Divi Slider

Para este exemplo, vou usar um módulo deslizante de largura total, mas este tutorial também se aplica a módulos deslizantes regulares. Vamos começar adicionando uma seção de largura total com um módulo deslizante de largura total à sua página.

Para que possamos ver as alterações de conteúdo em nosso controle deslizante, vamos adicionar temporariamente uma cor de fundo escura à seção de largura total primeiro. Abra as configurações da seção e dê a ela uma cor de fundo preta (# 222222).

Você não será capaz de ver isso ainda porque a cor de fundo do controle deslizante padrão o está cobrindo. Vamos circular de volta para terminar o design do plano de fundo da seção posteriormente no tutorial.

Agora vamos pular para as configurações Fullwidth Slider e excluir um dos slides padrão, deixando apenas um. Em seguida, abra as configurações do slide.

Atualize as configurações do slide da seguinte forma:

Título: “Sites que oferecem mais…”
Texto do botão: “Primeiros passos”

Em Conteúdo, adicione o seguinte html:

Business<span style="color: #EE164D;">.</span>

(Isso adiciona uma cor personalizada ao ponto (ou ponto) após a palavra.)

Cor de fundo: rgba (255,255,255,0)

Salvar configurações.

Agora duplique o slide duas vezes para que você tenha um total de três slides.

Abra as configurações do segundo slide. Em Conteúdo, substitua apenas a palavra “Negócios” por “Dinheiro”, mantendo o restante do html, título e texto do botão iguais. Queremos apenas mudar essa palavra em cada slide. Em seguida, salve as configurações.

Em seguida, abra as configurações do terceiro slide. Em Conteúdo, substitua a palavra “Negócios” por “Sucesso” e salve as configurações.

Tudo feito! Isso cuida do conteúdo do nosso controle deslizante.

Otimizando a animação do texto descritivo

Depois que o conteúdo de nosso controle deslizante estiver no lugar, precisamos desabilitar nossa animação para que nosso texto não salte a cada slide. Para fazer isso, vá para as configurações do controle deslizante de largura total e adicione o seguinte CSS personalizado na Descrição do slide:

animation-name: none;

Para este exemplo, faz sentido tornar a animação do controle deslizante automática e aumentar a velocidade da animação para que os usuários possam ver a mudança de palavra em cada slide mais rapidamente. Para fazer isso, vá para a guia de design e atualize o seguinte:

Animação Automática: ON
Velocidade de animação automática (em ms): 3000

Agora verifique o resultado até agora. Você deve ver apenas uma palavra no conteúdo de cada mudança de controle deslizante sem a animação para cima.

Projetando o Slider

Com nosso conteúdo e funcionalidade no lugar, podemos começar a estilizar nosso controle deslizante com um design bonito e elegante.

Abra as configurações do controle deslizante de largura total e atualize o seguinte:

Orientação do texto: esquerda
Fonte do título: Lato
Peso da fonte do título: leve
Tamanho do texto do título: 32px
Sombra do texto do título: veja a captura de tela
Intensidade do desfoque da sombra do texto do título: 0em (basicamente remove a sombra do texto padrão)

Fonte do corpo: Lato
Tamanho do corpo do texto: 5vw (desktop), 50px (tablet), 40px (smartphone)
Altura da linha corporal: 1,6em
Sombra do corpo do texto: veja a captura de tela
Força do borrão da sombra do corpo do texto: 0em (basicamente remove a sombra do texto padrão)

Tamanho do texto do botão: 16 px
Cor de fundo do botão: # ee164d
Largura da borda do botão: 8 px
Cor da borda do botão: # ee164d
Raio da borda do botão: 0 px
Espaçamento entre letras dos botões: 1px
Fonte do botão: Lato
Alinhamento do botão: direito

Largura: 70% (desktop), 100% (tablet), 100% (smartphone)
Alinhamento do Módulo: centro

Preenchimento personalizado (desktop): 19vw superior, 8vw inferior
Preenchimento personalizado (tablet): parte superior 19vw, parte inferior 4vw. 0px à esquerda, 0px à direita
Preenchimento personalizado (smartphone): 30vw superior, 4vw inferior, 0px à esquerda, 0px à direita

Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: -190 px
Posição vertical da sombra da caixa: 60px
Cor da sombra da caixa: rgba (0,16,17,0.7)

E para uma última etapa, vamos desabilitar nossos elementos de controle deslizante para que não vejamos as setas ou controles do controle deslizante.

Isso cuida do design do nosso controle deslizante Divi!

Personalizando os Estilos de Seção

O resto do design será adicionado à nossa seção, incluindo nossa imagem de plano de fundo que servirá como plano de fundo estático para todos os nossos slides. Adicionar uma imagem de plano de fundo à seção é melhor para este uso porque você não verá nenhuma transição leve de uma imagem para outra, como faria se adicionasse a imagem de plano de fundo ao módulo deslizante.

Abra as configurações da seção e atualize o seguinte:

Imagem de fundo: [inserir imagem em torno de 1920 x 800 pixels]
Cor do gradiente de fundo à esquerda: rgba (0,16,17,0.45)
Cor certa do gradiente de fundo: rgba (0,16,17,0.92)
Posição inicial: 34%
Posição final: 0%
Colocar gradiente acima da imagem de fundo: SIM

Em seguida, dê à sua seção uma borda direita da seguinte maneira:

Largura da borda direita: 5vw
Cor da borda direita: # 001011

E, por último, fornece uma seção de sombra para ajudar a equilibrar a estrutura do design.

Sombra da caixa: veja a imagem
Posição horizontal da sombra da caixa: -200 px
Posição vertical da sombra da caixa: -150 px
Cor da sombra da caixa: rgba (0,16,17,0.74)

É isso!

Design final do Divi Slider

Aqui está o design final do controle deslizante Divi personalizado.

E aqui está a funcionalidade dos slides. Observe como apenas uma palavra muda a cada slide.

Design final no celular

Tábua

Smartphone

Experimente alterar outros elementos

Você pode experimentar alterar outros elementos em cada slide para obter designs e funcionalidades mais criativos. Por exemplo, você pode dar a cada um dos botões do slide uma cor diferente em cada slide, bem como combinar a cor do período com a nova cor do botão em cada slide.

Aqui está como seria.

Você pode até explorar a mudança na cor da sombra da caixa do slide ou algum outro elemento de design. Existem inúmeras possibilidades!

Pensamentos finais

O design e a funcionalidade desse controle deslizante Divi personalizado oferece uma boa alternativa aos controles deslizantes tradicionais. O núcleo do design não muda, o que destaca ainda mais o aspecto importante do seu CTA que muda a cada slide. Parece que isso pode ser algo que você poderia testar para ver se pode aumentar as conversões!

Deixe-me saber o que você pensa nos comentários abaixo.

Saúde!