So erstellen Sie eine visuelle Linkvorschau in WordPress

Wenn Sie Ihre WordPress-Seiten und -Posts mit Inhalten wie hilfreichen Ressourcen, verwandten Produkten, Werbe-CTAs oder unterhaltsamen kuratierten Artikeln anreichern, können Sie oder Ihre Marke Ihrem Publikum mehr Wert bieten. Ein einfacher Link reicht jedoch nicht immer aus – es sei denn, der Ankertext und die umgebende Stimmung sind überzeugend genug, diese Links können direkt überstrichen werden. Indem Sie visuelle Links für Ihre Website erstellen, wie die verbesserten, die Sie auf Facebook sehen, können Sie ansprechende, interaktive Inhalte hinzufügen, auf die Ihre Besucher achten werden. Das Visual Link Preview-Plugin für WordPress ist eine einfache Möglichkeit, Ihren Links mehr Schwung zu verleihen.

Hier sind nur ein paar Möglichkeiten, wie Sie dieses Plugin verwenden können:

• Fügen Sie einen CTA zu einem Affiliate-Link hinzu.
• Sichern Sie Behauptungen, Fakten und Statistiken.
• Inhalte von anderen Websites kuratieren.
• Fügen Sie hilfreiche Ressourcen für die Leser hinzu, um mehr zu erfahren.
• Bewerben Sie Ihre E-Commerce-Shop-Produkte.

Außerdem ist das Visual Link Preview-Plugin in seiner einfachsten Form eine attraktivere Möglichkeit, auf verwandte Beiträge zu verlinken und die Leute dazu zu bringen, länger auf Ihrer Website zu bleiben.

Mit dem Plugin können Sie eine visuelle Vorschau für jeden internen oder externen Link erstellen, und Sie können auch eine benutzerdefinierte Vorlage mit einem Stil erstellen, der zu Ihrer Marke oder Website passt. Platzieren Sie dann an einer beliebigen Stelle Ihres Beitrags oder Ihrer Seite ein optimiertes Vorschaufeld. Sehen wir uns an, wie Sie WordPress sowohl in Gutenberg als auch im klassischen Editor eine Vorschaubox hinzufügen.

Suchen und Installieren des Visual Link Preview-Plugins

Sie wissen wahrscheinlich bereits, wie das geht, aber für alle Fälle ist hier eine superschnelle Anleitung zur Installation eines neuen WordPress-Plugins:

• Melden Sie sich bei Ihrem WordPress-Dashboard an.
• Wählen Sie in der linken Seitenleiste Plugins aus.
• Wählen Sie Neu hinzufügen im Untermenü, das unter Plugins angezeigt wird.
• Geben Sie "Visual Link Preview" in die Suchleiste oben rechts auf der Seite ein.
• Klicken Sie oben rechts im Vorschaufenster des Plugins auf Jetzt installieren.
• Klicken Sie nach der Installation auf Aktivieren.

Sobald Sie das Plugin aktiviert haben, werden Sie zu Ihrer Plugin-Seite weitergeleitet und sehen diesen Hinweis oben. (Die Dokumentation „Erste Schritte“ führt Sie zu dieser Seite.)

Erste Schritte mit Einstellungen und Anpassungen

Sobald das Plugin aktiviert ist, scrollen Sie in Ihrer Plugin-Liste nach unten, um es zu finden. Klicken Sie unter dem Namen des Plugins auf den Link Einstellungen – Sie werden zu dieser Seite weitergeleitet:

Standardmäßig ist der Schalter „Benutzerdefiniertes Styling verwenden“ deaktiviert. Wenn Sie es einschalten, werden eine Reihe von Optionen angezeigt.

Es gibt Anpassungen für Folgendes:

• Containerbreite, Hintergrundfarbe und Polsterung.
• Randradius, Breite, Stil (durchgezogen, gestrichelt, gepunktet usw.) und Farbe.
• Bildposition (links, rechts, oben oder unten), Größe und Randradius.
• Größe und Farbe für die Titel- und Zusammenfassungsschriftarten.

