Du suchst Elementor Tipps, die dir wirklich Zeit sparen? In diesem Beitrag zeige ich dir meine 13 wichtigsten Tipps und Tricks für Elementor. Sie helfen dir, deine Website schneller und entspannter zu gestalten – egal ob du von zu Hause, aus dem Café oder wie ich vom Boot aus arbeitest.

Elementor-Tipp 1: Globale Einstellungen

Stell dir vor, du entscheidest nach 2 Jahren Selbständigkeit, dass es Zeit ist für ein neues Branding. Dein neues Design soll sich natürlich auch auf deiner Website widerspiegeln. Um nicht jeden Button, jedes Textfeld und jeden Hintergrund einzeln einfärben zu müssen, gibt es in Elementor globale Einstellungen.

Mit ihnen änderst du dein Design mit wenigen Klicks. Vorausgesetzt, du nutzt die Funktion konsistent.

Globale Farben einrichten

1. Öffne die Website-Einstellungen
2. Wähle „Globale Farben“

Hier kannst du deine globalen Farben festlegen.

Praxis-Tipp: Erstelle dir diese Basis-Farbpalette:

• Primärfarbe (deine Hauptfarbe)
• Sekundärfarbe (für Akzente)
• Text-Farbe
• Link-Farbe
• Hintergrund-Farbe

Globale Schriften einrichten

1. Öffne die Website-Einstellungen
2. Wähle „Globale Schriftart“

Hier kannst du deine globalen Schriften festlegen.

Definiere Schriftarten für:

• H1-Überschrift
• H2-Überschrift
• H3-Überschrift
• Text
• Buttontext

Globale Farben und Schriften verwenden

Einmal angelegt kannst du globale Farben und Schriften überall auswählen, wo du eine Farbe oder Schriftart festlegen kannst. Klicke dazu auf das Globus-Symbol und wähle deine Farbe bzw. Schriftart aus.

Sobald das Globus Symbol farbig ist, ist die globale Farbe bzw. globale Schriftart für dieses Element aktiv. Änderst du jetzt beispielsweise in den Einstellungen eine Farbe, dann ändert sie sich auch in diesem Element.

Die Vorteile von globalen Farben und Schriften

Wenn du später etwas ändern willst:

• Einmal die globale Farbe oder Schrift anpassen
• Alle Elemente, die diese Farbe oder Schrift nutzen, aktualisieren sich automatisch
• Keine einzelnen Anpassungen mehr nötig
• Dein Design bleibt konsistent

Bevor du wilde Farb-Experimente machst: Teste größere Design-Änderungen erst auf einer Staging-Seite. So überraschst du deine Website-Besucher*innen nicht mit einem unfertigen Design.

Im Website-Hafen zeige ich dir übrigens Schritt für Schritt, wie du deine globalen Farben und Schriften einrichtest. Und natürlich viele weitere Themen.

Elementor-Tipp 2: Globales Widget erstellen

Du hast deine Newsletter-Anmeldung auf zehn verschiedenen Seiten eingesetzt und du willst das Formular ändern oder hast den Anbieter gewechselt. Mühsam, alles einzeln zu aktualisieren. Mit globalen Widgets machst du solche Änderungen nur einmal – und sie werden automatisch überall aktualisiert.

Was sind globale Widgets?

Globale Widgets sind Helfer für wiederkehrende Inhalte auf deiner Website. Ob Kontaktdaten, Über-mich-Texte oder Buttons – was du an einem Widget änderst, wird automatisch an allen Stellen aktualisiert, wo du es eingebaut hast. Das spart dir nicht nur Zeit beim Aktualisieren, sondern verhindert auch, dass du versehentlich alte Versionen übersiehst.

Einsatzgebiete für globale Widgets

• Kontaktinfos
• Über-mich-Texte
• Copyright-Hinweise
• aktuelle Angebote
• Newsletter-Anmeldung
• Terminbuchungs-Button
• wechselnde Termine (nutze ich z.B. für’s Website-CoWorking)

So erstellst du ein globales Widget

1. Gestalte dein Element genau so, wie du es haben möchtest
2. Rechtsklick auf das Element
3. Wähle „Als global speichern“
4. Gib ihm einen Namen, den du später wiederfindest

Globales Widget einfügen

1. Öffne die Elementor-Widgets
2. Wechsle in den Reiter „Globals“
3. Zieh das gewünschte Widget an die richtige Stelle

Wenn du ein globales Widget an einer Stelle änderst, ändert es sich überall. Das ist praktisch, aber nicht immer sinnvoll. Überlege dir also genau, wo du diese Funktion einsetzen willst.

Globale Widgets sind super hilfreich, aber manchmal willst du lokale Änderungen machen. In dem Fall kannst du das globale Widget an einer bestimmten Stelle in ein normales Widget umwandeln. Klick dafür auf „Verknüpfung aufheben“ im Widget-Menü.

So kannst du globale Widgets super für Buttons mit unterschiedlichen Links oder Formulare mit unterschiedlichen Feldern nutzen. Der Hauptzweck ist dabei, dass du dir die Zeit sparst, das Element zu gestalten und einzurichten.

Elementor-Tipp 3: Favoriten hinzufügen

Elementor hat eine lange Liste an Widgets. Viele davon brauchst du selten oder gar nicht. Mit der Favoriten-Funktion kannst du Elemente, die du häufig nutzt, oben in einem eigenen Menü sammeln.

Favoriten hinzufügen

1. Klicke mit der rechten Maustaste auf ein Element.
2. Wähle „Zu Favoriten hinzufügen“ aus.

Deine festgelegten Favoriten findest du anschließend in einem eigenen Menü in der Übersicht.

Favoriten entfernen

1. Klicke mit der rechten Maustaste auf das Element, das du entfernen möchtest.
2. Wähle „Aus Favoriten entfernen“ aus.

Praxis-Tipp: Markiere nur die Elemente als Favoriten, die du wirklich ständig brauchst. So bleibt’s übersichtlich!

Nutze den Element Manager von Elementor für noch mehr Übersicht in deinen Elementen. Damit kannst du Elemente, die du nie verwendest aus der Übersicht ausblenden. Hier zeige ich dir, wie du den Element Manager nutzt.

Elementor-Tipp 4: Standard-Einstellungen

Du hast für deine Überschriften, Buttons, Container, … Einstellungen, die du zukünftig auf alle Elemente anwenden möchtest? Mit der Funktion „Als Standard speichern“ kannst du deine eigenen Elementor-Standards speichern.

Was kannst du als Standard speichern?

Für einzelne Elemente kannst du Standard-Einstellungen festlegen. Dabei werden alle Einstellungen gespeichert, sowohl Design als auch Inhalte.

So richtest du Standard-Elemente ein

1. beliebiges Element fertig gestalten
2. Rechtsklick auf das Element
3. „Als Standard speichern“ wählen

Wenn du das Element jetzt aus der Widget-Übersicht auf deiner Seite neu einfügst, werden alle Einstellungen übernommen.

Du kannst diesen neu festgelegten Standard jederzeit überschreiben, in dem du den beschriebenen Vorgang wiederholst.

Für Elemente, die du regelmäßig verwendest, lohnen sich Standard-Einstellungen besonders.

Manchmal brauchst du Ausnahmen vom Standard. Die kannst du jederzeit einzeln anpassen. Ausgangsbasis ist dafür deine festgelegte Standard-Vorlage.

Elementor-Tipp 5: Templates erstellen und einfügen

Manche Layouts oder Seitenabschnitte brauchst du immer wieder. Hier kommen Templates ins Spiel. Templates sind fertige Bausteine für deine Website. Das können einzelne Abschnitte sein oder sogar komplette Seiten.

Eigenes Template erstellen

1. Gestalte einen Bereich, den du später wiederverwenden möchtest.
2. Speichere den Bereich als Template ab – je nachdem, ob du einen Container oder eine Seite speichern möchtest, ist der Vorgang unterschiedlich

für Abschnitte

Bewege deinen Mauszeiger auf die 6 Punkte oben im Abschnitt

Klicke hier die rechte Maustaste und wähle „Als Template speichern“.

für Seiten

Klicke rechts oben neben „Veröffentlichen“ auf den kleinen Pfeil und wähle „Als Template speichern“.

3. Gib deinem Template einen eindeutigen Namen – z.B. „Abschnitt – Über mich mit Button – Foto links“

Mein Tipp aus der Praxis: Nutze aussagekräftige Namen für deine Templates. „Footer-neu-final“ hilft dir in drei Monaten nicht mehr weiter. Besser: „Footer-mit-Newsletterformular-dreispaltig“.

Eigenes Template einfügen

Du kannst dein gespeichertes Template einfach auf jeder Seite einfügen:

1. Klicke auf das Ordner-Symbol in Elementor

2. Such dir das gewünschte Template aus und füge es ein

Templates sind super praktisch – aber übertreib es nicht damit. Zu viele Templates machen deine Bibliothek schnell unübersichtlich. Speichere nur die Layouts, die du regelmäßig brauchst.

Wie du einzelne Abschnitte oder ganze Seiten kopierst, ohne sie als Template zwischenzuspeichern, zeige ich dir im nächsten Tipp.

Elementor-Tipp 6: Abschnitt oder Element kopieren und einfügen

Du hast ein Element oder einen Abschnitt fertig gestaltet und möchtest ihn an anderer Stelle wiederverwenden? Genau dafür findest du in Elementor die Funktionen „Kopieren“ und „Einfügen“, wie du sie von Word kennst. Und das nicht nur innerhalb deiner aktuellen Seite, sondern auch seitenübergreifend!

Die wichtigsten Copy & Paste Methoden

Methode 1: Klassisches Kopieren

1. Element auswählen
2. Kopieren: Strg + C oder rechte Maustaste „Kopieren“
3. an die Stelle wechseln, wo du den kopierten Inhalt einfügen möchtest
4. Einfügen: Strg + V oder rechte Maustaste „Einfügen“

