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.

Deine WordPress-Website ist bereit für die Veröffentlichung? In diesem Beitrag zeige ich dir die entscheidenden Schritte, die du beachten solltest, um deine Website richtig zu veröffentlichen. Damit sie schon bei deinen ersten Besucher*innen auf allen Geräten einen guten Eindruck hinterlässt und in Suchmaschinen gefunden werden kann.

Kopiere dir gerne die Checkliste am Ende des Beitrags, damit du keinen Punkt vergisst.

Warum ist es wichtig, dass du deine Website ordentlich veröffentlichst?

Der erste Eindruck entscheidet, ob ein*e Website-Besucher*in bleibt oder nicht. Und um bereits bei deinen ersten Besucher*innen einen guten Eindruck zu hinterlassen, habe ich dir die Punkte aufgelistet, die du vor, während und (direkt) nach der Veröffentlichung deiner Website checken solltest.

Wenn du (möglichst) alle Punkte dieser Checkliste abhakst…
» werden Besucher*innen gerne länger auf deiner Website verweilen.
» weißt du, dass deine Website ordentlich funktioniert.
» verbesserst du die Sichtbarkeit deiner Website in Suchmaschinen.

Vor der Veröffentlichung deiner WordPress Website

Diese 9 Punkte solltest du vor der Veröffentlichung deiner WordPress Website checken:

1. Stimmt die Rechtschreibung deiner Website-Texte?

Ich finde die Rechtschreibung enorm wichtig, um einen guten ersten Eindruck zu hinterlassen. Ein paar Fehler sind dabei nicht schlimm. Aber Rechtschreibfehler in jedem Satz lassen deine Website so wirken, als hättest du dir nicht viel Mühe gegeben.

Wenn Rechtschreibung nicht deine Stärke ist, ist das auch gar nicht schlimm. Lass entweder jemand anders deine Texte Korrektur lesen oder verwende ein Tool, wie zum Beispiel das LanguageTool. Das gibt es als Erweiterung für den Browser und zeigt dir direkt beim Schreiben Rechtschreibfehler an.

Ich nutze es auch, obwohl Rechtschreibung für mich kein Problem ist. Aber, wenn du, wie ich viel und schnell schreibst, dann übersiehst du Fehler, obwohl du weißt, wie du das Wort richtig schreibst. Mit dem Tool kannst du diese schnell beheben.

2. Wird deine Website in allen Ansichten ordentlich dargestellt?

Teste die Darstellung deiner Website auf dem Desktop, Tablet und Smartphone und am besten auch in verschiedenen Browsern, wie Chrome, Edge, Firefox und Safari.

Ganz besonders solltest du dabei auf Bilder und Formulare achten.

3. Funktionieren alle Links & Formulare auf deiner Website?

Diese Funktionen du auf jeden Fall testen:

• Links & Buttons
  » Öffnen sich Links, die auf eine andere Website führen (externe Links), in einem neuen Tab? Das ist wichtig, damit deine Website-Besucher*innen zurück auf deine Website kommen.
• Social Media-Buttons
  » Sind deine Social Media-Profile richtig verlinkt?
  » Öffnen sich Links zu deinen Profilen in einem neuen Tab?
• Kontaktformulare
  » Erhältst du eine Benachrichtigung, wenn eine neue Anfrage rein kommt?
  » Soll die andere Person eine Nachricht erhalten? Wenn ja, klappt der Versand?
• Newsletter-Anmeldeformular
  » Erhalten deine Abonennt*innen eine Mail zur Bestätigung?
  » Erhalten deine Abonennt*innen eine Willkommens-Mail / Willkommens-Sequenz?
  » Funktioniert der Versand eines 0 €-Produkts, wenn du eines hast?
• Blog-Funktionen
  » Funktionieren deine Teilen-Buttons, wenn du welche verwendest?
  » Funktionier deine Kommentar-Funktion, wenn du Kommentare erlaubst?

4. Ist ein gültiges SSL-Zertifikat für deine Website vorhanden?

Das erkennst du daran, ob du in der Browser-Zeile ein kleines geschlossenes Schloss-Symbol siehst. So sieht ein gültiges SSL-Zertifikat aus:

