6 simples códigos HTML para adicionar Depoimentos em seu Site

O app HTML do Wix é uma mão na roda para as vezes que não queremos usar os aplicativos do App Market, seja por serem a maioria em inglês, seja por sua versão grátis ser muito limitada e a versão paga ser muito cara ou seja por simplesmente não existir um app compatível com nossas pretensões.

A solução é buscar ajuda no bloco HTML que, apesar de exigir mais esforço e dar mais trabalho, acaba sendo uma saída prática e gratuita que muitas vezes pode se sair melhor do que o esperado. Claro que isso não é regra e vai depender de cada caso.

Depoimentos em HTML

Depoimentos (ou testemunhos) são uma forma muito significativa de mostrar a reputação de sua empresa. É uma das áreas mais visitadas e valorizadas dentro de um site, pois é responsável por transmitir a opinião dos outros clientes sobre os produtos ou serviços de uma empresa, e como sabemos, as pessoas se importam bastante com o que as outras estão falando ou fazendo.

Já mostrei uma opção de adicionar depoimentos aqui, mas essa foi pelo uso do App Market.

O que temos agora são depoimentos que podem ser adicionador por códigos HTML. Siga lendo para ver como fazer:

1. Veja os exemplos nesta página de um site criado no Wix.

2. Clique no botão “Quero este“, ao lado do bloco escolhido.

3. Ao clicar, será aberta uma janela do site CODEPEN, este site permite a edição de códigos HTML, CSS e Javascript e a visualização dos resultados em tempo real, uma ferramenta simplesmente incrível.

Ao clicar, ele abrirá exatamente no código do Depoimento. A primeira coisa a fazer é mudar o modo de exibição da janela, para facilitar a manipulação dos códigos.

Para isso, vá até o canto inferior direito da tela e clique na primeira opção. Observe a figura:

Editando

Feita essa alteração, vamos à edição do código. Você deve ficar atento aos textos onde estão os depoimentos do exemplo, pois serão nesta parte que você irá mudar pelos depoimentos reais dos seus clientes.

4. Para isso, role o código até chegar ao bloco de textos e insira um depoimento:

5. Dê um nome para o autor do testemunho e escolha um identificador, pode ser ‘Cliente’, ‘Empresa X’ etc:

6. Quando terminar a edição, clique dentro do editor de código e aperte a tecla Ctrl+A, para selecionar todo o código:

Agora basta copiar e colá-lo através do app HTML do Wix. Para saber mais sobre essa etapa, clique.

Depoimentos com imagens

Nos códigos onde há imagens, será necessário que você insira a URL da imagem do autor, para que ela apareça no depoimento. Essa imagem pode ser do perfil ou da logomarca da empresa do depoente.

Se a imagem que pretende inserir não tiver na internet, você terá que enviá-la. Você pode enviar até para o Facebook, o importante é ter a URL da mesma.

No meu caso, eu armazeno minhas imagens em uma página privada no Google+, para que fiquem hospedadas no próprio servidor do Google, já que se trata de um servidor seguro e com ótima velocidade.

O Google dá gratuitamente até 15Gb de espaço de armazenamento para cada conta. Você pode enviar a imagem através do seu perfil pessoal do Google+, porém, para impedir que todos a vejam, selecione um círculo ou pessoa que deseja mostrar a mesma. (obs: isso não influenciará na exibição pública da imagem no site).

Clique em “Compartilhar” para ter acesso à URL da imagem.

7. Com a imagem enviada e privada, clique sobre ela e depois, com a imagem aberta, clique com o botão direito do mouse e selecione “Copiar URL da imagem“:

Inserindo a URL da imagem no código

8. Com a URL copiada, insira entre as aspas no código <img src=” “>:

Você verá o efeito imediatamente no campo ao lado. Faça o mesmo procedimento para os outros campos do bloco de depoimento.

Observação importante: o depoimento estilo 4, funciona perfeitamente se forem inseridos até 4 linhas de textos. Se algum depoimento tiver mais do que 4 linhas, crie uma página dedicada a depoimentos e um link “leia mais“. Observe a imagem abaixo:

Depoimentos com links

Caso você tenha uma página que contenha todos os depoimentos de seus clientes, você poderá criar links que levem até ela, no seu bloco de depoimentos em HTML.

Você pode ver um exemplo disso no depoimento estilo 4, onde no 2º depoimento há um link de continuação.

9. Para inserir links, basta substituir o link entre aspas dentro do campo <a href=””>, dentro do código:

10. Se você não quiser links dentro do depoimento, basta selecionar e apagar toda a linha que começa em “<a” até “</a>“:

Mas se quiser links em cada depoimento, basta copiar e colar essa linha acima.

No bloco de depoimentos estilo 6, basta seguir o mesmo processo para o estilo 4.

Atenção: você poderá mudar as cores de fundo, das fontes e tipos de fontes de qualquer bloco HTML, mas é necessário que tenha conhecimento em CSS.

É isso. Uma maneira simples de inserir widgets de depoimentos gratuitos em seu site.

Qualquer dúvida ou erro, comente abaixo que faço o possível para ajudar.

Saiba mais sobre este projeto, aqui.

6 comentários para “6 simples códigos HTML para adicionar Depoimentos em seu Site”

  1. Responder

    • Por Gabriel Martins

      Responder

  2. Por Weber Klaus

    Responder

    • Por Gabriel Martins

      Responder

  3. Por Renata

    Responder

    • Por Gabriel Martins

      Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

X

65 milhões de pessoas, ONGs e empresas já criaram seus sites no Wix. Crie o seu AQUI

¤
Leia mais:
empresas_wix
Conheça 6 empresas que criaram sites com o Wix

Fechar