Elementor in Wordpress | Hamburg Webdesign

Elementor als Website Builder

Elementor ist ein freier Website Drag-and-Drop Builder. Das bedeutet, dass Elemente in dem Baukasten per Maus hin- und hergezogen und eingefügt werden. Das macht das Aufbauen von Websites einfach und nicht nur das: Es bringt sogar Spaß. Wir zeigen Ihnen die Grundlagen von Elementor, um die wesentlichen Grundlagen zu beherrschen und ein Gefühl dafür zu entwickeln, wie mit Elementor umgegangen wird.

Inhaltsverzeichnis

Elementor installieren und aktivieren
Seite erstellen und mit Elementor bearbeiten
Start – Reihe erstellen
Drag-and-Drop Funktion
Überschriften einfügen
Inhalte von Elementen bearbeiten
Style Attribute bearbeiten
Erweiterte Funktionen
Mengentexte einfügen
Inneren Abschnitt einfügen
Bilder einfügen
Zwischenspeichern
Videos aus verschiedenen Quellen einfügen
Icons einfügen
Buttons mit Links einfügen
Animationen einfügen
Nice to Know

1. Elementor installieren und aktivieren

Um Elementor zu installieren und anschließend zu aktivieren, muss man sich in WordPress anmelden. Nachdem das erfolgt ist, erscheint das typische WordPress-Dashboard. In der Seitenleiste links navigiert man bis zu „Plugins“ und klickt es an. Daraufhin kann auf der WordPress-Seite selbst oben „Installieren“ klicken oder in der Seiteleiste, da sich nach dem klick ein witeres Menü öffnet.

Nachdem der erste Schritt erfolgt ist, gelangt man zur Plugins-Cloud, in der man 100.00 Plugins installieren kann. Über den vorgeschlagenen Plugins befindet sich auf der rechten Seite ein Suchfeld. In diesem Suchfeld trägt man „Elementor“ ein, und nach kurzer Zeit erscheint das Plugin „Elementor Website Builder“. Anschließend klickt man rechts daneben auf „Herunterladen“ und nach einer kurzen Zeitspanne auf „Aktivieren“. Dies ist unbedingt notwendig, da man sonst das Plugin zwar runtergeladen hätte, aber nicht benutzen könnte. In unserem Beispiel ist es schon installiert, weshalb dort bereits „Jetzt Aktualisieren“ zu sehen ist

2. Eine Seite mit Elementor erstellen und bearbeiten

Nachdem Elementor installiert und aktiviert wurde, navigiert man auf der Seitenleiste auf „Seiten“ und klickt anschließend darauf. Wie bei der Plugins-Seite hat man nun zwei Optionen, eine Seite zu erstellen: Entweder man klickt weiter oben auf der Seite selbst auf „Erstellen“ oder in dem neu geöffneten Menü auf „Seite erstellen“.

Dann gelangt man im Dashboard auf die Seite, auf der man eine weitere Unterseite für seine Website erstellen kann. Nachdem man den Titel eingegeben hat, klickt man anschließend auf das blaue Feld „Mit Elementor bearbeiten“.

Wenn alles richtig befolgt wurde, gelangt man ins Dashboard von Elementor, das wie folgt aussieht:

3. Eine Reihe erstellen

Reihen (oder auch engl.: rows) sind der wesentliche Bestandteil von Elementor. Reihen unterteilen die einzelnen Sektionen und sind das Grundgerüst für alle Elemente. Klickt man auf das dunkelrote Plus+, erscheint anschließend ein kleines Fenster, mit dem sich die Auswahl der Spaltenanzahl festlegen lässt.

Man kann sich für eine jeweilige Spaltenanzahl entscheiden, nachträglich kann diese aber noch geändert werden. Maximal sind standardmäßig sechs zulässig. Mehr sind auch nicht empfehlenswert, denn je mehr Spalten vorhanden sind, desto kleiner fällt der jeweilige Inhalt aus. Sobald man sich für etwas entschieden hat, erscheint ein hellblau umrandeter Kasten, welcher die blanke Reihe darstellt. Indem befindet sich noch ein weiteres graues Plus+, mit dem nun die Elemente hinzugefügt werden können.

4. Die Drag-and-Drop, Allgemeine Funktion

Jetzt fügen wir unser erstes Element per Drag-and-drop hinzu, bedeutet ziehen und fallen lassen. Sobald man auf das graue Plus+ oder oben in der Seitenleiste auf die neun Quadrate geklickt hat, erscheinen in der Seitenleiste einige Elemente, dessen Funktion wir hier noch einmal erklären.

Wir können nun von den grundlegenden Elementen ein einzelnes zur Zeit auswählen. Das geschieht indem wir mit gedrückter Maustaste das Element bis zur Reihe ziehen und daraufhin die Maustaste loslassen.

Einige grundlegende Funktionen, die dem Workflow dienen:

