Tools wie Linktree oder Wonderlink sind praktisch, wenn du mehrere Links auf Instagram oder anderen Plattformen teilen möchtest. Aber wenn du bereits eine eigene Website hast, brauchst du solche externen Tools eigentlich nicht. Warum? Ganz einfach: Du kannst dir deinen eigenen Linktree in WordPress erstellen – und zwar so, dass er perfekt zu deinem Branding passt.
In diesem Tutorial zeige ich dir Schritt für Schritt, wie du mit Divi* deinen Linktree umsetzt. Außerdem kannst du dir am Ende des Artikels meine fertige Divi-Vorlage für 0€ herunterladen, damit du sofort starten kannst und nur noch Kleinigkeiten anpassen musst.
Warum ein eigener Linktree in WordPress sinnvoll ist
- Du brauchst kein zusätzliches Tool und sparst dir einen weiteren Login.
- Dein Branding bleibt einheitlich: Farben, Schriftarten und Design passen zu deinem Business.
- Du hast volle Kontrolle über Inhalte, Funktionen und Anpassungen.
- DSGVO-Sicherheit: das Tool Linktree selbst ist nicht DSGVO-koform, da hier personenbezogene Daten verarbeitet und in die USA geschickt werden. Mit deinem ganz eigenen Linktree passiert dir das nicht.
Vorbereitung – das brauchst du für dein Linktree-Projekt
Bevor du loslegst, brauchst du:
- eine Website auf Basis von WordPress und Divi
- eine Liste mit Links, die du teilen möchtest
- ggf. Bilder und kurze Beschreibungstexte für deine Links
Für das Design hast du verschiedene Möglichkeiten:
- Du kannst Banner gestalten, z.B. mit Canva gestalten und diese untereinander anzeigen.
- Oder du nutzt – wie in meiner Vorlage – eine Kombination aus Bild (z. B. Mockup), kurzer Beschreibung und Button.
Überlege dir also im Vorfeld: Welche Links möchtest du hinterlegen und wie sollen sie dargestellt werden?
Schritt-für-Schritt Linktree mit Divi erstellen
Neue Seite anlegen & Divi Builder starten
Lege in WordPress eine neue Seite an, benenne sie (z. B. „Links“ oder „Linktree“), und starte den Divi Builder. Wähle die Option „Neu aufbauen“.
Seitenbreite und Layout einstellen
Damit dein Linktree auch für Besucher:innen am Desktop gut aussieht, begrenze die Breite auf max. 400px. Für mobile Geräte stellst du zusätzlich 80–90 % Breite ein. Die Einstellung findest du in der Zeile im Reiter Design unter Größe einstellen.
Profilbild und Begrüßungstext einfügen (optional)
Ich finde es schön, wenn man auch auf der Link-Seite ein Gesicht sieht. Das schafft Vertrauen. Pflicht ist es nicht, aber die Kombination aus Bild und persönlicher Begrüßung macht deine Seite nahbarer.
Hintergrundfarben, Abstände & Box-Schatten nutzen
Arbeite mit Hintergründen, Abständen und Schatten, um deine Boxen klar voneinander abzuheben. Das sorgt für eine gute Lesbarkeit und ein aufgeräumtes Design. Im Video oben kannst du mir komplett durch diesen Prozess folgen und die Einstellungen für dich übernehmen, die zu deinem Branding und dem restlichen Stil deiner Website passen.
Mockup, Beschreibung und Button einfügen
In meiner Vorlage arbeite ich mit
- einem Bild – in meinem Fall Mockups meiner Produkte -,
- einer Überschrift,
- einem Beschreibungstext und
- einem Button.
Diese fügst du nun entsprechend in deine Kachel ein und passt ggf. Farben, Schriftgrößen etc. noch nachträglich an. Falls du hier Probleme hast, zeig ich dir alles Schritt für Schritt oben im Video.
Im besten Fall hast du diese Einstellungen aber schon einmal global festgelegt, damit dein Branding auf der gesamten Website konsistent ist.
Nutzt du die Option nur Banner untereinander anzuzeigen. Füge ein Bild ein, lade deinen Banner hoch und gehe zum Menüpunkt Link, um dort die entsprechende URL zu hinterlegen.
Blogartikel automatisch einbinden
Wenn du einen Blog schreibst und jeweils immer deinen neuesten Blogartikel auch auf deiner Linktree Seite zeigen möchtest, kannst du mit einem Blogmodul arbeiten.
Wähle unter Beitragszähler aus, wie viele Blogartikel angezeigt werden sollen. Ich habe 1 gewählt und unten drunter einen Button eingefügt, der zu allen Blogartikeln führt.
Unter Elemente wählst du aus, was angezeigt werden soll: z.B. das Beitragsbild, Name des Autos, Veröffentlichungsdatum usw.
Pass auch ihr gegebenenfalls alles an den Stil deiner Website an oder mach die Einstellungen, die noch zusätzlich notwendig sind.
Einfache Buttons hinterlegen
Ich habe am Ende meiner Link-Seite für Instagram noch drei einfache Buttons hinterlegt für Angebote, die ich ab und zu mal in Beiträgen erwähne, aber die nicht zu meinen Hauptangeboten zählen. Ganz am Ende gibt es noch einen Link zu der Startseite meiner Website.
In Divi ist es leider nicht direkt im Builder möglich alle Buttons gleich breit zu machen. Die Option „Größe einstellen“ gibt es bei Buttons nicht. Wenn du die Buttons, so wie ich, alle gleich breit haben möchtest, müssen wir uns ans benutzerdefinierte CSS wagen.
Geh dazu in die Einstellungen des Buttons in den Reiter „Erweitert“. Öffne die Einstellung „benutzerdefiniertes CSS“ und klicke auf den Reiter „Modulelemente“. Jetzt scrollst du ein Stück nach unten zu „Hauptelement“. Hier trägst du jetzt folgende Codezeile ein:
width: 100%;
Klick auf speichern und wiederhole das mit den anderen Buttons. So sind deine Buttons alle gleich breit und wirken einheitlicher.
Impressum & Datenschutz
Vergiss nicht, Impressum und Datenschutz zu integrieren. Diese Seiten müssen immer über max. zwei Klicks erreichbar sein. Wenn du also den Link in deiner Bio hinterlegt hast, ist das der 1. Klick und dann ist es obligatorisch, dass die Person nur noch ein weiteres Mal klicken muss, um zu Impressum oder Datenschutz zu gelangen.
Wenn du mehrere Links in deiner Bio hinterlegt hast, sollten somit Impressum und Datenschutzerklärung direkt in Instagram hinterlegt werden, weil es sonst drei Klicks benötigt, um dorthin zu gelangen:
Klick 1: In der Bio klickt man auf die Link-Zeile und es öffnet sich ein Fenster mit allen in Instagram hinterlegten Links
Klick 2: Ich klicke auf einen dieser Links und bin auf dieser Seite
Klick 3: Ich kann zum Impressum oder zur Datenschutz-Seite gelangen.
Wenn du so wie ich nur mit dem selbsterstellten Linktree arbeitest, erfüllst du die 2-Klick Regel.
Du kannst entweder einen eigenen Button für beide Seiten hinterlegen oder – wie ich – ganz normal deinen Footer anzeigen lassen. In dem sowieso beide Seiten immer verlinkt sein müssen.
Hinweis: Diese Information stellt keine Rechtsberatung dar. Ich bin keine ausgebildete Datenschützerin. Der Beitrag basiert auf meinem selbst angeeigneten Wissen. Ich gebe keine Gewähr auf die Richtigkeit und Vollständigkeit dieser Informationen.
Testen: Darstellung & Funktion prüfen
Bevor du deine Seite auf Instagram hinterlegst und deine Follower dorthin führst:
- teste die Darstellung am Desktop, Tablet und Smartphone (am besten auf echten Geräten)
- überprüfe, ob alle Links funktionieren
- schalte die Seite live
- stelle sie über dein SEO-Plugin auf nicht indexiert, da die Seite für Google irrelevant ist
Linktree-Vorlage für 0€ herunterladen
Damit du es dir noch einfacher machen kannst, habe ich eine fertige Vorlage für dich vorbereitet. Sie enthält Platzhalterbilder und Texte, die du nur noch austauschen musst.
Mit der Datei bekommst du auch eine kleine Video-Anleitung von mir, in der ich zeige, wie du die Vorlage bei dir importierst und für dich anpasst.
Trage dich hier ein und lade dir die Divi-Vorlage herunter:
Mit deinem Eintrag erhältst du regelmäßig Technik-Tipps für deine Arbeit als Virtuelle Assistentin. Du kannst deine Einwilligung zum Empfang der E-Mails jederzeit widerrufen. Dazu befindet sich am Ende jeder E-Mail ein Abmeldelink. Deine Anmeldedaten, deren Protokollierung, der E-Mail-Versand und eine statistische Auswertung des Leseverhaltens werden über ActiveCampaign, USA, verarbeitet. Mehr Informationen dazu findest du in meiner Datenschutzerklärung.
Zum Abschluss
Starte jetzt und erstelle deinen eigenen Linktree in WordPress mit Divi. Verzichte auf externe Tools und nutze die volle Kontrolle über dein Design und deine Inhalte. Mit meiner Vorlage hast du die Basis in wenigen Minuten stehen – probier es aus!
*Bei diesem Link handelt es sich um einen Affiliate-Link. Wenn du dich für das Tool entscheidest, erhalte ich eine Provision für die Weiterempfehlung. Ich empfehle nur Tools, die ich selbst nutze und gut finde.
0 Kommentare