Die meisten davon sind ziemlich selbsterklärend, aber es gibt ein paar Dinge, die Sie über die Bildgröße wissen sollten. Sie können entweder eine Miniaturansichtsgröße oder eine benutzerdefinierte Größe festlegen. Die Standardgrößen für Miniaturansichten sind „Miniaturansicht“, „Mittel“ und „Groß“. Geben Sie also einfach die gewünschte Größe in das Feld ein. Oder Sie können eine benutzerdefinierte Größe in diesem Format festlegen: Breite x Höhe (z. B. 150 × 150).

Im Moment belasse ich alles so, wie es ist, um zu sehen, wie die Standard-Linkbox aussieht. Dann gehe ich wieder rein, um Optimierungen vorzunehmen.

Verwenden des Plugins mit dem Gutenberg Block Editor

Ich ging in einen Blog-Post-Entwurf und fügte einen Block unter einem Absatz hinzu. Sie finden den Block Visual Link Preview unter Widgets oder Sie können einfach oben in der Blockauswahl danach suchen.

So sieht der Block Visual Link Preview aus:

Wenn Sie in das Feld Wählen Sie einen Beitrag oder eine Seite klicken, wird kein Dropdown-Menü Ihres Inhalts angezeigt. Sie müssen suchen, was Sie wollen. Sie können auch einen Link zu einer externen URL hinzufügen (ich werde gleich darauf eingehen).

Ich habe mich für einen veröffentlichten Blogbeitrag entschieden. So sieht es aus, ohne dass ich Anpassungen am Stil vornehme:

Blockeinstellungen von Visual Link Preview in Gutenberg

Wenn Sie oben im Block auf den Stapel mit drei Punkten klicken, wird ein Dropdown-Menü angezeigt. Wählen Sie Blockeinstellungen anzeigen aus, um eine rechte Seitenleiste mit Optionen anzuzeigen. Von hier aus können Sie mehrere Änderungen vornehmen:

Ändern Sie den Link. Beachten Sie, dass der Link, den Sie haben, sofort entfernt wird, wenn Sie auf Link ändern klicken, also stellen Sie sicher, dass Sie nicht versehentlich darauf klicken.

Ändern oder entfernen Sie das Anzeigebild. Wenn Sie das Anzeigebild entfernen, sieht der Visual Link so aus:

Wenn Ihnen das Aussehen ohne Bild nicht gefällt, können Sie auf Bild auswählen klicken, um eines wieder hinzuzufügen. Sie müssen jedoch Ihre Medienbibliothek durchsuchen oder ein Bild hochladen – Sie haben keine Option für die automatische -Hinzufügen des vorgestellten Bildes wie beim ersten Hinzufügen des Links.

Sie können das vorgestellte Bild natürlich in Ihrer Medienbibliothek finden, aber es kann vergraben sein. Sie können den Link auch einfach erneut hinzufügen, damit der ursprüngliche Inhalt automatisch hinzugefügt wird.

Link-Einstellungen ein- und ausschalten. Sie können den Link in einem neuen Tab öffnen oder den Link in einen Nofollow-Link umwandeln.

Hinzufügen eines externen Links mit Gutenberg

Diesmal füge ich einen externen Link hinzu. Ich habe es kopiert und in das richtige Feld eingefügt:

Wenn Sie auf Diese URL verwenden klicken, geschieht dasselbe wie beim Hinzufügen eines internen Links. Ein Bild, ein Titel und ein Auszug werden automatisch ausgefüllt und Sie können in der rechten Seitenleiste Änderungen vornehmen. Sie können auch im Abschnitt Inhalt auf Bild lokal speichern klicken, und das Anzeigebild, das das Plugin aus der URL-Quelle entnommen hat, wird Ihrer WordPress-Medienbibliothek hinzugefügt.

Speichern wiederverwendbarer Blöcke

Wenn Sie eine Seite, einen Blogbeitrag oder einen externen Link haben, die Sie häufig verwenden, können Sie sie einmal erstellen und dann als wiederverwendbaren Block speichern, um sie später einfach hinzuzufügen. Dies funktioniert nur im Gutenberg-Editor, FYI.

