Comment créer un aperçu de lien visuel dans WordPress

Enrichir vos pages et publications WordPress avec du contenu comme des ressources utiles, des produits connexes, des CTA promotionnels ou des articles divertissants organisés peut vous aider, vous ou votre marque, à offrir plus de valeur à votre public. Un lien simple ne le coupera pas toujours, cependant - à moins que le texte d'ancrage et le sentiment environnant ne soient suffisamment convaincants, ces liens peuvent être effleurés. En créant des liens visuels pour votre site Web, comme ceux améliorés que vous voyez sur Facebook, vous pouvez ajouter un contenu attrayant et interactif auquel vos visiteurs prêteront attention. Le plugin Visual Link Preview pour WordPress est un moyen simple d'ajouter plus de panache à vos liens.

Voici quelques façons d'utiliser ce plugin :

• Ajoutez un CTA à un lien d'affiliation.
• Sauvegardez les réclamations, les faits et les statistiques.
• Organisez le contenu d'autres sites.
• Incluez des ressources utiles pour que les lecteurs en apprennent davantage.
• Faites la promotion des produits de votre boutique en ligne.

De plus, dans sa forme la plus simple, le plugin Visual Link Preview est un moyen plus attrayant de créer un lien vers des publications connexes et d'inciter les gens à rester plus longtemps sur votre site.

Le plugin vous permet de créer un aperçu visuel pour tout lien interne ou externe, et vous pouvez également créer un modèle personnalisé avec un style qui correspond à votre marque ou votre site. Ensuite, placez une zone d'aperçu simplifiée n'importe où sur votre publication ou votre page. Voyons comment ajouter une zone de prévisualisation à WordPress à la fois dans Gutenberg et dans l'éditeur classique.

Recherche et installation du plug-in Visual Link Preview

Vous savez probablement déjà comment faire cela, mais juste au cas où, voici un aperçu très rapide de la façon d'installer un nouveau plugin WordPress :

• Connectez-vous à votre tableau de bord WordPress.
• Sélectionnez Plugins dans la barre latérale gauche.
• Sélectionnez Ajouter nouveau dans le sous-menu qui apparaîtra sous Plugins.
• Tapez « Visual Link Preview » dans la barre de recherche en haut à droite de la page.
• Cliquez sur Installer maintenant en haut à droite de la zone d'aperçu du plugin.
• Une fois installé, cliquez sur Activer.

Une fois que vous avez activé le plugin, vous serez redirigé vers votre page de plugin, et vous verrez cet avis en haut. (La documentation de démarrage vous amène à cette page.)

Premiers pas avec les paramètres et les personnalisations

Une fois le plugin activé, faites défiler votre liste de plugins pour le trouver. Sous le nom du plugin, cliquez sur le lien Paramètres - vous serez redirigé vers cette page :

Par défaut, la bascule Utiliser un style personnalisé sera désactivée. Si vous l'activez, un tas d'options s'affichent.

Il existe des personnalisations pour les éléments suivants :

• Largeur du conteneur, couleur de fond et remplissage.
• Rayon de bordure, largeur, style (plein, pointillé, pointillé, etc.) et couleur.
• Position de l'image (gauche, droite, haut ou bas), taille et rayon de la bordure.
• Taille et couleur des polices de titre et de résumé.

La plupart d'entre eux sont assez explicites, mais il y a quelques choses à savoir sur la taille de l'image. Vous pouvez soit définir une taille de vignette, soit une taille personnalisée. Pour une vignette, les tailles standard sont « miniature », « moyenne » et « grande », vous devez donc simplement taper ce que vous voulez dans le champ. Ou, vous pouvez définir une taille personnalisée dans ce format : largeurxhauteur (150×150, par exemple).

Pour l'instant, je vais tout laisser tel quel pour voir à quoi ressemble la boîte de lien par défaut. Ensuite, je vais revenir pour faire des ajustements.

Utilisation du plugin avec l'éditeur de blocs Gutenberg

Je suis allé dans un brouillon d'article de blog et j'ai ajouté un bloc sous un paragraphe. Vous trouverez le bloc Visual Link Preview sous Widgets, ou vous pouvez simplement le rechercher en haut du sélecteur de bloc.

Voici à quoi ressemble le bloc Visual Link Preview :

