Testemunhos são uma parte importante da construção de um negócio. O módulo de testemunho do Divi facilita a exibição do que seus clientes estão falando sobre você e seu trabalho, mas também é limitado porque os depoimentos vivem dentro de seus módulos específicos. Isso torna difícil modificar o design dos módulos porque você precisa personalizar cada um individualmente. Além disso, ele exibe apenas um depoimento.

Um plugin de terceiros chamado Testimonial Slider acrescenta três novos módulos ao Divi Builder para exibir depoimentos de uma biblioteca com categorias. Com os novos módulos, você pode exibir os depoimentos dentro de uma grade ou um de cada vez dentro de um controle deslizante, e personalizar o módulo uma vez e todos os depoimentos correspondem.

Neste artigo, vamos examinar mais de perto o controle de testemunho. Nesses exemplos, estou usando imagens e layouts de vários pacotes de layout, incluindo:

Estou usando o Testimonial Slider versão 1.2. e Divi 3.0.98.

Menu do painel de controle do testemunho

Um novo item de menu é adicionado ao menu do painel chamado Testemunhos . Aqui você encontrará Todos os Depoimentos (visto na imagem acima), Adicionar Novo e Categoria de Testemunho . Todos os Depoimentos enumera todos os testemunhos que você adicionou e permite editar, editar rapidamente, lixo, visualizar, visualizar por categoria, classificar por data e pesquisar. Você também pode adicionar um novo depoimento aqui.

Adicionar novo fornece um editor WordPress TinyMCE onde você pode criar o depoimento. Aqui você pode criar categorias, adicionar a imagem e fornecer informações de testemunho (nome, nome da empresa e URL) que serão exibidas como a informação para o testemunho.

Categoria de testemunho é um editor de categoria para Check-list Testimonial. Isso funciona exatamente como o editor padrão da categoria WordPress.

Configurações de página de arquivamento de controle de depoimento

No menu do painel, vá para Divi > Configurações de testemunho . Aqui você pode definir a slug da página de arquivo, ajustar as configurações da página de arquivo, escolher exibir em uma grade ou lista, o número de depoimentos por página, para exibir o filtro, paginação e o link da página de detalhes. Também possui uma guia CSS personalizada para que você possa segmentar esta página específica.

Módulos de controle deslizante de testemunho

Três módulos novos são adicionados ao Divi Builder:

  • Testemunhos Filtráveis ​​
  • Gráfico de depoimentos Slider
  • Testemunhos Slider

Testemunhos Filtráveis ​​

As configurações de conteúdo para o módulo de filtragem incluem o layout (escolha de grade ou lista), número de depoimentos para exibição, ordem por igual altura, ícone de citação de exibição, imagem de exibição, filtro de categoria de exibição, que categoria para exibição e cor de fundo.

As configurações da guia Design incluem texto do corpo, texto do nome do cliente, texto do nome da empresa, borda, sombra da caixa e animação.

A guia Avançado oferece acesso CSS a todos os conceitos básicos mais a caixa de testemunhos, filtro de categoria, filtro de categoria ativo, imagem de testemunho, ícone, texto, nome, nome da empresa, paginação, paginação em hover e paginação atual.

Aqui está uma olhada em suas configurações padrão.

Testemunhos Grid Slider

As configurações de Conteúdo do Slider da grade incluem layout (de 1-4 colunas), velocidade, habilitação ou desativação de cada um dos elementos e opções de cores para cada um dos elementos, incluindo o ponto de navegação. As guias Design e Advanced são iguais ao módulo Filterable, exceto a guia Avançado, adiciona CSS para nav de ponto.

Aqui está uma olhada em suas configurações padrão. A navegação de pontos é adicionada à parte inferior.

Testemunhos Slider

A guia Conteúdo do controle deslizante de testemunhas adiciona setas, imagens quadradas ou redondas com ajustes de tamanho, uma sobreposição de texto, deslize automático em hover e exibe uma imagem em um tamanho específico. Ele também adiciona ajustes de fundo usando fundos sólidos e imagens. Não inclui gradientes ou vídeo. A guia Design adiciona o raio da borda da sobreposição de texto e a cor da seta. A guia Avançado adiciona CSS personalizado para a seta.

Aqui está o depoimento com as configurações padrão. A imagem do testemunho ativo é gerada e mostra a imagem sem uma sobreposição. A imagem inativa tem uma sobreposição (neste caso, é escurecida). Ele exibe a imagem sem a sobreposição ao passar o mouse sobre ela.

Testemunhos Filtráveis ​​Exemplos

Estou usando a seção de depoimentos do pacote de layout do Photo Marketplace. A imagem acima é aquela seção que parece quando você carrega. Este layout usa três módulos de testemunho, no entanto, com o controle de testemunho, nós só precisamos usar um módulo porque traz os depoimentos da lista premade e os exibe no layout de grade que escolhemos.

O módulo Testimonial Filterable exibindo um layout de grade. Eu fiz o texto branco ou cinza claro. Os depoimentos exibem automaticamente o fundo azul.

