Der Pagebuilder Elementor für WordPress bietet eine schier unendliche Palette an Möglichkeiten, Ihre Website individuell zu gestalten. Wenn Sie Ihre Website von einer Webdesign-Agentur mit Elementor aufbauen lassen, dann haben Sie auch nach dem Livegang der Website die Möglichkeit, Ihre Website nach Belieben weiterzuentwickeln und zu verändern. Mit der Fülle an Möglichkeiten geht aber auch die Gefahr einher, dass das ursprünglich einheitliche Design zunehmend inkonsistenter wird. Mit den nachfolgenden Grundprinzipien machen Sie sich Anpassungen der Website leichter und stellen ein einheitliches Aussehen sicher.
Elementor-Seite zur Bearbeitung öffnen
Sobald Sie eine Seite mit dem Elementor erstellt oder bearbeitet haben, wird dies in der Listenansicht der Seiten oder Beiträge auch durch den Zusatz Elementor markiert. Diese Seiten sollten Sie nicht mehr mit dem WordPress-Editor bearbeiten, sondern nur noch mit dem Elementor-Editor. Ansonsten wird die Darstellung der Seite kaputtgehen und Sie verlieren die mit Elementor gemachten Einstellungen zur Seite.
Wenn Sie die zu bearbeitende Seite nicht im WordPress-Backend suchen möchten, dann können Sie den Elementor auch direkt über das Frontend starten.
Navigieren Sie dazu zur gewünschten Seite und wählen Sie in der schwarzen Werkzeugleiste Mit Elementor bearbeiten. Sobald Sie mit dem Cursor über dem Button sind, bietet Elementor meistens noch weitere Optionen:
Sie können über dieses Menü alle Bereiche/Elemente bearbeiten, die auf der aktuellen Unterseite von Elementor geladen werden. Dazu gehören unter anderem der Header und Footer. Wenn Sie direkt auf Mit Elementor bearbeiten klicken, bearbeiten Sie den Seiteninhalt der aktuellen Seite, was in den allermeisten Fällen gewünscht ist.
Vorsicht ist geboten, wenn Sie sich auf einer automatisch generierten Unterseite befinden. Auf diesen Seiten holt sich WordPress die Inhalte direkt aus dem Backend, wie dies beispielsweise bei einer Kategorie-Übersicht von Blogbeiträgen der Fall ist. Hier werden Sie feststellen, dass der Mit Elementor bearbeiten Button nun nicht mehr klickbar ist. Jetzt sollten Sie nicht einfach einen der Bereiche im Dropdown-Menü anklicken. Bearbeiten Sie beispielsweise die Kategorie-Seite, dann ändern sich die Inhalte aller Kategorie-Seiten im Frontend der Website.
Vorschau der neuen Seite
Sie können sich eine Vorschau der neuen Seiten anzeigen lassen, während Sie diese bearbeiten. Klicken Sie dazu einfach auf das Vorschau-Icon in der linken Werkzeugleiste, und Elementor öffnet die Vorschau in einem neuen Tab:
Vorhandenes nutzen
Seite kopieren
Wir empfehlen, möglichst viel auf Vorhandenes zu verwenden, anstatt Seiten komplett von Grund auf zu gestalten.
Falls es bereits eine Unterseite gibt, welche vom Aufbau und den verwendeten Gestaltungselementen der neuen Seite ungefähr entspricht, können Sie diese einfach im WordPress-Backend unter Seiten kopieren:
Vorsicht: Die Seite ist eine exakte Kopie und ist damit ebenfalls sofort öffentlich, falls Sie eine veröffentlichte Seite kopiert haben. Dies können Sie unter Bearbeiten wieder rückgängig machen und die Seite auf Entwurf umstellen.
Inhalte können sich in WordPress nicht nur in Seiten befinden, sondern beispielsweise auch in Beiträgen. Unterscheidet sich der Typ der Ausgangs- und Zielseite, dann ist eine einfache Kopie nicht möglich. In diesem Fall können Sie aber trotzdem den gesamten Elementor-Inhalt kopieren, was in diesem Beitrag beschrieben ist.
Elemente kopieren
Elementor bietet Ihnen in der linken Sidebar über den Element-Button die Möglichkeit, aus einer Vielzahl an Elementen zu wählen.
Wenn Sie ein Element aus dieser Liste in die Website einfügen, dann bedenken Sie, dass Sie das Element ohne weitere Voreinstellungen laden. In den meisten Fällen fehlen die notwendigen Einstellungen zur Gestaltung des Elements.
Stattdessen ist es meistens zielführender, ein bereits vorhandenes Element zu kopieren.
- Öffnen Sie das Frontend Ihrer Website in einem neuen Browsertab und navigieren Sie zu einer Unterseite, welche das gewünschte Element bereits enthält.
- Bearbeiten Sie die Seite mit Elementor. Wählen Sie das Element im Navigator aus und kopieren Sie dieses per Rechtsklick.
- Wechseln Sie zum Browsertab mit der neuen Seite und fügen Sie das Element wiederum per Rechtsklick an gewünschter Stelle ein.
Dadurch werden alle vordefinierten Stile übernommen und Sie müssen das Element nicht von Grund auf neu gestalten.
Meisten ist es am sinnvollsten, den übergeordneten Container zu kopieren. Container gruppieren Elemente.
- Überlegen Sie vor der Kopie, welche Elemente enthalten sein sollen.
- Meistens empfiehlt es sich, den umfassenden Container zu kopieren, welcher alle Unterelemente enthält.
- Sie finden den Container am einfachsten über das Navigator-Tool auf der rechten Seite. Klappen Sie alle Elemente ein, wodurch Sie alle Elemente oberster Ebene sehen. Per Rechtsklick können Sie den Container in die Zwischenablage kopieren.
Templates einfügen
Wir als Webdesign-Agentur stellen Ihnen eine Reihe gestalteter Elemente als Templates zur Verfügung. So können Sie die wichtigsten Bausteine, welche allesamt vorkonfiguriert sind, einfach auf Ihrer Seite einfügen.
- Öffnen Sie die gewünschte Unterseite mit dem Elementor
- Scrollen Sie ganz ans Ende Ihrer Seite
- Öffnen Sie über das Ordner-Icon rechts neben dem Plus-Icon die Templates und wechseln Sie zu
Meine Templates. - Wählen Sie beim gewünschten Template
Einfügen. - Nun können Sie die Inhalte im eingefügten Element nach Belieben ändern. Außerdem können Sie das Element per Drag-and-Drop verschieben (am einfachsten geht das, indem Sie den übergeordneten Container im Navigator verschieben).
Container anordnen & Abstände anpassen
Sie können die einzelnen Elemente einfach per Drag-and-drop verschieben. Am einfachsten funktioniert dies, wenn Sie den übergeordneten Container im Navigator packen und an die richtige Stelle verschieben.
Nach dem Verschieben stimmen oftmals die Abstände zwischen den einzelnen Containern/Sektionen nicht mehr. Mehr Informationen zum Korrigieren von Abständen finden Sie in diesem Beitrag.
Inhalte anpassen
Texte anpassen
Um einen Text in einem Element zu ändern, klicken Sie einfach in das Textfeld und Sie können den Text direkt anpassen. Ein Nachteil in dieser Ansicht ist, dass Textabschnitte nicht markiert werden können, beispielsweise um diesen zu verschieben. Während des Markierens wechselt Elementor in den Drag-and-drop-Modus.
Etwas komfortabler ist die Textbearbeitung über die Werkzeugleiste, welche sich links öffnet, sobald Sie in den gewünschten Textbereich klicken. Hier ist auch ein Markieren problemlos möglich.
Bei umfangreichen Texten können Sie den Texteditor auch im Vollbildmodus öffnen:
Texte aus anderen Editoren einfügen
Wenn Sie Texte in anderen Editoren vorbereiten, z. B. in Microsoft Word, dann können Sie diese nicht einfach via STRG + V in den Elementor-Editor einfügen. Ansonsten versucht Elementor, die Stile aus dem externen Editor zu übernehmen. Diese weichen in der Regel von den Website-Stilen ab und verhalten sich nicht responsiv. Deshalb sollten Sie Texte stattdessen mit STRG + UMSCHALT + V einfügen. Dies entfernt die Formatierung. Das Gleiche erreichen Sie, wenn Sie im Elementor-Editor per Rechtsklick das Kontextmenü des Browsers öffnen und dort Als unformatierten Text einfügen (oder eine browserabhängige, ähnliche Bezeichnung) wählen.
Bilder ersetzen
Wie bei den Texten können Sie Bilder tauschen, indem Sie direkt auf das Bild im Editor klicken und in der linken Werkzeugleiste Bild auswählen anklicken. Daraufhin öffnet sich die WordPress-Mediathek und Sie können das gewünschte Bild hochladen oder auswählen.
Davon abweichend sind Bilder gelegentlich als Hintergrundbilder von Containern eingefügt. Dies ist oft bei breiten Bannern und Bildkacheln der Fall. Wenn in der linken Werkzeugleiste also kein Bild vorhanden ist, dann prüfen Sie im Container den Reiter Stil > Hintergrund.
Bilder in Originalauflösung einbinden
Falls Ihre Bilder im Frontend der Website verschwommen erscheinen, Sie aber eine passende Auflösung hochgeladen haben, könnte es an den Einstellungen in Elementor liegen. Wählen Sie in dem Inhaltselement, in dem Sie das Bild eingefügt haben, immer die Einstellung Image resolution > Full.
Farben, Schriftarten und Schriftgrößen global hinterlegen
- Wenn Sie Farben, Schriftarten oder Schriftgrößen auf der gesamten Website ändern möchten, dann nutzen Sie dazu die globalen Einstellungen von Elementor.
- Falls Sie stattdessen die Änderung auf jeder einzelnen Seite separat durchführen, dann verlieren Sie die Möglichkeit, zukünftig globale Änderungen durchführen zu lassen. Überdies ist der Arbeitsaufwand wesentlich höher.
Animationen auf Ebene des Containers hinterlegen
Damit Sie die Übersicht über die hinterlegten Animationen behalten, empfiehlt es sich, diese auf Ebene des obersten Containers zu hinterlegen. Den obersten Container finden Sie im Navigator, wenn Sie alle Ebenen einklappen.
Eine bewährte Standard-Animation ist die Animation Fade In.
Selbstverständlich kann man auch im Container enthaltene Elemente separat animieren. Die Animation sollte dann aber einem bestimmten Zweck dienen.
