Allgemeine Funktionsweise

Elementor

Für Layout und Inhalte wird der Pagebuilder „Elementor“ verwendet. Damit können simple, aber auch komplexe Layouts einfach erstellt werden.

Grundlagen:

Die Seite ist in Abschnitte, Spalten und Elemente unterteilt. 

  • Die Abschnitte befinden sich jeweils untereinander.
  • Abschnitte enthalten eine oder mehrere Spalten, die, nebeneinander angeordnet sind.
  • Jede Spalte kann eines oder mehrere Elemente enthalten, die untereinander angeordnet werden.

Diese Überschrift ist ein Element

Dieser Text auch.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Und dieses Bild auch!

Wichtig: Änderung für Webseiten ab ca. 2023

Bei neueren Webseiten werden die sogenannten „Container“ verwendet. Sie können sowohl als Abschnitt (oberste Ebene) als auch als Spalte (alles unter der obersten Ebene) verwendet werden.

Außerdem können „Container“ beliebig oft ineinander gepackt werden.

Damit lassen sich deutlich komplexere Layouts realisieren.

In den meisten Fällen reicht es aber auch bei Containern, bei der Erstellung eines neuen Abschnittes eine der Vorlagen auszuwählen.

Beispiel "Container"

Eine Seite mit Elementor bearbeiten:

Loggen Sie sich zunächst ein.

Rufen Sie dann eine bestehende Seite im Frontend auf und klicken Sie dann auf „Mit Elementor bearbeiten“, um den Editor zu öffnen.

Alternativ können Sie im Backend im Bereich „Seiten“ auf den passenden Link klicken.

Inhalte in Elementor bearbeiten:

Hier sehen Sie jetzt die Elemente in der gleichen Anordnung wie au der Frontend-Seite. Alles ist in Abschnitte, Spalten und Elemente unterteilt.

Um bspw. ein Textfeld zu bearbeiten, bewegen Sie Ihre Maus über das Textfeld und drücken Sie auf den blauen Stift.

Sie können den Text nun entweder direkt durch klicken und tippen an die gewünschte Stelle oder in in der linken Sidebar bearbeiten.

Mit dem blauen Stift können alle Elemente bearbeitet werden. Auch Bilder können so ausgetauscht werden.

Meistens reicht, um das Bearbeitungsfenster in der linken Sidebar zu öffnen, auch ein Klick direkt auf das Element. Mit dem Stift gehen Sie aber auf Nummer sicher, dass Sie das richtige Element ausgewählt haben.

Neue Inhalte erstellen:

Wenn Sie ein neues Bild oder ein neues Textelement einfügen wollen, können Sie das über die linke Sidebar tun.

Klicken Sie auf das Kachelsymbol und ziehen Sie dann mit der Maus das neue Element an die gewünschte Stelle.

Hier wurde ein leeres Bild erstellt. Sie können es anklicken und dann ein Bild hochladen, das an dieser Stelle dargestellt werden soll.

In der Mediathek finden Sie bereits hochgeladene Dateien. Alternativ können Sie eine neue Datei hochladen.

Bestehende Inhalte können mit einem Rechtsklick auf den Stift auch unkompliziert dupliziert werden.

Das ist sehr nützlich, wenn ein Element mitsamt seiner Eigenschaften wie Farben, Formatierung oder Bildinhalt 1:1 übernommen werden soll.

In diesem Menü können Elemente auch gelöscht werden.

Inhalte verschieben:

Elemente können jederzeit mit der Maus an eine andere Stelle gezogen werden, bspw. um sie umzuordnen.
 
Erstellen wir zunächst eine neue Spalte. Das geht über einen Rechtsklick auf das Spalten-Symbol.
Drücken Sie hier auf „Neue Spalte erstellen“ (Bzw. „Neuen Container einfügen“).

Sie können das Element nun am Stift anfassen und in die neue Spalte ziehen. Elemente können natürlich auch in Spalten, die sich in anderen Abschnitten befinden, verschoben werden.

Funktioniert das nicht auf Anhieb oder sollen mehrere Elemente bewegt werden?

Das geht gut mit dem „Navigator“, über den die Elemente in einer schematischen Übersicht dargestellt werden. 

In dieser Übersicht können die Elemente, Spalten und Abschnitte (oder Container) auch per Drag-and-Drop bewegt werden.

Die Seite abspeichern:

Damit die Änderungen auch für den Nutzer sichtbar werden, müssen Sie die Seite noch abspeichern.

Klicken Sie dazu auf den grünen Speichern-Button in der linken Sidebar.