Facebook weergave met de Virtuele Link Preview plug-in
Met de Visuele Link Preview plug-in kan je elke link veranderen in een Facebook-achtige weergave. Deze handige functie kan je toepassen op elke pagina of blogbericht.
Door middel van deze manier van het weergeven van je interne of externe linken kan je de pagina’s aanzienlijk verrijken. Of het nu gaat om promotionele Call to Actions, handige informatiebronnen, of om de weergave van affiliate producten. Je zult direct merken dat het aantal clicks op je website zal toenemen. Een gewone link trekt niet altijd de aandacht die het verdient, tenzij de anker tekst en de omringende afbeeldingen overtuigend genoeg zijn. Met een weergave die je gewend bent van Facebook kan je meer boeiende interactieve inhoud toevoegen. Dit zal zeker ook direct opvallen bij de bezoekers op je pagina.
Met de Visual Link Preview WordPress plug-in kan je op een eenvoudige manier meer elegantie aan je links toe te voegen.
Visuele link preview plug-in toepassen:
- Toevoegen van een Call To action
- Weergave van aanbiedingen, feiten of statistieken
- Gerelateerde websites
- Nuttige informatiebonnen met aanvullende informatie
- Promoten van e-commerce producten
- Affiliate linken
Met Visual Link Preview plug-in maak je eenvoudig voorbeeldvakken die de bezoekers meer zullen boeien en daardoor langer op je website blijven. De plug-in heeft een standaard Facebook-achtig voorbeeld vak maar biedt ook de mogelijkheid om een eigen sjablonen op te maken. Zo kan je een stijl ontwikkelen die past bij je website of het product wat je onder de aandacht brengt. Vervolgens kan je dit sjabloon overal als basis gebruiken voor elk link. Of het nu om de klassieke WordPress editor gaat of de Gutenberg editor.
De Visuele Link Preview-plug-in zoeken en installeren
Er zijn altijd mensen die nog niet helemaal weten hoe dit moet. Daarom hier een kleine doorloop voor het installeren van een plug-in bij WordPress via het dashboard:
- Log in op uw WordPress-dashboard.
- Selecteer Plug-ins in de linkerzijbalk.
- Selecteer Nieuw toevoegen in het submenu dat onder Plug-ins verschijnt.
- Typ “Visual Link Preview” in de zoekbalk in de rechterbovenhoek van de pagina.
- Klik op Nu installeren in de rechterbovenhoek van het voorbeeldvenster van de plug-in.
- Klik na installatie op Activeren.
Op het moment dat je de plug-in hebt geactiveerd, word je omgeleid naar de plug-in pagina. Als het goed is zou je nu bovenaan een melding moeten krijgen met: (De documentatie Aan de slag brengt u naar deze pagina.)
Instellen en aanpassen visuele link preview
Ga na het activeren van de plug-in naar de overzichtslijst waar je alle plug-ins onder elkaar te zien krijgt. Blader door de lijst en zoek de plug-in Visual Link Preview. Klik vervolgens op het linkje met de naam settings- vervolgens word je naar deze pagina gestuurd:
De schakelaar met persoonlijke instellingen (Custom Styling) staat standaard op uit. Als je deze optie inschakelt, komen er een verschillende opties naar voren. Hiermee kun je het geheel aanpassen in je eigen huisstijl!
Aanpassingen die je kunt maken:
- Breder maken van de container, opvulling en achtergrondkleur.
- Border radius, breedte, borderstijl (gestippeld, effen, etc.) en de lijnkleur.
- De positie van de afbeelding (boven, onder, links of rechts), randradius en grootte.
- kleur en grootte van de titel en lettertypen.
De meeste aanpassingen die je kunt maken spreken voor zich. Wil je de grootte van de afbeelding wijzigen zijn er wel ene paar dingen die je moet weten.
Je kan kiezen voor de standaard weergave van een miniatuurformaat of een aangepast formaat ingeven. Het miniatuurformaat kent drie opties, te weten: thumbnail,” “medium” en “large. In het veld type je dan een van deze drie opties die je tot je beschikking hebt. Wil je een aangepast formaat dan kan je dit doen met de verhouding breedte X hoogte (width X height) bijvoorbeeld 150×150 pixels. Let op dit moet altijd een vierkante verhouding zijn!
In dit voorbeeld laat ik alles staan in de standaard opmaak. Zo krijg je eerst een beeld van hoe een standaard weergave vak eruit gaat zien. Later in deze uitleg zal ik andere aanpassingen maken.
Visual Link preview en de Gutenberg Block Editor
Deze plug-in werkt ook perfect samen met de Gutenberg editor. Zelf ben ik een van de webdesigners die geen gebruik maken van de Gutenberg editor. Daarom zal ik de uitleg van deze editor overslaan. Ook omdat de toepassing en werking vrijwel identiek is aan de klassieke editor.
De Visuele link preview plug-in gebruiken met de klassieke editor
Werk je met de klassieke WordPress editor open dan een bericht en ga naar de positie waar je de visuele link wilt toevoegen. Klik op de knop Visual Link Preview bovenaan de editor (zie afbeelding):
Dit pop-up scherm zal zich openen:
In het selectie vakje met de naam TYPE kan je ervoor kiezen om een interne of een externe link toe te voegen. Eerst ga ik laten zien hoe je hier een interne link toevoegt. Zodra je de inhoud hebt gekozen om naar te linken, worden de velden automatisch ingevuld. Dit gebeurt ook op dezelfde manier bij de Gutenberg editor. Nu kan je alle gegevens aanpassen naar je eigen wens. Je kan de bestaande afbeelding wijzigen en een nieuwe toevoegen. Ook de titel en korte omschrijving zijn volledig aanpasbaar. Ook hier kan je weer kiezen voor de standaard template of een template met je eigen voorkeursinstellingen.
Een externe link toevoegen
In deze stap leg ik je uit hoe je een externe link toevoegt. Klik in het selectie vakje met de naam TYPE voor de optie external link (externe link):
Wanneer je de URL toevoegt, worden ook hier alle gegevens velden automatisch bijgewerkt, net als bij een interne link. Vervolgens kan je ook hier alle wijzigingen aanbrengen voordat je de Preview op je pagina of bericht plaatst. In de klassieke WordPress Editor kan je ook gebruik maken van de optie om afbeeldingen lokaal op te slaan.
De Visuele Link Preview Sjabloon en -Box aanpassen
Bij de stijl sectie achter het woord template kan je kiezen voor het gebruik van “standaard de instellingen” (Use default from settings) of de optie “simpel modus” (simple). Dit is misschien wat verwarrend omdat deze eigenlijk hetzelfde lijken. Verder in dit artikel zal ik hier meer over uitleggen. Laten we eerst eens kijken hoe we het link voorbeeld vak kunnen aanpassen.
Klik in open venster achter het woord template de optie “Change Template Styling”. Nadat je op deze link hebt geklikt zal er een nieuwe pagina openen. De aanpassingen zijn redelijk eenvoudig, verklarend en ongecompliceerd. Hier is hoe de sjabloon eruitziet nadat ik met wat aanpassingen heb gespeeld:
In dit voorbeeld zie je dat de instellingen toch niet helemaal de juiste verhoudingen hebben. De voorbeeldtekst is te lang ten opzichte van de afbeelding. Wil je dit aanpassen dan is dat een fluitje van een cent. Ga terug naar het bericht op je pagina. Wanneer je op het preview link tekst vak klikt opent zich een pop-up in het scherm. Vervolgens kun je naar het gedeelte met “change template styling”. Hier kun je verschillende instellingen eenvoudig aanpassen. De afbeelding links, onder of boven. De grootte van de afbeelding, lettertype, border, etc. Speel hier net zo lang mee tot het jouw gewenste resultaat heeft opgeleverd.
In plaats van een miniatuur te gebruiken, ging ik terug naar de pagina voor het aanpassen van sjablonen en voerde een aangepast formaat in voor de afbeelding, waardoor het een vierkant werd (en gelukkig een perfect bijgesneden). Ik speelde met de titel en kopieerde er nog een paar zodat het beter in het blok en naast de foto was. Dit is beter:
Het is even uitzoeken tot je de juiste instellingen hebt gevonden. Deze worden dan ook overal op je website doorgevoerd. In de basis kun je helaas maar kiezen voor een aan te passen template.
Sjabloonaanpassingen live bekijken
Helaas is het nog niet mogelijk om de gemaakte aanpassingen live op de pagina te zien veranderen. Je zult het bericht dus steeds moeten opslaan en door middel van pagina verversen en bekijken in een nieuw venster. Om verdere aanpassingen te maken zal je dus moeten switchen tussen het bericht en paginaweergave. Een andere optie is door in het Visual link Preview openingsvenster heen en weer te schakelen tussen de twee drop down sjabloonopties. Dit vernieuwt de light box zodat je de laatste wijzigingen direct kunt bekijken.
Teruggaan naar de standaardstijl
Je bent al even bezig met instellen wanneer je jezelf realiseert dat je toch liever de voorkeur geeft aan de standaardstijl. Wanneer je de schakelaar aangepaste styling laat staan in de sjablooninstellingen worden je aangepaste instellingen toegepast. Selecteer je de standaard template “use default from settings” maak je gebruik van de standaard basis instellingen. Zoals ik al eerder aangaf het is een beetje verwarrend.
Terugkeren is dus heel simpel. Zet in de plug-in de optie custom styling op uit. Alle aanpassingen in de custom styling blijven bewaard. Wil je later toch weer een custom weergave dan schakel je gewoon weer in en kom je terug bij je eerder gemaakte instellingen.
Nadelen van de Visuele Link Preview Plug-in
De Visual Link Preview-plug-in is een eenvoudige en ongecompliceerde plug-in die doet wat het moet doen. De werking van de Visual Link Preview plug-in is zeer eenvoudig te leren gebruiken. Door zijn eenvoud zijn er ook een paar die verbetering kunnen gebruiken.
De plug-in bevat geen drop down-menu met al je inhoud waar de Facebook weergave is gebruikt. Je zal dus de naam van blogpost of pagina moeten onthouden waar je de linken hebt toegevoegd.
Je kan geen live voorbeeld van de sjabloon aanpassingen zien. Het is een beetje onhandig om heen en weer te gaan tussen de post en de pagina met sjablooninstellingen. Voor elke wijziging zal je dus moeten opslaan en na het verversen van paginaweergave de aanpassingen bekijken. Een tip is om een extra scherm met de pagina te openen in je browser. Voor mij persoonlijk werkt dat net iets sneller.
Standaard zijn er maar twee sjablonen te gebruiken. De standaard weergave en custom made. Dit is een van de grootste nadelen van deze plug-in. Helaas heb je daardoor niet meer opties tot je beschikking om de weergave aan te passen op een specifieke pagina, blogpost of type link. Het is dus keuze A of keuze B.
Ter afsluiting
Ondanks deze paar kleine nadelen is de Visual Preview Plug-in een mooie aanvulling. Of je nu met de klassieke of de Gutenberg editor werkt, het instellen is een fluitje van een cent. De weergave valt absoluut meer op dan wanneer je een normale tekstlink zou gebruiken. Zeker bij affiliate marketing kan je de weg naar je bestemmingspagina’s eruit laten springen.
Op het moment van schrijven van dit artikel kan je slechts gebruik maken van niet meer dan één aangepaste sjabloon. Het zal even uitzoeken zijn naar een passende weergave op al je pagina’s. Ondanks dit alles is doet deze lichtgewicht plug-in alles wat hij moet doen.
Wil jij de Visual Preview plug-in ook gaan gebruiken op je website en heb je er misschien vragen over? Neem dan gerust geheel vrijblijvend contact op. Ik help je graag verder.
0 reacties