Was genau ist der Elementor Page Builder

Was genau ist der Elementor Page Builder?

Hier muss ich zunächst erklären, was genau ein Page Builder ist. Hast du jemals mit LEGO gespielt? Ich bin mir sicher, du hast oder du hast zumindest davon gehört – wer hat das nicht? 🙂 Ein Page Builder (auf deutsch: Seitenersteller) ist wie eine Kiste mit LEGO-Bauteilen, mit denen du einen beliebigen Typus Webseiten erstellen kannst.


Wenn du das klassische WordPress-Dashboard verwendest und das Ergebnis während der Arbeit an einer Seite nicht sehen kannst, musst du auf die Schaltfläche „Vorschau“ klicken, um zu sehen, wie die Seite aussieht. Page Builder wurden daher entwickelt, um dies zu überwinden. Sie bieten dir die Möglichkeit, die Änderungen so zu sehen, wie du sie vornimmst. Die gesamte Bearbeitung des Erscheinungsbilds deines Artikels erfolgt im Drag-and-Drop-Modus mit vorhanden Elementen, den sogenannten Widgets. Vereinfacht ausgedrückt, erstellst du die Seite oder den Beitrag aus diesen Elementen und passt sie dann an, um eine beeindruckend aussehende Seite zu erstellen.

Es gibt jetzt zahlreiche verschiedene Page Builder: BeaverBuilder, Novi Builder, Visual Composer und wie bereits erwähnt, sogar WordPress hat jetzt einen eigenen nativen Builder namens Gutenberg. Du könntest jetzt vielleicht sagen: “Hey, wenn WordPress bereits einen Page Builder hat, warum etwas anderes installieren?” Das ist eine faire Frage, und hier ist meine etwas voreingenommene Antwort…

Ich liebe es einfach, Elementor zu benutzen, und das ist alles!

Ich habe Elementor bereits verwendet, bevor das WordPress-Team Gutenberg startete und ich ziehe es vor, den Elementor Page Builder auf den meisten meiner Websites weiter zu verwenden. Es gibt Dutzende von nützlichen Add-Ons auf dem Elementor-Marktplatz, deren Installation die verfügbaren Optionen erheblich erweitert. Sie können natürlich auch andere Page Builder ausprobieren, was ich gelegentlich auch tue. Da ich jedoch persönlich ein Fan von Elementor bin, werde ich dies als Beispiel für die Vorteile von Page Buildern verwenden.

Warum ich Elementor mehr als andere Page Builder liebe

Ja, ich habe mich an Elementor gewöhnt, aber das ist nicht der einzige Grund, warum ich ihn mag. Es hat eine Reihe von guten Vorteilen:

  • Er ist kostenlos: Es gibt eine kostenpflichtige Version von Elementor Pro, die ihre Vorteile hat, aber das Kern-Plugin ist völlig kostenlos. Du kannst es ohne weitere Add-Ons herunterladen, installieren und verwenden und es verfügt dennoch über eine enorme Funktionalität. Besonders wichtig für Anfänger, die kein großes Budget haben!
  • Einfache Bedienung: Die Benutzeroberfläche ist einfach, die Verwendung der Widgets ist leicht verständlich und die Benutzeroberfläche sehr benutzerfreundlich.
  • Gut dokumentiert: Anfänger machen immer Fehler, es ist normal und wenn Sie einige Probleme haben, können Sie die Lösung in der Anleitung finden.
  • Es ist ein Plugin, kein Thema: Einige Page Builder sind selbst ein Thema, von dem du vielleicht denkst, dass es in mancher Hinsicht ein Plus ist. Wenn Sie jedoch jemals zu einem neuen Thema wechseln möchtest, kannst du das nicht!
  • Es gibt jede Menge Tutorials: Es gibt Dutzende von Video-Tutorials zur Verwendung von Elementor. Fast jedes Widget verfügt über einen Artikel mit Anleitungen. Beispiel: Hier ist ein Video, das den Prozess der Installation der Elementor-Vorlage beschreibt. Zwar nur auf englisch aber leicht verständlich:
Wie man Elementor installiert
Video anzeigen?