Wenn Sie mit der Erstellung Ihres Blocks fertig sind, klicken Sie oben auf das Symbol mit den drei Punkten, das Sie für den Zugriff auf die Seitenleiste mit den Optionen verwendet haben. Wählen Sie dann Zu wiederverwendbaren Blöcken hinzufügen. Sie können den Block benennen, und er befindet sich in Ihrer Blockbibliothek für die zukünftige Verwendung.

Verwenden des Plugins mit dem Classic Editor

Gehen Sie mit dem klassischen Editor zu Ihrem Beitrag oder Ihrer Seite und gehen Sie zu der Stelle, an der Sie den visuellen Link hinzufügen möchten. Klicken Sie oben auf der Seite auf die Schaltfläche Visual Link Preview:

Diese Box wird erscheinen:

In der Dropdown-Liste Typ können Sie Ihren eigenen Link oder einen externen Link hinzufügen. Zuerst werde ich meinen eigenen Link hinzufügen. Sobald Sie den Inhalt zum Verlinken ausgewählt haben, werden die Felder automatisch ausgefüllt, genau wie bei Gutenberg. Hier nehmen Sie alle Änderungen vor. Sie können das Bild entfernen und ein neues hinzufügen, den Titel ändern und die Zusammenfassung in diesem Fenster aktualisieren. Sie können auch hier die Standardeinstellungen des Plugins oder Ihre benutzerdefinierte Vorlage verwenden, genau wie bei Gutenberg.

Hinzufügen eines externen Links mit dem klassischen Editor

Diesmal füge ich einen externen Link hinzu. Dies sind die Felder für einen externen Link:

Wenn Sie die URL hinzufügen, werden die Felder automatisch aktualisiert – genau wie bei einem internen Link. Sie können dann alle gewünschten Änderungen vornehmen, bevor Sie sie in Ihre Seite oder Ihren Beitrag einfügen. Auch im klassischen Editor steht Ihnen die Option Bild lokal speichern zur Verfügung.

Anpassen der Vorlage und der Box für die Vorschau für visuelle Links

Diese Blockeinstellungsleiste enthält auch unten einen Stilabschnitt, in dem Sie zwischen der Vorlage "Standard aus Einstellungen verwenden" oder der Vorlage "Einfach" wählen können. Es ist jedoch verwirrend, weil sie eigentlich dasselbe sind. Ich erkläre gleich mehr. Sehen wir uns zunächst an, wie Sie das Vorschaufeld für den Link anpassen.

Klicken Sie in diesem Stilabschnitt auf den Link Vorlagenstil ändern. Es öffnet sich eine neue Seite, auf der Sie eine benutzerdefinierte Vorlage erstellen können (Sie können auch über die Plugin-Einstellungen hierher gelangen). Auch hier sind die Anpassungen einfach, erklärend und unkompliziert, sodass Sie sich leicht zurechtfinden sollten. So sieht die Vorlage aus, nachdem ich mit einigen Anpassungen herumgespielt habe:

Nicht gut. Ein Teil des Problems ist, dass der Vorschautext zu lang ist. Zurück auf Ihrem Beitrag oder Ihrer Seite sollte der Editor in der rechten Seitenleiste angezeigt werden, wenn Sie auf den Block klicken. Sie können dann zum Abschnitt Inhalt gehen und in die Felder Titel und Auszug klicken, um Änderungen vorzunehmen.

Anstatt ein Miniaturbild zu verwenden, ging ich zurück zur Vorlagenanpassungsseite und gab eine benutzerdefinierte Größe für das Bild ein, wodurch es in ein Quadrat umgewandelt wurde (und zum Glück perfekt zugeschnitten). Ich habe mit dem Titel gespielt und den Ausschnitt noch etwas kopiert, damit er im Block und neben dem Bild besser dimensioniert war. Das ist besser:

Sie könnten viel Zeit damit verbringen, die richtigen Anpassungen herauszufinden, und das sollten Sie auch, zumal Sie nur eine benutzerdefinierte Vorlage erstellen können.

Vorschau Ihrer Vorlagenanpassungen

