Como criar uma visualização de link visual no WordPress

Enriquecer suas páginas e postagens do WordPress com conteúdo como recursos úteis, produtos relacionados, CTAs promocionais ou peças de entretenimento com curadoria pode ajudar você ou sua marca a oferecer mais valor ao seu público. No entanto, um link simples nem sempre o corta - a menos que o texto âncora e o sentimento circundante sejam convincentes o suficiente, esses links podem ser raspados imediatamente. Ao criar links visuais para o seu site, como os aprimorados que você vê no Facebook, você pode adicionar conteúdo interativo e envolvente ao qual seus visitantes prestarão atenção. O plug-in Visual Link Preview para WordPress é uma maneira simples de adicionar mais brio aos seus links.

Estas são apenas algumas maneiras de usar este plug-in:

• Adicione um CTA a um link de afiliado.
• Faça backup de afirmações, fatos e estatísticas.
• Organize o conteúdo de outros sites.
• Inclua recursos úteis para que os leitores aprendam mais.
• Promova os produtos da sua loja de comércio eletrônico.

Além disso, em sua forma mais simples, o plug-in Visual Link Preview é uma maneira mais atraente de vincular postagens relacionadas e fazer com que as pessoas permaneçam no seu site por mais tempo.

O plug-in permite que você crie uma visualização para qualquer link interno ou externo, e você também pode criar um modelo personalizado com um estilo que corresponda à sua marca ou site. Em seguida, coloque uma caixa de visualização simplificada em qualquer lugar de sua postagem ou página. Vamos ver como adicionar uma caixa de visualização ao WordPress tanto no Gutenberg quanto no editor clássico.

Encontrar e instalar o plug-in Visual Link Preview

Você provavelmente já sabe como fazer isso, mas apenas no caso, aqui está uma explicação super rápida de como instalar um novo plug-in do WordPress:

• Faça login no seu painel do WordPress.
• Selecione Plugins na barra lateral esquerda.
• Selecione Add New no submenu que aparecerá abaixo de Plugins.
• Digite “Visual Link Preview” na barra de pesquisa no canto superior direito da página.
• Clique em Instalar agora no canto superior direito da caixa de visualização do plug-in.
• Depois de instalado, clique em Ativar.

Depois de ativar o plug-in, você será redirecionado para a página do plug-in e verá este aviso no topo. (A documentação de primeiros passos leva você a esta página.)

Primeiros passos com configurações e personalizações

Depois que o plug-in for ativado, role para baixo na lista de plug-ins para encontrá-lo. Abaixo do nome do plug-in, clique no link Configurações - você será direcionado a esta página:

Por padrão, o botão de alternância Usar estilo personalizado estará desativado. Se você ativá-lo, várias opções surgirão.

Existem personalizações para o seguinte:

• Largura do contêiner, cor de fundo e preenchimento.
• Raio da borda, largura, estilo (sólido, tracejado, pontilhado, etc.) e cor.
• Posição da imagem (esquerda, direita, superior ou inferior), tamanho e raio da borda.
• Tamanho e cor das fontes do título e do resumo.

A maioria deles é autoexplicativa, mas há algumas coisas que você deve saber sobre o tamanho da imagem. Você pode definir um tamanho de miniatura ou um tamanho personalizado. Para uma miniatura, os tamanhos padrão são “miniatura”, “médio” e “grande”, então você apenas digitaria o que quiser no campo. Ou você pode definir um tamanho personalizado neste formato: largura x altura (150 × 150, por exemplo).

Por enquanto, vou deixar tudo como está para ver como fica a caixa de link padrão. Em seguida, voltarei para fazer ajustes.

Usando o plug-in com o Gutenberg Block Editor

Entrei em um rascunho de postagem de blog e adicionei um bloco abaixo de um parágrafo. Você encontrará o bloco Visual Link Preview em Widgets ou pode apenas procurá-lo na parte superior do seletor de bloco.

Esta é a aparência do bloco Visual Link Preview:

Ao clicar na caixa Selecionar uma postagem ou página, você não verá uma lista suspensa do seu conteúdo; você terá que procurar o que deseja. Você também pode adicionar um link para uma URL externa (abordarei isso em breve).

