So verwenden Sie Elementor: Ultimativer Leitfaden für Anfänger

Wenn wir auf das letzte Jahrzehnt zurückblicken, war das Erstellen einer Website, nichts für irgendjemanden, ein Albtraum. Um eine Website zu erstellen, mussten die Leute mindestens eine Programmiersprache, ein Framework, ein Datenbankverwaltungssystem und andere technische Dinge lernen. Außerdem war die Aufgabe zum Erstellen von Websites nur für Entwickler mit hohen Programmierkenntnissen verfügbar.

Diese Zeiten sind vorrüber! Nach der Verfügbarkeit von WordPress und seinen beliebten Seitenerstellern wie Elementor ist das Erstellen einer Website zweifellos zur Aufgabe aller geworden. Jetzt können sogar Sie eine Website mit WordPress und Elementor erstellen, egal ob Sie Anwalt, Lehrer, Student oder Unternehmer ohne Programmierkenntnisse sind.

Alles, was Sie brauchen, ist pure Entschlossenheit, Ausdauer und die Mentalität, etwas Erstaunliches zu schaffen. Jetzt ist die Millionen-Dollar-Frage – wissen Sie, wie man Elementor in WordPress verwendet?

Sieh mich nicht so an! Wenn Sie es nicht wissen, fangen wir von jetzt an gemeinsam an und suchen nach Richtlinien aus diesem Artikel. Da es sich um einen Artikel über Elementor handelt, der jeden einzelnen Abschnitt und jede Einstellung von Elementor berührt. Also lasst uns anfangen!

Inhaltsverzeichnis

• Machen Sie sich mit Elementor vertraut
• Was Elementor zum beliebtesten Page Builder für WordPress macht
• Einführung des Elementor-Dashboards
• So verwenden Sie Elementor mit WordPress
• So verwenden Sie die erweiterten Funktionen von Elementor
• Vor- und Nachteile der Verwendung von Elementor Page Builder auf Ihrer WordPress-Site
• Top-Elementor-Add-Ons von Drittanbietern zur Verbesserung Ihres Designs
• Kostenloses Tutorial: Erstellen Sie Ihre E-Commerce-Website mit Elementor und Happy Addons
• Elementor-FAQ
• Zu dir hinüber

Machen Sie sich mit Elementor vertraut

Elementor verfügt über eine Vielzahl von Funktionen und Funktionen. Als Anfänger müssen Sie diese Dinge zunächst wissen, sonst kann Ihnen die Arbeit mit Elementor schwer erscheinen.

Lernen Sie die Grundfunktionen von Elementor kennen

Mit Elementor können Sie alles erstellen, von ganzen Websites bis hin zu bestimmten Zielseiten. Sie können Verkaufsseiten, Werbeseiten und sogar benutzerdefinierte Formulare entwerfen. Wenn Sie es sich vorstellen können, kann Ihnen diese Plattform bei der Gestaltung helfen.

Damit Sie dies tun können, wird Elementor mitgeliefert;

• Theme Builder: Der Theme Builder hilft Ihnen, jeden Ihrer Website-Teile wie Kopfzeile, Fußzeile, Produktseite und mehr direkt im Editor zu gestalten.

• Popup Builder: Hilft Ihnen, Popups zu erstellen, die auffallen und vollständig mit dem Rest Ihres Website-Designs übereinstimmen.

• Über 80 Widgets: Jedes Widget in Elementor bietet erweiterte Designanpassungen, sodass Sie keine zusätzlichen Plugins installieren müssen, um Ihr Design fertigzustellen.

• Über 100 vorgefertigte Vorlagen und über 300 Blöcke: Sie können aus über 100 ganzseitigen WordPress-Vorlagen und 300 Blöcken wählen, um Ihr Design innerhalb weniger Augenblicke zu bereichern.

Elementor Free gegen Elementor Pro

Es ist offensichtlich, dass Elemento Pro mehr Widgets, vorgefertigte Blöcke, Vorlagen und Premium-Funktionen bietet. Allerdings ist es nur mit der kostenlosen Version von Elementor möglich, eine Website von Grund auf neu zu erstellen.

Als Anfänger empfehlen wir, zuerst Elementor kostenlos auszuprobieren und dann Elementor Pro zu wählen, wenn es für Sie wirklich notwendig ist.

Was Elementor zum beliebtesten Page Builder für WordPress macht

Elementor ist ein Drag-and-Drop-Seitenersteller für WordPress. Dieses Plugin hilft Ihnen, schöne Seiten mit einem visuellen Editor zu erstellen. Dieses WordPress-Plugin ist eine All-in-One-Lösung, mit der Sie jeden Teil Ihres Website-Designs auf einer einzigen Plattform steuern können.

Grundsätzlich ist Elementor immens beliebt, weil es Menschen ohne technischen Hintergrund befähigt, Websites zu entwerfen, die genauso schön aussehen wie die von Profis.

Die Verwendung von Elementor zum Erstellen einer Website wird:

• Sparen Sie Zeit und helfen Sie Ihnen, Ihre Websites schneller zu entwerfen und zu iterieren.
• Ermöglicht Ihnen die Integration von Widgets von Drittanbietern, sodass Sie eine abgerundetere und vollständigere Website erstellen können, um Ihren Besuchern ein positives Online-Erlebnis zu bieten.
• Reduzieren Sie die Komplexität Ihrer Websites, beseitigen Sie Fehler und schaffen Sie einen einfacheren Wartungsprozess, wenn es um Updates und Tests geht.
• Sparen Sie Geld und vereinfachen Sie die Kosten, damit Sie den Preis für ein Projekt besser einschätzen können.

Für WordPress-Entwickler ist es immer noch eine erstklassige Plattform mit Skriptoptimierung, benutzerdefinierten Attributen und Rollback-Versionen.

Um ein besseres Verständnis zu bekommen, haben wir einen Vergleich zwischen den besten WordPress-Seitenerstellern angestellt. Lass es uns überprüfen!

Elementor vs. Divi vs. Beaver Builder – Vergleichstabelle

Abgesehen von Elementor gibt es einige beliebte WordPress-Seitenersteller. Unter diesen Seitenerstellern sind Divi und Beaver die härtesten Konkurrenten für Elementor. Aus diesem Grund haben wir eine Vergleichstabelle erstellt, um herauszufinden, ob Elementor besser ist als diese Seitenersteller.

Welcher Seitenersteller ist Ihrer Meinung nach nach Analyse der Vergleichstabelle besser für Anfänger geeignet? Es ist Elementor, richtig! Aus diesem Grund haben wir uns für Elementor gegenüber anderen beliebten Seitenerstellern entschieden. Es ist also an der Zeit, sich mit dem Seitenersteller von Elementor vertraut zu machen.

Einführung des Elementor-Dashboards

Um Zugriff auf das Elemnetor-Dashboard zu erhalten, müssen wir zunächst Elementor auf unserer WordPress-Site installieren. Die Installation von Elementor ist kinderleicht. Befolgen Sie die folgenden Schritte, um Elementor in wenigen Augenblicken zu installieren und zu aktivieren.

Wie installiert und aktiviert man Elementor in WordPress?

• Schritt 01: Gehen Sie zu Ihrem WordPress-Dashboard > Plugins > Neu hinzufügen

• Schritt 02: Geben Sie „Elementor“ in das Suchfeld ein und finden Sie Elementor aus dem Suchergebnis. Klicken Sie dann auf die Schaltfläche Installieren .

• Schritt 03: Klicken Sie abschließend auf die Schaltfläche Aktivieren , um Elementor zu aktivieren und zu verwenden.

Elementor-Einstellungen

Nachdem Sie den Elementor-Seitenersteller aktiviert haben, gelangen Sie zur unten gezeigten Benutzeroberfläche. Oder gehen Sie zu Ihrem WP-Dashboard > Elementor , um diese Schnittstelle zu erhalten.

Einstellungen :

• Allgemein: Auf der Registerkarte Allgemein der Elementor-Einstellungen können Sie die Beitragstypen auswählen, die Sie verwenden möchten, sowie Standardfarben und -schriften deaktivieren.

• Stil: Sie finden Optionen, die das Festlegen von standardmäßigen generischen Schriftarten, Haltepunkten für Tablets und Mobilgeräte sowie ein Kontrollkästchen zum Aktivieren der Bild-Lightbox umfassen.

• Erweitert: Sie finden die Option zum Festlegen der CSS-Druckmethode, zum Wechseln der Loader-Methode bei der Fehlerbehebung bei Serverproblemen und zum Aktivieren der SVG-Unterstützung.

Rollenmanager :

• Verschiedene Arten von Benutzern können je nach ihrer Rolle unterschiedliche Zugriffsebenen auf Ihre Website haben. Wenn Sie die Pro-Version haben, können Sie den Zugriff der Benutzer auch nur auf Inhalte beschränken.

Werkzeuge:

• Allgemein: Mit den allgemeinen Tools können Sie das CSS auf Ihrer Website neu generieren und Ihre Elementor-Bibliothek bei Bedarf manuell synchronisieren.

• URL ersetzen: Auf der Registerkarte URL ersetzen können Sie, wie der Name schon sagt, die URLs ersetzen, wenn Sie die Site-Adresse geändert haben.

• Wartungsmodus: Auf der Registerkarte Wartungsmodus erhalten Sie alle Steuerelemente für den Wartungsmodus der Website, die Sie jemals benötigen werden.

• Font Awesome: Damit können Sie auf über 1.500 erstaunliche Font Awesome 5-Symbole zugreifen und schnellere Leistung und Designflexibilität genießen.

Elementor-Dashboard

• Um Zugriff auf das Elementor-Dashboard zu erhalten, gehen Sie zu WordPress Dashboard > Seiten > Neu hinzufügen .