Und so, sieht es aus, wenn eine Website kein gültiges SSL-Zertifikat hat, nicht besonders vertrauenserweckend:

Je nach Browser sieht die Zeile etwas anders aus. Und wenn deine Besucher*innen einen zusätzlichen Virenschutz verwenden, ist es auch möglich, dass die Website gar nicht lädt.

Deine Website braucht also unbedingt ein gültiges SSL-Zertifikat. Sonst werden Besucher*innen deine Website womöglich wieder verlassen, bevor sie sie überhaupt gesehen haben.

Je nachdem, bei welchem Anbieter du deine Domain hast, musst du das SSL-Zertifikat entweder noch mit ein paar Klicks aktivieren oder vielleicht auch noch zusätzlich erwerben.

So aktivierst du das SSL-Zertifikat bei All-Inkl:

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

5. Hast du weitere Domains, die du zu deiner Haupt-Domain umleiten willst?

Wenn ja, dann richte alle Weiterleitungen ein und teste, ob sie funktionieren.

Ich habe beispielsweise auch die Domain anitaschwarz.at gekauft, die dich automatisch auf meine Haupt-Domain anitaschwarz.com weiterleitet.

So richtest du eine Weiterleitung bei All Inkl ein:

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

6. Erlaubst du Suchmaschinen deine Website zu indexieren?

“Warum wird meine Website nicht in Suchmaschinen gefunden?” ist eine Frage, die ich recht oft höre. Oft ist die Lösung ganz einfach:

In den WordPress-Einstellungen gibt es ein kleines Häkchen, das man beim Einrichten der Website oft setzt, damit Suchmaschinen die Website noch nicht finden können. Und das muss bei der Veröffentlichung auch wieder entfernt werden.

Du findest das Häkchen im WordPress-Dashboard unter » Einstellungen » Lesen. Ganz unten neben „Sichtbarkeit in Suchmaschinen“.

Falls das Häkchen bei dir noch gesetzt ist, entferne es und klicke auf „Änderungen speichern“.

7. Funktioniert deine 404-Fehler-Seite?

Manchmal passiert es, dass man einen Link falsch setzt oder eine Seite löscht, aber die dazugehörige Verlinkung nicht. Dann sollten deine Besucher*innen auf einer 404-Seite landen über die sie wieder zurück zu relevanten Inhalten finden.

Wenn du keine 404-Fehler-Seite erstellst, dann wird je nach Theme, entweder keine oder eine standardisierte Unterseite angezeigt, die deine Besucher*innen unpersönlich anspricht.

Manchmal wird dabei sogar die Kopfzeile ausgeblendet. So, dass man als Besucher*in nicht die einfache Möglichkeit hat, sich im Menü zu orientieren. Für einige ist das der Zeitpunkt, an dem sie deine Website verlassen.

Eine gut gestaltete 404-Seite soll das verhindern. Und deinen Besucher*innen einen Vorschlag machen, was sie jetzt tun können.

Damit das Erstellen deiner 404-Seite für dich kein großer Aufwand wird, habe ich hier eine Vorlage, die du einfach anpassen kannst:

So richtest du deine 404-Seite mit Elementor ein:

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

8. Ist dein Impressum und deine Datenschutzerklärung (noch) aktuell und richtig verlinkt?

Je nachdem, wann du sie erstellt hast und wie sich dein Business seither entwickelt hat, ist es möglich, dass deine Datenschutzerklärung nicht mehr ganz aktuell ist. Vielleicht hast du ein Tool gewechselt oder verwendest ein neues Tool, dass du bei der Erstellung noch nicht genutzt hast. Also prüfe nochmal, ob deine Datenschutzerklärung noch aktuell ist.

Und achte auch darauf, dass du sie in der Fußzeile, sowie in Kontakt- und Newsletter-Anmeldeformularen richtig verlinkt hast.

9. Ist deine Website für die Sichtbarkeit in Suchmaschinen vorbereitet?

Zwei Plugins sind für die technische Suchmaschinenoptimierung mit WordPress besonders beliebt. Nämlich Yoast SEO und Rank Math. Mein persönlicher Favorit ist Rank Math, weil es dir schon in der kostenlosen Variante noch mehr Möglichkeiten bietet.