Eu escolhi uma postagem de blog publicada. Isso é o que parece sem que eu faça quaisquer personalizações no estilo:

Configurações de bloqueio do Visual Link Preview em Gutenberg

Se você clicar na pilha de três pontos no topo do bloco, verá um menu suspenso. Selecione Mostrar configurações de bloco para abrir uma barra lateral direita com opções. A partir daqui, você pode fazer várias alterações:

Altere o link. Observe que se você clicar em Alterar link, o link que você possui será removido imediatamente, portanto, certifique-se de não clicar nele acidentalmente.

Altere ou remova a imagem de exibição. Se você remover a imagem de exibição, o Visual Link ficará assim:

Se você não gosta de como fica sem uma imagem, você pode clicar em Escolher imagem para adicionar uma novamente. No entanto, você terá que ir até sua Biblioteca de mídia ou fazer upload de uma imagem - você não terá a opção de auto -adicionando a imagem em destaque novamente, como fez quando você adicionou o link pela primeira vez.

Você pode, é claro, encontrar a imagem em destaque em sua Biblioteca de mídia, mas ela pode estar enterrada. Você também pode simplesmente adicionar novamente o link para que ele adicione automaticamente o conteúdo original.

Ative e desative as configurações de link. Você pode optar por abrir o link em uma nova guia e também pode transformar o link em um link nofollow.

Adicionando um link externo com Gutenberg

Desta vez, estou adicionando um link externo. Copiei e colei no campo correto:

Quando você clica em Usar este URL, acontece o mesmo que quando você adiciona um link interno. Uma imagem, título e trecho serão preenchidos automaticamente e você pode fazer alterações na barra lateral direita. Você também pode clicar em Salvar imagem localmente na seção Conteúdo, e a imagem de exibição do plug-in obtido da fonte do URL será adicionada à sua biblioteca de mídia do WordPress.

Salvando Blocos Reutilizáveis

Se você tiver uma página, postagem de blog ou link externo que usará com frequência, poderá criá-lo uma vez e salvá-lo como um bloco reutilizável para adicioná-lo facilmente no futuro. Isso só funciona no editor de Gutenberg, FYI.

Quando terminar de criar seu bloco, clique no ícone de três pontos na parte superior, o mesmo que você usou para acessar a barra lateral de opções. Em seguida, escolha Adicionar aos blocos reutilizáveis. Você pode atribuir um título ao bloco e ele estará em sua biblioteca de blocos para uso futuro.

Usando o Plugin com o Editor Clássico

Usando o editor clássico, acesse sua postagem ou página e vá até onde deseja adicionar o link visual. Clique no botão Visual Link Preview na parte superior da página:

Esta caixa aparecerá:

Na lista suspensa Tipo, você pode optar por adicionar seu próprio link ou um externo. Primeiro, vou adicionar meu próprio link. Depois de escolher o conteúdo para o link, os campos serão preenchidos automaticamente, da mesma forma que em Gutenberg. É aqui que você fará as alterações. Você pode remover a imagem e optar por adicionar uma nova, alterar o título e atualizar o resumo a partir desta janela. Você também pode usar as configurações padrão do plugin ou o seu modelo personalizado aqui, assim como no Gutenberg.

Adicionando um Link Externo com o Editor Clássico

Desta vez, vou adicionar um link externo. Estes são os campos de um link externo:

Quando você adiciona o URL, os campos são atualizados automaticamente - o mesmo que acontece com um link interno. Você pode então fazer as alterações que desejar antes de inseri-lo em sua página ou postagem. Você também tem a opção Salvar imagem localmente no editor clássico.

Personalização do modelo e da caixa de visualização de link visual

Essa barra de configurações de bloco também inclui uma seção Estilo na parte inferior, onde você pode escolher entre o modelo Usar padrão das configurações ou o modelo Simples. É confuso, porém, porque eles são na verdade a mesma coisa. Explicarei mais em breve. Primeiro, vamos ver como personalizar a caixa de visualização do link.