• Geben Sie dann einen Seitentitel ein und wählen Sie die Option Elementor Canvas aus der Dropdown-Liste der Vorlage auf der rechten Seite.

• Klicken Sie abschließend auf die Schaltfläche „ Mit Elementor bearbeiten “ und beginnen Sie mit dem leistungsstärksten Seitenersteller zu arbeiten.

• Wenn Sie jedoch eine spannende Seite mit Elementor bearbeiten möchten, gehen Sie zu Alle Seiten > Über eine Seite schweben .

• Dann erscheint eine Schaltfläche „ Bearbeiten mit Elementor “. Klicken Sie nun auf die Schaltfläche und beginnen Sie mit der Bearbeitung Ihrer Seite.

Hier ist es. Unser lang erwartetes Elementor-Dashboard . Lassen Sie uns hineinfahren.

Dies ist die Schnittstelle, auf der Sie Ihre Seite mit Drag-and-Drop-Elementen gestalten und die Live-Vorschau Ihrer Website sehen können.

• Oben links finden Sie ein Hamburger-Symbol für einige Standard- und globale Einstellungen.

• Rechts oben finden Sie eine Wähltaste, um zum Hauptfenster zurückzukehren

• Danach erscheint ein Suchfeld, um aufgelistete und erforderliche Widgets schnell zu finden

• Im linken Bereich finden Sie alle hilfreichen Module

• Unten finden Sie einige nützliche Symbole für Seiteneinstellungen, Schnellnavigation, Verlauf, Reaktionsmodus und Vorschau.

• Auch hier erhalten Sie eine Schaltfläche „Veröffentlichen“, um Ihre Seite zu veröffentlichen oder Entwürfe/Vorlagen zur späteren Verwendung zu speichern.

Außerdem können Sie das Modulpanel verschwinden lassen, indem Sie auf das Pfeilzeichen klicken, das auf der rechten Seite des Panels erscheint.

Auf diese Weise erhalten Sie eine vollständige Vorschau Ihrer Seite.

Bonuspunkt: Sie können Ihr Elementor-Erlebnis mit Tools von Drittanbietern wie HappyAddons verbessern

Elementor ist zweifellos ein leistungsstarker Seitenersteller für WordPress. Um es jedoch leistungsfähiger zu machen und Ihnen zusätzliche Flexibilität beim Entwerfen Ihrer Website zu geben, spielen Add-Ons von Drittanbietern ihre Rolle.

HappyAddons ist ein solches Drittanbieter-Addon, das Ihnen helfen kann, futuristische und Next-Level-Designs zu erstellen. Mit über 200.000 aktiven Installationen ist HappyAddons eines der beliebtesten Addons, das nahtlos mit Elementor zusammenarbeitet. Es kommt mit,

• Über 100 Widgets
• Über 200 vorgefertigte Blöcke
• Domänenübergreifendes Kopieren und Einfügen
• Unbegrenztes Verschachteln von Abschnitten
• Bildmaskierung
• Fröhlicher Partikeleffekt
• 500+ Zeilensymbol
• Gleiche Höhe und viele mehr

Wenn Sie HappyAddons mit Elementor verwenden, können Sie Ihrer Website im Handumdrehen ein erstklassiges Aussehen verleihen.

So verwenden Sie Elementor mit WordPress

Wie bereits erwähnt, enthält Elementor einen Drag-and-Drop-Seitenersteller und einen Themenersteller. Also, jetzt lernen wir, wie man diese beiden Builder verwendet und schließlich eine Vorlage mit Elementor erstellt.

1. So verwenden Sie den Elementor Page Builder
2. So verwenden Sie den Elementor-Theme-Builder
3. So erstellen Sie ein Popup in Elementor

Unser Tutorial beginnt also im Grunde mit diesem Abschnitt. Früher haben wir Elementor kennengelernt, jetzt werden wir wirklich damit arbeiten.

So verwenden Sie den Elementor Page Builder

Um Ihnen zu zeigen, wie Sie den Elementor-Seitenersteller verwenden, erstellen wir jetzt eine Homepage für eine Reise-Website . Befolgen Sie die folgenden Schritte und versuchen Sie, Ihre eigene Homepage in Ihrem Editor zu entwerfen, um sie schnell zu erlernen.

Schritt 01: Erstellen Sie eine neue Seite

• Gehen Sie zu Ihrem WordPress-Dashboard > Seiten > Neu hinzufügen

• Geben Sie dieser Seite einen Namen. Hier habe ich es Homepage genannt.
• Stellen Sie die Standardvorlage auf „ Elementor Canvas “, da wir die gesamte Seite mit Elementor erstellen möchten. Sie können Elementor Full Width auswählen, mit dem Sie die gesamte Seite ohne das Menü anpassen können.
• Veröffentlichen Sie danach die Seite aus der rechten Seitenleiste. Sie können es auch als Entwurf behalten.
• Klicken Sie auf „ Mit Elementor bearbeiten “ und Sie werden zum Seitenersteller von Elementor weitergeleitet.