Denn mit Rank Math kannst du über den 404-Monitor beobachten, welche Links aufgerufen werden und zu einer 404-Fehler-Seite führen und auch direkt Weiterleitungen einrichten.

Über dein SEO-Tool solltest du auf jeden Fall folgende Einstellungen treffen:

• Soll die Unterseite indexiert werden?
  Lege für jede Untereite fest, ob sie in Suchmaschinen gefunden werden soll oder nicht. Bei Rank Math machst du das über die Häkchen “Index” und “Kein Index”.
• Titel und Beschreibung für die Suchergebnisse
  Lege für jede Unterseite, die in Suchmaschinen gefunden werden soll, einen passenden Titel, Permalink und Beschreibung fest. Falls du bereits eine Keyword-Recherche gemacht hast, verwende in diesen Texten deine Keywords.
• Beitragsbild für’s Teilen auf Social Media
  Wenn du möchtest, kannst du auch noch ein Bild festlegen, das beim Teilen in Social Media angezeigt wird.

Siehe dir auch diese Beiträge an:

Während der Veröffentlichung deiner WordPress Website

Diese 2 Punkte solltest du beachten, um deine WordPress Website richtig zu veröffentlichen:

1. Deaktiviere den Wartungsmodus deiner Website, wenn du einen solchen verwendest.

Wenn du den Wartungsmodus von Elementor Pro genutzt hast, dann kannst du diesen im WordPress Dashboard unter » Elementor » Werkzeuge » Wartungsmodus deaktivieren. Hier wählst du im Dropdown-Feld Modus auswählen „Deaktivieren“ aus.

Wenn du ein anderes Plugin, wie Maintenance oder Under Construction verwendet hast, dann deaktiviere den Wartungsmodus in den jeweiligen Einstellungen.

2. Leere den Cache deiner Website, wenn du ein Caching-Plugin verwendest.

Ein Caching-Plugin ist einfach gesagt dazu da, damit deine Website bei Besucher*innen schneller lädt, wenn sie deine Website bereits einmal besucht haben. Ihr Browser merkt sich dann nämlich bestimmte Daten und ruft diese direkt ab, anstatt über den Server, auf dem deine Website liegt. Das spart Ladezeit.

Ich empfehle dir unbedingt, ein Caching-Plugin zu verwenden. Meine Empfehlung dafür ist WP Fastest Cache. Das ist einfach einzurichten und liefert gute Ergebnisse, macht deine Website also schneller.

Wenn du deinen Cache nach der Veröffentlichung deiner Website oder auch, wenn du Anpassungen vornimmst, nicht leerst, ist es möglich, dass noch die Daten, eines vorherigen Besuchs geladen werden.

Die Einstellung, um den Cache zu leeren findest du üblicherweise in der oberen Leiste, wenn du bei WordPress eingeloggt bist.

Direkt nach der Veröffentlichung deiner WordPress Website

Diese 2 Punkte solltest du direkt nachdem du deine WordPress Website veröffentlicht hast noch erledigen:

1. Funktioniert der Cookie-Banner auf deiner Website?

Um den Cookie-Banner zu testen, melde dich von deiner Website ab oder öffne deine Website in einem anderen Browser. Lösche alle Cookies, die deine Website in deinem Browser gespeichert hat.

Wenn du nicht weißt, wie du das machst, dann gib in deine Suchmaschine zum Beispiel folgende Anfrage ein:

“[Name deiner Suchmaschine] Cookies einer Website löschen”

Lösche die Cookies nach der Anleitung und rufe dann deine Website neu auf. Jetzt sollte der Cookie-Banner deiner Website angezeigt werden. Falls nicht, solltest du prüfen, ob dein Cookie-Banner aktiviert und richtig eingerichtet ist.

Im Optimalfall testest du jetzt auch noch, ob die Cookies beim Klicken auf den Button “Ablehnen” auch wirklich nicht gesetzt werden. Diesen Vorgang zu beschreiben würde den Rahmen dieses Beitrags endgültig sprengen. Vielleicht schreibe ich dazu bald einen eigenen Beitrag. Bis dahin schreib mir gerne eine E-Mail und ich checke das kurz für dich.

2. Lädt deine Website noch Google Fonts?