Methode 2: Duplizieren

1. Element auswählen
2. Duplizieren: Strg + D oder rechte Maustaste „Duplizieren“
   Perfekt, wenn du das Element direkt darunter brauchst

Die Funktion „Duplizieren“ nutze ich gerne, um in einem Abschnitt etwas auszuprobieren. So kann ich vergleichen, welche Option mir besser gefällt und den anderen Abschnitt löschen – oder ihn als Template speichern, um ihn für andere Zwecke zu nutzen.

Extra-Tipp aus meinem Alltag: Wenn du mehrere Elemente von einer Seite auf eine andere kopieren willst, öffne beide Seiten in verschiedenen Tabs. So kannst du schnell hin und her springen.

Und noch ein Tipp: Wenn du einen Abschnitt häufig brauchst, speichere ihn als Template ab. Damit hast du ihn immer griffbereit in deiner Template-Bibliothek. Einzelne Elemente, die du häufig nutzt, kannst du als globales Widget abspeichern und anschließend die Verknüpfung aufheben, um es unabhängig von anderen Elementen bearbeiten zu können.

Elementor-Tipp 7: Rechtsklick-Menü

Mit einem Rechtsklick bekommst du in Elementor ein Menü voller praktischer Funktionen. Ein paar davon hast du in den ersten Tipps kennengelernt.

Die wichtigsten Funktionen im Rechtsklick-Menü

• Duplizieren
• Kopieren
• Einfügen
• Stile anwenden
  mehr Tipp 8: Stil kopieren und einfügen
• Als global speichern (nur für einzelne Elemente verfügbar)
  mehr Tipp 2: Globales Widget erstellen
• Als Template speichern (nur für Container verfügbar)
  mehr Tipp 5: Templates erstellen und einfügen
• Als Standard speichern
  mehr Tipp 4: Standard-Einstellungen
• Löschen

Das Rechtsklick-Menü zeigt dir immer nur die Optionen, die für das ausgewählte Element verfügbar sind. Also nicht wundern, wenn mal eine Option fehlt – dann ist sie für dieses Element nicht verfügbar!

Elementor-Tipp 8: Stil kopieren und einfügen

Du hast einen Button perfekt eingerichtet und möchtest genau dieses Design für andere Buttons übernehmen. Statt alle Einstellungen einzeln neu einzugeben, kannst du den kompletten Stil kopieren und auf andere Elemente übertragen. Das ist ein wenig wie zaubern.

So kopierst du Stile in Elementor

1. Stil kopieren:
   • Rechtsklick auf das Element mit dem Design, das du magst
   • Wähle „Kopieren“
2. Stil einfügen:
   • Rechtsklick auf das Element, das das Design bekommen soll
   • Wähle „Stile anwenden“

Das war’s schon.

Praxis-Tipp: Das funktioniert auch zwischen verschiedenen Seiten. Kopiere den Stil auf Seite A und füg ihn auf Seite B ein.

Was wird alles kopiert?

• Farben
• Schriftarten
• Größen
• Abstände
• Hintergründe
• Rahmen
• Schatten
• Animationen
• …

Kurz gesagt: Du überträgst damit nur das Design, nicht den Inhalt. Text, Bilder und Links bleiben, wie sie sind. Das ist genau das, was wir wollen: Gleicher Look, individueller Inhalt!

Wenn du auch den Inhalt kopieren willst, sieh dir Tipp 6 (Elemente kopieren und einfügen) an.

Elementor-Tipp 9: Editor schneller öffnen

Gehst du noch den Umweg? Erst die Seite suchen, dann auf „Bearbeiten“, dann auf „Mit Elementor bearbeiten“… Das geht auch schneller! Ich zeig dir, wie du von der Seite direkt im Elementor-Editor landest.

Von der Live-Seite in den Elementor-Editor

• Öffne die jeweilige Seite, die du bearbeiten willst im Browser
• Klicke oben in der Bearbeitungs-Leiste auf „Mit Elementor bearbeiten“

Wenn du erstmal den Mauszeiger drauf bewegst, werden dir darunter weitere Elemente, die du auf dieser Seite nutzt, angezeigt. Zum Beispiel deine Kopf- und Fußzeile.

Und unten kannst du in die Website-Einstellungen oder in den Theme Builder wechseln.

Praxis-Tipp: Mach dir ein Lesezeichen von einer Seite im Elementor-Editor – dann kommst du direkt dort hin! Das ist praktisch für Seiten, an denen du über mehrere Tage oder Wochen regelmäßig arbeitest.

Elementor-Tipp 10: Navigator anzeigen

Der Navigator hilft dir, dir Überblick über deine Seiten-Struktur zu verschaffen und schnell zu finden, was du suchst. Das ist auf langen Seiten Gold wert.

Wo versteckt sich der Navigator?

Du findest den Navigator auf zwei Wegen:

Variante 1: Klick auf das Navigator-Symbol in der Elementor-Leiste

Variante 2: Drück einfach Strg + I auf deiner Tastatur

So arbeitest du mit dem Navigator

1. Benenne deine Container sinnvoll
   zum Beispiel
   • Header-Bereich
   • Anmelde-Formular
   • Angebots-Übersicht

Mach dir die Mühe, jeden Abschnitt beim Erstellen vernünftig zu benennen. Das fühlt sich am Anfang nach extra Arbeit an – spart dir aber später Zeit beim Suchen und Anpassen!

Kein Anspruch auf Vollständigkeit: Alles, was sich in der 2. Ebene oder tiefer befindet, benenne ich nicht um. Sobald ich den Container gefunden habe, ist klar, was sich hinter „Button“ oder „Überschrift“ verbirgt.

Die wichtigsten Navigator-Funktionen

Elemente finden:
– Klick auf ein Element im Navigator
– Elementor scrollt an die Stelle und das Element wird markiert
– Kein langes Suchen mehr!

Strukturen ändern:
– Zieh Elemente per Drag & Drop um
– Verschachtele sie in andere Container
– Ändere die Reihenfolge

schnelles bearbeiten:
– Rechtsklick im Navigator
– Elemente duplizieren oder kopieren

mehrere Elemente gleichzeitig bearbeiten:
– Halte Strg gedrückt und wähle mit der Maus mehrere Elemente aus
– Kopiere, verschiebe oder lösche sie gemeinsam

Elementor-Tipp 11: Finder-Funktion

Wusstest du, dass du direkt im Elementor-Editor zwischen verschiedenen Seiten wechseln kannst? Das funktioniert mit Hilfe der Finder-Funktion.

Die Finder-Funktion findest du im Elementor-Editor in der oberen Bearbeitungsleiste auf der rechten Seite unter dem Lupen-Symbol. Oder du nutzt die Tastenkombination Strg + E.

So nutzt du den Finder

1. Finder öffnen:
   • Drück Strg + E oder
   • klicke auf das Lupen-Symbol in der Elementor-Leiste (oben, rechts)
2. Namen der Seite oder Vorlage eintippen
3. jeweilige Seite oder Vorlage aus den Vorschlägen auswählen

Hinweis: Der Finder zeigt dir nur Seiten und Vorlagen, die mit Elementor erstellt wurden. Seiten, die du mit dem Standard-Editor erstellt hast, findest du hier nicht.

Elementor-Tipp 12: Verlauf anzeigen

Du probierst etwas aus, dann noch was und plötzlich denkst du: „Ups, die Version von vor 15 Minuten war eigentlich besser!“ Mit dem Verlauf in Elementor kein Problem. Denn damit kannst du zu früheren Versionen zurückspringen.

Wo versteckt sich der Verlauf?

Du findest den Verlauf auf zwei Wegen:

Variante 1: Klick auf das Elementor-Symbol links in der Elementor-Leiste und wähle „Verlauf“.

Variante 2: Drück Strg + Shift + H auf deiner Tastatur

Das kannst du mit dem Verlauf machen

Kurz zurückspringen:

– Einzelne Aktionen rückgängig machen
– Perfekt für schnelle Korrekturen
– Funktioniert wie Strg + Z

Weit zurückspringen:

– Zu einem bestimmten Punkt zurückkehren
– Alle Änderungen dazwischen werden rückgängig gemacht
– Super bei größeren Experimenten

Aber aufpassen: Der Verlauf wird zurückgesetzt, wenn du Elementor schließt oder die Seite neu lädst.

Für größere Experimente empfehle ich dir entweder einen einzelnen Abschnitt, den du bearbeiten willst zu duplizieren oder die Seite als Template abzuspeichern. So kannst du jederzeit die Vorgängerversion zuverlässig wiederherstellen.

Elementor-Tipp 13: Tastenkombinationen

Einmalig genutzt spart eine Tastenkombination nicht viel Zeit. Aber, wenn du sie immer wieder verwendest, wächst die Zeitersparnis und das Arbeiten mit Elementor wird immer flüssiger.

Wenn du bisher noch keine Tastenkombinationen genutzt hast, dann empfehle ich dir, dir erstmals die Basics anzusehen. Diese kannst du auch für viele andere Anwendungen am PC verwenden.

Basics, die du regelmäßig brauchst

Strg + C: Kopieren
Strg + D: Duplizieren
Strg + S: Speichern, speichern, speichern!
Strg + V: Einfügen
Strg + Z: Rückgängig
Strg + Shift + Z: Wiederholen – wenn du etwas versehentlich rückgängig gemacht hast

Praxis-Tipp: Mach es dir zur Gewohnheit, regelmäßig Strg + S zu drücken. Nichts ist frustrierender als verlorene Änderungen!

Weitere nützliche Tastenkombis

Strg + E: Schnellsuche (Finder) öffnen (mehr Tipp 11: Finder-Funktion)
Strg + I: Navigator ein/ausblenden (mehr Tipp 10: Navigator)
Strg + P: Vorschaumodus öffnen
Strg + Shift + H: Verlauf öffnen
Strg + Shift + M: Ansicht wechseln (Desktop, Tablet, Mobil)

