Como criar um controle deslizante compacto de depoimento para um cabeçalho no Divi
Publicados: 2021-07-16Adicionar depoimentos ao seu site é uma forma eficaz de aumentar a credibilidade do seu negócio (ou marca) e construir a confiança dos visitantes. Um controle deslizante de depoimento é uma ferramenta conveniente para mostrar depoimentos em um só lugar. Com isso em mente, faz sentido adicionar um controle deslizante de depoimento compacto ao seu cabeçalho para que esses depoimentos sejam uma das primeiras coisas que o usuário vê ao visitar seu site.
Neste tutorial, vamos mostrar como criar um controle deslizante de depoimento compacto para mostrar depoimentos curtos no cabeçalho do seu site. Para fazer isso, vamos modificar o Módulo Slider do Divi de uma forma divertida e única.
Vamos começar!
Espiada
Aqui está o controle deslizante de testemunho compacto que construiremos usando o Módulo Divi Slider.
E aqui está o mesmo controle deslizante de testemunho adicionado a um cabeçalho global.
E aqui está o que parece no celular.
Baixe o layout e o modelo GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Importe o Layout para a Biblioteca Divi
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador. Será o arquivo JSON denominado “divi-short-testimonial-slider-module-layout.json”.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Importe o modelo de cabeçalho para o Divi Theme Builder
Se você deseja importar o modelo de cabeçalho com o controle deslizante compacto de depoimento adicionado ao cabeçalho, você precisará navegar em Divi> Theme Builder.
Em seguida, use o ícone de portabilidade no canto superior direito da página para importar o arquivo JSON. Será o arquivo denominado “divi-short-testimonial-slider-header-template.json”.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Como criar um controle deslizante compacto de depoimento no Divi
Adicionar nova linha e módulo deslizante
Para começar, adicione uma linha de uma coluna à seção.
Em seguida, adicione um módulo deslizante à linha.
Editar slide
Nas configurações do controle deslizante, exclua o segundo slide padrão na guia de conteúdo e clique para editar as configurações do slide restante.
Conteúdo do slide
Na guia de conteúdo das configurações do slide, atualize o seguinte:
- Título: “Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget. ”
- Texto do botão: Ler tudo
- Corpo: - Tatiana Gagelman
Uma vez feito isso, salve as configurações do slide.
Atualizar configurações do controle deslizante
Duplicar slides e ocultar controles
Depois de atualizar o primeiro slide com conteúdo, duplique esse slide para criar um ou mais slides adicionais.
Em seguida, no grupo de opções Elementos, oculte os controles deslizantes atualizando o seguinte:
- Mostrar controles: NÃO
Atualizar plano de fundo para todos os slides
A seguir, vamos adicionar um plano de fundo que será usado em todos os slides. Este plano de fundo incluirá um gradiente de plano de fundo e um estilo de imagem de plano de fundo (para quando / se você adicionar uma imagem de plano de fundo do autor a um slide individual).
Para adicionar o plano de fundo, atualize o seguinte:
- Cor do gradiente de fundo à esquerda: # 000000
- Cor certa do gradiente de fundo: # 000000
- Tamanho da imagem de fundo: Ajustar
- Posição da imagem de fundo: centro esquerdo
- Mistura de imagem de fundo: luminosidade
É importante observar que não estamos adicionando uma imagem de plano de fundo aqui. Estamos apenas adicionando o tamanho, a posição e o modo de mesclagem da imagem que será usada por um slide individual. É mais fácil adicioná-lo aqui, em vez de adicionar o mesmo estilo a cada slide separadamente. Posteriormente, mostraremos como adicionar imagens a slides individuais.
Configurações de design do controle deslizante
Na guia de design, atualize o seguinte:
Sobreposição
- Usar sobreposição de plano de fundo: SIM
- Cor de sobreposição de fundo: rgba (0,0,0,0.7)
Texto do Título
- Título Título Nível: H4
- Fonte do título: Josefin Sans
- Peso da fonte do título: médio
- Alinhamento do Texto do Título: Esquerda
- Tamanho do texto do título: 16 px (desktop e tablet), 14 px (telefone)
- Altura da linha de título: 1,5em
Texto de corpo
- Fonte do corpo: Josefin Sans
- Alinhamento do corpo do texto: esquerda
- Cor do corpo do texto: #aaaaaa
- Espaçamento entre letras do corpo: 0,05em
Botão
- Use estilos personalizados para botão: SIM
- Tamanho do texto do botão: 1em
- Cor do texto do botão: padrão (área de trabalho), # 000 (foco)
- Cor de fundo do botão (desktop): rgba (255,255,255,0,19)
- Cor de fundo do botão (pairar): #ffffff
- Largura da borda do botão: 0 px
- Espaçamento entre letras dos botões: 0,05em
- Fonte do botão: Josefin Sans
- Margem do botão: 0 px superior, 0 px inferior
- Preenchimento do botão: 0px superior, 0px inferior, 0,6em à esquerda, 0,6em à direita
Preenchimento e animação automática
Em seguida, atualize o espaçamento do controle deslizante para que fique compacto e defina a velocidade de animação automática que você deseja para o controle deslizante.
- Margem: 0px superior, 0px inferior
- Preenchimento: 1em superior, 1em inferior, 5% à esquerda, 5% à direita
- Animação Automática: ON
- Velocidade de animação automática: 3500
CSS customizado
Na guia avançada, adicione o seguinte CSS personalizado para atualizar o estilo de cada elemento do controle deslizante (Título, Botão e Setas)
Título do slide
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Isso garantirá que o título do slide não crie uma quebra de linha em telas menores.
Botão deslizante
position:absolute; bottom: 1em; right: 6%;
Isso dá ao botão uma posição absoluta para que fique bem abaixo do Título e à direita do slide, tornando o controle deslizante ainda mais compacto.
Setas deslizantes
font-size: 30px; margin-top: -15px;
Isso simplesmente torna as setas de navegação do controle deslizante menores para caber no tamanho compacto do controle deslizante.
Dica: Adicione a mesma cor de fundo à coluna para transições de slides mais suaves
Atualmente, a animação de cada slide terá a cor de fundo animada junto com o conteúdo do slide, para evitar que o fundo mostre esta animação, podemos dar a mesma cor de fundo à coluna para que a transição seja mais suave.
Para fazer isso, abra as configurações da coluna pai do controle deslizante e adicione a seguinte cor de fundo:
- Cor de fundo: # 000000
Adicionar imagens de fundo do autor a um slide
Se quiser incluir uma imagem de fundo do autor para um slide, você pode fazer isso adicionando uma imagem de fundo a cada slide.
Depois de adicionar a imagem de plano de fundo ao slide, a imagem de plano de fundo herdará os estilos já existentes nas configurações do controle deslizante (não do slide).
Resultado
Confira o resultado final.
Adicionando o controle deslizante de testemunho compacto a um modelo de cabeçalho
Salvando o Módulo na Biblioteca Divi
Antes de adicionarmos o controle deslizante de testemunho compacto a um cabeçalho global, devemos primeiro salvar o módulo na Biblioteca Divi. Você pode fazer isso passando o mouse sobre o módulo do controle deslizante e clicando no ícone “Salvar na biblioteca”. Em seguida, dê um nome ao layout e clique no botão “Salvar na biblioteca”.
Adicionando o Layout do Módulo de Testemunho Compacto a um Modelo de Cabeçalho
Edite o cabeçalho personalizado
Uma vez que o novo módulo de controle deslizante de depoimento foi salvo na biblioteca, estamos prontos para adicioná-lo a um cabeçalho personalizado.
Navegue até Divi> Theme Builder e clique para editar o cabeçalho personalizado do modelo.
Inserir layout do módulo deslizante de testemunho salvo da biblioteca
No editor de layout de cabeçalho, clique para adicionar o módulo deslizante compacto de depoimento onde deseja que ele seja exibido.
No modal Inserir Módulo, selecione a guia Adicionar da Biblioteca. Encontre o controle deslizante compacto de depoimento que você salvou anteriormente na biblioteca e selecione-o.
Depois de carregado, salve as alterações.
Resultado final
E aqui está o mesmo controle deslizante de testemunho adicionado a um cabeçalho global.
E aqui está o mesmo controle deslizante de depoimento sem as imagens de fundo do autor.
E aqui está o que parece no celular.
Pensamentos finais
O controle deslizante compacto de depoimento pode ser uma nova adição ao cabeçalho de qualquer site que queira aumentar a credibilidade de seus serviços no local mais visível de seu site. Você também pode usá-lo para redirecionar os visitantes para uma página de depoimento ou para aumentar as conversões da página de vendas. Esperançosamente, será útil para você.
Estou ansioso para ouvir de você nos comentários.
Saúde!