Um das zu testen, kannst du den Google Fonts Scanner von eRecht24 verwenden. Hier gibst du einfach die Domain deiner Website ein und klickst auf „Jetzt Website prüfen“.

Teste auch die Website-Adressen von einzelnen Unterseiten, auf denen du ein Kontaktformular, eine Newsletter-Anmeldung oder eine andere spezielle Funktion integriert hast. Denn manchmal verstecken sich darin Google-Fonts über die Daten an Google übertragen werden.

Falls auf deiner Website Google-Fonts geladen werden, empfehle ich dir, das Plugin OMGF zu installieren und einzurichten.

Nach der Veröffentlichung deiner WordPress Website

Diese 3 Punkte solltest du noch erledigen, nachdem du deine Website veröffentlicht hast. Das muss jetzt nicht unbedingt direkt nach der Veröffentlichung sein, aber ich empfehle dir, diese Aufgaben nicht zu lange aufzuschieben, damit sie nicht auch noch in 3 Monaten auf deiner To-Do-Liste stehen.

1. Richte die Google Search Console und die Bing Webmaster Tools ein.

Diese beiden Tools helfen dir, herauszufinden, wie oft und über welche Suchbegriffe deine Website in Suchmaschinen angezeigt und aufgerufen wird.

Eine Schritt-für-Schritt-Anleitung dazu folgt in einem späteren Blogbeitrag. Melde dich gerne zum Newsletter an, um sie nicht zu verpassen.

2. Teste die Geschwindigkeit deiner Website.

Dazu empfehle ich dir das kostenlose Tool PageSpeed Insights. Öffne den Link in deinem Browser, gib in die Leiste ganz oben die Adresse zu deiner Website ein und klicke auf „Analysieren“.

Nach ein paar Minuten bekommst du das Ergebnis.

Unter der Zeile, in der du deine Website-Adresse eingefügt hast, kannst du zwischen Desktop & Mobil wechseln.

Auswertung der Ergebnisse:

Für den Desktop sind Ergebnisse über 80 (sehr) gut. Zwischen einem Wert von 60 und 80 solltest, du deine Website bei Gelegenheit besser optimieren. Bei einem Ergebnis unter 60 empfehle ich dir, dich unbedingt um die Ladezeit deiner Website zu kümmern.

Für Mobilgeräte hast du bereits mit einem Wert von über 70 ein gutes Ergebnis. Bei einem Ergebnis zwischen 50 und 70 solltest du bei Gelegenheit Anpassungen vornehmen. Und unter 50 solltest du unbedingt etwas an deiner Website verändern.

Wenn deine Ladezeit sehr langsam ist, liegt das häufig daran, dass deine Bilder zu groß sind. In diesem Beitrag zeige ich dir, wie du deine Bilder in 4 Schritten für deine Website optimieren kannst.

3. Teile deine Website.

Egal, ob auf Social Media, in deinem Newsletter, in Gastbeiträgen, … Verlinke und teile deine Website oder eine spezielle Unterseite, damit sich die Menschen über dich und dein Angebot informieren können.

Und überprüfe auch, ob deine Website in deinen Social Media-Profilen richtig verlinkt ist.

Extra-Tipp: Richte ein datenschutzkonformes Analyse-Tool ein.

So kannst du die Besucher-Zahlen auf deiner Website analysieren. Das bekannteste und umfangreichste Tool dafür ist Google Analytics. Trotzdem nutze ich es nicht, weil es die Daten meiner Besucher*innen an Google übertragen würde. Und das will ich nicht.

Eine einfach einzurichtende und DSGVO-konforme Alternative zu Google Analytics ist das Plugin Independent Analytics. Ich nutze es seit kurzer Zeit auf mehreren Websites und bin begeistert von dem Umfang.

In diesem Video stelle ich dir das Plugin vor und zeige dir die einfache Einrichtung:

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

Wenn du dennoch Google Analytics benutzen willst, dann achte unbedingt darauf, dass du es datenschutzkonform einrichtest. Nämlich so, dass Besucher*innen die Möglichkeit haben, das Tracking abzulehnen, damit keine Daten von ihnen an Google gesendet werden.

Checkliste zum Kopieren

Hier bekommst du von mir eine übersichtliche Checkliste zum Kopieren, damit du keinen wichtigen Schritt vor, bei oder nach der Veröffentlichung deiner Website vergisst.