Konzentriere dich am Anfang auf 2-3 Shortcuts, die du oft brauchst. Wenn du diese verinnerlicht hast, kommen die nächsten dran. So überforderst du dich nicht und baust dir Schritt für Schritt einen schnelleren Workflow auf.

Endlich weniger Klicks

Mit diesen 13 Zeitspar-Tipps verringerst du die Zeit, die du für Website-Änderungen brauchst und kannst dich auf das Wesentliche konzentrieren: Deine Angebote und deine Kund*innen.

Übrigens: Im Website-Hafen zeige ich dir Schritt für Schritt viele weitere Möglichkeiten, wie du deine Website selbstständig und zeitsparend gestalten kannst. Damit du mehr Zeit für die wichtigen Dinge in deinem Business hast.

Ich bin gespannt, welcher Tipp darf dir ab sofort Zeit sparen? Schreib es mir gerne in die Kommentare!

In dieser Elementor-Anleitung erfährst du, was du wissen musst, um mit Elementor deine Website zu erstellen und zu gestalten. Diese Elementor Tipps bieten dir eine schrittweise Einführung in die Grundlagen und zeigen dir, wie du das Beste aus dem Page Builder herausholst – ideal für Elementor für Anfänger*innen.

Was ist Elementor?

Elementor ist ein benutzerfreundlicher Page Builder für WordPress, der es dir ermöglicht, deine Website ohne Programmierkenntnisse zu erstellen und zu bearbeiten. Per Drag-and-Drop kannst du Elemente wie Texte, Bilder, Buttons und Videos auf deine Seite ziehen und dort platzieren, wo du sie haben möchtest.

Das Besondere an Elementor ist, dass du alles in Echtzeit bearbeiten kannst. Während du an deiner Seite arbeitest, siehst du die Änderungen, ohne ständig zwischen Bearbeitungs- und Vorschau-Modus wechseln zu müssen. Das spart Zeit und macht den Prozess besonders intuitiv – ideal für Anfänger*innen.

Wenn du Elementor nutzt, brauchst du den Standard-Editor von WordPress (fast) nicht mehr. Du kannst für jede Seite und jeden Beitrag entscheiden, ob du sie mit Elementor oder dem Gutenberg-Editor bearbeiten möchtest. So hast du die volle Flexibilität bei der Gestaltung deiner Inhalte.

Elementor installieren

Falls du Elementor noch nicht installiert hast, geht das ganz einfach:

1. Gehe in deinem WordPress-Dashboard auf Plugins > neues Plugin hinzufügen und suche nach „Elementor“.
2. Klicke auf „Jetzt installieren“ und danach auf „Aktivieren“.

Schon kannst du Elementor nutzen!

Brauche ich Elementor Pro?

Es gibt sowohl eine kostenlose als auch eine Pro-Version von Elementor. Grundsätzlich kannst du deine Website mit der kostenlosen Version erstellen. Wenn du dir erweiterte Funktionen, wie Popups oder einen Theme Builder wünschst, mit dem du deinen Header und Footer gestalten kannst, solltest du dir die Pro-Version ansehen.

In meinem Blogbeitrag Elementor oder Elementor Pro erkläre ich dir die Unterschiede und helfe dir bei der Entscheidung, welche Version für dich geeignet ist.

Elementor-Benutzeroberfläche verstehen

Elementor hat kürzlich eine neue Benutzeroberfläche eingeführt, die intuitiver und übersichtlicher gestaltet ist. Falls du die neue Ansicht noch nicht aktiviert hast, kannst du das so tun:

Gehe in deinem WordPress-Dashboard auf Elementor > Einstellungen > Eigenschaften und setze dort die Funktion „Editor Top Bar“ auf „Aktiv“.

Die wichtigsten Bereiche im Überblick

1. Seitenvorschau

Auf der rechten Seite siehst du eine Live-Vorschau deiner Seite, während du Änderungen vornimmst.

2. Linke Seitenleiste

Hier findest du alle Werkzeuge, die du für die Gestaltung deiner Seite brauchst, wie Container und Elemente. Ziehe sie einfach in den Seitenbereich, um neue Inhalte hinzuzufügen.

Wenn du ein Element anklickst, findest du in der linken Seitenleiste die Möglichkeiten, die du für dieses Element nutzen kannst. Mehr dazu findest du im Abschnitt Element einfügen.

3. Obere Bearbeitungsleiste

In der Leiste oben findest du nützliche Funktionen wie Theme Builder, Verlauf, Elemente-Auswahl, Website-Einstellungen, Navigator, Notizen, Seiteneinstellungen, Responsive Ansichten und den Button zum Veröffentlichen deiner neu erstellten oder aktualisierten Seite.

Falls du noch die alte Benutzeroberfläche verwendest, lohnt es sich, auf die neue Version umzusteigen, da sie einige Verbesserungen mitbringt. Zum Beispiel, dass du mit einem Klick in die Tablet- oder Smartphone-Ansicht wechseln kannst.

Neue Seite mit Elementor erstellen

Sobald du Elementor installiert hast, kannst du loslegen und deine erste Seite gestalten. So funktioniert’s:

Neue Seite erstellen

Gehe in deinem WordPress-Dashboard auf Seiten > Neue Seite erstellen. Gib deiner Seite einen Titel und klicke auf „Mit Elementor bearbeiten“.

Die Grundlage deiner Website: Container

Container bilden die Grundlage für den Aufbau deiner Seite. Sie ersetzen die früheren Abschnitte und Spalten und bieten dir mehr Flexibilität bei der Gestaltung. Besonders für deine Mobilversion.

Layout auswählen

Nachdem der Elementor-Editor geladen ist, kannst du entscheiden, ob du mit einer leeren Seite oder einer Vorlage starten möchtest. Vorlagen bieten dir eine schnelle Möglichkeit, ein ansprechendes Design zu erstellen – und du kannst sie auch individuell anpassen.

Container hinzufügen

Klicke auf das Plus-Symbol und danach auf Flexbox, um einen neuen Container hinzuzufügen. Du kannst Container verschachteln, also Container in andere Container einfügen, um komplexe Layouts zu erstellen. Das gibt dir die Freiheit, deine Inhalte in verschiedenen Abschnitten zu strukturieren und anzuordnen.

Container-Größe und Anordnung

Du kannst jeden Container in Größe und Anordnung verändern.

In der linken Seitenleiste findest du unter „Layout“ die Optionen, um Breite, Höhe, Ausrichtung und Abstände festzulegen. Damit kannst du bestimmen, wie viel Platz deine Inhalte einnehmen sollen und wie sie sich in den Containern verteilen.

Gestaltung

Unter „Stil“ kannst du das Aussehen deiner Container verändern. Lege eine Hintergrundfarbe oder -bild fest, füge einen Rand oder Schatteneffekte hinzu.

Abstände

Bei der Gestaltung eines ansprechenden Layouts sind Abstände entscheidend. In den erweiterten Einstellungen kannst du Abstände zwischen Containern definieren und so für genügend Platz sorgen.

Inhalte erstellen

Elemente bieten dir die Möglichkeit, deine Seite mit vielfältigen Inhalten zu füllen. Sobald du ein Element auf deiner Seite platziert hast, kannst du es über die Einstellmöglichkeiten in der linken Seitenleiste an deine Wünsche anpassen.

Element einfügen

Um deine Seite mit Inhalten zu füllen, kannst du ein Element nach dem anderen aus der linken Seitenleiste in den gewünschten Container ziehen.

Elementor bietet dir eine Vielzahl von Elementen, mit denen du fast jede Art von Inhalt hinzufügen kannst – von einfachen Textblöcken und Bildern bis hin zu Videos, Buttons, Formularen und mehr.

Wenn dich interessiert, welche Elemente in der kostenlosen Version enthalten sind und welche es nur in der Pro-Version gibt, schau mal hier vorbei:
Elementor oder Elementor Pro?

Inhalte anpassen

Klicke auf ein Element, um es zu bearbeiten.

In der linken Seitenleiste findest du alle Einstellungen dazu. Hier kannst du die Inhalte verändern (Texte, Bilder, Links, …), die Darstellung (Farben, Größe, …) anpassen und erweiterte Einstellungen (Abstände, Animationen, …) vornehmen.

Die Optionen sind von Element zu Element unterschiedlich.

Element gestalten

Unter „Stil“ kannst du das Aussehen eines Elements verändern.

Wähle deine gewünschten Farben, Schriftarten, Größen und Hintergründe aus.

Nutze globale Farben und Schriften, um ein konsistentes Design auf deiner Seite zu schaffen.

Im Website-Hafen findest du eine Schritt-für-Schritt-Anleitung, um deine globalen Farben und Schriften richtig einzurichten.

Abstände

In den erweiterten Einstellungen kannst du bestimmen, wie nahe Elemente aneinander liegen oder wie viel Raum sie bekommen sollen.

Mit negativen Abständen kannst du Elemente überlappen lassen.

Globale Widgets: Einmal erstellen, überall nutzen

Eine besonders praktische Funktion in Elementor sind die globalen Widgets. Mit ihnen kannst du ein Element einmal erstellen und es auf mehreren Seiten verwenden, ohne es jedes Mal neu anpassen zu müssen. Das spart nicht nur Zeit, sondern sorgt auch dafür, dass deine Seite ein einheitliches Design behält.

Erstellung eines globalen Widgets

Wenn du ein Element in deiner Seite eingefügt und angepasst hast, kannst du mit Rechtsklick auf das Element „Als global speichern“ ein globales Widget.

Gib ihm einen aussagekräftigen Namen, damit du es später schnell wiederfindest.

Sieh dir auch die anderen Optionen an:
Du kannst einzelne Elemente und Container schnell mittels Rechtsklick duplizieren, kopieren und einfügen.

