Seiten und Beiträge mit Elementor

Im zweiten Teil unserer Artikelreihe zeigen wir Ihnen, wie Sie mit Elementor Seiten und Beiträge erstellen. Sie lernen den Aufbau von Seiten kennen, erfahren, wie sich Elemente gezielt anpassen lassen, und wie Sie Ihre Inhalte abschließend für unterschiedliche Endgeräte optimieren.

Artikelserie

Was ist WordPress? Einführung und Überblick
Inhalte erstellen – Seiten und Beiträge mit Elementor
Medienverwaltung in WordPress
Kontaktformulare mit Contact Form 7
Plugins – Erweiterungen für Funktionalität
Sicherheit und Wartung – So bleibt Ihre Website stabil
E-Commerce mit WooCommerce
Analysen und Optimierung – Ihre Website verbessern
Häufige Fehler und wie man sie vermeidet
Abschluss und weiterführende Ressourcen

WordPress bietet mit Elementor einen der besten Drag-and-Drop-Editoren für das einfache Erstellen und Bearbeiten von Webseiten. Elementor wird gerne zum Bearbeiten von Webseiten verwendet, da es eine hohe Flexibilität und Designfreiheit bietet – ohne Programmierkenntnisse.

Elementor bietet eine benutzerfreundliche Oberfläche, mit der Sie Ihre Website per Drag-and-drop gestalten können. Ein großer Vorteil ist, dass Elementor die Seite bereits während der Bearbeitung genauso darstellt, wie sie später auch online im Frontend aussehen wird. So können Sie das Ergebnis Ihrer Arbeit jederzeit direkt überprüfen und Anpassungen in Echtzeit vornehmen.

Dieser Beitrag erklärt, wie Sie mit Elementor Seiten und Beiträge in WordPress erstellen, welche Werkzeuge Ihnen zur Verfügung stehen und wie Sie die verschiedenen Design-Optionen optimal nutzen.

Vorteile von Elementor

Einfache Bedienung: Dank Drag-and-Drop-Editor ist Elementor auch für Anfänger leicht zu verwenden.
Hohe Flexibilität: Designmöglichkeiten sind nahezu unbegrenzt, ohne dass Sie Programmierkenntnisse benötigen.
Sofortige Vorschau: Änderungen werden in Echtzeit angezeigt.
Responsives Design: Webseiten lassen sich für Desktop, Tablet und Smartphone optimieren. Die Darstellung zwischen den verschiedenen Endgeräten kann direkt umgeschaltet werden.
Kompatibilität: Funktioniert mit den meisten WordPress-Themes und Plugins. In vielen kommerziellen Templates wird er sogar schon vorinstalliert.

Elementor Free vs. Elementor Pro

Elementor bietet sowohl eine kostenlose als auch eine kostenpflichtige Version an. Die Basisversion, Elementor Free genannt, stellt bereits zahlreiche Funktionen zur Verfügung, mit denen sich viele Webseiten problemlos gestalten lassen. Für die meisten Standardprojekte reicht diese kostenfreie Variante völlig aus, da sie die grundlegenden Werkzeuge zur Erstellung und Anpassung von Seiten enthält. Wer jedoch auf erweiterte Funktionen, zusätzliche Widgets, mehr Designmöglichkeiten oder eine größere Auswahl an Plugins angewiesen ist, sollte einen Blick auf Elementor Pro werfen. Diese kostenpflichtige Version erweitert den Funktionsumfang erheblich und richtet sich vor allem an Nutzerinnen und Nutzer, die professionelle Webseiten mit individuellen Gestaltungsmöglichkeiten und speziellen Anforderungen umsetzen möchten.

Elementor Free: Enthält grundlegende Widgets wie Überschriften, Bilder, Buttons, Spalten etc.
Elementor Pro: Bietet zusätzliche Widgets, Theme-Builder, Popup-Builder, dynamische Inhalte und mehr.

Unterschied zwischen Seiten und Beiträgen

Seiten enthalten Inhalte einer Website, die dauerhaft erreichbar sein sollen, zum Beispiel „Über uns“ oder „Kontakt“. Es sind die Inhaltsseiten einer Homepage. Beiträge werden für regelmäßig neue Inhalte genutzt, etwa Blogposts oder Meldungen, die nach Datum organisiert sind und im Blog erscheinen.

Eine neue Seite mit Elementor erstellen

Gehen Sie im WordPress Backend in der Navigation auf der linken Seite auf “Seiten”. Klicken Sie danach oben auf “Seite hinzufügen”.

Vergeben Sie einen passenden Titel, z. B. „Über uns“ oder „Unsere Leistungen“.

Klicken Sie auf den Button “Mit Elementor bearbeiten”.

Aufbau einer Seite mit Elementor

Die Elementor- Oberfläche besteht aus zwei Hauptbereichen:

Linke Seitenleiste: Hier finden Sie alle Widgets und Design-Optionen.
Hauptbereich auf der rechten Seite: Ihre Arbeitsfläche, auf der Sie Elemente platzieren und den Inhalt als Vorschau sehen können.

Jede Seite in Elementor besteht aus Containern und Elementen: Container sind das grundlegende Element, um die Inhalte zu strukturieren. Elemente sind einzelne Inhalte wie Texte, Bilder, Buttons, Videos etc.