Eu adicionei uma cor de plano de fundo aos depoimentos e configurei-os em alturas iguais. Este módulo não possui um ajuste de cor para o ícone da citação e você não pode definir a imagem como um quadrado.

Este usa o layout da lista. Filtrei por uma categoria para que a lista exiba 3 depoimentos. Eles não mostram a categoria dentro dos próprios depoimentos. As imagens são exibidas automaticamente como quadrado. Não há uma opção para alterá-lo.

Além disso, não consegui adicionar preenchimento (sem usar CSS) no lado esquerdo das imagens para afastá-lo da borda. Gostaria de ver alguns recursos de imagem para que possamos mover a imagem para diferentes locais, alterar tamanhos, etc. Eu também gostaria de um recurso para ajustar o texto do filtro.

Aqui está um exemplo usando o pacote de layout Web Design.

Testemunhos Grid Slider Examples

O controle deslizante de grade de depoimentos exibe uma grade que desliza um cartão por vez. A única mudança que fiz neste exemplo foi tornar o texto branco.

Aqui coloquei as cores para o texto do corpo, nome, nome da empresa, plano de fundo, ícone da citação e navegação pontos. Este usa uma grade de 2 colunas.

Aqui uma grade de 4 colunas. Eu também estou igualando as alturas.

Aqui está um layout de 1 coluna. Eu acrescentei os tamanhos de fonte, alterei as cores, adicionei uma sombra de caixa e arredondava os cantos.

Aqui está uma grade de 2 colunas com sombra de caixa. Eu reduzi os pixels de canto e as cores ajustadas novamente.

Aqui está o controle deslizante de classificação de testemunhos colocado dentro do pacote de layout de design web usando texto e cores para combinar com o design.

Testemunhos Exemplos de controle deslizante [19659051]

Este é o layout padrão do módulo Testemunho. Podemos fazer com que ele se encaixe facilmente no design.

Aqui alterei a cor de todo o texto e o ícone da citação para o branco e fiz o fundo azul para coincidir com a seção.

Neste exemplo, alterei o plano de fundo para um creme mais claro e altere novamente o texto e as cores dos ícones. Desta vez, cada elemento tem a sua própria cor. Eu configurei a imagem para exibição como quadrado. Se você escolher o quadrado, você recebe alguns campos onde você pode definir o tamanho das imagens em pixels. Deixei o padrão para 80px. Cada imagem é redimensionada e se alinha perfeitamente mesmo que eu escolhi imagens em vários tamanhos.

Esta exibe uma imagem de fundo com sobreposição de texto, que coloca a sobreposição somente atrás do próprio texto do corpo. Você pode fazer o texto sobrepor qualquer cor que desejar. Eu alterei a cor da fonte, a seta e as cores e os tamanhos dos ícones, e fiz as imagens quadradas com 120 pixels de largura e 60 pixels de altura para criar uma forma retangular.

Aqui está o controle deslizante de depoimentos colocado dentro do pacote de layout de design de interiores. Eu substituí o módulo de testemunho original pelo controle deslizante Testimonials usando as mesmas cores e fontes. O original tinha uma imagem circular, mas eu fiz as imagens quadradas para combinar com o design. O módulo se encaixa perfeitamente com o design deste layout.

Aqui está um exemplo de usar o controle deslizante Testimonials como um controle deslizante de logotipo. Desligue o texto do nome do cliente, o texto do nome da empresa, a imagem do cliente e o ícone da citação. Coloquei o logótipo no editor visual e escolhi uma categoria única.

Usando o Controle de Testemunho com Extra

O Trimestre Slider funciona tão bem com Extra. Aqui está uma olhada na porção de depoimento do layout de design de interiores usando o módulo de controle de depoimentos.

Licença de controle de depoimento

Inclui 6 meses de suporte (extensível a 12 meses) e atualizações ao longo da vida. Existem duas licenças para escolher:

  • Regular (para uso em um site) – € 25,00
  • Extensão (para uso em sites ilimitados) – € 85,00

Você pode comprar o Testimonial Slider do desenvolvedor site .

Pensamentos finais

Eu achei o Testemunho Slider fácil de usar. Eu consegui criar praticamente qualquer tipo de design de controle deslizante que eu queria. Existem alguns recursos que eu gostaria de ver adicionados. Por exemplo, você pode controlar o tamanho e a forma das imagens quadradas, mas não as imagens redondas. Claro que você pode fazer muitos ajustes adicionais com CSS, então isso ajuda com todos os recursos que não estão disponíveis nas configurações se você estiver confortável com o CSS.

Existem algumas limitações entre os módulos, mas com os três módulos, e o fato de que eles têm opções diferentes, Testimonial Slider oferece muitos recursos. Um dos meus recursos favoritos foi a capacidade de selecionar categorias para exibir. Você pode escolher poucas ou tantas categorias quanto desejar, criando um controle deslizante de testemunho específico para uma página ou serviço específico. Se você está interessado em um controle deslizante de testemunho, este vale a pena olhar.

Queremos ouvir de você. Você tentou o Testimonial Slider? Deixe-nos saber o que você pensa sobre isso nos comentários.

Imagem em destaque através de Blablo101 / shutterstock.com



Source link