Globales Widget einfügen

Globale Widgets findest du in der Elemente-Auswahl im Reiter „Globals“. Ziehe es wie jedes andere Element per Drag-and-Drop aus der linken Seitenleiste in deinen Container.

Globales Widget bearbeiten

Um ein globales Widget zu bearbeiten hast du zwei Möglichkeiten:

Bearbeiten:
Klicke auf „Bearbeiten“, um das Widget an allen Stellen, wo du es verwendest, gleichzeitig zu verändern. Du brauchst die Änderungen nur einmal vornehmen, und sie werden überall aktualisiert.

Verknüpfung aufheben:
Klicke auf „Verknüpfung aufheben“, um es unabhängig von anderen globalen Widgets anzupassen. Die Änderungen, die du dann vornimmst, betreffen nur dieses eine Element.

Einsatzmöglichkeiten von globalen Widgets

Globale Widgets eignen sich perfekt für wiederkehrende Elemente wie Buttons, Formulare, Testimonials oder spezielle Info-Boxen. Sie ermöglichen dir, schnell Änderungen vorzunehmen, ohne jede Seite einzeln bearbeiten zu müssen.

Mit globalen Widgets sorgst du also für ein einheitliches Design und kannst deine Arbeit effizienter gestalten.

Arbeiten mit Vorlagen

Templates ermöglichen dir, komplexe Designs mit wenigen Klicks zu erstellen und später wiederzuverwenden. Egal ob für einzelne Abschnitte, ganze Seiten oder spezielle Layouts – Templates helfen dir, Zeit zu sparen und ein konsistentes Design auf deiner Website zu erhalten.

Elementor Templates nutzen

In der Elementor-Bibliothek findest du eine Auswahl an Vorlagen. Die Bibliothek öffnet sich beim Erstellen einer neuen Seite automatisch. Du kannst sie später über das kleine Ordner-Symbol nochmal öffnen.

Wähle aus einzelnen Blöcken oder ganzen Seiten eine Vorlage aus. Oder lade im Reiter „Meine Templates“ eigene oder gekaufte Layouts hoch. Nachdem du eine Vorlage ausgewählt und eingefügt hast, kannst du diese beliebig bearbeiten.

Eigene Templates erstellen

Wenn du ein Design erstellt hast, das du später wiederverwenden möchtest, kannst du es als Template speichern. Das gilt sowohl für einzelne Container als auch für komplette Seiten.

Container als Template abspeichern

Klicke im jeweiligen Container oben bei den 6 Punkten die rechte Maustaste und wähle die Option „Als Template speichern“.

Vergib einen klaren Namen, um die Vorlage später wiederzufinden. Das neu gespeicherte Template findest du jetzt in der Bibliothek im Reiter „Meine Templates“.

Seite als Templates speichern

Auch vollständige Seiten kannst du als Template abspeichern.

Klicke auf den kleinen Pfeil rechts neben dem Veröffentlichen-Button. Und wähle aus dem Menü „Als Template speichern“ aus.

Vergib einen eindeutigen Namen, um die abgespeicherte Seite in mehreren Wochen oder Monaten wieder zu finden. Das Template findest du in der Bibliothek im Reiter „Meine Templates“.

Wie die globalen Widgets helfen dir auch Templates deine Website effizient zu erstellen und professionell zu gestalten.

Abschnitte kopieren und auf anderer Seite einfügen

Du brauchst aber nicht unbedingt immer ein globales Widget oder Template erstellen. Wenn du schnell ein Element oder einen Container auf eine andere Seite kopieren möchtest, kannst du diese einfach kopieren.

Das spart dir Zeit und hält deine Template-Bibliothek sauber. So funktioniert’s:

Element oder Container kopieren

Klicke mit der rechten Maustaste auf den Container oder das Element, das du kopieren möchtest, und wähle „Kopieren“ aus dem Menü.

Abschnitt einfügen

Öffne die Seite, auf der du den Container oder das Element verwenden möchtest in einem anderen Tab. Klicke mit der rechten Maustaste auf den gewünschten Bereich im Editor und wähle „Einfügen“. Der Container oder das Element wird an der gewählten Stelle hinzugefügt.

Mobile Anpassungen und responsive Design

Im Zeitalter von Smartphones und Tablets ist es unerlässlich, dass deine Website auf allen Geräten gut aussieht und funktioniert. Elementor bietet dir umfangreiche Möglichkeiten, damit deine Website sowohl auf dem Desktop als auch auf mobilen Geräten optimal dargestellt wird.

Responsive Einstellungen

In der oberen Bearbeitungsleiste kannst du zwischen der Desktop-, Tablet- und Smartphone-Ansicht wechseln. Das ist richtig hilfreich, um sicherzustellen, dass deine Seite auf allen Geräten gut aussieht.

Individuelle Anpassungen für mobile Geräte

In Elementor kannst du spezielle Anpassungen für mobile Geräte vornehmen. Du hast die Möglichkeit, Inhalte, Abstände, Schriftgrößen und andere Designelemente für jedes Gerät separat zu optimieren.

Beispielsweise kannst du einen größeren Abstand auf dem Desktop einstellen, während du für mobile Geräte weniger Platz verwendest, um eine kompaktere Darstellung zu gewährleisten.

Aufgepasst:
Wenn du Änderungen speziell für eine Ansicht vornimmst, achte immer darauf, dass du bei der jeweiligen Einstellung ein Smartphone, Tablet oder Desktop-Symbol siehst.

Wenn du dieses Icon siehst, bedeutet das, dass du die Einstellungen für die jeweilige Ansicht anpasst.

Ich empfehle dir, deine Seiten mit Elementor immer in folgender Reihenfolge zu bearbeiten:
1. Desktop
2. Tablet
3. Smartphone

Warum?

• Einstellungen, die du in der Desktop-Version triffst, werden auch in der Tablet- und Smartphone-Ansicht übernommen.
• Einstellungen, die du in der Tablet-Version triffst, werden auch in der Smartphone-Ansicht übernommen. Aber nicht in der Desktop-Version.
• Einstellungen, die du in der Smartphone-Version triffst, werden weder in der Tablet- noch in der Desktop-Ansicht übernommen.

Elemente in bestimmter Ansicht ausblenden

Du kannst ganze Container oder einzelne Elemente nur auf dem Desktop anzeigen lassen, während du sie auf mobilen Geräten ausblendest. Oder umgekehrt. Das sorgt für eine aufgeräumte Darstellung auf allen Geräten.

Klicke im jeweiligen Element oder Container auf den Reiter „Erweitert“ und scrolle zu „Responsiv“.

Wähle aus, in welcher Ansicht du ein Element oder einen Container ausblenden möchtest.

Im Vorschau-Modus rechts wird dir das jeweilige Element in der ausgewählten Ansicht ausgegraut angezeigt.

Tipps für die mobile Optimierung

• Verwende ausreichend große Buttons und Schriftgrößen, damit die Benutzer sie auf kleinen Bildschirmen problemlos lesen und bedienen können.
• Prüfe die Abstände zwischen den Elementen, um eine deine Inhalte übersichtlich darzustellen.
• Reduziere die Anzahl an Bildern und Videos, um die Ladezeiten auf mobilen Geräten zu verbessern.
• Prüfe deine Seite nach der Veröffentlichung auf deinem Smartphone. Manchmal schleichen sich Darstellungsfehler ein, die du in der Vorschau nicht siehst.

So sorgst du dafür, dass deine Elementor-Seite auf jedem Gerät gut aussieht – egal ob auf dem großen Bildschirm oder dem kleinen Smartphone.

Neue Seite veröffentlichen

Sobald deine Seite gestaltet ist und du mit dem Ergebnis zufrieden bist, ist es Zeit, sie online zu stellen.

Vorschau und Speichern

Wenn du mit deinen Änderungen zufrieden bist, klicke in der oberen Bearbeitungsleiste auf „Vorschau“, um deine Seite zu überprüfen. Passt alles? Dann kannst du sie über den Button „Veröffentlichen“ rechts oben live schalten.

Falls du ein Caching-Plugin, wie WP-Rocket* oder Cache Enabler nutzt, empfehle ich dir den Cache zu leeren. So stellst du sicher, dass deine neue Seite bei allen Besucher*innen korrekt dargestellt wird. Die Option „Cache leeren“ findest du im WordPress-Dashboard in der oberen Leiste.

Und schon ist deine Seite online! Mit Elementor kannst du jederzeit weitere Anpassungen vornehmen und Schritt für Schritt deine Website selbst gestalten.

Sieh dir auch diesen Beitrag an:
Deine WordPress Website veröffentlichen (+ Checkliste)

Tipps für deine Arbeit mit Elementor

Damit deine Website nicht nur gut aussieht, sondern auch rund läuft, habe ich dir ein paar praktische Tipps zusammengestellt, wie du Elementor optimal nutzen kannst. Von der sauberen Struktur bis hin zur Performance – diese Empfehlungen helfen dir, deine Website effektiv und übersichtlich zu gestalten.

Weniger ist oft mehr

Achte darauf, dass deine Seite nicht überladen wirkt. Zu viele verschiedene Schriftarten, Farben oder Animationen können schnell chaotisch wirken. Besonders bei Animationen und Effekten gilt: Weniger ist mehr.

Für’s Smartphone optimieren

Da ein Großteil deiner Besucher*innen deine Website wahrscheinlich über mobile Geräte aufruft, solltest du stets im Hinterkopf behalten, wie deine Seite auf Smartphones und Tablets aussieht. Überprüfe daher regelmäßig die mobile Ansicht in der Vorschau und auf deinem Smartphone.

Elemente sinnvoll einsetzen

Elementor bietet eine riesige Auswahl an Elementen, aber das bedeutet nicht, dass du sie alle einsetzen musst. Überlege dir, welche Elemente sinnvoll sind und deinen Besucher*innen einen Mehrwert bieten.