Eine gute Möglichkeit, die Aufgaben zu erledigen, ist mein Website-CoWorking, das alle 2 Wochen stattfindet. Hier findest du alle Termine.

Fazit:

Wenn du deine Website mit dieser Checkliste veröffentlichst, hast du das Fundament für einen guten ersten Eindruck und nachhaltige Sichtbarkeit im Internet gelegt.

Nach der Veröffentlichung solltest du deine Website regelmäßig sichern und aktualisieren. Und die Zahlen der Google Search Console und deines Analyse-Tools auswerten. Ich habe mir das zur monatlichen Routine gemacht. Jeden 4. Sonntag im Monat sichere, aktualisiere und werte ich meine Website aus.

Möchtest du deine Website von einer Website-Spezialistin checken lassen? Dann sieh dir meinen Website-Check an. Darin prüfe ich deine gesamte Website und gebe dir konkrete Tipps zur Optimierung.

Mögliche Fragen zum Thema »WordPress Website veröffentlichen«

Hier habe ich Antworten auf Fragen, die du vielleicht noch zur Veröffentlichung deiner Website hast.

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.

Ich kann mich gut daran erinnern, als ich 2020 vor der Entscheidung stand, mit welchem Pagebuilder ich meinen Online Shop erstellen soll. Tagelang habe ich mich durch Blogbeiträge geklickt und auf YouTube Videos angesehen, in denen verschiedene Baukasten-Systeme miteinander verglichen werden.

In der engeren Auswahl standen am Ende Elementor und Divi. Wie du vielleicht erraten kannst, habe ich mich für Elementor entschieden. Und diese Entscheidung kein einziges Mal bereut.

In diesem Beitrag zeige ich dir, was Elementor bereits in der kostenlosen Version kann. Und helfe dir herauszufinden, ob für dich die kostenlose Version ausreicht, oder du besser in die Pro-Version investieren solltest.

Was ist Elementor?

Elementor ist ein sogenannter Pagebuilder, oder auch Baukasten-System. Er ermöglicht es dir, deine Website ansprechend und funktional zu gestalten, ohne Programmierkenntnisse dafür zu benötigen.

Die einzelnen Elemente, wie Überschriften, Text, Buttons, Bilder und viele mehr, ziehst du einfach per Drag & Drop an die gewünschte Stelle. Alle deine Änderungen kannst du direkt im Editor sehen und zwischen Desktop-, Tablet- und Mobil-Ansicht wechseln und diese jeweils einzeln anpassen.

Seine umfangreichen Funktionen und einfache Bedienbarkeit machen Elementor zu einem der beliebtesten Pagebuilder für WordPress. Er wird auf über 17 Millionen Websites verwendet.

Die Unterschiede – Elementor Free vs. Pro (Essential/Advanced)

Wenn du Elementor bereits installiert und ausprobiert hast, ist dir sicher aufgefallen, dass du in der kostenlosen Version nicht alle Funktionen nutzen kannst. Zum Beispiel sind viele der Widgets mit einem Schloss-Symbol gekennzeichnet und können nicht verwendet werden.

Auch ohne diese Funktionen bietet dir die kostenlose Version von Elementor alle Möglichkeiten, eine ansprechende und funktionierende Website zu gestalten. Im nächsten Abschnitt erfährst du mehr zu den Funktionen der kostenlosen und der beiden kostenpflichtigen Versionen von Elementor.

Die Funktionen in der kostenlosen Version

» 32 + 18 Widgets zur Gestaltung
Zur Gestaltung deiner Website nutzt du bei Elementor sogenannte Widgets. Diese kannst du nach deinen Wünschen anpassen. In der kostenlosen Version kannst du diese 32 Widgets von Elementor verwenden:

Außerdem kannst du 18 weitere Widgets, die WordPress zur Verfügung stellt, auch in Elementor nutzen. Leider lassen sich diese nicht so flexibel anpassen, wie die Widgets von Elementor. Also, wenn möglich, nutze besser die Widgets, die Elementor dir zur Verfügung stellt. Die Widgets von WordPress erkennst du ganz leicht an dem WordPress-Logo.

