Springe zum Hauptinhalt

Elementor-Tutorial: Einführung in die Benutzeroberfläche

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Das Entwerfen einer professionell aussehenden Website war nicht jedermanns Sache, zumal wir alle der Meinung waren, dass Sie unbedingt ein Profi in Codierung und Webdesign sein müssen. Heutzutage tauchen neue Tools für das WordPress-Ökosystem auf, um eine immer einfachere Lösung für das Entwerfen einer Website bereitzustellen, die für die meisten Anfänger erreichbar ist.

Bezüglich der Gestaltung von WordPress-Layouts mussten wir das Plugin bereits einreichen Visual Composer, das definitiv eines der besten Werkzeuge ist, wenn es um Layout-Design geht. Beachten Sie jedoch, dass diese Lösung nicht für jeden geeignet ist. Aus diesem Grund werden wir Ihnen in diesem Tutorial das WordPress Elementor-Plugin näher bringen, ein Freemium-WordPress-Plugin (kostenlos, aber im Abonnement erweiterbar).

Woher bekomme ich Elementor für WordPress?

Wir denken ernsthaft darüber nach, Sie dazu zu bringen, das Potenzial des Plugins kennenzulernen, und die kostenlose Lösung wird Ihnen den Einstieg erleichtern, ohne einen Cent zu zahlen. Diese kostenlose Lösung ist ab verfügbar WordPress.org. Als WordPress-Plugin wird es wie jedes andere installiert Plugin aus dem Dashboard. 

Wenn das Plugin Sie vollständig zufriedenstellt, können Sie die vollständige Lizenz mit allen Funktionen auf der Site erhalten offizieller Elementor.

Hauptmerkmale von Elementor

Bevor Sie das Tutorial mit einer Übersicht über das Plugin beginnen, werden wir Ihnen zunächst die Hauptfunktionen des Plugins vorstellen (kostenlose Version und Vollversion).

Version Kostenlos Vollversion
Mehrere Spalten Navigationsmenü, Artikel
Module Texte, Titel WooCommerce-Modul (Produkte, Kategorien)
Videomodule, Bild, Karussell, Galerien, Soundcloud Facebook-Integration (Seite, Button, Kommentare)
Modul freigeben Tabelle Preise
HTML-Modul Portfolio, Formular
Modul für WordPress Widget Suchmodul

 

Beachten Sie, dass dies eine etwas vollständige Liste der verschiedenen Funktionen des Plugins ist. Weitere Details finden Sie in ihre Website erkunden.

Beginne mit Elementor

Wir werden hier nicht den gesamten Installationsprozess behandeln. Da dies ein WordPress-Plugin ist, wurde der Installationsvorgang bereits in erklärt ein vorheriges Tutorial. Nach der Installation werden Sie jedoch zur Homepage des Plugins weitergeleitet.

delementor.png Präsentationsseite

Wenn Sie diese Seite auf Ihrem Bildschirm haben, haben Sie das Elementor-Plugin erfolgreich installiert. Wir verwenden derzeit die Vollversion für dieses Tutorial, aber die Benutzeroberfläche sollte sich nicht zu stark von der kostenlosen Version unterscheiden.

Bevor Sie zur Bearbeitungsoberfläche gehen, werde ich Sie einladen, Ihre Lizenz zu registrieren. Dies gilt nur für diejenigen, die sich für die Vollversion entschieden haben. Wenn Sie die kostenlose Version haben, können Sie mit dem nächsten Abschnitt fortfahren. Um Ihre Lizenz zu registrieren, werden Sie eine Benachrichtigung in WordPress bemerken, die Sie auffordert, Ihre Lizenz zu registrieren.

Benachrichtigungs-Plugin elementor.png

Sie müssen nur darauf klicken, um zur Registrierungsseite zu gelangen und auf zu klicken Aktivieren.

Registrierung einer Lizenz elementor.png

Normalerweise benötigen Sie Ihre Bestätigungsseite, wenn Ihre Lizenz gültig ist.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

aktive Lizenz elementor.png

Wenn Sie nicht auf diese Seite gelangen, lade ich Sie ein, sich an die Entwickler des Plugins zu wenden, um weitere Informationen zu erhalten Hilfe bei dem Problem.

Wie man Elementor benutzt

Elementor arbeitet an Seiten und Posts in WordPress. Unabhängig davon, ob Sie die klassische Benutzeroberfläche oder die neue Gutenberg-Benutzeroberfläche verwenden, wird eine Schaltfläche angezeigt, die Sie zur Verwendung des Elementor-Builders auffordert.

Konstruktor elementor.png

In der Praxis müssen Sie Ihre Beiträge nicht immer mit Elementor bearbeiten. Ich lade Sie daher ein, das Plugin nur auf den Seiten zu verwenden. Durch Klicken auf die Schaltfläche gelangen Sie auf die Elementor-Designoberfläche, die einen Hauch von Déjà Vu vermittelt (für diejenigen, die den WordPress Customizer verwenden).