Ladezeit prüfen

Große Bilder, Videos und Animationen können die Ladezeit beeinträchtigen. Optimiere deine Bilder und verwende ein Caching-Plugin, um die Ladezeit deiner Seite zu verbessern.

Sieh dir auch diesen Beitrag an:
5 praktische Tipps, die deine (Elementor-)Website schneller machen

Globale Farben & Schriften für ein professionelles Design

Verwende globale Farben und Schriften, für ein einheitliches Erscheinungsbild auf deiner gesamten Website. Das spart dir Zeit bei der Gestaltung neuer Seiten und sorgt für ein stimmiges Design. Du findest die globalen Einstellungen in der oberen Bearbeitungsleiste unter Website-Einstellungen.

Im Website-Hafen findest du eine Schritt-für-Schritt-Anleitung, um deine globalen Farben und Schriften einmal richtig einzurichten.

SEO im Hinterkopf behalten

Damit deine Website in Suchmaschinen gefunden wird, solltest du sie für Suchmaschinen optimieren. Achte darauf, dass deine Seiten gut strukturiert sind und nutze die HTML-Tags (H1, H2, H3) für deine Überschriften sinnvoll.

Füge Alt-Texte für Bilder hinzu und stelle sicher, dass deine Seite schnell lädt, um die Suchmaschinen-Rankings zu verbessern. Und nutze ein SEO-Plugin, wie Rank Math SEO: Rank Math richtig einrichten

Website auf dem neuesten Stand halten

Stelle sicher, dass alle Plugins, Themes und deine WordPress-Version immer auf dem neuesten Stand sind. Updates bringen nicht nur neue Funktionen, sondern schließen oft auch Sicherheitslücken und verbessern die Performance.

Sieh dir auch diesen Beitrag an:
So kannst du deine WordPress-Website sicher machen: 10 effektive Tipps zum selbst umsetzen

Wenn du diese Tipps berücksichtigst, wird deine Arbeit mit Elementor einfacher und effizienter. So schaffst du eine Website, die professionell aussieht und technisch reibungslos funktioniert.

Du willst noch mehr Tipps, um dir die Arbeit mit Elementor zu vereinfachen?

Schau hier: 13 Elementor Tipps und Tricks, die dir täglich Zeit sparen

Erweiterungen für Elementor

Auch wenn Elementor eine Vielzahl an Funktionen bietet, gibt es zahlreiche Erweiterungen (Addons), die zusätzliche Elemente und Designoptionen hinzufügen.

Ich empfehle dir auf Erweiterungen, wie Essential Addons, Ultimate Addons, Happy Addons usw. zu verzichten und die integrierten Funktionen von Elementor (Pro) zu nutzen. Warum? Jedes zusätzliche Plugin verlangsamt deine Website und bietet ein zusätzliches Risiko für deine Website.

Elementor Pro: Die beste Erweiterung für deine Elementor-Website

Elementor Pro ist nicht nur eine Erweiterung, sondern ein umfassendes Upgrade. Es bietet dir alles, was du brauchst, um deine Website professionell und flexibel zu gestalten.

Vorteile von Elementor Pro:

• Theme Builder:
  Gestalte Header, Footer, Archive, Single Posts und mehr individuell.
• Popup Builder:
  Erstelle ansprechende Popups direkt in Elementor.
• Premium Elemente:
  Nutze erweiterte Elemente wie Formulare, WooCommerce-Elemente und mehr.
• Globale Widgets:
  Verwende Elemente wiederholt auf verschiedenen Seiten und spare so Zeit.
• Custom CSS:
  Füge eigene CSS-Codes im Elementor-Editor hinzu.

Mehr über die Unterschiede zwischen Elementor und Elementor Pro erfahren:
Elementor oder Elementor Pro: Brauche ich die Pro-Version?

Wenn du dir für deine Website mehr Funktionen wünschst, Elementor Pro die sicherste und effizienteste Option. Andere Erweiterungen solltest du nur verwenden, wenn du wirklich spezifische Funktionen brauchst, die Elementor (Pro) nicht bietet.

Häufige Fehler in Elementor und wie du sie behebst

Auch wenn Elementor ein sehr nutzerfreundliches Tool ist, können bei der Arbeit mit dem Page Builder Fehler oder Probleme auftreten. Hier sind einige der häufigsten Probleme und schnelle Lösungen, um sie zu beheben:

Änderungen werden nicht angezeigt

Manchmal kann es passieren, dass du Anpassungen vornimmst, diese aber nicht in der Vorschau oder der veröffentlichten Seite angezeigt werden. In den meisten Fällen liegt das an einem Cache-Problem.

Lösung:
Lösche den Cache von WordPress, falls du ein Caching-Plugin verwendest. Die Funktion findest du üblicherweise in deinem WordPress-Dashboard in der oberen Leiste.

500 Internal Server Error

Dieser Fehler tritt häufig bei Hosting-Problemen oder unzureichendem Speicherplatz auf.

Lösung:
Folge meiner Anleitung aus diesem Blogbeitrag: Serverfehler (500 Error) beheben

Problem mit der mobilen Ansicht

Deine Seite sieht auf dem Desktop perfekt aus, aber auf mobilen Geräten verschieben sich Elemente oder Texte werden abgeschnitten.

Lösung:
Verwende die responsiven Einstellungen in Elementor, um die Darstellung auf verschiedenen Geräten zu optimieren. Prüfe, ob Abstände, Schriftgrößen und Layouts korrekt angepasst sind.

Probleme mit der Ladegeschwindigkeit

Elementor-Seiten können durch viele Bilder, Videos oder komplexe Layouts langsamer laden.

Lösung:
Optimiere deine Bilder und nutze meine 5 Tipps, um deine Elementor-Website schneller zu machen.

Darstellungsproblem

Manchmal kann es passieren, dass deine Website nach der Veröffentlichung oder der Aktualisierung von Elementor (Pro) völlig anders aussieht, als sie sollte. Farben, Schriftarten oder Layouts stimmen nicht mehr, und das Design wirkt chaotisch. Das kann verschiedene Ursachen haben, wie etwa ein Fehler beim CSS oder ein Cache-Problem.

Lösung 1: Cache löschen
Leere den Cache deiner Website. Der Cache ist ein Zwischenspeicher. Oft wird das Design falsch angezeigt, weil der Cache eine alte Version der Seite speichert. Wenn du ein Caching-Plugin verwendest, findest du die Option „Cache leeren“ üblicherweise im WordPress-Dashboard in der oberen Leiste.

Lösung 2: CSS neu generieren
Manchmal wird benutzerdefiniertes CSS nicht korrekt angewendet oder es gibt einen Fehler bei der Speicherung. Gehe im WordPress-Dashboard zu Elementor > Werkzeuge und klicke neben CSS & Daten neu generieren auf den Button „Dateien und Daten neu generieren“.

Lösung 3: Inkompatible Plugins überprüfen
Wenn das alles nichts hilft, deaktiviere nacheinander alle Plugins, um herauszufinden, ob eines der Plugins die Darstellung beeinflusst. Häufige Übeltäter sind Caching- und Optimierungs-Plugins, die CSS oder JavaScript minimieren und dadurch Layout-Probleme verursachen können.

Mehr Elementor-Hilfe

Mit diesen Elementor-Grundlagen hast du die wichtigsten Bausteine, um deine Website nach deinen Vorstellungen zu gestalten. Schritt für Schritt wirst du sicherer im Umgang mit dem Pagebuilder und kannst schon bald ganz entspannt deine Seiten anpassen.

Falls du beim Erstellen noch unsicher bist oder Unterstützung brauchst, findest du im Website-Hafen konkrete Anleitungen und kannst mir deiner Website-Fragen persönlich stellen. Schau vorbei – gemeinsam geht’s leichter!

Ein häufiger Fehler, der beim Speichern in Elementor auftaucht, ist die Fehlermeldung „Serverfehler (500 error)“ oder „Serverfehler (500 Internal Server Error)“. Dieser Fehler lässt sich normalerweise mit wenigen Klicks beheben. Wie du das machst, zeige ich dir in diesem Beitrag.

Was ist der Auslöser für den Serverfehler 500?

Meistens tritt dieser Fehler auf, weil es zu viele Revisionen, also Zwischenspeicherungen, gibt und diese zu viel Speicherplatz einnehmen.

Wie behebe ich den Serverfehler 500?

Mit dem Plugin WP-Sweep kannst du den Serverfehler 500 ganz einfach beheben.

Das Plugin kannst du im WordPress-Dashboard, unter » Plugins » neues Plugin hinzufügen, installieren und aktivieren.

Hinweis:
Falls du WP Rocket* auf deiner Website installiert hast, brauchst du das Plugin nicht zu installieren. Hier findest du die Anleitung für WP Rocket.

Nachdem du WP-Sweep installiert und aktiviert hast, wechselst du in den Menüpunkt » Werkzeuge » WP-Sweep.

Ganz oben im Bereich „Beitragsbereinigung“ findest du den Punkt „Revisionen“. In dieser Zeile klickst du rechts auf den Button „Bereinigen“.

Damit hast du die Zwischenspeicherungen entfernt.

So löst du den Serverfehler mit WP Rocket:

Wenn du WP Rocket* nutzt, brauchst du kein eigenes Plugin, um Revisionen zu löschen. Du findest die Möglichkeit im WordPress-Dashboard unter » Einstellungen » WP Rocket » Datenbank.

Setze ein Häkchen vor „Revisionen“ und klicke unten auf „Änderungen speichern und optimieren“.

Nachdem du die Revisionen gelöscht hast, kannst du deine Website weiterbearbeiten und Änderungen wie gewohnt speichern.

Möglicherweise musst du die Seite neu laden, bevor du die Änderungen speichern kannst.