Na seção Estilo, clique no link Alterar estilo do modelo. Uma nova página será aberta, onde você pode criar um modelo personalizado (você também pode acessá-lo aqui por meio das configurações do plug-in). Novamente, as personalizações são simples, explicativas e diretas, portanto, você terá mais facilidade para se orientar. Esta é a aparência do modelo depois que eu brinquei com algumas personalizações:

Nada bom. Parte do problema é que o texto de visualização é muito longo. De volta ao seu post ou página, se você clicar no bloco, o editor deve aparecer na barra lateral direita. Você pode então ir para a seção Conteúdo e clicar nos campos de título e trecho para fazer alterações.

Em vez de usar uma miniatura, voltei para a página de personalização do modelo e insira um tamanho personalizado para a imagem, que a transformou em um quadrado (e, felizmente, perfeitamente cortado). Brinquei com a cópia do título e do trecho mais um pouco para que ficasse melhor no bloco e ao lado da foto. Isto é melhor:

Você poderia gastar muito tempo descobrindo as personalizações certas, e deveria, especialmente porque você só consegue criar um modelo personalizado.

Visualizando suas personalizações de modelo

Você não pode ver uma visualização ao vivo ao personalizar o modelo. Você tem que ter sua postagem ou página aberta em uma nova janela, fazer as alterações na página de personalização do modelo e clicar de volta para a postagem ou página. Alterne entre as duas opções suspensas de Modelo (lembre-se de que elas não são realmente diferentes uma da outra) - isso atualiza a caixa para que você possa ver suas últimas alterações.

Como obter o estilo padrão de volta

Digamos que você faça várias alterações e perceba que prefere o estilo padrão. Se você deixar o botão Usar estilo personalizado ativado nas configurações do modelo, suas configurações personalizadas serão aplicadas quando você voltar à sua página ou postagem, independentemente de selecionar Usar padrão nas configurações ou Simples na lista suspensa do modelo (como eu disse, confuso).

Se você deseja reverter para os padrões do plug-in, pode ir para a página de configurações do modelo e desativar o botão Usar estilo personalizado. Todas as suas personalizações estarão lá se você quiser reativá-lo eventualmente, mas isso permitirá que você use os padrões do plug-in se preferir a forma como eles se parecem.

Desvantagens do plug-in Visual Link Preview

O plug-in Visual Link Preview é um plug-in simples e direto que faz o que diz que fará e é muito fácil de aprender a usar. No entanto, por ser tão básico, também falta em algumas áreas que poderiam ser melhoradas.

Não há um menu suspenso com todo o seu conteúdo. Eu queria essa opção em vez de ter que lembrar o nome de uma postagem ou página do blog para adicionar como um link.

Você não pode ver uma visualização ao vivo do modelo personalizado. É muito complicado ir e voltar entre a postagem e a página de configurações do modelo toda vez que você quiser ver se essa é a quantidade perfeita de preenchimento ou que tipo de borda usar.

Você só pode criar um modelo personalizado. Esta é a maior desvantagem do plugin. Você não pode criar vários modelos e, em seguida, escolher aquele que usará para corresponder a uma página, postagem de blog ou tipo de link específico. Você também não pode definir algumas caixas de visualização para usar seu modelo personalizado e outras para usar os padrões do plug-in - seja um ou outro.

Empacotando

De modo geral, mesmo apesar de suas desvantagens, gostei do plug-in Visual Link Preview. É uma brisa total de configurar e usar, não importa com qual editor você prefere trabalhar - Gutenberg ou clássico. E esta é definitivamente uma maneira esteticamente mais atraente e atraente de adicionar links, que pode ir longe se você estiver envolvido com marketing de afiliados ou quiser criar um link para suas páginas de destino. No momento, como você não pode criar mais de um modelo, é melhor para sites com uma aparência padronizada em todas as postagens e páginas. Portanto, se você tiver várias páginas de destino diferentes em uma variedade de estilos, terá dificuldade em criar um modelo de caixa de visualização que se encaixe onde quer que seja colocado. Caso contrário, porém, este é um plugin leve que faz bem o seu trabalho.

Você também pode gostar deste artigo com cinco coisas legais que você pode fazer no Divi com links de âncora.