Lorsque vous cliquez dans la zone Sélectionner une publication ou une page, vous ne verrez pas de liste déroulante de votre contenu ; vous devrez chercher ce que vous voulez. Vous pouvez également ajouter un lien vers une URL externe (j'y reviendrai dans un instant).

J'ai choisi un article de blog publié. Voici à quoi cela ressemble sans que je fasse des personnalisations au style :

Paramètres de blocage de Visual Link Preview dans Gutenberg

Si vous cliquez sur la pile de trois points en haut du bloc, vous verrez un menu déroulant. Sélectionnez Afficher les paramètres de blocage pour afficher une barre latérale droite avec des options. À partir de là, vous pouvez effectuer plusieurs modifications :

Changez le lien. Notez que si vous cliquez sur Modifier le lien, le lien que vous avez sera immédiatement supprimé, alors assurez-vous de ne pas cliquer dessus par accident.

Modifiez ou supprimez l'image d'affichage. Si vous supprimez l'image d'affichage, voici à quoi ressemble le lien visuel :

Si vous n'aimez pas son apparence sans image, vous pouvez cliquer sur Choisir une image pour en rajouter une. Cependant, vous devrez parcourir votre médiathèque ou télécharger une image - vous n'aurez pas l'option d'auto -ajouter à nouveau l'image en vedette, comme lorsque vous avez ajouté le lien pour la première fois.

Vous pouvez, bien sûr, trouver l'image en vedette dans votre médiathèque, mais elle peut être enterrée. Vous pouvez également simplement rajouter le lien afin qu'il ajoute automatiquement le contenu d'origine.

Activez et désactivez les paramètres de lien. Vous pouvez choisir d'ouvrir le lien dans un nouvel onglet, et vous pouvez également transformer le lien en lien nofollow.

Ajouter un lien externe avec Gutenberg

Cette fois, j'ajoute un lien externe. Je l'ai copié et collé dans le bon champ :

Lorsque vous cliquez sur Utiliser cette URL, la même chose se produit que lorsque vous ajoutez un lien interne. Une image, un titre et un extrait seront remplis automatiquement et vous pourrez apporter des modifications dans la barre latérale droite. Vous pouvez également cliquer sur Enregistrer l'image localement dans la section Contenu, et l'image d'affichage que le plugin a récupérée à partir de la source URL sera ajoutée à votre médiathèque WordPress.

Sauvegarder des blocs réutilisables

Si vous avez une page, un article de blog ou un lien externe que vous allez utiliser souvent, vous pouvez le créer une fois, puis l'enregistrer en tant que bloc réutilisable pour l'ajouter facilement à l'avenir. Cela ne fonctionne que dans l'éditeur Gutenberg, pour info.

Lorsque vous avez terminé de créer votre bloc, cliquez sur l'icône à trois points en haut, la même que celle que vous avez utilisée pour accéder à la barre latérale des options. Ensuite, choisissez Ajouter aux blocs réutilisables. Vous pouvez titrer le bloc et il sera dans votre bibliothèque de blocs pour une utilisation future.

Utilisation du plugin avec l'éditeur classique

À l'aide de l'éditeur classique, accédez à votre publication ou à votre page et accédez à l'endroit où vous souhaitez ajouter le lien visuel. Cliquez sur le bouton Visual Link Preview en haut de la page :

Cette boîte s'affichera :

Dans la liste déroulante Type, vous pouvez choisir d'ajouter votre propre lien ou un lien externe. Tout d'abord, je vais ajouter mon propre lien. Une fois que vous avez choisi le contenu vers lequel créer un lien, les champs se remplissent automatiquement, comme avec Gutenberg. C'est ici que vous apporterez vos modifications. Vous pouvez supprimer l'image et choisir d'en ajouter une nouvelle, modifier le titre et mettre à jour le résumé à partir de cette fenêtre. Vous pouvez également utiliser les paramètres par défaut du plugin ou votre modèle personnalisé ici, tout comme avec Gutenberg.

Ajout d'un lien externe avec l'éditeur classique

Cette fois, je vais ajouter un lien externe. Voici les champs pour un lien externe :

Lorsque vous ajoutez l'URL, les champs seront mis à jour automatiquement, comme avec un lien interne. Vous pouvez ensuite apporter les modifications que vous souhaitez avant de l'insérer dans votre page ou votre publication. Vous avez également l'option Enregistrer l'image localement dans l'éditeur classique.

Personnalisation du modèle et de la zone d'aperçu de lien visuel

Cette barre de paramètres de bloc comprend également une section Style en bas où vous pouvez choisir entre le modèle Utiliser les paramètres par défaut ou le modèle Simple. C'est déroutant, cependant, parce qu'ils sont en fait la même chose. J'expliquerai plus dans un peu. Tout d'abord, voyons comment personnaliser la zone d'aperçu du lien.

Dans cette section Style, cliquez sur le lien Modifier le style du modèle. Une nouvelle page s'ouvrira où vous pourrez créer un modèle personnalisé (vous pouvez également y accéder via les paramètres du plugin). Encore une fois, les personnalisations sont simples, explicatives et directes, vous devriez donc avoir du mal à vous y retrouver. Voici à quoi ressemble le modèle après avoir joué avec quelques personnalisations :

Pas génial. Une partie du problème est que le texte d'aperçu est trop long. De retour sur votre article ou votre page, si vous cliquez sur le bloc, l'éditeur devrait apparaître dans la barre latérale droite. Vous pouvez ensuite accéder à la section Contenu et cliquer dans les champs de titre et d'extrait pour apporter des modifications.

Au lieu d'utiliser une vignette, je suis retourné à la page de personnalisation du modèle et j'ai entré une taille personnalisée pour l'image, ce qui l'a transformée en un carré (et, heureusement, en un carré parfaitement recadré). J'ai joué un peu plus avec le titre et l'extrait pour qu'il soit mieux dimensionné dans le bloc et à côté de l'image. C'est mieux:

Vous pourriez passer beaucoup de temps à trouver les bonnes personnalisations, et vous devriez le faire, d'autant plus que vous ne pouvez créer qu'un seul modèle personnalisé.

Aperçu des personnalisations de votre modèle

Vous ne pouvez pas voir un aperçu en direct lorsque vous personnalisez le modèle. Vous devez ouvrir votre publication ou votre page dans une nouvelle fenêtre, apporter les modifications sur la page de personnalisation du modèle, puis cliquer de nouveau sur la publication ou la page. Basculez entre les deux options de modèle déroulantes (rappelez-vous qu'elles ne sont pas vraiment différentes les unes des autres) - cela actualise la boîte afin que vous puissiez voir vos dernières modifications.

Comment récupérer le style par défaut

Disons que vous effectuez un tas de modifications, puis vous réalisez que vous préférez le style par défaut. Si vous laissez la bascule Utiliser le style personnalisé activée dans les paramètres du modèle, vos paramètres personnalisés seront appliqués lorsque vous reviendrez sur votre page ou votre publication, que vous sélectionniez Utiliser par défaut dans les paramètres ou Simple dans la liste déroulante Modèle (comme je l'ai dit, déroutant).

Si vous souhaitez rétablir les paramètres par défaut du plug-in, vous pouvez accéder à la page des paramètres du modèle et désactiver le bouton Utiliser un style personnalisé. Toutes vos personnalisations seront là si vous souhaitez les réactiver éventuellement, mais cela vous permettra d'utiliser les valeurs par défaut du plugin si vous préférez leur apparence.

Inconvénients du plugin Visual Link Preview

Le plugin Visual Link Preview est un plugin simple et direct qui fait ce qu'il dit qu'il fera, et il est très facile à apprendre à utiliser. Cependant, parce qu'il est si basique, il manque également dans quelques domaines qui pourraient nécessiter des améliorations.

Il n'y a pas de menu déroulant avec tout votre contenu. Je voulais cette option au lieu d'avoir à mémoriser le nom d'un article de blog ou d'une page à ajouter en tant que lien.

Vous ne pouvez pas voir un aperçu en direct du modèle personnalisé. C'est assez maladroit d'aller et venir entre la publication et la page des paramètres du modèle chaque fois que vous voulez voir si c'est la quantité parfaite de rembourrage ou quel type de bordure utiliser.

Vous ne pouvez créer qu'un seul modèle personnalisé. C'est le plus gros inconvénient du plugin. Vous ne pouvez pas créer plusieurs modèles, puis choisir celui que vous utilisez pour correspondre à une page spécifique, un article de blog ou un type de lien. Vous ne pouvez pas non plus définir certaines zones de prévisualisation pour utiliser votre modèle personnalisé et d'autres pour utiliser les valeurs par défaut du plugin - c'est l'un ou l'autre.

Emballer

Dans l'ensemble, même malgré ses inconvénients, j'ai aimé le plugin Visual Link Preview. C'est un jeu d'enfant à configurer et à utiliser, quel que soit l'éditeur avec lequel vous préférez travailler - Gutenberg ou classique. Et c'est certainement un moyen plus esthétique et accrocheur d'ajouter des liens, ce qui peut aller très loin si vous êtes impliqué dans le marketing d'affiliation ou si vous souhaitez créer un lien vers vos pages de destination. À l'heure actuelle, étant donné que vous ne pouvez pas créer plus d'un modèle, il est préférable pour les sites Web avec une apparence standardisée sur tous les articles et pages. Ainsi, si vous avez un certain nombre de pages de destination différentes dans une variété de styles, vous aurez du mal à créer un modèle de boîte de prévisualisation qui s'adapte à l'endroit où il est placé. Sinon, cependant, il s'agit d'un plugin léger qui fait bien son travail.

Vous aimerez peut-être aussi cet article avec cinq choses sympas que vous pouvez faire dans Divi avec des liens d’ancrage.