Um Elemente auszuwählen, geht man mit der Maus über ein Element und macht einen Doppelklick auf das jeweilige Element/li>
Mit Rechtsklick >kopieren und >einfügen lassen sich Elemente jeweils von einem Abschnitt zu einem anderen Abschnitt kopieren
Elemente lassen sich auch mit Rechtsklick > duplizieren. Das Element erscheint dann dupliziert darunter
Mit der Tastenkombination STRG+Z können Sachen rückgängig gemacht werden

5. Eine Überschrift einfügen, Inhalt, Style und Erweitert Einstellungen anpassen

Überschriften eignen sich hervorragend, um die verschiedenen Sektionen zu unterteilen oder seinen Texten ein guten Lesefluss zu gewährleisten. Wie jedes Element in Elementor ziehen wir dieses nun per Drag-and-Drop in die Reihe.

Sobald dies getan ist, sehen nun weitere essenzielle Funktionen von Elementor. Diese lassen
sich in 3 verschiedene Sektoren unterteilen:

Inhalt, Style, Erweitert

Der Inhalt bietet grundlegend die Einstellungen der HTML Funktionen eines Elements. In dieser
lassen sich die Texte verfassen, Links beifügen, die HTML Struktur oder generell die Textstruktur
(HTML-Tag) anpassen und die Ausrichtung des Elements ändern (Linksbündig, zentriert,
rechtsbündig, Blocksatz). In unserem Fall haben wir nun die Überschrift „Elementor ist ganz
simpel“, einem HTML-Tag von H2 (Überschrift 2. Ordnung) mit einer zentrierten Ausrichtung.

Klickt man in der Seitenleiste auf Style, lassen sich die Optionen für die optischen Anpassungen
anzeigen und einstellen. Elementor pflegt zunächst immer den als Standard eingestellten Style
ein. Hier lassen sich Textfarbe, Aussehen der Schrift (Font) uvm. anpassen.

In der Kategorie Typografie lassen sich die Schriftfamilie, die Größe, die Dicke (Schriftschnitt)
uvm. anpassen

Abschließend gibt es noch die erweiterten Funktionen. Trotz vieler Einstellungsmöglichkeiten wird in der Regel nur eines benötigt: Margin und Padding.

Padding steht dabei für den Innenabstand eines Elements bis zum Rand.

Margin steht für den Außenabstand vom Rand aus zu einem anderen.

Beide Optionen lassen sich für oben, unten, rechts und links einstellen. Standardmäßig sind alle Werte mit einander verknüpft. Möchte man dies aufheben, klickt man auf die Klammer rechts von den Werten, sodass alle Werte auf null springen und anschließend individuell angepasst werden können.

6. Mengentexte einfügen

Der Texteditor in Elementor ist ein universelles Element zur Bearbeitung von Texten. Man kann mit diesem Tool Überschriften, Listen, Mengentexte, Bilder etc. einfügen. Am besten eignet sich das Element jedoch zum Einpflegen von großen Texten, da es für die Übersicht sinnvoller ist. Wenn man das Element reingezogen hat, verhält es sich identisch bezüglich der Einstellungen des Überschrift-Elements.

7. Innerer Abschnitt einfügen

Mit dem Element „Innerer Abschnitt“ lässt sich eine Spalte einer Reihe erneut in weitere Spalten aufteilen, sodass eine Spalte übergeordnet zu zwei Spalten steht. Dabei wird keine neue Reihe erstellt und die Unterseite somit nicht sinnlos überfüllt.

8. Bilder einfügen

Ästhetische Bilder dürfen auf einer Website nicht fehlen. Mit Elementor sind diese in kurzen und leichten Schritten eingepflegt. Sobald das Element in einer Spalte reingezogen wurde, erscheint folgendes Fenster:

Unter Inhalt wird zunächst eine Schablone angezeigt. Klickt man auf diese Schablone, gelangt man in ein Auswahlfenster von WordPress.

Klickt man in dem Fenster auf „Dateien hochladen“ und „Dateien auswählen“, wird man dazu aufgefordert, eine Bilddatei (.jpg, .png, .gif) hochzuladen. Wenn man sich das Suchen ersparen möchte, kann man die Datei, die man hochladen möchte, vom Desktop direkt in das Fenster reinziehen. Ist dies getan, klickt man anschließend unten rechts auf das blaue Feld „Medien einfügen“.

Es ist auch möglich, mehrere Bilder auf einmal hochzuladen.
Unter Mediathek findet man bereits alle hochgeladenen Bilder

Hat man diesen Schritt erledigt und die Bilder entsprechend platziert, kann es durchaus vorkommen, dass Bilder zu groß oder zu klein wirken. In dem Fenster „Style“ lassen sich die Bildgrößen nach Belieben einstellen. Im gezeigten Beispiel ist die Größe erstmal passend. Was jedoch auffallend ist, ist dass die Bilder unterschiedlich vertikal platziert sind, begründet durch die Grundeinstellung „Innerer Abschnitt“. Das lässt sich jedoch auch ganz leicht ändern.

