# Elementor Anleitung

# Seiten in Elementor bearbeiten

<table border="1" id="bkmrk-im-admin-backend-in-" style="border-collapse: collapse; width: 100%; height: 3809.03px; border-width: 0px; border-style: none;"><colgroup><col style="width: 50.0618%;"></col><col style="width: 50.0618%;"></col></colgroup><tbody><tr style="height: 81.7812px;"><td colspan="2" style="height: 81.7812px; border-width: 0px;"><p class="callout info">Es gibt eine schnellere Möglichkeit, eine bestimmte Seite zu bearbeiten auf der man sich gerade befindet sofern man eingeloggt ist. Siehe Bereich "[Aus dem Frontend heraus](#bkmrk-aus-dem-frontend-her)".</p>

</td></tr><tr style="height: 64.8281px;"><td colspan="2" style="height: 64.8281px; border-width: 0px;">##### Aus dem Backend heraus

</td></tr><tr style="height: 140.391px;"><td style="height: 140.391px; border-width: 0px;">Im Admin Backend in der linken Seitenleiste auf "Seiten" klicken oder mit dem Mauszeiger darüber fahren und im ausgeklappten Untermenü auf "Alle Seiten" klicken.</td><td class="align-right" style="height: 140.391px; border-width: 0px;">[![admin_menue_01.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/admin-menue-01.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/admin-menue-01.png)</td></tr><tr style="height: 29.7969px;"><td colspan="2" style="height: 29.7969px; border-width: 0px;">Es öffnet sich eine Übersicht aller Seiten.</td></tr><tr style="height: 248.734px;"><td colspan="2" style="height: 248.734px; border-width: 0px;">[![admin_seiten_01.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/admin-seiten-01.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/admin-seiten-01.png)</td></tr><tr style="height: 193.734px;"><td style="height: 193.734px; border-width: 0px;"><p class="callout info">Über die "Seiten durchsuchen" Suchfunktion am oberen rechten Bereich können Seiten schnell gefunden werden.</p>

Die gewünschte Seite heraussuchen, mit dem Mauszeiger darüber fahren und den Punkt "Mit Elementor bearbeiten" klicken.

</td><td class="align-right" style="height: 193.734px; border-width: 0px;">[![admin_seiten_02.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/admin-seiten-02.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/admin-seiten-02.png)</td></tr><tr style="height: 64.8281px;"><td colspan="2" style="height: 64.8281px; border-width: 0px;">##### Aus dem Frontend heraus

</td></tr><tr style="height: 188.391px;"><td style="height: 188.391px; border-width: 0px;">Nach dem Einloggen ins Admin Backend im Browser auf der Schumacher Website ([https://schumacher-alt.de](https://schumacher-alt.de)) zur zu bearbeitenden Seite wechseln und in der Leiste am oberen Bildschirmrand "Mit Elementor bearbeiten" klicken.

</td><td style="height: 188.391px; border-width: 0px;">[![website_adminbar_01.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/website-adminbar-01.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/website-adminbar-01.png)

</td></tr><tr style="height: 104.172px;"><td colspan="2" style="height: 104.172px; border-width: 0px;">Es öffnet sich eine Ansicht zum Bearbeiten der Seite in Elementor.

<p class="callout info">Elementor ist ein Website-Baukasten, der es u. a. einfach macht Vorlagen zu erstellen und diese wieder zu verwerten.</p>

</td></tr><tr style="height: 398.109px;"><td colspan="2" style="height: 398.109px; border-width: 0px;">[![elementor_01.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-01.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-01.png)</td></tr><tr style="height: 297.844px;"><td colspan="2" style="height: 297.844px; border-width: 0px;">##### Übersicht der Bereiche:

<table border="1" style="border-collapse: collapse; width: 100.126%; border: 1px solid #000000;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 1px; border-color: rgb(0, 0, 0);">**1: Seitenleiste**</td><td style="border-width: 1px; border-color: rgb(0, 0, 0);">In diesem Bereich sind die Bedienelemente und Einstellungen der Seite zu finden. Kontextbasiert, also ändert sich der Inhalt der Leiste je nachdem in welchem Modus man sich befindet oder welche Aktionen man ausführt.</td></tr><tr><td style="border-width: 1px; border-color: rgb(0, 0, 0);">**2. Seiten-Ansicht**</td><td style="border-width: 1px; border-color: rgb(0, 0, 0);">Eine interaktive Live-Ansicht der Seite. Hier können Elemente ausgewählt, hinzugefügt, entfernt oder verschoben werden.</td></tr><tr><td style="border-width: 1px; border-color: rgb(0, 0, 0);">**3. Navigator**</td><td style="border-width: 1px; border-color: rgb(0, 0, 0);">Eine hierarchiche Übersicht aller verwendeten Bausteine auf der Seite</td></tr></tbody></table>

---

</td></tr><tr style="height: 212.828px;"><td style="height: 212.828px; border-width: 0px;">Mit dem Mauszeiger in der Seiten-Ansicht das zu bearbeitende Element suchen und anklicken oder mit dem Mauszeiger darüber fahren und das Icon mit dem Stift "\[Element\] bearbeiten" klicken.

</td><td style="height: 212.828px; border-width: 0px;">[![elementor_02.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-02.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-02.png)

</td></tr><tr style="height: 80.1719px;"><td colspan="2" style="height: 80.1719px; border-width: 0px;">Text-Elemente können direkt in der Seiten-Ansicht bearbeitet werden (Abbildung links). Generell bearbeitet man Inhalte aber über die kontextbasierte Seitenleiste (Abbildung rechts).

</td></tr><tr style="height: 212.828px;"><td style="height: 212.828px; border-width: 0px;">[![elementor_03.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-03.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-03.png)</td><td style="height: 212.828px; border-width: 0px;">[![elementor_04.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-04.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-04.png)</td></tr><tr style="height: 64.8281px;"><td colspan="2" style="height: 64.8281px; border-width: 0px;">##### Abschnitte kopieren &amp; einfügen oder duplizieren

</td></tr><tr style="height: 193.734px;"><td style="height: 193.734px; border-width: 0px;">Wählt man über den Navigator (2) den Abschnitt aus, wird dieser in der Seiten-Ansicht umrahmt und es erscheint oberhalb davon ein Menü mit Icons (1).

<p class="callout info">Elementor baut Seiten hierarchisch auf. Das heißt es gibt meist ein übergeordnetes Abschnitt-Element, in dem sich weitere Dinge wie Text, Bild usw. befinden.</p>

</td><td style="height: 193.734px; border-width: 0px;">[![elementor_08.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-08.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-08.png)</td></tr><tr style="height: 168.922px;"><td style="height: 168.922px; border-width: 0px;">Anschließend kann man mit einem Rechtsklick entweder auf die Icons in der Seiten-Ansicht oder auf den Abschnitt im Navigator ein Kontextmenü aufrufen.

Dort hat man die Möglichkeit, den Abschnitt zu kopieren und an anderer Stelle einzufügen oder direkt zu duplizieren.

</td><td style="height: 168.922px; border-width: 0px;">[![elementor_09.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-09.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-09.png)</td></tr><tr style="height: 193.734px;"><td style="height: 193.734px; border-width: 0px;">Mit Drag &amp; Drop kann man die Position bzw. Reihenfolge des Abschnitts ändern. Dazu einfach mit der Maus den Abschnitt anklicken und gedrückt halten und nach unten oder oben ziehen.

<p class="callout info">Änderungen können jederzeit mit STRG+Z rückgängig und mit STRG-Y wiederhergestellt werden</p>

</td><td style="height: 193.734px; border-width: 0px;">[![elementor_10.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-10.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-10.png)</td></tr><tr style="height: 104.172px;"><td colspan="2" style="height: 104.172px; border-width: 0px;"><p class="callout warning">Weil das Design der Schumacher Website bei aufeinanderfolgenden Abschnitten die Hintergrundfarbe wechselt, macht es beim Duplizieren Sinn, einen Abschnitt zu duplizieren oder kopieren, der bereits die entsprechend andere Hintergrundfarbe besitzt</p>

</td></tr><tr style="height: 64.8281px;"><td colspan="2" style="height: 64.8281px; border-width: 0px;">##### Elemente bearbeiten

</td></tr><tr style="height: 406.391px;"><td colspan="2" style="height: 406.391px; border-width: 0px;">[![elementor_11.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-11.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-11.png)</td></tr><tr style="height: 80.1719px;"><td colspan="2" style="height: 80.1719px; border-width: 0px;">Beim Klicken auf ein Element ändert sich die linke Seitenleiste und stellt Einstellungen für das ausgewählte Element dar.

Je nach Element sind die Optionen dort unterschiedlich. Meist reichen Änderungen im Tab "Inhalt", um z. B. Bilder in einem Karussell auszutauschen oder Links von Buttons zu bearbeiten.

</td></tr><tr style="height: 64.8281px;"><td colspan="2" style="height: 64.8281px; border-width: 0px;">##### Änderungen speichern

</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px; border-width: 0px;">Über den Button "Aktualisieren" in der Seitenleiste können die Änderungen gespeichert und direkt veröffentlicht werden. Sobald das getan ist, sehen alle Besucher der Website die Änderungen auch.

Wenn Änderungen nur gespeichert, aber nicht veröffentlicht werden sollen, z. B. um später weitere Änderungen vorzunehmen, auf den Pfeil neben dem Button klicken und im erscheinenden Menü auf "Entwurf speichern" klicken.

</td><td style="height: 29.7969px; text-align: justify; border-width: 0px;">[![elementor_12.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-12.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-12.png)</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px; border-width: 0px;">Nicht veröffentlichte Seiten können jederzeit im Browser als Vorschau angesehen werden. Dazu auf das Augen-Symbol neben dem "Aktualisieren" Button klicken.

Nach kurzer Zeit öffnet sich in einem neuen Tab bzw. Fenster die Seite als Vorschau.

<p class="callout info">Bitte beachten, Popups zuzulassen, sonst öffnet sich die Vorschau nicht.</p>

</td><td style="height: 29.7969px; border-width: 0px;">[![elementor_13.png](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/scaled-1680-/elementor-13.png)](https://schumacher-docs.jaf-systems.de/uploads/images/gallery/2023-08/elementor-13.png)</td></tr></tbody></table>