Schritt 02: Wählen Sie ein geeignetes Template für Ihre Reise-Homepage

Elementor wird mit vielen kostenlosen und professionellen vorgefertigten Vorlagen geliefert, Sie müssen die Seiten nicht einmal von Grund auf neu erstellen. Sie können einfach eine vorhandene Vorlage auswählen, um Ihre Reise zu starten.

• Klicken Sie auf die Schaltfläche Vorlage hinzufügen.

• Sie erhalten eine Reihe vorgefertigter Vorlagen, aus denen Sie beliebige Vorlagen auswählen und nach Ihren Wünschen anpassen können.
• Nachdem Sie sich entschieden haben, welche Sie verwenden möchten, klicken Sie auf die Option Einfügen .

Schritt 03: Fügen Sie Ihrer Homepage eine Kopfzeile hinzu

Nach dem Einfügen der Vorlagen ist die Seite fertig und Sie können sie für Ihre Reise-Website anpassen.

• Wir beginnen damit, der Seite eine Kopfzeile hinzuzufügen, die den Namen und den Slogan unserer Website anzeigt. So können Sie das einfach per Drag & Drop und ein wenig Styling tun.

Header hilft dabei, Ihre Markenidentität sofort anzuzeigen, sobald Ihre Besucher Ihre Website betreten. Nach dem Anpassen der Kopfzeile werden wir nun den Hauptteil der Homepage anpassen.

Schritt 04: Markieren Sie Ihre Hoteleinrichtungen

Wenn Sie mit dem Header fertig sind, ist es an der Zeit, den Hauptteil der Homepage zu gestalten. Das sind Hoteleinrichtungen wie das, was Sie in Ihrem Hotel anbieten, wenn jemand in Ihrem Hotel übernachten möchte.

• Sie können beliebige Bilder aus Ihrem lokalen Speicher hochladen oder das vorhandene Bild durch bereits hochgeladene Bilder aus dem Medienbereich ersetzen. Folgen Sie dazu der folgenden GIF-Datei.
• Sie können Höhe, Breite, Deckkraft, Rand, Polsterung und alles über die Bearbeitungsoptionen anpassen.
• Das Hinzufügen von Schaltflächen, Text und Beschreibung ist über die Bearbeitungsoption möglich.

Schritt 05: Fügen Sie ein Video und ein Testimonial hinzu

• Sie können ein Video hinzufügen, um zu zeigen, wie Ihre Umgebung aussieht und wie die Leute Ihr Resort genießen, wenn sie hier sind.
• Das Hinzufügen eines Testimonials ist eine kluge Entscheidung, um die Leute wissen zu lassen, was die Meinung Ihrer Kunden über Sie ist.

Schritt 06: Fügen Sie ein Kontaktformular hinzu

• Fügen Sie ein Kontaktformular hinzu, damit Ihr Besucher Sie kontaktieren kann. Legen Sie Ihre Kontaktnummern wie Telefonnummer, E-Mail oder WhatsApp-Nummer auf der Kontaktseite fest, die Ihren Besuchern hilft, Sie anzurufen, wenn sie Fragen haben.
• Sie können auch eine Google-Karte hinzufügen, damit die Leute Sie finden können, wo Sie herkommen.

Schritt 07: Machen Sie es plattformübergreifend reaktionsfähig

• Stellen Sie sicher, dass Ihre Seite vollständig responsiv ist und auf allen Geräten richtig aussieht. Klicken Sie dazu auf die Option Responsive Mode .
• Nachdem die Anpassung abgeschlossen ist, klicken Sie auf die Schaltfläche Aktualisieren .

Übersicht unserer Homepage

Hier ist die letzte Ansicht unserer Homepage, die wir gerade erstellt haben. Und so können Sie den Elementor-Seitenersteller verwenden, um sofort beliebige Seiten zu erstellen, einschließlich Homepage, Kontaktseite, Feature-Seite oder jede andere Seite.

So verwenden Sie den Elementor-Theme-Builder

Elementor Theme Builder ist ein Game-Changer für alle, die mit Seitenerstellern vertraut sind, da Sie damit benutzerdefinierte Kopfzeilen, Fußzeilen und andere dynamische Inhalte für Ihre Website erstellen können. Es erlaubt Ihnen sogar, Aspekte Ihres WordPress-Designs zu überschreiben, sodass Sie das, was funktioniert, beibehalten und einfach die gewünschten Änderungen vornehmen können!

In diesem Abschnitt zeigen wir Ihnen, wie Sie mit Elementor Theme Builder schöne Header erstellen können.

Hinweis: Elementor Theme Builder ist in seiner Pro-Version verfügbar. Die kostenlose Version kommt mit einer sehr eingeschränkten Funktion.

Schritt 01: Wählen Sie einen Vorlagentyp