Geht man mit der Maus über eine Spalte oder Reihe, wird der jeweilige Abschnitt blau umrandet (dies zeigt, welchen Abschnitt man ausgewählt hat). Klickt man dann mit Linksklick auf die sechs Quadrate, lassen sich die Optionen des Abschnitts anzeigen. Wählt man nun unter vertikaler Ausrichtung „Mitte“ an, so werden alle Elemente dieses Abschnitts vertikal zentriert.

9. Speichern / Zwischenspeichern

Speichern, auch zwischendurch, ist enorm wichtig! Ansonsten kann es sein, dass die ganze Mühe umsonst gewesen ist. Unten Links befindet sich der Button „Speichern“. Sobald man diesen anklickt hat und er sich anschließend grau färbt, wurde die Unterseite erfolgreich gespeichert.

10. Videos einfügen

Mit Elementor lassen sich auch Videos aus verschiedenen Quellen hochladen. Sei es ein Youtube-Video per Link oder ein selbst hochgeladenes Video, der Vorgang ist leicht und man benötigt keine weiteren Kenntnisse.

Sobald man das Element in einen Abschnitt reingezogen hat, öffnen sich die Einstellungsmöglichkeiten in der Seitenleiste. Dort kann man einen Youtube-Link, Vimeo-Link oder Dailymotion-Link einfügen. Man hat auch die Möglichkeit, „Selbstgehostet“ auszuwählen: Dann gilt dasselbe Prozedere wie beim Hochladen von Bildern. Unter Video Optionen ist es ebenso möglich, diverse Einstellungen vorzunehmen.

11. Icons einfügen

Mit Icons lassen sich Texte oder Überschriften aufwerten oder Informationen schneller vermitteln.

Nach dem Einfügen des Elementes in einen Abschnitt erfolgt ein ähnlicher Ablauf wie während des Hochladens von Bildern oder Videos. Während des Einstellens der Icons erscheint eine große Auswahl an Icons. Hierbei ist es einem möglich, eigene Icons hochzuladen. Dies geschieht jedoch mit Vektorgrafiken, da Icons idealerweise als Vektoren erstellt werden.

Falls ein Icon ausgewählt wurde (idealerweise als Vektor), lassen diese sich individuell groß gestalten, da diese nicht an Qualität verlieren.

Hat man vor, dasselbe Icon mehrfach zu platzieren, empfiehlt es sich vorerst ein Icon gestalterisch anzupassen und dieses dann zu kopieren und einzufügen.

Fährt man mit der Maus über ein Element, in diesem Fall ein Icon, klickt mit Rechtsklick und wählt anschließend „Kopieren“ aus, hat man das Element samt den optischen Eigenschaften kopiert. Nun kann das kopierte Icon dann ebenfalls mit Rechtsklick in einen anderen Abschnitt eingefügt werden.

12. Buttons einfügen

Buttons sind eine gute Möglichkeit, um Links auffällig darzustellen.

Hat man einen Button hinzugefügt, so kann man diesen unter „Style“ optisch anpassen. Wählt man den Punkt Inhalt, so lässt sich der Aufruf bzw. der Text des Buttons ändern. Unter Link lässt sich ein individueller Link platzieren: Dies kann eine externe Website oder eine Unterseite seiner eigenen Website sein. Möchte man eine andere Unterseite als die aktuelle verlinken, so nimmt man von der Webadresse (URL) alles was nach dem ersten Schrägstrich folgt, Schrägstrich eingeschlossen (siehe Grafik). Fertig ist der Button in Elementor!

13. Animationen in Elementor

Animationen können auf alle Elemente angewandt werden und dienen dazu, dass die Elemente dynamisch geladen werden. Richtig angewendet können Animationen das Interesse und die Wertigkeit einer Website deutlich verbessern!

Unter jedem Element, welches man bearbeitet, kann unter „Erweitert“ das Feld Bewegungseffekte ausgewählt werden. Standardmäßig ist keine Animation vorhanden. Klickt man auf das Feld, öffnet sich ein Dropdown, in dem man verschiedene Animation auffindet. Der gängigste und am häufig genutzte Effekt ist der „Fade In“. Dieser Effekt bringt das Element dazu, sich einzublenden, sobald der Monitor die Höhe des Abschnitts erreicht hat. Unter Animations-Dauer hat man die Möglichkeit, die Schnelligkeit der Animation zu bestimmen; unter Verzögerung wird die Animation verspätet erfolgen.

14. Nice to know

Elementor ist ein kostenfreies Plugin für WordPress, dass auch eine erwerbsfähige Lizenz beinhaltet und alle Elemente von Elementor freischaltet
Unter Plugins findet man einige Erweiterungen für Elementor, die viele neue und einzigartige Elemente hinzufügen
Mit Elementor lässt sich ideal für verschiedene Viewports gestalten, wie dem Laptop, Tablet oder das Smartphone
Durch ein Plugin lässt sich auch der Header und Footer gestalten, ohne die Lizenz zu erwerben