Präsentationsoberfläche elementor.png

Sie haben also links die verschiedenen Steuerelemente, die das Plugin bietet, und rechts die Live-Vorschau Ihrer Änderungen. In diesem Tutorial verwenden wir das Twenty Sixteen WordPress-Theme.

Elementor Abschnitte

Elementor-Abschnitte sind Gruppen von Funktionsblöcken, die Elementor anbietet. Die Anzahl der Abschnitte hängt davon ab, ob Sie die Vollversion verwenden und ob Sie WooCommerce, Yoast SEO oder andere kompatible Plugins verwenden. Abhängig von diesen Bedingungen haben Sie mehr oder weniger Abschnitte auf Ihrer Benutzeroberfläche. Da wir die Vollversion mit aktiviertem WooCommerce-Plugin verwenden, sieht unsere Benutzeroberfläche so aus.

Abschnitt elementor.png

Wie platziere ich einen Elementor-Block?

Sobald Sie einen Abschnitt erweitert haben, finden Sie die Elementorblöcke. Die verschiedenen Elementor-Blöcke werden per Drag & Drop auf dem mit gepunkteten Linien hervorgehobenen Bereich platziert.

Blöcke hinzufügen elementors.png

Wie wählt man ein Layout auf Elementor?

Bevor Sie einen Block in Elementor hinzufügen, müssen Sie daran denken, ein Layout auszuwählen, indem Sie im hervorgehobenen Bereich auf die Schaltfläche „+“ klicken.

Wählen Sie ein Layout elementor.png

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Abhängig von Ihren Anforderungen wählen Sie das für Sie am besten geeignete Layout. Sobald Sie ein Layout ausgewählt haben, wird eine Darstellung dieses Abschnitts im selben Bereich hervorgehoben. In diesem Abschnitt wird die gleiche Anzahl von Spalten angezeigt, die Ihrer Auswahl entsprechen. In meinem Fall habe ich eine Spalte mit 3 Spalten ausgewählt.

Elementorabschnitt mit zone.png

Die verschiedenen Blöcke mit einem "+" - Zeichen sind die Bereiche, in denen Elementorblöcke akzeptiert werden können. Wenn Sie einen Elementor-Block hinzufügen, ohne zuerst ein Layout auszuwählen, wird standardmäßig das einspaltige Layout ausgewählt.

Elementor-Abschnitte können nach dem gleichen Drag & Drop-Prinzip untereinander neu angeordnet werden. Sie können einen Abschnitt auch löschen, wenn Sie ihn nicht mehr verwenden möchten.

Verschieben eines Abschnitts elementor.png

Hier ist ein Beispiel eines Abschnitts, der zwei Blöcke enthält, nämlich das Schriftfeld und den Textblock.

Abschnittselement mit 2 blocs.png

Wie man andere Entwurfswerkzeuge benutzt

Nachdem Sie Ihr Design fertiggestellt haben, möchten Sie unter anderem Ihre Arbeit speichern. Sie finden diese Option ganz unten im Abschnitt, in dem die verschiedenen Elementor-Abschnitte angezeigt werden.

elementor.png Sicherung

Sie haben die Wahl zwischen direktem Speichern (Veröffentlichen) und Speichern als Entwurf oder als Vorlage. Wir werden diese verschiedenen Punkte später genauer untersuchen.

Während Ihres Entwurfs möchten Sie möglicherweise auch eine Vorschau der Änderungen ohne die zusätzliche Oberfläche von Elementor anzeigen. Alles was Sie tun müssen, ist auf das Augensymbol zu klicken.

Vorschau der Änderungen elementor.png

Es kommt vor, dass während des Entwurfs ein Fehler auftritt (eine unfreiwillige Aktion). In diesem Fall bietet Elementor einen Verlauf, mit dem Sie durch alle Ihre Aktionen navigieren können.

Aktionen elementor.png

Auf diese Weise können Sie problemlos zurückkehren.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Mit der Option „Browser“, die direkt vor der Verlaufsschaltfläche angezeigt wird, können Sie die verschiedenen Abschnitte in Bezug auf den von Besuchern verwendeten Browser weiter ändern. Mit dieser Option haben Sie Zugriff auf die erweiterte Änderung von Abschnittsstrukturen (Spaltenbreite). Hier müssen Sie sehr sorgfältig Änderungen vornehmen.

Browseroption elementor.png

Mit der Schaltfläche "Einstellungen" können Sie bestimmte seitenspezifische Optionen ändern, z. B. den Titel, das ausgewählte Bild oder den Status.

elementor.png Einstellungen

Das war's für dieses Tutorial, wir werden Elementor in unserem nächsten Tutorial genauer untersuchen. Zögern Sie nicht, einen Blick auf die Offizielle Website Das bietet viel mehr erfolgreiche Beispiele.

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
13 Aktien
Aktie6
tweet3
Registrieren4