• Gehen Sie zu Ihrem WordPress-Dashboard > Vorlagen > Theme Builder .
• Klicken Sie dann auf die Schaltfläche Neu hinzufügen, oder Wenn Sie bereits eine Überschrift gesehen haben, die Ihnen gefallen hat, können Sie sie importieren, um sie als Ausgangspunkt zu verwenden.

• Nachdem Sie auf die Schaltfläche Neu hinzufügen geklickt haben, wird ein Popup-Fenster vor Ihnen angezeigt. Dort sehen Sie ein Dropdown-Menü, aus dem Sie einen Vorlagentyp auswählen können.
• Wählen Sie einen Tempeltyp, hier wählen wir Header.
• Dann gib ihm einen Namen.
• Klicken Sie abschließend auf die Option Vorlage erstellen .

Hinweis: Elementor Free enthält nur Abschnitts- und Seitenvorlagen. Die Pro-Version enthält mehrere zusätzliche Vorlagenkategorien, darunter globale Widgets, Kopfzeilen, Fußzeilen, einzelne Vorlagen und Archive.

Schritt 02: Passen Sie Ihre Kopfzeile in Elementor an

Sie können Ihre eigene Kopfzeile entwerfen oder eine der vorgefertigten aus der Elementor-Vorlagenbibliothek auswählen.

• Klicken Sie auf die Option Vorlage hinzufügen, um eine vorgefertigte Kopfzeile in Ihren Editor zu laden.

Wenn Ihnen dieser Schritt bekannt vorkommt, liegt das daran, dass es sich um denselben Editor handelt, mit dem wir zuvor eine ganze Seite erstellt haben. Nutzen Sie diese Erfahrung jetzt hier, um einen Header für Ihre Website zu erstellen.

Nachdem Sie Ihre Kopfzeile angepasst und auf die Schaltfläche „ Veröffentlichen “ geklickt haben, können Sie bei Bedarf Bedingungen dafür festlegen, wo Ihre Kopfzeile angezeigt werden soll.

Hinweis: Sie können denselben Schritten folgen, um auch Fußzeilen für Ihre Website zu erstellen. Stellen Sie einfach sicher, dass Sie „Fußzeile“ als Vorlagentyp auswählen, wenn Sie Ihre Fußzeile mit dem Elementor Theme Builder entwerfen.

So erstellen Sie ein Popup in Elementor

Das Erstellen eines Popups mit Elementor ist super einfach. Sie können Ihr Popup mit der visuellen Oberfläche von Elementor entwerfen, wo alles Drag & Drop ist. Ihre Arbeit wird einfacher, da Elementor auch vorgefertigte Popup-Vorlagen anbietet. Sie können einfach eine Vorlage auswählen, veröffentlichen und den Auslöser festlegen. Das ist es!

Hinweis: Elementor Theme Builder ist nur für die Pro-Version verfügbar.

Schritt 01: Fügen Sie eine neue Datei hinzu

• Gehen Sie zu Ihrem WordPress-Dashboard > Vorlagen > Popups. Klicken Sie dann oben auf die Schaltfläche Neu hinzufügen.

• Geben Sie Ihrem Popup einen Namen und klicken Sie auf die Schaltfläche VORLAGE ERSTELLEN .

• Wählen Sie eine Popup-Vorlage aus, die Sie verwenden möchten. Bewegen Sie die Maus darüber und klicken Sie auf die Schaltfläche Einfügen , um zum Elementor-Editor zu gelangen.

Hinweis: Wenn Sie das Popup lieber von Grund auf neu erstellen möchten, können Sie einfach die Vorlagenbibliothek schließen, um den Elementor-Editor zu öffnen.

Schritt 02: Passen Sie das Popup an

Nachdem Sie ein vorgefertigtes Popup in Ihren Editor eingefügt haben, ist es an der Zeit, dieses Popup anzupassen. Im Elementor-Editor können Sie das Popup anpassen. Sie können den Standardinhalt durch Ihren eigenen Inhalt ersetzen.

Wir haben Ihnen bereits gezeigt, wie Sie eine vorgefertigte Elementor-Vorlage anpassen können.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche VERÖFFENTLICHEN .

Schritt 03: Stellen Sie Anzeigebedingungen und Trigger ein

Im nächsten Schritt werden Sie aufgefordert, Anzeigebedingungen und Trigger festzulegen. Es besteht auch die Möglichkeit, erweiterte Regeln festzulegen.

• Anzeigebedingungen: Bestimmen Sie, auf welchen Seiten das Popup auf Ihrer gesamten Website angezeigt wird. Sie können das Popup so einstellen, dass es auf der gesamten Website, bestimmten Seiten, bestimmten Beiträgen, bestimmten Kategorien usw. angezeigt wird.

• Trigger: Ein Trigger ist eine Aktion, um das Popup anzuzeigen. Elementor unterstützt 6 Triggertypen: Beim Laden der Seite, Beim Scrollen, Beim Scrollen zum Element, Beim Klicken, Nach Inaktivität, Absicht zum Verlassen der Seite.