Über den Plus- Button oben links oder über einen Rechtsklick auf ein Element und dann Einfügen können Sie neue Elemente in die Webseite hinzufügen. Durch Drag & Grop mit der Maus können Sie Elemente auch verschieben und anders anordnen.

Wenn Sie mit der Maus auf ein Element klicken, werden links die entsprechenden Einstellungen zu diesem Element angezeigt. Dort können verschiedene Anpassungen vorgenommen werden, die direkt in der Vorschau rechts umgesetzt werden. Auf dem letzten Screenshot oben sehen Sie z.B. die Einstellungen für ein Bild.

Elementor-Widgets im Detail

Basis-Widgets (kostenlos)

Texteditor – Fügt Text-Inhalte mit Formatierung hinzu.
Überschrift – Erstellt SEO-freundliche Überschriften.
Bild – Zeigt Bilder mit Optionen für Schatten, Rahmen etc.
Button – Erstellt klickbare Buttons mit individuellen Designs.
Trennlinien & Abstände – Fügt visuelle Trennungen hinzu.

Erweiterte Widgets (Elementor Pro)

Formulare – Erstelle Kontaktformulare ohne externe Plugins.
Slider & Karussell – Zeigt Bilder oder Beiträge als Slider an.
Call-to-Action – Perfekt für Landingpages mit Conversion-Zielen.
Beitrags-Widget – Zeigt Blog-Beiträge an einer beliebigen Stelle.

Inhalt zu einer Seite hinzufügen

Klicken Sie oben links auf das Plus- Symbol, um in der Seitenleiste die Widgets anzuzeigen, die zu der Seite hinzugefügt werden können. Klicken Sie das gewünschte Element an und ziehen Sie es an die Stelle, an der Sie es im Inhalt einfügen möchten. Danach können Sie die Einstellungen für das Widget bearbeiten und individuell anpassen.

Alternativ können Sie im Editor rechts auch mit der Maus auf einen Bereich zeigen und das Plus Symbol am oberen Rand eines Elements nutzen, um an dieser Stelle ein neues Widget einzufügen.

Globale Design Elemente definieren

Ein konsistentes und ansprechendes Design ist entscheidend für die Wahrnehmung Ihrer Webseite. Elementor bietet dazu umfangreiche Möglichkeiten, Farben, Schriftarten und Layouts zu definieren und ein responsive Design für alle Geräte sicherzustellen.

Elementor ermöglicht es, Farben und Schriftarten auf globaler Ebene festzulegen. Diese Einstellungen sorgen dafür, dass Ihr gesamtes Design einheitlich wirkt und Sie nicht bei jedem Element die gleichen Werte manuell eintragen müssen.

Öffnen Sie dazu den Elementor Editor für eine beliebige Seite. Klicken Sie anschließend links oben auf das Elementor Symbol und wählen Sie Website-Einstellungen.

Unter dem Begriff Globale Farben lassen sich folgende Einstellungen vornehmen: Primärfarbe (beispielsweise für Schaltflächen oder zentrale Textelemente), Sekundärfarbe, Textfarbe sowie Akzentfarbe. Darüber hinaus besteht die Möglichkeit, unbegrenzt viele eigene Farbtöne hinzuzufügen und individuell zu benennen, etwa „Markenrot“ oder „Linkfarbe“. Diese global definierten Farben können später bei der Bearbeitung einzelner Komponenten ausgewählt werden, was erheblich Zeit spart und ein konsistentes Erscheinungsbild sicherstellt.

Analog dazu können auch zentrale Dinge die Schriftarten, Überschriften usw. definiert werden.

Responsive Design

Immer mehr Nutzer besuchen Webseiten über mobile Geräte – deshalb ist ein responsives Design unverzichtbar. Elementor bietet Ihnen leistungsstarke Werkzeuge, um das Layout gezielt für verschiedene Bildschirmgrößen zu optimieren.

Oben im Elementor-Editor finden Sie mittig Symbole für die verschiedenen Endgeräte. Klicken Sie darauf, um zwischen den Ansichten für Desktop, Tablet und Smartphone zu wechseln.

In jeder Ansicht können Sie: Schriftgrößen anpassen, Abstände und Ränder individuell definieren, Elemente ein- oder ausblenden (z. B. mobile Navigation) und vieles mehr.

Elemente gezielt anpassen

Viele Einstellungen in Elementor haben ein Gerätesymbol daneben – sobald Sie darauf klicken, können Sie unterschiedliche Werte pro Gerät eingeben. Die Vorauswahl wechselt automatisch mit, wenn Sie oben in der Leiste zwischen den Endgeräten hin und her wechseln.

So können Sie z. B. auf Mobilgeräten kleinere Schriftgrößen oder andere Spaltenanordnungen nutzen, ohne das Desktop-Layout zu verändern.

Speichern, Veröffentlichen und Wiederverwenden von Layouts

Falls Sie mit der Bearbeitung einer Seite noch nicht fertig sind, klicken Sie oben rechts auf den Pfeil nach unten und wählen Sie Speichern als Entwurf.

Falls Sie das Layout für zukünftige Seiten nutzen möchten, können Sie es dort auch als Vorlage speichern.