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 Tools für die Layoutgestaltung ist. Es sollte jedoch beachtet werden, dass diese Lösung nicht für jeden geeignet ist. Aus diesem Grund werden wir Ihnen in diesem Tutorial mehr über die WordPress Plugin Elementor, das ist ein WordPress Plugin Freemium (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. Sein WordPress PluginLetzteres wird 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 | Modul WooCommerce (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.
Wenn Sie diese Seite auf Ihrem Bildschirm haben, dann haben Sie die korrekt installiert Elementor-Plugin. Wir verwenden derzeit die Vollversion für dieses Tutorial, aber die Oberfläche sollte sich nicht zu sehr 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.
Sie müssen nur darauf klicken, um zur Registrierungsseite zu gelangen und auf zu klicken Mehr erfahren.
Normalerweise benötigen Sie Ihre Bestätigungsseite, wenn Ihre Lizenz gültig ist.
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.
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).
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
Abschnitte in Elementor sind Gruppen von Funktionsblöcken, die Elementor anbietet. Die Anzahl der Abschnitte hängt davon ab, ob Sie die Vollversion verwenden und ob Sie verwenden WooCommerce, Yoast SEO oder andere kompatible Plugins. Abhängig von diesen Bedingungen werden Sie mehr oder weniger Abschnitte auf Ihrer Benutzeroberfläche haben. Da wir die Vollversion mit dem Plugin verwenden WooCommerce aktiviert, so sieht unsere Oberfläche aus.
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.
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.
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.
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.
Hier ist ein Beispiel eines Abschnitts, der zwei Blöcke enthält, nämlich das Schriftfeld und den Textblock.
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.
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.
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.
Auf diese Weise können Sie problemlos zurückkehren.
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.
Mit der Schaltfläche "Einstellungen" können Sie bestimmte seitenspezifische Optionen ändern, z. B. den Titel, das ausgewählte Bild oder den Status.
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.
