Mit dem Elementor Page Builder können Sie schnell und effizient Webseiten erstellen. Dafür benötigen Sie keine Programmierkenntnisse und kein CSS Wissen. In unserem Elementor Tutorial erklären wir Ihnen grundlegende Dinge, zeigen Ihnen im Detail wie Sie das WordPress Plugin installieren, helfen beim Einstieg und geben Tipps für das Arbeiten mit dem Plugin.
Unser Elementor Tutorial haben wir in mehrere Artikel aufgeteilt.
So können Sie genau an dem Punkt einsteigen, bei dem Sie Hilfe benötigen.
Wie funktioniert Elementor?
Elementor ist ein sogenannter Live Page Builder, ein für WordPress entwickeltes Plugin.
Das Plugin ermöglicht Ihnen die Erstellung von Webseiten (Webdesign). Sie müssen dafür nicht programmieren können. Es stellt Ihnen verschiedene Funktionen (Widgets) und Vorlagen (Templates) zur Verfügung. Diese können Sie einfügen, bearbeiten und pixelgenau an der richtigen Stelle in der Webseite positionieren.
Überschriften, Texte, Button, Bilder und viele weitere Elemente können Sie exakt an der richtigen Stelle positionieren. Ohne CSS-Kenntnisse können Sie Farben, Formen und selbst die Schriftart anpassen.
In der Live-Vorschau sehen sie sofort das fertige Ergebnis, wie es später Ihre Seitenbesucher:Innen sehen.
Mehr ins Detail gehen wir im Artikel: Was ist Elementor?
Elementor installieren
Das WordPress Plugin gibt es in einer kostenlosen Version, die Sie mit wenigen Mausklicks installieren können. So können Sie dieses sehr hilfreiche Tool einfach mal anschauen und ausprobieren. Bereits mit der Installation der Free-Version haben Sie Zugriff auf kostenlose Vorlagen und Templates. Das sollten Sie allerdings nicht an der Live-Seite ausprobieren.
Zur Schritt-für-Schritt Anleitung: Elementor installieren
Neben der Free-Version gibt es Elementor Pro. Hier stehen zusätzliche Widgets und mehr als 300+ Vorlagen zur Verfügung. Für Elementor Pro gibt es unterschiedliche Lizenzmodelle / Pläne. Sie können sowohl eine Lizenz für eine Website erwerben aber auch für 25 Websites und für bis zu 1.000 Websites. Elementor richtet sowohl an Privatpersonen, Selbstständige und Webdesign Agenturen mit einem umfangreicheren Bedarf.
Mehr zu den Preisen: Elementor Pro Kosten
Zur Schritt-für-Schritt Anleitung: Elementor Pro installieren
Sie möchten die Pro Version direkt mal ausprobieren?
Link *: Elementor Pro ausprobieren
Elementor einrichten
Nach der Installation können Sie sofort loslegen. Eine festgelegte Prozedur zum Elementor einrichten gibt es nicht. Falls Sie noch keine Erfahrungen mit diesem Page Builder haben, dann sollten Sie zum Ausprobieren einfach mal eine neue Seite erstellen und sich mit den Widgets vertraut machen. Die meisten Dinge werden Sie durch Ausprobieren lernen. Deshalb macht es Sinn, die ersten Gehversuche auf einer Entwicklungsumgebung bzw. mit einer Testseite zu machen.
Die Elementor Benutzeroberfläche
Der WordPress Page Builder ist ein sehr mächtiges Werkzeug mit vielen Funktionen und Widgets. Bevor wir einen Beitrag oder eine Seite erstellen, geben wir Ihnen in unserem Elementor Tutorial eine kurze Erklärung bzw. Einführung in die Benutzeroberfläche von Elementor.
Hinweis: Diese Anleitung ist gerade im Umbau.
Mit Elementor eine Seite erstellen
Lesen Sie nicht erst lange Dokus. Probieren Sie den Pagebuilder einfach mal aus. Mit Elementor eine neue Seite erstellen ist ganz einfach. Über die Navigation auf der linken Seite klicken Sie auf „Seiten“ und dann auf den Button „Erstellen“. Es öffnet sich eine neue leere Seite. Hier können Sie den Titel festlegen und dann klicken Sie auf den Button „Mit Elementor bearbeiten“. Dann wird diese Seite im Pagebuilder geöffnet und Sie können mit dem Design loslegen.
Hinweis: Eine Schritt für Schritt Anleitung folgt.
Weiterführende Inhalte:
- Elementor Hintergrundbild
- Elementor Kontaktformular erstellen
- Elementor Zeilenabstand anpassen
- Elementor Bilder überlagern
- Elementor Favicon einbinden
- Elementor Zeilenumbruch
Elementor Abschnitte und Spalten
Für die Platzierung von Elementen sind die Abschnitte (Sections) und Spalten notwendig. Diese bilden das Grundgerüst einer Website. Deshalb gehen wir in unserem Elementor Tutorial genauer darauf ein. Wir zeigen Ihnen im Detail wie Sie damit eine Seite erstellen, wie einfach Sie neue Spalten hinzufügen können und wie Sie eine innere Sektion mit mehren Spalten erstellen. Sie können damit so ziemlich jedes Design umsetzen und bei der Gestaltung die Reihenfolge in mobilen Endgeräten ändern.
Weiterführende Inhalte:
Elementor Templates und Design Vorlagen
Ein wirklich tolles Feature sind die Templates des Elementor Page Builder. Hierbei handelt es sich um Designvorlagen für Beiträge, Seiten und Abschnitte. Die Handhabung spart eine Menge Zeit und ist unkompliziert. In der Basis Version gibt es zahlreiche Free Templates. Elementor Pro bringt zusätzliche Vorteile durch Premium Templates und Template Kits. Sie können bei der Erstellung von Webseiten auf fertige Vorlagen zurückgreifen und eigene Templates speichern und wieder einbinden.
Wie der Import und das Einfügen funktioniert erklären wir separat. Das würde das Elementor Tutorial an dieser Stelle unübersichtlich machen. Nachfolgend finden Sie einen Link. Dort geben wir Ihnen Anleitungen zur Handhabung und wo Sie weitere Free und Premium Vorlagen finden.
Weiterführende Inhalte:
Elementor Seite als Startseite festlegen
Wie jede andere WordPress Seite können Sie diese als neue Startseite festlegen nach Sie diese veröffentlicht haben. Die Möglichkeiten sind identisch wie für andere Seiten, die Sie mit Wordpress oder anderen Pagebuildern erstellt haben. Falls Sie sich damit nicht auskennen, dann hilft nachfolgender Beitrag aus unserem Elementor Tutorial.
Zur Anleitung: Elementor Startseite festlegen
Tabelle mit Elementor einbinden
Elementor verfügt über kein eigenes Tabellen Widget. Allerdings bietet WordPress einige Plugins, die Ihnen alle Funktionen bieten und die Einbindung per Shortcode erfolgt. Zudem gibt es zahlreiche weitere Premium Plugins zur Tabellengestaltung.
Zur Anleitung: Elementor Tabelle erstellen
Elementor Probleme
Es kann immer wieder einmal passieren, dass der Pagbuilder nicht so funktioniert, wie wir das gerne hätten. Dies kann durch eine falsche Handhabung hervorgerufen werden oder es gibt Fehler beim Hosting oder der Software. So können Elementor Probleme beim Updates entstehen, da dieses Tool stetig weiterentwickelt wird. Ebenso können Themes und andere Plugins zu Fehler führen, wenn diese nicht kompatibel sind. In unserem Elementor Tutorial werden wir uns deshalb ebenso mit der Fehlerbehebung beschäftigen.
Für die Problemlösungen und Konfliktbehandlungen haben wir einen eigenen Artikel erstellt, damit alle übersichtlich ist.
Zum Artikel: Elementor Probleme und Fehler
So geht es weiter
In unserem Elementor Tutorial werden in den nächsten Wochen und Monaten stetig neue Anleitungen und Tipps hinzukommen. Wir wollten nicht warten, bis alles komplett fertig ist. Der Zeitraum dafür wäre zu lang und wir wissen, dass viele Einsteiger:Innen anfangen möchten und Hilfe brauchen. Des Weiteren wird Elementor stetig weiterentwickelt und es kommen neue Funktionen hinzu.
Was wird kommen:
- Was für Widget gibt es?
- Abstände (margin|padding) in der Verwendung
- Button in Form und Farbe anpassen
- Icons einfügen
- Erstellen und bearbeiten von Beiträgen
- Erstellen und bearbeiten von Seiten
- Hero Section erstellen
- Wie gestaltet man einen Header und Footer mit Elementor
- Wie kann ich Elemente an Stellen “ankleben” (sticky Elements)?
- Was sind globale Farben und wie nutzt man diese?
- Wie verwendet man globale Schriften?
- Wie kann ich Animationen verwenden?
Die Liste ist lang.
Richtig fertig wird man mit einem Elementor Tutorial deswegen wohl nie.
Wir bitten um ein wenig Geduld, da wir diese Dinge parallel zum Agentur-Alltag erstellen.
Mit * markierte Links sind Affiliate-Links. Wir erhalten eine kleine Provision, wenn jemand über solche Links ein Produkt erwirbt. Teurer wird das Produkt dadurch nicht.