Tipp:
Falls du, seit dem letzten Speichern, viele Änderungen vorgenommen hast, empfehle ich dir, die aktuelle Seite als Template abzuspeichern. Dazu klickst du neben dem Veröffentlichen bzw. Aktualisieren-Button auf den kleinen Pfeil und auf „als Template speichern“.

Der Serverfehler besteht weiterhin?

Buch dir gerne meine Website-Hilfe und lass mich dir helfen, die Ursache für deinen Serverfehler zu finden und ihn zu beheben.

Die Ladezeit deiner Website ist ein entscheidender Faktor für die Sichtbarkeit in Suchmaschinen und die Benutzererfahrung deiner Besucher*innen. Je schneller deine Website lädt, desto besser sind deine Chancen, in den Suchergebnissen aufzutauchen und deine Besucher*innen auf deiner Website zu halten.

In diesem Beitrag zeige ich dir 5 praktische Tipps, mit denen du die Ladezeit deiner Website verbessern kannst. Aber bevor wir dazu kommen, lass uns darüber sprechen, warum es so wichtig ist, deine Website schneller zu machen, und wie du herausfindest, wie schnell sie aktuell lädt.

3 Gründe, warum du deine Website schneller machen solltest:

1. Eine kurze Ladezeit sorgt dafür, dass deine Besucher*innen deine Website überhaupt sehen.

Wenn deine Website zu langsam lädt, verschwinden deine Besucher*innen, bevor deine Website überhaupt fertig geladen wurde.

2. Suchmaschinen platzieren deine Website weiter vorne, wenn sie schnell lädt.

Dieser Punkt steht in Verbindung mit Punkt 1. Denn Google und Co wollen ihre Nutzer*innen zufriedenstellen. Und dafür trägt eine schnelle Ladezeit einen wichtigen Teil bei.

3. Eine schnelle Website ist nachhaltiger.

Für die Speicherung und das Aufrufen deiner Website ist Energie notwendig und verursacht so CO₂. Je schneller deine Website lädt, umso weniger Speicherplatz nimmt sie ein und es werden bei ihrem Aufruf weniger Daten übertragen. Folglich ist ihr CO₂-Abdruck geringer.

Finde heraus, wie schnell bzw. langsam deine Website lädt:

Es gibt viele Tools, die dir helfen, die Geschwindigkeit deiner Website zu messen. Ich empfehle dir das Tool Bulk PageSpeed Test von Experte.de, weil du dort die Ergebnisse für alle deine Unterseiten auf einem Blick sehen kannst.

Öffne den Link am besten zweimal und teste in einem Tab die Geschwindigkeit deiner Desktopversion und in einem zweiten Tab die deiner Mobilversion. Bis du alle Ergebnisse hast, dauert es, je nach Umfang deiner Website, einige Minuten.

Auswertung der Ergebnisse:

Teste die Geschwindigkeit deiner Website am besten einmal vor und nach den Optimierungen. Und wenn du magst, auch nach jedem umgesetzten Tipp.

5 Tipps, um deine Website schneller zu machen

Tipp 1: Lazy Loading aktivieren

Lazy Loading verhindert, dass direkt beim Aufrufen deiner Website alle Bilder und Videos geladen werden. Das sorgt dafür, dass die ersten Inhalte deiner Website schneller sichtbar sind. Wenn deine Besucher*innen weiter nach unten scrollen, werden die weiteren Inhalte nach und nach geladen.

Lazy Loading macht deine Website schneller und nachhaltiger. Ohne Lazy Loading würden bei jedem Seitenaufruf alle Inhalte der Unterseite geladen. Egal, ob deine Besucher*innen bis ans Ende der Seite scrollen oder nicht. Hast du Lazy Loading aktiviert, werden nur die Inhalte geladen, die gebraucht werden.

Meine Empfehlung ist das LazyLoad Plugin von WP Rocket. Du kannst es kostenlos im WordPress-Dashboard unter » Plugins » neues Plugin hinzufügen installieren und aktivieren.

Nachdem du das Plugin installiert hast, findest du es unter » Einstellungen » LazyLoad. Dort brauchst du nur noch für alle Elemente ein Häkchen setzen, für die du Lazy Load aktivieren möchtest.

Tipp 2: Element Manager nutzen

Nutze den Element Manager, damit beim Aufrufen deiner Website kein Code geladen wird, den deine Website nicht braucht.

So verwendest du den Element Manager:

1. Gehe im WordPress Dashboard im Menü auf » Elementor » Element Manager.

2. Klicke auf „Scan Element Usage“, damit dir angezeigt wird, wie oft welches Element auf deiner Website im Einsatz ist.

3. Klicke anschließend auf „nicht verwendete Elemente deaktivieren“.

4. Und speichere die Änderungen mit dem Button „Änderungen speichern“.

Damit hast du alle Elemente, die du aktuell nicht auf deiner Website verwendest, deaktiviert.

Im Editor von Elementor werden dir nur die Elemente angezeigt, die du aktiviert hast. Im Element Manager kannst du jederzeit Elemente wieder aktivieren und dann findest du sie auch wieder im Editor.

Hinweis:

Falls du Erweiterungen für Elementor, wie Essential Addons oder Ultimate Addons nutzt, deaktiviere auch dort alle Elemente, die du auf deiner Website nicht verwendest.

Tipp 3: Bilder optimieren

Verringere die Größe deiner Bilder. Es gibt alle möglichen Plugins dafür. Einige davon speichern deine Bilder in verschiedenen Größen ab, nehmen so aber zusätzlichen Speicherplatz ein. Andere speichern das Original und eine Kopie davon.

Meine Empfehlung ist, dass du deine Bilder bereits vor dem Hochladen auf deine Website in die richtige Größe bringst. Wie du das machst, zeige ich dir in einem eigenen Blogbeitrag:

Tipp 4: unnötige Plugins löschen

WordPress bietet dir unzählige Plugins. Ich empfehle dir, so viele Plugins wie nötig, aber so wenige wie möglich zu installieren. Denn eine große Anzahl an Plugins machen deine Website langsam. Ein Richtwert für eine Website ohne Online Shop sind 10 bis 20 aktive Plugins. Für einen Online Shop 20 bis 30.

Gleichzeitig machst du deine Website sicherer, in dem du unnötige Plugins löscht.

Du bist unsicher, welche Plugins du auf deiner Website brauchst und welche du löschen kannst? Dann buch dir gerne eine Stunde Website-Hilfe und lass uns deine Plugins gemeinsam checken.

Tipp 5: Caching-Plugin nutzen

Ein Caching-Plugin speichert Kopien deiner Website, um sie schneller zu laden. Das heißt, wenn ein*e Besucher*in deine Website erneut besucht, wird beim 2. Besuch diese Kopie verwendet, anstatt die Seite neu zu laden. Vorausgesetzt, der Cache wurde in der Zwischenzeit nicht geleert.

Damit Änderungen für wiederkehrende Besucher*innen angezeigt werden, solltest du den Cache immer leeren, nach dem du auf einer Unterseite etwas verändert hast.

Wenn du ein kostenloses Caching-Plugin möchtest, ist meine Empfehlung Cache Enabler. Du kannst es im WordPress-Dashboard unter » Plugins » neues Plugin hinzufügen installieren und aktivieren.

Nachdem du es installiert hast, findest du es unter » Einstellungen » Cache Enabler. Dort empfehle ich dir, die Häkchen, wie in diesem Screenshot zu setzen:

Deine Website lädt nach den Optimierungen noch immer langsam?

Das kann mehrere Gründe haben. Prüfe, ob …

• du einen langsamen Hosting-Anbieter verwendest.
  Mit einem Hosting-Anbieter wie All Inkl*, Raidboxes* und Webgo bist du auf einem guten Weg zu einer schnellen Website.¹ Von IONOS, Strato oder Host Europe hingegen würde ich dir abraten.

• deine Website sehr verschachtelt aufgebaut ist.
  Hast du auf deiner Website viele Container im Container im Container? Jedes unnötige Elementor-Widget braucht Code. Dieser Code muss beim Aufruf deiner Website übertragen werden und verlangsamt so deine Website. Baue deine Website „sauber“ auf und achte darauf, dass du nur so viele Container wie nötig verwendest. Das macht deine Website schneller.
  
  Vielleicht hilft dir auch meine Elementor-Anleitung.

Je nach Umfang deiner Website ist es vor allem in der Mobilversion schwierig, mit kostenlosen Plugins im Geschwindigkeits-Test auf ein Ergebnis über 80 zu kommen.

Wenn dir die Ladezeit, die deine Website mit kostenlosen Tools schafft, zu lange ist, empfehle ich dir das kostenpflichtige Plugin WP Rocket*. Für eine Website kostet dich das Plugin etwa 60 € pro Jahr.

Meine Erfahrungen mit WP Rocket:

Ich nutze WP Rocket* selbst und habe damit meine bereits mit den oben angeführten Tipps optimierte Ladezeit nochmal spürbar verkürzt:

Lass uns deine Website gemeinsam schneller machen

Wenn du Unterstützung beim Umsetzen der Tipps, Hilfe beim Umzug deiner Website, beim Entschachteln deiner Elementor-Container oder beim Einrichten von WP Rocket brauchst, dann buch dir gerne meine Website-Hilfe und lass mich dir helfen, deine Website schneller zu machen.

Ein Anker-Link ist ein spezieller Link auf deiner Website, der deine Besucher*innen zu einer anderen Stelle auf derselben Seite bringt.

Vor allem in langen Blogbeiträgen ist diese Art der Verlinkung praktisch, um deine Leser*innen zu einem bestimmten Abschnitt bringen zu können. Auf Angebots- oder Buchungs-Seiten wird ein Anker-Link gerne genutzt, um zu einem Anmelde- oder Buchungs-Formular zu führen.

Probier’s einfach aus und klick‘ dich durch das Inhaltsverzeichnis. Denn das besteht aus Anker-Links.

Wie setze ich einen Anker-Link?