• Erweiterte Regeln: Die Voraussetzungen müssen erfüllt sein, damit das Popup erscheint. Sie können beispielsweise festlegen, dass das Popup angezeigt wird, wenn ein Besucher über eine Suchmaschine oder eine bestimmte UR auf Ihre Website gelangt. Elementor Popup Builder selbst verfügt über 7 erweiterte Regeloptionen, aus denen Sie auswählen können.

Wenn Sie das Popup anzeigen möchten, wenn ein Benutzer auf eine Schaltfläche klickt, öffnen Sie die Registerkarte Trigger und aktivieren Sie die Option On Click . Klicken Sie dann auf Speichern & SCHLIESSEN .

Schritt 04: Verknüpfen Sie das Popup mit einer Seite

Erstellen Sie eine neue Seite/einen neuen Beitrag und bearbeiten Sie ihn mit Elementor (Sie können auch einen vorhandenen bearbeiten).

• Fügen Sie ein Schaltflächen-Widget hinzu, indem Sie es aus dem linken Bedienfeld in den Zeichenbereich ziehen. Wenn Sie eine vorhandene Seite bearbeiten, die bereits eine Schaltfläche enthält, klicken Sie auf das Schaltflächen-Widget, um es in einen Bearbeitungsmodus zu versetzen.

• Legen Sie in der Option Schaltfläche auf der Registerkarte Inhalt den Link auf Popup fest. Dazu können Sie im Link -Bereich auf Dynamisch klicken.

• Klicken Sie auf das Schraubenschlüssel-Symbol im Popup -Feld und wählen Sie das soeben erstellte Popup aus. Geben Sie den Popup-Namen ein, um Ihr Popup zu finden.

Klicken Sie nach der Bearbeitung der Seite auf Veröffentlichen/Aktualisieren .

Bevor Sie auf die Schaltfläche „ Veröffentlichen/Aktualisieren “ klicken, können Sie zunächst eine Vorschau Ihrer Seite anzeigen, um zu sehen, ob das Popup bereits funktioniert.

So verwenden Sie die erweiterten Funktionen von Elementor

In diesem Abschnitt konzentrieren wir uns hauptsächlich auf zwei verschiedene Themen. Sie sind,

• So passen Sie die WooCommerce-Produktseite in Elementor an
• So importieren Sie eine Elementor-Vorlage aus einer JSON-Datei

Also lasst uns den Ball ins Rollen bringen.

So passen Sie die WooCommerce-Produktseite in Elementor an

Bevor Sie Ihre WooCommerce-Produktseite anpassen können, müssen Sie WooCommerce in Ihrem WordPress-Dashboard installieren und aktivieren. Sie müssen Ihrer Website auch einige Produkte hinzufügen. Dazu können Sie Hilfe von dieser WooCommerce-Setup-Anleitung (Schritt-für-Schritt) suchen.

Nach der Einrichtung können Sie Ihre Produktseite gestalten. Folge diesen Schritten.

Schritt 1: Erstellen Sie die Einzelproduktvorlage

• Gehen Sie in Ihrem WordPress-Dashboard zu Elementor > Meine Vorlagen .
• Klicken Sie auf die Schaltfläche Neu hinzufügen.
• Wählen Sie Einzelprodukt als Vorlagentyp und klicken Sie auf Vorlage erstellen .

Schritt 2: Wählen Sie eine vorgefertigte Produktseitenvorlage oder erstellen Sie eine von Grund auf neu

• Die Elementor-Bibliothek wird geladen.
• Wählen Sie als Nächstes eine vorgefertigte Produktseitenvorlage aus oder erstellen Sie eine von Grund auf neu.
• Wenn Sie eine vorgefertigte Produktseitenvorlage wählen, passen Sie sie gemäß Ihren Designfähigkeiten an (Sie haben jetzt die Erfahrung, ein Design anzupassen, da wir direkt vor diesem Abschnitt gezeigt haben, wie eine Seite angepasst wird).

Schritt 03: Fügen Sie verschiedene Produkt-Widgets hinzu, um Ihre Seite anzupassen

• Jetzt ist es an der Zeit, die Elemente zu erstellen, aus denen Ihre Produktseite bestehen wird. Folgen Sie dem Screenshot unten, um Ihre Produktseite zu gestalten. Sie können jedes gewünschte Widget hinzufügen oder entfernen.

Schritt 04: Veröffentlichen Sie die Seite

• Wenn Sie bereit sind, eine Vorschau Ihrer Seite anzuzeigen, klicken Sie auf das Augensymbol im linken unteren Bereich.
• Klicken Sie auf Einstellungen und wählen Sie dann das Produkt aus, das Sie anzeigen möchten.
• Um Ihre Seite zu veröffentlichen, klicken Sie unten links auf die grüne Schaltfläche „Veröffentlichen“.

Es könnte wie das folgende Bild aussehen.

So importieren Sie eine Elementor-Vorlage aus einer JSON-Datei