» globale Farben & Schriften
Du kannst beliebig viele Farben & Schriften für einen schnellen Zugriff festlegen. Und wenn notwendig, später mit wenigen Klicks Anpassungen vornehmen, die sich auf alle Elemente auswirken.

» Templates & Vorlagen abspeichern
Es ist möglich, ganze Seiten oder einzelne Abschnitte als Template abzuspeichern und diese auf anderen Unterseiten oder sogar Websites zu importieren.

» globale Widgets
Überschriften, Buttons und andere Elemente kannst du beliebig gestalten. Damit deine Website einheitlich bleibt und du dir Zeit ersparst, kannst du diese Anpassungen als Standard definieren.

» Animationen
Du kannst Animationen für einzelne Widgets oder ganze Abschnitte einrichten und so zum Beispiel ein einzelnes Bild von einer Seite einfliegen lassen oder einen ganzen Abschnitt mit kurzer Verzögerung einblenden lassen.

» Mobilversion unabhängig bearbeiten
Einer der meiner Meinung nach größten Pluspunkte von Elementor ist der, dass du Desktop-, Tablet- und Mobilversion unabhängig voneinander anpassen kannst. Zum Beispiel lassen sich einzelne Elemente in einer Version ausblenden, die Schriftgröße anpassen oder sogar die Reihenfolge verändern.

Mit der kostenlosen Version von Elementor bekommst du einen guten Einblick in die Benutzeroberfläche und die Funktionen von Elementor. So kannst du herausfinden, ob dir der Pagebuilder zusagt.

Die zusätzlichen Funktionen von Elementor Pro Essential

» 52 weitere Widgets zur Gestaltung
Mit Elementor Pro Essential kannst du 52 weitere Widgets zur Gestaltung deiner Website verwenden, also insgesamt mehr als 80 Elemente. Besonders nützlich finde ich diese:

• Formular-Widget um Kontaktformulare zu erstellen
• Reviews- oder Empfehlungs-Karussell-Widget um Feedback deiner Kund*innen zu zeigen
• Mega Menü um eine umfangreiche Menü-Auswahl einzurichten

Und, wenn du einen Blog hast, dann auch noch diese hier:

• Beiträge-Widget um auf deiner Startseite deine neuesten Blogbeiträge anzuzeigen
• Inhaltsverzeichnis-Widget um in deinen Blogbeiträgen ein Inhaltsverzeichnis zu integrieren
• Suchformular-Widget um eine Suchmöglichkeit für deinen Blog einzurichten

Hier ist die vollständige Übersicht über die zusätzlichen Widgets in Elementor Pro Essentials:

» Gestaltung von Header & Footer
Mit dem in Elementor Pro Essential integrierten Theme-Builder und den zusätzlichen Widgets kannst du deinen Header & Footer ganz individuell gestalten. Der Header ist der Bereich auf deiner Website, der ganz oben ist und sich auf jeder Seite wiederholt, und der Footer wiederholt sich auf jeder Seite am unteren Ende.

Du kannst mit der Pro-Version auch mehrere Header- & Footer-Varianten gestalten und festlegen, auf welchen Seiten welche Variante angezeigt werden soll.

» Templates & Vorlagen für einzelne Abschnitte und ganze Unterseiten
In der Pro-Version erhältst du Zugriff auf zahlreiche Vorlagen, die du für die Gestaltung deiner Website verwenden kannst.

» Blog individuell gestalten
Mit dem Theme-Builder und den zusätzlichen Widgets kannst du das Design für Beitrags-, Archiv- und Suchergebnis-Seiten für deinen Blog komplett individuell einrichten. In meiner Blog-Reise zeige ich dir Schritt für Schritt, wie du deinen Blog mit Elementor selbst erstellst.

Keine Sorge, du musst dich nicht bei jedem neuen Blogbeitrag um die Gestaltung kümmern, sondern kannst einfach drauflosschreiben. Das Beitrags-Bild, die Überschrift, der Text und das Beitrags-Bild werden dann automatisch in die Vorlage, die du mit dem Theme-Builder erstellt hast, eingebettet.

» Support
Bei Fragen kannst du dich 24/7 an den Support von Elementor wenden oder du buchst dir einfach 90 Minuten Website-Hilfe, in der ich dir bei deinen Website-Problemen helfe und du Antworten auf deine Fragen bekommst.