Es gibt verschiedene Möglichkeiten, einen Anker-Link zu setzen. Ich zeige dir hier 3 Varianten. Um zur jeweiligen Variante zu gelangen, habe ich praktischerweise Anker-Links verwendet. 😉

» Variante 1 mit Elementor mit Widget: Anker-Link setzen mit dem Anker-Widget
» Variante 2 mit Elementor ohne Widget: Anker-Link setzen über die CSS-ID
das hört sich komplizierter an, als es ist
» Variante 3 mit dem Gutenberg-Editor: Anker-Link in Blogbeiträgen setzen

Anleitung – Elementor: Anker-Link setzen mit dem Anker-Widget

Das Widget „Menü-Anker“ findest du in den Elementor-Widgets, so wie die anderen Widgets, wenn du eine Unterseite mit Elementor bearbeitest.

Füge es an der Stelle auf deiner Unterseite ein, zu der deine Besucher*innen springen sollen, wenn sie auf den Link oder Button klicken, den wir gleich einrichten.

Der Anker-Link erscheint als grauer Balken. Dieser wird deinen Besucher*innen nicht angezeigt. Hier brauchst du nichts zu gestalten.

Du brauchst nur noch eine „ID“ (Identifikator) für deinen Anker-Link vergeben. Diese kann aus einem oder mehreren Wörtern bestehen.

Vergib am besten ein Wort oder eine Wort-Kombination, die zum jeweiligen Abschnitt passt.

Beachte:
– Ersetze Leerzeichen durch einen Bindestrich.
– Verwende keine Sonderzeichen.
– Vergib auf jeder Unterseite eine ID nur ein einziges Mal.

Merke oder kopiere dir den Namen deiner ID. Geh zu dem Text oder dem Button, den du verlinken möchtest. Setze in das Link-Feld erst ein Hashtag-Symbol und füge daran anschließend die ID ein.

Diesen Anker-Link (nicht die ID) darfst du beliebig oft auf deiner Unterseite setzen.

Anleitung – Elementor: Anker-Link setzen über die CSS ID

Das hört sich erstmal kompliziert an, ist es aber nicht. Wenn du es 2-3mal gemacht hast, ist diese Variante sogar einfacher als die vorherige.

Klicke im Bearbeitungs-Modus deiner Unterseite das jeweilige Widget oder den Container an, zu dem deine Besucher*innen springen sollen, wenn sie auf einen Link oder Button.

Gehe links im Editor auf den Reiter „Erweitert“. Im Bereich Layout, fast ganz unten, findest du das Feld „CSS ID“. Dort gibst du jetzt eine ID (Identifikator) für deinen Anker-Link ein. Diese ID kann aus einem oder mehreren Wörtern bestehen.

Vergib ein Wort oder eine Wort-Kombination, die zum jeweiligen Abschnitt passt.

Beachte:
– Ersetze Leerzeichen durch einen Bindestrich.
– Verwende keine Sonderzeichen.
– Vergib auf jeder Unterseite eine ID nur ein einziges Mal.

Merke oder kopiere den CSS ID-Namen. Wechsle zu dem Text oder Button, den du zum ausgewählten Container bzw. Element verlinken möchtest. Setze in das Link-Feld erst ein Hashtag-Symbol und füge daran die zuvor vergebene CSS ID ein.

Diesen Anker-Link darfst du beliebig oft auf deiner Unterseite setzen. Im Feld CSS ID solltest du immer unterschiedliche Bezeichnungen setzen.

Anleitung – Gutenberg-Editor: Anker-Link in Blogbeiträgen setzen

Auch im Gutenberg-Editor kannst du einen Anker-Link setzen. Ich empfehle dir, den Gutenberg unbedingt zum Schreiben von Blogbeiträgen zu verwenden, weil deine Beiträge so schneller geladen werden. Und das wirkt sich positiv auf die Sichtbarkeit in Suchmaschinen und die Erfahrung deiner Besucher* innen aus.

Klicke das Element im Gutenberg-Editor an, zu dem du hinleiten willst. In den Einstellungen in der rechten Seitenleiste findest du den Punkt „Erweitert“. Öffne diesen mit einem Klick.

Gib bei HTML-Anker ein Wort oder eine Wort-Kombination ein, die beschreibt, was an dieser Stelle zu finden ist.

Beachte:
– Ersetze Leerzeichen durch einen Bindestrich.
– Verwende keine Sonderzeichen.
– Vergib auf jeder Unterseite eine Bezeichnung nur ein einziges Mal.

Füge im Gutenberg-Editor deinen Text oder Button ein, über den du auf diese Stelle weiterleiten willst.

Klicke auf das Link-Symbol und füge hier erst ein Hashtag-Symbol und anschließend die Bezeichnung deines HTML-Ankers ein.

Klicke die Enter-Taste oder auf den Pfeil neben dem Link-Text.

Diesen Anker-Link darfst du beliebig oft in deinen Beiträgen setzen. Die Bezeichnung des HTML-Ankers solltest du in jedem Beitrag nur ein einziges Mal vergeben.

Mit einem Anker-Link auf eine andere Seite verlinken

Um von einer Unterseite deiner Website auf eine bestimmte Stelle auf einer anderen Unterseite zu verlinken, kannst du ebenfalls diese Anker-Link-Methode nutzen.

Der erste Teil mit der (CSS) ID in Elementor bzw. dem HTML-Anker im Gutenberg-Editor bleibt gleich. Du hinterlegst wie in den Anleitungen oben an der Stelle, auf die deine Besucher*innen gelangen sollen, eine (CSS) ID bzw. einen HTML-Anker.