Mit Elementor können Sie eine Vorlage aus einer JSON-Datei importieren. Dafür stehen Ihnen zwei Möglichkeiten zur Verfügung. Lassen Sie uns lernen, wie sie funktionieren!

1. Über die Vorlagenbibliothek

• Klicken Sie auf die Schaltfläche Vorlage hinzufügen.

• Klicken Sie auf das Pfeilsymbol – Vorlage importieren .
• Klicken Sie nun auf die Schaltfläche DATEI AUSWÄHLEN, um die JSON-Datei auszuwählen, die Sie importieren möchten.

• Sie finden die soeben importierte Vorlage auf der Registerkarte Meine Vorlagen in der Vorlagenbibliothek.

Laden Sie die Vorlage neu, indem Sie auf das Symbol „Neu laden“ klicken, wenn die soeben importierte Vorlage nicht angezeigt wird. Bewegen Sie die Maus über eine Vorlage und klicken Sie auf die Schaltfläche Einfügen , um sie in die Elementor-Leinwand zu laden.

2. Über den Vorlagenmanager

• Gehen Sie in Ihrem WordPress-Dashboard zu Vorlagen > Gespeicherte Vorlagen .
• Klicken Sie auf die Schaltfläche Vorlagen importieren.
• Klicken Sie dann auf die Schaltfläche Datei auswählen, um die JSON-Datei auszuwählen.
• Klicken Sie abschließend auf die Schaltfläche Jetzt importieren, um es zu importieren.

Dies sind die beiden Möglichkeiten, eine Elementor-Vorlage aus einer JSON-Datei zu importieren. Sie können eine der beiden Möglichkeiten wählen, um Ihre Arbeit zu erledigen.

Vor- und Nachteile der Verwendung von Elementor Page Builder auf Ihrer WordPress-Site

Dass alles auch seine dunklen Seiten hat, liegt auf der Hand. Aber in Bezug auf Elementor ist es nicht wirklich die dunkle Seite. Stattdessen können wir sagen, dass es einige Einschränkungen gibt, die im Laufe der Zeit verbessert werden könnten. Was sind diese?

Lassen Sie uns vorher die Vorteile auf einen Blick überprüfen.

Vorteile der Verwendung von Elementor in WordPress

• Es ist ein kostenloses Plugin! Die meisten Benutzer können ihre Websites vollständig ausbauen, ohne auf die Pro-Version upgraden zu müssen.
• Für ein kostenloses Plugin hat es eine sehr breite Palette von Funktionen. Der Funktionsumfang der kostenlosen Version konkurriert mit vielen kostenpflichtigen Plugins.
• Mit dem Echtzeit-Editor können Sie Änderungen an Ihrer Website vornehmen und sehen, was in Echtzeit passiert, sodass Sie nicht ständig zwischen mehreren Bildschirmen hin und her wechseln müssen.
• Sie können mehrere Versionen Ihrer Website, Ihres Desktops, Mobilgeräts und Tablets bearbeiten und anzeigen und an jeder dieser Versionen eindeutige Änderungen vornehmen.

Nachteile der Verwendung von Elementor in WordPress

• Elementor ist ein leistungsstarker Editor, aber bei all der Flexibilität und den Anpassungsoptionen kann es schwierig sein, alles richtig zu machen.
• Manchmal haben Ihre Seiten Ebenen mit verschiedenen Inhaltsüberlagerungen, und es kann schwierig und zeitaufwändig sein, den Bereich zu finden, den Sie bearbeiten möchten.
• Wenn Sie Ihre Website mit Elementor erstellen, müssen Sie das Plugin installiert lassen, da Sie sonst alle Ihre Designs und Anpassungen verlieren, die Sie vorgenommen haben.

Top-Elementor-Add-Ons von Drittanbietern zur Verbesserung Ihres Designs

Add-Ons von Drittanbietern sind das Kraftpaket von Elementor. Obwohl Elementor mehr als 80 fantastische Elemente anbietet, ist es sehr wahrscheinlich, dass Sie etwas noch Fortgeschritteneres und Einzigartigeres wollen. Genau aus diesem Grund haben sich Drittentwickler entschieden, die Elementor-Funktionalitäten zu erweitern und ihre eigenen Elementor-Add-Ons zu entwickeln.

Abgesehen davon erhalten Sie mit den Add-Ons viele Spezialelemente, z. B. erweiterte Preisgestaltung, Team, soziale Elemente, kreative Elemente, Formular-Styling-Elemente, Countdown usw.

Infolgedessen erkennt Elementor sie nun offiziell als seinen Mitwirkenden an, indem es sie auf der offiziellen Seite von Elementor präsentiert. Darunter finden Sie hier eine Liste der besten Elementor-Add-Ons von Drittanbietern, die Sie beim Entwerfen Ihrer WordPress-Website verwenden können.