Die zusätzlichen Funktionen von Elementor Pro Advanced

Elementor Pro Essential ist die abgespeckte Pro-Version, der einige Funktionen fehlen. Mit Elementor Pro Advanced bekommst du Zugriff auf wirklich alle Funktionen, die Elementor zu bieten hat.

» 29 weitere Widgets zur Gestaltung
Mit Elementor Pro Advanced bekommst du noch 29 weitere Widgets für deine Website.

Hier ist die vollständige Übersicht über die zusätzlichen Widgets in Elementor Pro Advanced:

» Popups erstellen
Eine wichtige Funktion, die Elementor Pro Essential fehlt, sind die Popups. Du kannst mit Elementor Pro Popups erstellen und für diese alle möglichen Einstellungen vornehmen. Zum Beispiel festlegen, auf welchen Unterseiten sie erscheinen bzw. nicht erscheinen sollen, unter welchen Umständen sie eingeblendet werden sollen (z.B. wenn man bis zu einem bestimmten Punkt gescrollt hat) oder unter welchen Bedingungen sie nicht eingeblendet werden sollen.

» Custom Code & CSS
Füge deinen Seiten und Elementen eigenen Code hinzu, um das Design deiner Website noch individueller anzupassen.

» Online Shop gestalten
Wenn du WooCommerce (ein beliebtes Plugin, um mit WordPress einen Online Shop zu betreiben) installiert hast, bekommst du mit Elementor Pro Advanced zusätzliche Widgets. Gemeinsam mit dem Theme-Builder kannst du damit das Design für deine Shop- und Produkt-Seiten nach deinen Wünschen gestalten.

Wann genügt die kostenlose Version und wann sollte ich auf Elementor Pro upgraden?

Die kostenlose Version von Elementor ist keinesfalls nur ein Einblick in die Funktionen, sondern kann unter Umständen sogar ausreichen, um deine Website vollständig aufzubauen.

Wann reicht die kostenlose Version aus?

» Dir ist das Design nicht ganz so wichtig.
Insbesondere das Design von Header, Footer & Blog.

Du kannst mit der kostenlosen Version wirklich viel gestalten. Allerdings hast du keinen vollen Zugriff auf alle Widgets, die Elementor Pro bietet. Zum Beispiel hast du keine Möglichkeit, einen Slider, eine animierte Überschrift oder ein Empfehlungs-Karussell zu erstellen.

Außerdem kannst du in der kostenlosen Version deinen Header und Footer – also die Bereiche ganz oben und ganz unten auf deiner Website – nicht komplett individuell gestalten. Du bist also auf den Header- und Footer-Builder von deinem Theme angewiesen. Meistens sind die Design-Möglichkeiten dort beschränkt. Vor allem die, für die Mobilversion.

Auch, wenn du einen Blog einrichtest, bist du ohne Elementor Pro von den Design-Einstellungen deines Themes abhängig.

» Du bist bereit, zusätzliche Plugins zu installieren und nimmst dafür eine eventuell längere Ladezeit deiner Website in Kauf.

Da du keine Möglichkeit hast, Slider, Popups und Kontaktformulare zu erstellen, brauchst du zusätzliche Plugins, wenn du diese Funktionen nutzen möchtest. Die meisten Plugins verlangsamen deine Website, weil sie für deine Besucher*innen geladen werden müssen.

Warum solltest du auf Elementor Pro upgraden, obwohl die kostenlose Version schon so viel beinhaltet?

» Du willst das Design deiner Website individuell & flexibel anpassen.
Mit Elementor Pro kannst du nicht nur deine Unterseiten, sondern auch

• Header- & Footerbereich (Elementor Pro Essential),
• Beitrags- & Kategorieseiten für deine Blogbeiträge,
• Shop-Übersichts- & Produkt-Seiten,
• Popups
• 404-Fehler-Seiten (die Seite, die angezeigt wird, wenn ein Link fehlerhaft ist)

individuell anpassen.

» Du willst von den zusätzlichen Widgets profitieren.
Du brauchst für das Design deiner Website keine weiteren Plugins zu installieren und verkürzt so die Ladezeit deiner Website. Die Möglichkeit, Popups, Kontaktformulare, Slider, Paypal-Buttons, animierte Überschriften, … zu erstellen, ist bereits inkludiert. Schau dir hier nochmal alle zusätzlichen Funktionen von Elementor Pro an.