Der Link, über den du auf diese Stelle hinleiten willst, beinhaltet jetzt aber nicht mehr nur das Hashtag-Symbol und die ID- bzw. den HTML-Anker (z.B. #dein-ankerlink). Sondern jetzt fügst du erst den Link zur Unterseite ein, auf der sich die Stelle, auf die du hinleiten willst, befindet. Und zusätzlich fügst du danach das Hashtag-Symbol gemeinsam mit deinem Anker-Link ein.

Dein Link, den du in das Link-Feld einfügst, sieht zum Beispiel so aus:
https://deinedomain.com/unterseite-1/#dein-ankerlink

5 praktische Anwendungen von Anker-Links:

One-Pager

Für eine Website, die alle Inhalte, wie deine Angebote, einen Über-Mich-Teil und Kontaktmöglichkeit auf nur einer Unterseite darstellt, kannst du mithilfe von Anker-Links ein Menü erstellen. Über dieses Menü gelangen Website-Besucher*innen direkt zum jeweiligen Abschnitt.

Untermenü-Punkte

Ähnlich wie bei einem One-Pager kannst du Anker-Links auch verwenden, um mehrere (Unter-)Menü-Punkte zu erstellen, die auf eine bestimmte Stelle in einer Unterseite verlinken. So könntest du zum Beispiel eine Angebots-Seite mit 3 verschiedenen Angeboten erstellen und diese 3 Angebote als Punkte in einem Untermenü darstellen.

So erstellst du einen Menü-Punkt mit einem Anker-Link:

Klicke im WordPress-Dashboard auf » Design » Menüs.

Wähle oben erst das jeweilige Menü aus, das du bearbeiten möchtest, oder erstelle ein neues Menü.

Klicke in der linken Spalte auf „Individuelle Links“ und gib oben die URL zu dieser Stelle ein, zu der du verlinken möchtest (siehe Mit einem Anker-Link auf eine andere Seite verlinken). Unten fügst du den Link-Text ein, der in deinem Menü angezeigt werden soll.

Klicke auf „Zum Menü hinzufügen“. Verschiebe den Punkt an die gewünschte Stelle und klicke zum Schluss auf „Menü speichern“.

Anmeldungs- oder Buchungs-Formulare

Verlinke in Buttons mit einem Anker-Link auf einen Bereich auf deiner Unterseite, das ein Anmelde- oder Buchungs-Formular enthält. Auf meiner Website nutze ich das zum Beispiel auf der Unterseite, über die du dir meine Website-Checkliste holen kannst.

Inhaltsverzeichnis

Mit Anker-Links kannst du dir selbst ein Inhaltsverzeichnis erstellen. Das SEO-Plugin Rank Math kann dir diese Arbeit abnehmen und dein Inhaltsverzeichnis automatisch erstellen.

Navigation zum Kommentar-Bereich

In einem Blogbeitrag kannst du den Anker-Link #comments nutzen, um zum Kommentar-Bereich des aktuellen Blogbeitrags zu verlinken.

Dazu brauchst du keine (CSS)-ID bzw. keinen HTML-Anker anlegen. Verlinke einfach einen Text oder einen Button mit dem Link-Text #comments.

Probier’s gerne aus und schreib‘ mir einen Kommentar. Klicke einfach hier, um direkt zum Kommentar-Bereich unter diesem Beitrag zu gelangen. 💬

Du willst deine Website noch besser machen?

Mit Anker-Links bist du schon auf einem guten Weg. Denn diese helfen deinen Besucher*innen, um sich besser durch deine Website navigieren zu können.

40 weitere Punkte, die du auf deiner Website checken kannst, damit sie sicherer und benutzerfreundlicher wird, findest du in meiner Website-Checkliste um 0 €.

Sicher warst du schon auf Websites unterwegs, auf denen sich direkt beim 1. Besuch ein Popup öffnet und den Inhalt der Seite, den du dir gerade ansehen wolltest, verdeckt. Das nervt!

Elementor Pro* bietet dir gute Einstellmöglichkeiten, um deine Popups so einzustellen, dass sich Popups erst im Verlauf des Besuchs öffnen und dadurch deine Website-Besucher*innen nicht nerven, sondern ihnen noch eine Freude machen, weil du darin zum Beispiel auf ein 0€-Angebot hinweist, das sie gut gebrauchen können.

Popup-Arten

Ich unterscheide drei Arten von Popups:

• Popups, die sich automatisch öffnen, sobald man eine Website öffnet
  werden von Popup-Blockern oder von bestimmten Browsern geblockt
• Popups, die sich nach einer festgelegten Zeit oder Aktion öffnen
  werden von Popup-Blockern oder von bestimmten Browsern geblockt
• Popups, die sich mit Klick auf einen Button öffnen
  werden üblicherweise nicht geblockt

Die letzte Art ist die Art, wie ich Popups am liebsten nutze. Denn so nerve ich meine Besucher*innen nicht mit lästigen Popups.

Was kann man mit Popups machen?

Mit Popups kannst du unter anderem auf 0 €-Produkte oder aktuelle Angebote hinweisen. Oder du setzt ein Kontakt- oder Anmelde-Formular in ein Popup. So habe ich das mit der Anmeldung zum Website-CoWorking gemacht. Sobald du auf einen der Buttons klickst, öffnet sich ein Popup mit dem Formular zur Anmeldung.

Aber es gibt auch noch andere Möglichkeiten:

Im Adventskalender-Mini-Kurs zeige ich dir, wie du deinen eigenen Adventskalender erstellst. Die Basis dafür bilden 24 Popups, die in 24 Kästchen verlinkt sind und sich natürlich erst ab dem jeweiligen Tag öffnen lassen.

Hier findest du mehr Infos zum Mini-Kurs.

Wie erstelle ich ein Popup mit Elementor?

Elementor Pro* bietet dir zum Erstellen von Popups richtig viele Möglichkeiten. Um ein neues Popup anzulegen, klickst du einfach in deinem WordPress-Dashboard auf » Templates » Popups und dort findest du ganz oben den Button „Add new Template“.

Den Template-Typ lässt du auf Popup und darunter gibst du einfach den Namen deines Popups ein.

Die Einrichtung und Einstellmöglichkeiten deines Popups zeige ich dir in einem Video. Darin erfährst du außerdem auch, wie du dein Popup in einem Button verlinken kannst. Denn diese Funktion ist ein wenig versteckt.

Komm ins nächste Website-CoWorking, um dein erstes Popup auf deiner Website umzusetzen.

Bei Fragen kannst du mir diese direkt im CoWorking stellen. Oder die Zeit nutzen, um fokussiert an deiner Website zu arbeiten.

Bestimmt warst du schon mal auf einem “Linktree”. Also einer Internetseite auf der eine Person oder Unternehmen eine Übersicht über ihre wichtigsten Links teilt. Diese Seite ist wirklich praktisch, um eine Auswahl an Links übersichtlich zu zeigen.

In diesem Beitrag gebe ich dir 5 Gründe, warum du eine Link-Seite unbedingt direkt auf deiner Website erstellen und keinen Drittanbieter verwenden solltest. Und ich zeige dir Schritt für Schritt, wie du eine solche Link-Seite mit wenig Aufwand selbst erstellen kannst.

Vorteile eines “Linktree” direkt auf deiner Website

Für Link-Seiten gibt es zwar spezielle Anbieter, die dir eine einfache Erstellung ermöglichen. Aber ich habe gleich mehrere Gründe, warum du diese besser nicht nutzen, sondern stattdessen deine Link-Seite besser auf deiner Website erstellen solltest:

Anpassung an dein Branding

Auf deiner Website kannst du deine Link-Seite komplett individuell an dein Branding anpassen. Denn manche Anbieter haben eine beschränkte Farb- oder Schriftauswahl. Außerdem ist in der kostenlosen Version üblicherweise auch das Branding des Anbieters zu sehen.

Datenschutz

Manche Anbieter arbeiten nicht DSGVO-konform, weil die Server nicht in der EU stehen und/oder sie personenbezogene Daten ohne die ausdrückliche Zustimmung der Nutzer*innen speichern oder verarbeiten.

Vertrauenswürdigkeit

Es wirkt professionell und vertrauenswürdig, wenn Besucher*innen direkt auf deiner Website landen und nicht auf einer Zwischen-Seite, die vielleicht von deinem Branding abweicht.

SEO-Vorteile

Eine Link-Seite auf deiner Website verbessert dein internes Verlinkungssystem und steigert die Anzahl deiner Website-Aufrufe. Das kann dazu beitragen, die Sichtbarkeit deiner Website in Suchmaschinen zu erhöhen.

Kostenersparnis

Viele Anbieter, vor allem, wenn sie DSGVO-konform arbeiten und sich damit nicht von Daten finanzieren, bieten ihre Dienste nicht kostenlos oder nur beschränkt kostenlos an. Auf deiner Website kostet dich deine Link-Seite nur etwa 1 Stunde Zeit.

Was brauche ich?

Um mit meiner Anleitung einen Linktree zu erstellen, brauchst du das Elementor Plugin. Egal, ob die kostenlose oder die Pro-Version.

So erstellst du deine Linktree-Alternative mit Elementor:

Die Video-Anleitung ist für dich, wenn du noch nicht besonders viel Erfahrung mit Elementor hast. Die schriftliche Anleitung kannst du als Ergänzung nutzen, damit du auch keinen Schritt vergisst.

Wenn du schon mehr Erfahrung mit Elementor hast, reicht dir wahrscheinlich bereits meine schriftliche Kurz-Anleitung aus. Natürlich kannst du dir trotzdem auch das Video ansehen.

Video-Anleitung für Elementor-Neulinge:

Falls das Video bei dir nicht angezeigt wird, kannst du es über diesen Link öffnen:
https://youtu.be/lYnNMGj7CGM

Kurz-Anleitung für erfahrene Elementor-Nutzer*innen:

1. Melde dich bei deiner WordPress-Website an.

2. Erstelle eine neue Unterseite. Diese kannst du zum Beispiel “Links” oder “Linkseite” nennen.

3. Wechsle in den Bearbeitungsmodus mit Elementor.

4. Ändere die Einstellungen über das kleine Zahnrad links unten. Blende den Seitentitel aus und entferne, wenn du magst, die Kopf- und Fußzeile, in dem du das Seitenlayout zu “Elementor Canva” änderst.

5. Wechsle direkt in die Smartphone-Ansicht.

6. Ziehe das Logo-Widget nach rechts in deine Website und bring es auf eine gute Größe.

7. Füge ein Button-Widget in deine Website ein und gestalte ihn so, wie er dir gefällt.

8. Dupliziere den Button so oft, bis du die Anzahl hast, die du brauchst. Du kannst später natürlich noch weitere Buttons hinzufügen, oder auch wieder löschen.

9. Benenne die Buttons klar und füge deine Links ein. Du kannst Buttons für Angebote, deinen Blog, einzelne Blogbeiträge, ein Kennenlerngespräch und noch vieles mehr erstellen. Überfordere aber besser nicht mit zu vielen Buttons, sondern beschränke dich auf die Wichtigsten.

10. Ziehe ein Texteditor-Widget nach rechts auf deine Website. In dieses Feld schreibst du “Impressum | Datenschutz” rein. Gestalte diesen Text, sodass er dir gefällt und verlinke das Wort Impressum mit deiner Impressum-Seite und das Wort Datenschutz mit deiner Datenschutz-Seite.

11. Passe zum Abschluss noch die Ansicht deiner Desktop- und Tablet-Version an. Das ist zwar nicht unbedingt notwendig, weil die Link-Seite üblicherweise über das Smartphone aufgerufen wird. Sollte aber doch mal jemand vom Desktop auf dorthin gelangen, ist es schön, wenn sie auch hier gut aussieht.

12. Veröffentliche deine Link-Seite und kopiere den Link z.B. in dein Instagram-Profil.

Gestaltungsmöglichkeiten

Natürlich kannst du deine Link-Seite auch aufwendiger gestalten. Sieh dir hier zum Beispiel meine Link-Seite an. Am besten natürlich in der Mobilversion.

Und hier noch ein Beispiel, das mir sehr gut gefällt:

• Link-Seite von Tine Lange – Holistic Health Coach

Optimierung für die Tablet- & Desktop-Version

Auch, wenn die meisten Menschen über das Smartphone auf deine Link-Seite kommen, empfehle ich dir, deine Link-Seite auch für die Tablet- und Desktop-Version zu optimieren.

Denn es gibt Nutzer*innen (mich zum Beispiel 😉), die nutzen Instagram auch am Tablet oder sogar am Desktop. Es ist nicht viel Aufwand, die Seite für die beiden anderen Ansichten anzupassen.

Fehler, die du auf deiner Link-Seite vermeiden solltest:

» Dein Text hebt sich nicht gut von der Farbe deines Buttons ab.

Achte unbedingt darauf, dass der Text in deinen Buttons gut zu lesen ist. Denn nur um diese geht es hier auf deiner Link-Seite.

» Du überforderst deine Besucherinnen mit zu vielen Optionen.

Vielleicht hast du, so wie ich, viel zu teilen. Von “Freebies”, über Blogbeiträge, Angebote, Newsletter-Anmeldung und vielleicht sogar noch einen Podcast oder Interviews, in denen du zu Gast warst. Wenn du alle Links dazu in deine Link-Seite packst, dann überforderst du deine Besucherinnen damit. So wissen sie gar nicht, wo sie anfangen sollen.

Überleg dir genau, was deine Besucher*innen machen sollen, wenn sie zum Beispiel über dein Instagram-Profil auf deine Link-Seite klicken. Beschränke dich am besten auf 3 bis 5 Möglichkeiten.

Fazit:

Es ist nicht schwer, eine Link-Seite auf deiner eigenen Website zu integrieren. Damit bist du nicht mehr von anderen Anbietern abhängig, musst nicht mit deren Datenschutz-Bestimmungen einverstanden sein und ersparst dir zusätzliche Kosten für Drittanbieter.

Wenn du magst, komm ins nächste Website-CoWorking und nutze diese Zeit dafür, um deine Link-Seite zu erstellen.