Wenn du eingebettete Videos auf dieser Seiten sehen möchtest, werden personenbezogene Daten (IP-Adresse) an den Betreiber des Videoportals gesendet. Daher ist es möglich, dass der Videoanbieter deine Zugriffe speichert und dein Verhalten analysieren kann.

Wenn du den Link hier unten anklickst, wird ein Cookie auf deinem Computer gesetzt, sodass die Website weiß, dass du der Anzeige von eingebetteten Videos in deinem Browser zugestimmt hast. Dieses Cookie speichert keine personenbezogenen Daten, es erkennt lediglich, dass eine Einwilligung für die Anzeige der Videos in deinem Browser erfolgt ist.

Erfahre mehr über diesen Aspekt der Datenschutzeinstellungen auf dieser Seite: Datenschutzerklärung

Videos anzeigen

Alternativ kannst du auch diesen Link benutzen, der dich direkt zum Video auf die Website des Videoanbieters bringt: https://www.youtube.com/watch?mWJhkn_e3oM

Das sind die Vorteile für Anfänger, erfahrene Webentwickler wissen, dass es in Elementor noch andere Profis gibt. Wenn du interessiert bist – lies diesen Artikel , es gibt viele Bewertungen von verschiedenen Personen.
Jetzt habe ich Dir erklärt, warum ich Elementor Page Builder für großartig halte. Kommen wir zu weiteren praktischen Beispielen. Ich gehe davon aus, dass du das Elementor-Plugin bereits installiert hast und es betriebsbereit ist. Ich werde den Prozess der Erstellung einer Seite und eines Beitrages durchlaufen. Wenn du dem folgst, wist wissen, wie du so etwas mit Elementor veröffentlichst, bevor du es verinnerlicht hast.

Also fangen wir an.

Die Verwendung von Elementor in WordPress

  • Installiere das Elementor-Plugin
  • Installiere ein separates Thema, wenn du eine besonderes verwenden willst
  • Füge mit Elementor eine neue Seite hinzu
  • Verwende ein Widget-Element oder füge eine Vorlage hinzu
  • Erstelle Abschnitte nach Bedarf
  • Erfahre, wie du Elementor-Widgets verwenden kannst
  • Bearbeite Hintergrundbilder nach Ihren Wünschen
  • Ändere die Schriftarten nach Bedarf
  • Vorgang für Beiträge wiederholen

So erstelle eine Seite mit Elementor

Öffne dein WordPress-Verwaltungs-Dashboard und gehe zu Seiten -> Neu hinzufügen.

Klicke anschließend auf die Schaltfläche „Mit Elementor bearbeiten“ und du wirst zum Elementor-Anpassungsfenster weitergeleitet.

Jetzt hast du zwei Möglichkeiten. Die erste besteht darin, die Seite von Grund auf neu zu erstellen. Dies bedeutet, dass du verschiedene Elemente per Drag & Drop in den Seitenarbeitsbereich ziehen. Der zweite ist viel einfacher, also zeige ich dir diesen Weg …
In der Mitte des Arbeitsbereichs siehst du zwei Schaltflächen. Klicke auf die graue Schaltfläche „Vorlage hinzufügen“.

Vorlage hinzufügen

Die jetzt geöffnete Bibliothek enthält viele Seitenvorlagen, von denen viele kostenlos verwendet werden können. Elementor-Vorlagen sind nicht dasselbe wie Themes. Ein Thema ist eine Reihe von vorgefertigten Seiten, die alle in einem soliden Design gestaltet sind, während eine Vorlage eine Sammlung von LEGO-Stücken (Elementen auch Widgets genannt) ist. Vorlagen sind im Grunde genommen eine Seite, die aus zahlreichen Elementen besteht.

Wähle die gewünschte Seite aus und klicke auf die Schaltfläche “Einfügen”. Ich habe die Produkt-Homepage ausgewählt, um dir zu zeigen, wie sie aussieht. Die Seite, die du geladen hast, wirkt sich nicht auf die Kopf- und Fußzeile deiner Website aus – sie füllt nur den „Body“ mit Demo-Inhalten. Wie du siehst, wird die eingefügte Seite mit benutzerdefinierten Standardelementen kombiniert und du kannst sie nach Belieben ändern.

Muster Produkt-Homepage