Was kostet Elementor Pro?

Elementor Pro kostet für eine Website 60 bzw. 84 €. Das finde ich einen fairen Preis für die Funktionen, die du erhältst. Hier ist die vollständige Preis-Tabelle (Stand: Dezember 2025), falls du mehrere Websites erstellen willst:

Hier kannst du die aktuellen Preise von Elementor Pro* aufrufen.

Wenn du dir nicht sicher bist, starte einfach mit der kostenlosen Version. Wenn du siehst, dass du die zusätzlichen Funktionen benötigst, kannst du später noch immer zu Elementor Pro wechseln.

Elementor Pro kündigen: Ist meine Website dann weg?

Aktuell ist es so, dass deine Website funktionsfähig bleibt, auch, wenn du Elementor Pro kündigst und deine Lizenz nicht verlängerst. Du kannst sie auch weiterhin bearbeiten. Neue Elemente aus der Pro-Version kannst du natürlich nicht hinzufügen.

Allerdings erhältst du ohne aktive Lizenz keine Updates zu Elementor Pro. Diese sind wichtig, um eventuelle Sicherheitslücken zu beheben.

Es ist also möglich, Elementor Pro ohne aktive Lizenz zu nutzen. Meine Empfehlung ist aber, dass du die 60 bzw. 84 € jährlich in deine Website investierst und so auf der sicheren Seite bist.

Meine Erfahrungen mit Elementor & Elementor Pro

Ich habe bereits viele Websites mit Elementor Pro-Lizenz erstellt, aber auch welche ohne. Beides ist möglich. Mit der Pro-Version macht es mir persönlich mehr Spaß, weil es noch viel mehr Möglichkeiten gibt, das Design anzupassen.

Sobald du einen Blog oder Online Shop erstellen willst, solltest du auf keinen Fall auf die Pro-Version verzichten. Sie bietet dir viel mehr Möglichkeiten und erleichtert dir den Aufbau enorm. Ich würde dir zur Advanced-Variante raten, weil du damit auch unkompliziert Popups nutzen kannst.

Als Webdesignerin mag ich auch die Kommunikation von Elementor. Ich werde regelmäßig über Neuerungen auf dem Laufenden gehalten und habe die Möglichkeit, eigene Vorschläge zu machen. Das Team hinter Elementor ist wirklich bemüht, diese Ideen aus der Community umzusetzen.

Die Unterschiede von Elementor zu Elementor Pro (Essential / Advanced)

Kurz zusammengefasst:

Meiner Meinung nach ist der beste Start mit Elementor, dir die kostenlose Version einfach auf deiner WordPress Website zu installieren. Um die Grundlagen zu erlernen sieh dir gerne meine Elementor-Anleitung an.

Kurzanleitung – Elementor in WordPress installieren:

Über den Menüpunkt „Plugins“ – „Installieren“ kannst du im Suchfeld rechts oben nach „Elementor“ suchen.

Das Elementor-Plugin wird dir relativ weit oben angezeigt. Halte einfach nach dem weinrot hinterlegten „E“ Ausschau und dem Titel „Elementor Webseiten-Baukasten“.

Installiere und aktiviere das Plugin. Erstelle eine neue Unterseite und probiere die Funktionen von Elementor einfach mal aus.

Kurzanleitung – Elementor Pro in WordPress installieren:

Wenn du dich für Elementor Pro entschieden hast, kannst du das Plugin über deinen Elementor-Account downloaden und in deinem WordPress-Dashboard hochladen.

Wie genau das funktioniert, zeige ich dir in einer kurzen Video-Anleitung.

Sobald du dich für Elementor oder Elementor Pro entschieden hast, sieh dir unbedingt diese Beiträge an:

» Elementor-Anleitung für Anfänger*innen: Grundlagen lernen

» 13 Elementor Tipps und Tricks, die dir täglich Zeit sparen

Wenn du Hilfe brauchst oder Fragen hast, komm gerne für 0 € ins Website-CoWorking. Dort kannst du Elementor ausprobieren und mich direkt fragen, wenn du Hilfe brauchst.