Römisch-Katholische Kirche im Aargau » Tutorials » Tutorial: Elementor

Tutorial: Elementor

Wie funktioniert der Elementor?

Der Elementor ist ein sehr umfangreiches Layout-Tool für WordPress. Grundsätzlich funktioniert der Elementor nach folgendem Schema:

Die einzelnen Elemente (Titel, Bilder, Texte, Listen usw.) werden im rechten Bereich eingefügt und werden hier auch layoutmässig korrekt dargestellt.
Grundsätzlich kann man die Inhalte auch in diesem rechten Bereich bearbeiten aber wir raten davon ab, weil es eher umständlich ist, denn oft verliert man den «Fokus» auf das Element. Das heisst: Einfach ein Klick auf das gewünschte Element und in der linken Spalte erscheint ein kontextabhängiges Fenster.
Der Aufbau einer Seite besteht aus folgenden Elemente:
Container (Section) und Spalten: Mit einem Klick auf das «+» (Bereich «Drag widget here») wird zuerst die Struktur definiert. Es können mehrere Container auf der Seite erstellt werden, das heisst z.B. zuerst ein einspaltiger Container und darunter ein dreispaltiger Container.
Inhalte: In diese Container bzw. Spalten (mit einem «+» gekennzeichnet) werden dann die einzelnen Inhalte (Textboxen, Bilder, Listen usw.) eingefügt.
Hier gibt es in den meisten Fällen 3 Register:
Content: Hier werden die Inhalte (Texte, Bilder usw.) erfasst. Teilweise sind auch Konfigurationen möglich wie die Anzahl Spalten bei Galerien oder ob der Link eines Bildes eine Grossansicht oder einen Link auslösen soll). Grundsätzlich können ALLE Inhalte in diesem Register «Content» erfasst werden.
Style: Hier werden die Elemente designt. Dieses Register ist grundsätzlich nicht von Bedeutung, da hier die Darstellung verändert werden kann.
Advanced: Hier sind weitere Einstellungen zu finden, in erster Linie wichtig um die «Motion Effects» zu aktivieren.

Motion Effects

Mit den Motion Effects können tolle und moderne Effekte geschaffen werden wie das Einblenden von Textboxen und Flächen (z.B. von oben, unten, links, rechts usw.). Es sollte jedoch nicht übertrieben werden, gerade die Einblendungen von einer bestimmten Richtung wirken kontraproduktiv, wenn sie zu intensiv eingesetzt werden. Motion Effekte können sowohl auf Sections, Colums als auch einzelne Elemente wie Textboxen oder Bilder aktiviert werden. Um den Aufwand im Rahmen zu halten empfehlen wir in erster Linie den Einsatz auf einer Section.
-> Dieser Screenshot zeigt, wo und wie die Motion Effekte aktiviert werden

Weitere Tipps

Mit einem RECHTSKLICK auf ein Element im rechten Fenster öffnet ein Kontextmenü, hier kann man ein bestehendes Element einfach «duplizieren.
Alle Elemente im rechten Fenster kann man per «Drag & Drop» (LINKSKLICK auf Icon) von einem Container/Spalte in die andere ziehen. Mit dem Scrollrad der Maus kann man das erfasste Element (nicht loslassen) schneller nach oben/unten bewegen.
Bei einem z.B. zweispaltiger Container kann man die Breite der einzelnen Spalten frei definieren. Dazu klickt man auf das Spalten-Icon (oben links der jeweiligen Spalte), es öffnet sich in der linken Spalte nun ein Menü mit wiederum 3 Registern. Unter «Layout» findet man den Bereich «Column width %», hier kann in Prozent die Breite eingegeben werden. Bei zwei Spalten muss man nur eine Breite definieren (z.B. 70 für 70%), bei einem dreispaltigen Container kann man die Breite für zwei Spalten definieren und die dritte wird sich automatisch anpassen.

< Zurück zum Tutorial-Inhaltsverzeichnis