1. Happy Addons: Enthält mehr als 100 Widgets und mehr als 200 Blöcke, sodass Sie die volle Freiheit erhalten, Ihre Website in kürzerer Zeit und mit weniger Budget zu gestalten.
2. Premium-Addons für Elementor: Es bietet mehr als 55 hochgradig anpassbare wesentliche Elementor-Addons und -Widgets, mehr als 300 vorgefertigte Elementor-Vorlagen, die Ihnen helfen, eine Website in kürzerer Zeit und mit Leichtigkeit zu entwerfen.
3. Exklusive Add-ons für Elementor: Eine Sammlung von über 700 vorgefertigten Blöcken und über 10 verwendbaren Vorlagen hilft Ihnen, Ihre Websites in kürzerer Zeit ohne Programmierung zu erstellen.
4. PowerPack für Elementor: Es bietet über 60 kreative Elementor-Widgets und -Erweiterungen, um Ihr Elementor-Erlebnis zu verbessern.

Diese Addons geben Ihnen die Möglichkeit, Ihr Website-Design mit seinen erstaunlichen Funktionen und Layouts zu verbessern. Außerdem können Sie mit den Elementor-Erweiterungen eine besondere Stimmung erzeugen.

Kostenloses Tutorial: Erstellen Sie Ihre E-Commerce-Website mit Elementor und Happy Addons

Das Erstellen einer E-Commerce-Website mit Elementor ist super einfach. Und wenn Sie HappyAddons mit Elementor mischen, macht es mehr Spaß, eine Website zu entwerfen. Es ist so etwas wie die grenzenlose Flexibilität, nach unseren Anforderungen zu gestalten. Lassen Sie uns prüfen, wie wir unsere E-Commerce-Website mit Elementor und HappyAddons ganz einfach gestalten können.

Hier sind die Voraussetzungen zum Erstellen Ihrer E-Commerce-Website:

1. Wählen Sie Ihren Domainnamen und Ihren Webhosting-Plan
2. Installieren Sie WordPress und WooCommerce
3. Elementor installieren
4. Endlich HappyAddons installieren (Free + Pro)

05: Wählen Sie eine E-Commerce-Vorlage

• Gehen Sie zu Ihrem WordPress-Dashboard > Seiten > Neu hinzufügen
• Geben Sie dieser Seite einen Namen.
• Stellen Sie die Standardvorlage auf „ Elementor Canvas “, da wir die gesamte Seite mit Elementor erstellen möchten. Sie können Elementor Full Width auswählen, mit dem Sie die gesamte Seite ohne das Menü anpassen können.
• Veröffentlichen Sie danach die Seite aus der rechten Seitenleiste. Sie können es auch als Entwurf behalten.
• Klicken Sie auf „ Mit Elementor bearbeiten “ und Sie werden zum Seitenersteller von Elementor weitergeleitet.

• Klicken Sie auf das HappyAddons-Zeichen, um eine vorgefertigte Vorlage für Ihre E-Commerce-Site hinzuzufügen.

• Wählen Sie eine vorgefertigte Vorlage und klicken Sie auf die Option Einfügen .

06: Passen Sie die Vorlage an

Der gesamte Anpassungsprozess ist derselbe, den Sie im vorherigen Abschnitt – Verwendung von Elementor Page Builder – gezeigt haben. Befolgen Sie die gleichen Schritte, um Ihr Design fertigzustellen.

Sie können das Logo, das Farbschema, die Navigationslinks, den Text der Website und alle anderen gewünschten Funktionen ändern. Sie können auch die Elementor- und Happy Addons-Widgets verwenden, um Ihrer Website bestimmte Funktionen hinzuzufügen.

Schritt 07: Veröffentlichen Sie die Seite

Sobald Sie mit dem Design, der Benutzeroberfläche und der Funktionalität Ihrer Website vollkommen zufrieden sind, ist es an der Zeit, sie live zu veröffentlichen.

• Um eine Vorschau der Site anzuzeigen, klicken Sie auf das Symbol.
• Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen/Aktualisieren.
• Klicken Sie auf „Ansehen“, um die veröffentlichte Seite anzuzeigen.

Elementor-FAQ

Zu dir hinüber

Die Verwendung von Elementor in WordPress ist eigentlich nicht so kompliziert. Es könnte mehr Spaß machen, wenn Sie eine umfassende Anleitung wie dieses Schritt-für-Schritt-Tutorial haben.

Befolgen Sie einfach diese Anleitung, üben Sie weiter, um Verbesserungen zu erzielen, und bereiten Sie ein geistiges Setup vor, mit dem Sie der Maestro von Elementor sein werden. Das ist alles, was Sie brauchen, um Elementor zu verwenden und in wenigen Augenblicken eine WordPress-Website zu erstellen.

Wenn Sie bei der Verwendung von Elementor auf Komplikationen stoßen oder Vorschläge zu dieser Anleitung zur Verwendung von Elementor in WordPress haben, teilen Sie uns dies über das Kommentarfeld unten mit. Viel Glück!