Um die Anpassung zu starten, musst du auf das Element klicken, das du ändern möchtest. Im Feld links wird ein Menü geöffnet. Dieses Menü hat drei Registerkarten: “Inhalt”, “Stil” und “Erweitert”.
Auf der Registerkarte “Inhalt” kannst du ändern, was in diesem Element angezeigt wird – Text, Bild, Link oder etwas anderes. Hier kannst du den gesamten Inhalt ganz ohne Styling anpassen.

Inhalt-Tab

Auf der Registerkarte “Stil” findest du die Tools, mit denen du das Erscheinungsbild deines Inhalts ändern kannst. Farben, Schriftarten, Hintergründe, Ausrichtungen, Ränder und Ränder. Die Benutzeroberfläche ist einfach, daher wirst du sicher verstehen wollen, wie man sie verwendet, nachdem du ein paar Minuten herumgespielt hast.

Produktseite anpassen-Stil

Die Registerkarte „Erweitert“ enthält verschiedene Zusatzfunktionen wie den Hintergrund des gesamten Elements oder die Eingangsanimation. Du wirst es nicht oft brauchen, aber du solltest dir trotzdem die Funktionen hier schauen, wenn du sie mal brauchst.

Erweitert-Tab

Mit Elementor Page Builder wird das Erstellen von Seiten so einfach und interessant wie das Spielen eines Videospiels. Du wählst die Vorlage mit passender Struktur aus, wendest sie an und passt sie dann an das Design des von dir verwendeten Themas an (oder nicht, es liegt ganz bei dir, wie deine Site aussehen soll, aber ich empfehle, sich mindestens an eine festgelegte Farbe zu halten). Nach dem Erstellen einer Seite kannst du diese Seite als Vorlage speichern und für alle anderen Teile deiner Webseite verwenden.

So erstellst du einen Beitrag mit Elementor

Wenn es um die Erstellung neuer Beiträge geht, kannst du nicht einfach den oben beschriebenen Prozess ausführen. Versuchen wir also, einen Beitrag von Grund auf zu erstellen, und sehen wir uns einige andere Funktionen an.

Woraus besteht ein Beitrag? Normalerweise besteht es aus dem Titel, dem angezeigten Bild, den Metadaten, dem Text, den Schaltflächen zum Teilen und den Kommentaren. In deinem Fall können sich auch einige Unterschiede ergeben. Wenn du also der Meinung bist, dass du weitere Schaltflächen oder Listen hinzufügen musst, solltest du dies einfach machen.

Hier erstelle ich einen sehr einfachen Beitrag, damit du sehen kannst, wie alle grundlegenden Funktionen gelingen. Ich werde damit beginnen, alle genannten Elemente auf dem Arbeitsfeld abzulegen (einige davon sind bereits vorhanden). Keine Sorge, wenn du irgendwann die Position eines Elements ändern möchten, ist dies kein Problem.

Beitrag 1

Es ist Zeit, alles schöner aussehen zu lassen. Drücke auf das Titelelement und lege die Details des gewünschten Erscheinungsbilds fest. In meinem Fall kann ich die Schriftart, Ausrichtung und Größe des Titels ändern.

Beitrag-Titel

Jetzt legen wir das Bild fest. Klicke auf das Bildelement, wähle das Bild aus und lege die Ränder fest.

Bild eingefügt

Ich habe auch den Text des Beitrags zum Textabschnitt hinzugefügt und die Schriftart und Größe der Buchstaben geändert. Die Schaltflächen und der Kommentarbereich sind in Ordnung, daher habe ich sie unverändert gelassen.

Als Vorlage speichern

Super! Eine einfache Beitragsseite ist fertig. Um es als Vorlage für die weitere Verwendung zu speichern, musst du die kleine Pfeiltaste unten neben dem Speichern Button drücken und eine Speicheroption auswählen.

Beitrag Schrift verändert

Fazit

Es gibt eine Menge anderer Funktionen, die Elementor Ihnen anbieten kann. Wenn Sie jedoch die Grundlagen von Elementor Page Builder beherrschen, steht Ihnen eine umfangreiche und praktische Toolbox zur Verfügung. Elementor Page Builder ist ein großartiges Tool, mit dessen Hilfe Sie ein noch besseres Blog erstellen können, als Sie es bereits getan haben.