Beim Anpassen der Vorlage wird keine Live-Vorschau angezeigt. Sie müssen Ihren Beitrag oder Ihre Seite in einem neuen Fenster öffnen lassen, die Änderungen auf der Vorlagenanpassungsseite vornehmen und dann auf den Beitrag oder die Seite zurück klicken. Wechseln Sie zwischen den beiden Dropdown-Vorlagenoptionen hin und her (denken Sie daran, dass sie sich nicht wirklich voneinander unterscheiden) – dies aktualisiert das Feld, sodass Sie Ihre neuesten Änderungen sehen können.

So erhalten Sie den Standardstil zurück

Nehmen wir an, Sie nehmen eine Reihe von Änderungen vor und stellen dann fest, dass Sie den Standardstil bevorzugen. Wenn Sie den Schalter Benutzerdefiniertes Styling verwenden in den Vorlageneinstellungen aktiviert lassen, werden Ihre benutzerdefinierten Einstellungen angewendet, wenn Sie wieder auf Ihrer Seite oder Ihrem Beitrag sind, unabhängig davon, ob Sie Standard verwenden aus Einstellungen oder Einfach aus der Dropdown-Liste Vorlage auswählen (wie gesagt, verwirrend).

Wenn Sie die Standardeinstellungen des Plugins wiederherstellen möchten, können Sie zur Seite mit den Vorlageneinstellungen gehen und die Schaltfläche Benutzerdefiniertes Styling verwenden deaktivieren. Alle Ihre Anpassungen sind vorhanden, wenn Sie es irgendwann wieder aktivieren möchten, aber so können Sie die Standardeinstellungen des Plugins verwenden, wenn Sie das Aussehen bevorzugen.

Nachteile des Visual Link Preview Plugins

Das Visual Link Preview-Plugin ist ein einfaches und unkompliziertes Plugin, das tut, was es verspricht, und es ist super einfach zu bedienen. Da es jedoch so einfach ist, fehlt es auch in einigen Bereichen, die verbessert werden könnten.

Es gibt kein Dropdown-Menü mit all Ihren Inhalten. Ich wollte diese Option, anstatt mir den Namen eines Blogbeitrags oder einer Seite merken zu müssen, um ihn als Link hinzuzufügen.

Sie können keine Live-Vorschau der benutzerdefinierten Vorlage sehen. Es ist ziemlich umständlich, jedes Mal zwischen dem Beitrag und der Seite mit den Vorlageneinstellungen hin und her zu gehen, wenn Sie sehen möchten, ob dies die perfekte Menge an Padding ist oder welche Art von Rahmen verwendet werden soll.

Sie können nur eine benutzerdefinierte Vorlage erstellen. Dies ist der größte Nachteil des Plugins. Sie können nicht mehrere Vorlagen erstellen und dann diejenige auswählen, die Sie verwenden, um einer bestimmten Seite, einem Blogbeitrag oder einem Linktyp zu entsprechen. Sie können auch einige Vorschauboxen nicht so einstellen, dass sie Ihre benutzerdefinierten Vorlagen verwenden, und andere, um die Standardeinstellungen des Plugins zu verwenden – es ist das eine oder das andere.

Einpacken

Alles in allem hat mir das Visual Link Preview-Plugin trotz seiner Nachteile gefallen. Es ist ein Kinderspiel, es einzurichten und zu verwenden, egal mit welchem ​​Editor Sie lieber arbeiten – Gutenberg oder klassisch. Und dies ist definitiv eine ästhetisch ansprechendere und auffälligere Art, Links hinzuzufügen, was weitreichend sein kann, wenn Sie sich mit Affiliate-Marketing beschäftigen oder auf Ihre Zielseiten verlinken möchten. Da Sie derzeit nicht mehr als eine Vorlage erstellen können, eignet sie sich am besten für Websites mit einem einheitlichen Erscheinungsbild für alle Beiträge und Seiten. Wenn Sie also eine Reihe verschiedener Zielseiten in verschiedenen Stilen haben, wird es Ihnen schwer fallen, eine Vorschaubox-Vorlage zu erstellen, die überall dort hinpasst, wo sie platziert wird. Ansonsten ist dies jedoch ein leichtes Plugin, das seine Aufgabe gut erfüllt.

Vielleicht gefällt dir auch dieser Artikel mit fünf coolen Dingen, die du in Divi mit Ankerlinks machen kannst.