Bedienung von Elementor

Zur Videoanleitung

Elementor ist ein Pagebuilder, der dafür sorgt, dass das, was ihr an der Seite im Backend bearbeitet, auch sofort für euch sichtbar ist. Es handelt sich also um einen sogenannten What you see is what you get-Editor.

Elementor-Lizenz

Elementor gibt es in der kostenlosen Variante und der Pro-Variante. Regulär erhaltet ihr im Regiosystem bereit die Pro-Variante!

Aktivierung der Lizenz: Um zu überprüfen, ob ihr die entsprechende Lizenz (aktiviert) habt, navigiert vom Dashboard aus in der linken Menüleiste zu Elementor und dort zu Lizenz.

Bedienung von Elementor

Navigation zu Elementor: Die Navigation zwischen dem Frontend und Backend funktioniert in der Regel über die URL, also den Namen der Seite. Sofern ihr in WordPress eingeloggt seid, könnt ihr über die URL zu der Seite eurer Wahl navigieren. In der Kopfzeile stellt WordPress euch dann einige Optionen zur Verfügung: hier könnt ihr auf Mit Elementor bearbeiten klicken. Dieser Button ist in der Regel bei normalen Seiten klickbar. Es gibt aber auch dynamische Seiten, diese nennen sich Templates, die sich nicht einfach mit Elementor bearbeiten lassen. Bei einigen dynamischen Seiten lassen sich die statischen Teile des Designs dennoch ändern. Dazu könnt ihr in der Kopfzeile mit der Maus über Mit Elementor bearbeiten fahren und dort im Untermenü Archiv auswählen. Das geht z.B. bei der Beschlusssammlung oder auch bei der Downloadübersicht.

Crashkurs zu Dynamischen Inhaltstypen: Dynamische Inhaltstypen sind die vorgefertigten Seitentypen, die ihr auch im Backend findet: Beschlüsse, Personen, Termine, Downloads etc. Diese gibt es in 3 Formen:

· Single Post Type / Seite: Das ist das konkrete Objekt, die konkrete einzelne Seite inkl. des Inhalts. Also insbesondere alle Daten, die ihr z.B. bei einem Termin eintragen könnt, wie Startdatum, Enddatum, Teilnahmelink etc.

· Kachel / Listing: Das ist eine Kurzzusammenfassung einer Seite, also z.B. eines Termins, der als Objekt in einer Liste oder Übersicht dient, z.B. in der Terminübersicht.

· Archivseite: Die Archivseite ist die Übersichtsseite über alle Seiten von diesem Inhaltstyp. Diese findet ihr dann z.B. als Terminübersicht oder als Beschlusssammlung.

D.h. insbesondere, dass sich sowohl die Archivseite als auch die Kacheln die Inhalte der einzelnen Seiten/Single Posts dynamisch und automatisch ziehen. Daran könnt und solltet ihr nichts ändern.

Die Single Posts lassen sich individuell ganz regulär über Elementor bearbeiten und gestalten. Die dynamischen Inhalte müssen über den WordPress-Editor eingegeben werden. Soll die Vorlage für den Single Post geändert werden, also bspw. ein Ansprechpartner unter ALLEN Beschlüssen und nicht nur dem konkret ausgewählten erscheinen, so könnt ihr dies tun, indem ihr mit der Maus über Mit Elementor bearbeiten fahrt und dort im Untermenü Single Post auswählt.

Die Archivseiten lassen sich nicht vollständig über Elementor bearbeiten. Die statischen Inhalte auf den Archivseiten lassen sich aber dennoch anpassen, z.B. um Ansprechpartner unter der Übersichtsseite hinzuzufügen. Dazu könnt ihr in der Kopfzeile mit der Maus über Mit Elementor bearbeiten fahren und dort im Untermenü Archiv auswählen.

Bearbeitung mit Elementor: Habt ihr einmal eine Inhaltsseite mit Elementor geöffnet, funktioniert die Bearbeitung wie folgt:

· Jede Seite in Elementor ist in Abschnitte / Zeilen aufgeteilt. Jede Zeile ist in Spalten aufgeteilt. In diesen Spalten befinden sich dann Widgets (z.B. Text oder ein Slider oder auch ein Bild).

· Der Navigator (unten links im Menü aufrufbar) zeigt euch die Abschnittstruktur an und lässt euch einfach durch diese navigieren.

· Am unteren Ende der Seite lassen sich Abschnitte und dann im Anschluss Spalten und Widgets (in den Spalten) hinzufügen.

Header und Footer: Den Header und Footer könnt ihr im Backend unter Templates erreichen und bearbeiten, oder indem ihr auf eine Seite navigiert, mit der Maus über Mit Elementor bearbeiten fahrt und dort im Untermenü Header oder Footer auswählt. Die Änderungen, die ihr tätigt, werden entsprechend auf ALLEN Seiten geändert.

Responsivität: Wenn ihr im Bearbeitungsmodus von Elementor seid, könnt ihr in der Kopfzeile zwischen drei Icons wählen. Diese zeigen euch die Website auf 3 Geräten (PC, Tablet, Mobile) an. Ihr solltet diese Funktion nutzen, um zu prüfen, dass eure Seite oder euer Template auf allen Geräten ordentlich aussieht. Die Abstände müssen deshalb auch für alle 3 Gerätklassen individuell eingestellt werden. Das geht im linken Menü unter Erweitert. Wir benutzen für einen responsiven Modus ausschließlich die Größenordnung Rem (nicht Pixel o.Ä.), um Abstände dynamisch einzustellen. Die Standardabstände für die 3 Geräte findet ihr z.B. anhand der Musterseite.

Grob lässt sich festhalten, dass der Innenabstand nach oben und nach unten nach Gerät wie folgt ist:

  • Desktop: 6 REM

  • Tablet: 4 REM , nach links rechts 2 REM

  • Mobile: 2 REM, nach links rechts 1 REM

Last updated