Suche
Schließen Sie dieses Suchfeld.

WordPress Elementor-Tutorial | Eine Schritt-für-Schritt-Anleitung im Jahr 2024

Offenlegung von Partnern: In voller Transparenz - einige der Links auf unserer Website sind Affiliate-Links. Wenn Sie sie für einen Kauf verwenden, erhalten wir eine Provision ohne zusätzliche Kosten für Sie (überhaupt keine!).

Sie möchten mit Elementor beginnen und suchen nach einem WordPress Elementor-Tutorial? Ihre Suche endet hier. In diesem Artikel werde ich Sie über alles informieren, was Sie über Elementor wissen müssen.

Von der Installation bis zur Erstellung einer äußerst stilvollen Seite werden alle Ihre Zweifel ausgeräumt, wenn Sie den Artikel lesen. Ich versichere dir; die Lektüre wird nicht umsonst sein!

Sie benötigen jedoch ein Website-Builder-Plugin, um Ihrer Website eine professionelle Note zu verleihen.

Wie bekommst du es? Nun, ich benutze Elementor dafür. Mit Elementor kann ich ganz einfach per Drag-and-Drop eine professionelle Website erstellen. 

Neugierig, mehr über Elementor zu erfahren, dann schauen Sie sich meine detaillierten Informationen an Elementor-Rezension.

All diese Fragen habe ich im Blog für Sie behandelt:

Wie kann ich die Hintergrundfarbe eines Elements ändern?

Was ist ein Layout und wie verwende ich es?

Was ist ein Widget und wie füge ich es hinzu?

Welche anderen Tools bietet Elementor an?

Wie kann ich ein benutzerdefiniertes Widget erstellen?

Fazit vorab: –

Elementor, die Website-Builder-Plattform, bietet ein perfektes Design mit verschiedenen Themen, Add-ons und visuell gestalteten Formularen und berücksichtigt dabei jeden Teil Ihrer Designvisionen. Es verfügt über zahlreiche Designmöglichkeiten und bietet die Möglichkeit, jeden Teil der Website wie den Header, Beiträge und vieles mehr anzupassen.

Sie stellen Ihnen kostenlose Demonstrationen, Videos und Codes zur Verfügung, sodass Sie diese einfach kopieren und einfügen und die Wirkung auf Ihrer Webseite sehen können. Sie stellen mithilfe von CSS die für die Webseiten erforderlichen Stile und Effekte bereit.

Probieren Sie Elementor jetzt selbst aus.

So installieren Sie Elementor auf WordPress

Nun, es gibt zwei Möglichkeiten, wie Sie Elementor auf WordPress installieren können. 

  • Über die offizielle Website von Elementor

Gehen Sie zur offiziellen Website von Elementor und klicken Sie auf die Schaltfläche „Kostenloser Download“, die auf der Website angezeigt wird. 

WordPress Elementor-Tutorial

Sobald Sie auf die Schaltfläche „Kostenloser Download“ klicken, erscheint ein Popup-Fenster zum Abonnieren der Elementor-Website. Sobald Sie dies tun, beginnt der Download des Plugins automatisch.

Starten Sie den Download von Elementor

Sie finden eine heruntergeladene ZIP-Datei auf Ihrem Laptop/PC. Gehen Sie nun zu Ihrem WordPress-Dashboard und klicken Sie auf den Abschnitt „Plugins“ > „Neues Plugin hinzufügen“ > „Plugin hochladen“.

Laden Sie das Elementor-Plugin hoch

Wählen Sie die Elementor-Datei und laden Sie sie auf WordPress hoch.

Wählen Sie Elementor-Plugin

  • Über das WordPress-Dashboard

Sie können das Elementor-Plugin auch direkt über das WordPress-Dashboard installieren. Gehen Sie einfach auf Plugin und dann auf Neues Plugin hinzufügen

In der oberen rechten Ecke finden Sie eine Suchleiste. Geben Sie Elementor in die Suchleiste ein. Das allererste Ergebnis ist das, was Sie in Ihrem WordPress installieren müssen. Klicken Sie einfach auf „Installieren“ und warten Sie, bis das Plugin installiert ist. Aktivieren Sie das Plugin und Sie haben einen großartigen Website-Builder zur Bereitstellung bereit.

Installieren und aktivieren Sie Elementor

Nachdem Sie Elementor nun in Ihrem WordPress-Dashboard installiert haben, werfen wir einen Blick auf die Funktionen, die es bietet.

Elementor-Funktionen und ihre Verwendung beim Erstellen einer Webseite

Die Liste der Funktionen, die Elementor bietet, ist endlos, daher werde ich viele wichtige Funktionen von Elementor besprechen. Lesen Sie sie unbedingt durch und probieren Sie sie später aus.

Es gibt zwei Pläne für Elementor The Free und The Pro. Wie der Name beim Pro-Plan schon sagt, müssen Sie spielen, aber der kostenlose Plan bietet auch mehrere Funktionen.

Ich werde zunächst die Funktionen des Free-Plans besprechen, gefolgt von Pro.

Funktionen des kostenlosen Elementor-Plans

Unerlässliche Eigenschaften:

  • Drag and Drop

Die Drag-and-Drop-Funktion von Elementor ist sehr schnell und hilft Ihnen, Webseiten schneller zu gestalten. Von der Erstellung eines Webseitenlayouts bis hin zur Feinabstimmung kann alles durch einfaches Ziehen und Ablegen erledigt werden.

Sie müssen weder die Registerkarten wechseln noch die Seite wechseln, um Ihre Kopf- und Fußzeilen zu gestalten. Mit Elementor können Sie dies auf derselben Seite tun, auf der sich Ihre primäre Webseite befindet.

Sie können den Stil oder die Funktion, die Sie verwenden möchten, kopieren und einfügen und sogar duplizieren. Dies spart Ihnen Zeit, die gleiche Funktion immer wieder neu zu erstellen.

Mit der Suchleistenoption von Elementorkönnen Sie ganz einfach durch die Website navigieren und in Sekundenschnelle zum gewünschten Tab gelangen. Diese Funktion ist sehr nützlich, wenn Sie eine sehr lange Seite erstellen müssen.

Es gibt drei Möglichkeiten, Ihr Design zu speichern: Löschen und Erstellen einer Sicherungskopie. Sie können die von Ihnen erstellten Designs wiederholen/rückgängig machen. Dies gibt Ihnen die Möglichkeit, die Seite mit Ihren Beobachtungen gewissermaßen einem A/B-Test zu unterziehen. 

Sie können alle Überarbeitungen auf der Registerkarte „Überarbeitungen“ einsehen, d. h. Sie können einen Blick auf alle Arten von Designs werfen, die Sie bisher auf Ihrer Webseite ausprobiert haben, und auch eine frühere Version auswählen, wenn Ihnen Ihre aktuelle Webseite nicht gefällt. 

Möchten Sie viele verschiedene Funktionen ausprobieren und sehen, was funktioniert? Kein Problem mit Elementor; Sie können die Seite im Entwurfsmodus entwerfen, alles ausprobieren und die Seite später übernehmen, wenn Sie vollständig bereit sind, die Seite zu veröffentlichen.

So verwenden Sie die Elementor-Drag-and-Drop-Funktion

Alle Drag-and-Drop-Funktionen sind auf der linken Seite der Seite verfügbar, sobald Sie eine Seite erstellen.

Nachdem Sie eine Seite in WordPress erstellt und ihr einen Titel gegeben haben, klicken Sie einfach auf „Mit Elementor bearbeiten“, um zum Live-Editor von Elementor zu gelangen, der wie im Bild unten aussieht.

Verwendung der Drag-and-Drop-Funktion

Im zweiten Bild oben können Sie sich die Drag-and-Drop-Optionen auf der linken Seite der Seite ansehen. Es gibt viele Widgets, bei denen Sie einfach nach unten scrollen müssen, oder Sie können auch mit Hilfe der Suchleiste oben nach einem Widget suchen.

  • Design-Vorlagen

Mit Elementor erhalten Sie integrierte Designvorlagen. Nicht nur 5 oder 10, sondern Elementor bietet Ihnen über 100 Designvorlagen, die Sie kostenlos verwenden können, und mehr, wenn Sie auf die Pro-Version upgraden.

So wählen Sie die gewünschte Vorlage für die Elementor-Vorlagenbibliothek aus

Wenn Sie zum ersten Mal die Elementor-Builder-Seite öffnen, sehen Sie etwas in der Art wie unten gezeigt:

Das Bild stammt von der Elementor-Website und ist ziemlich selbsterklärend.

Elementor Vorlagenbibliothek

Sobald Sie auf die Option „Ordner“ klicken, wird das unten gezeigte Popup angezeigt.

Wählen Sie eine Vorlage aus der Bibliothek aus

  • Widgets

Es gibt unzählige Drag-and-Drop-Widgets, die mit Elementor geliefert werden. Einige von ihnen sind:

  • Innerer Abschnitt: Teilen wir einen Abschnitt in zwei Teile.
  • Überschrift: Fügen Sie dieses Feld in Ihre Webseite ein, um eine prägnante Überschrift einzufügen
  • Bild: Fügen Sie mithilfe dieses Widgets Bilder auf Ihrer Webseite ein
  • Texteditor: Geben Sie mithilfe eines Texteditor-Widgets Text in Ihre Webseite ein
  • Video: Sie können ein Video-Widget verwenden, um hochwertige Videos auf Ihrer Seite zu platzieren. Es wird das Benutzererlebnis verbessern
  • Schaltfläche: Call-to-Actions sind für fast alle Websites sehr wichtig. Mit Schaltflächen können Sie die Call-to-Actions auf Ihrer Seite platzieren und sie mit Ihrer Produkt-Landingpage verknüpfen.
  • Sternebewertung: Die Sternebewertung ist für jede E-Commerce-Website von Vorteil, um mehrere verschiedene Produkte, die sie anbietet, zu bewerten.
  • Trenner: Hilft Ihrer Webseite bei der Einrückung und generiert Leerraum, um die Benutzererfahrung zu verbessern.
  • Symbole: Mit dem Symbol-Widget können Sie einprägsame Symbole für soziale Medien sowie verschiedene Dienste einfügen, um Ihre Seite attraktiver zu gestalten.
  • Counter: Erstellen Sie einen Countdown-Timer für Ihre Produkte oder begrenzten Zusatzleistungen, um Dringlichkeit zu schaffen.
  • Erfahrungsberichte: Fügen Sie Erfahrungsberichte zu Ihren Produkten und Dienstleistungen hinzu, um Vertrauen bei Ihren Website-Besuchern aufzubauen.

Darüber hinaus gibt es viele weitere Widgets wie Bilderkarussell, Basisgalerie, Tabs, Shortcodes, HTML, Menüleiste usw. Stellen Sie sicher, dass Sie sich nach der Installation des Plugins auf WordPress alle Funktionen ansehen.

Schauen Sie sich einige der Widgets an, die Elementor unten im Bild hat.

So verwenden Sie Elementor-Widgets

Zur Verwendung von Elementor-Widgets:

Gehen Sie zum Dashboard von Elementor und schauen Sie auf der linken Seite nach. Es gibt eine Reihe von Widgets, die Sie per Drag & Drop auf Ihre Webseite ziehen und mit der Arbeit beginnen können.

So verwenden Sie Elementor-Widgets

  • Responsives Design und Bearbeitung

Da die Indexregel „Mobile First“ immer mehr ins Rampenlicht rückt, stellt Google sicher, dass die für Mobilgeräte optimierte Website bei Google nur einen höheren Rang einnimmt, und das Gleiche gilt nun auch für andere SERPs. 

Mit Elementor müssen Sie sich keine Sorgen um die Mobilfreundlichkeit machen, da alle Vorlagen, ob kostenlos oder kostenpflichtig, sowohl auf Mobilgeräte als auch auf Tablets und Desktops reagieren. Sie können auch bearbeiten, welche Funktionen Ihren Benutzern angezeigt werden, wenn sie über Mobilgeräte oder Desktops darauf zugreifen. 

Sie können ihnen auf beiden Geräten unterschiedliche Erlebnisse bieten. Diese Vorgehensweise wird jedoch nicht empfohlen, da sie bei Ihren Benutzern manchmal zu Verwirrung über die Marke führen kann.

So sehen Sie die mobile Reaktionsfähigkeit Ihrer Webseiten

Unten im Webseiten-Builder, in der unteren linken Ecke, sehen Sie drei Symbole, mit denen Sie Ihre Webseite auf dem Desktop, Tablet und Mobilgerät anzeigen können. Nach der Veröffentlichung Ihrer Website wird die Website für andere Benutzer genauso aussehen.

Überprüfen Sie die mobile Reaktionsfähigkeit Ihrer Website

Workflow-Funktionen:

  • Keine Kodierungspflicht

Für die Verwendung müssen Sie kein Experte sein oder auch nur ein wenig über Programmierkenntnisse verfügen Elementor. Alle oben genannten Widgets sind Drag-and-Drop-fähig und Sie können damit ganz einfach eine hochwertige und stilvolle Webseite erstellen. 

Der Elementor selbst übernimmt den Codierungsteil. Darüber hinaus wird der verwendete Code optimiert und gekürzt, sodass die Ladezeit Ihrer Webseite verkürzt wird – ein sehr wichtiger Faktor für das Ranking an der Spitze.

  • Navigatorleiste

Mit Hilfe der Navigation können Sie die von Ihnen gestaltete Struktur der Webseite, also die Abfolge Ihrer Seite und den Ablauf, erkennen. Sie können die Widgets bei Bedarf auch über die Navigatorleiste ändern, entfernen und duplizieren.

So verwenden Sie die Navigationsleiste

Um den Navigator zu verwenden, klicken Sie einfach mit der rechten Maustaste auf das Backend Ihrer mit Elementor geöffneten Webseite und klicken Sie auf Navigator. Es erscheint ein Popup, wie im Bild unten gezeigt.

So verwenden Sie die Navigationsleiste

  • Hotkeys

Hotkeys sind die Tastenkombinationen zu den Haupt-Widgets, die im Elementor-Dashboard vorhanden sind. Schauen Sie sich das Bild an, um einige der voreingestellten Hotkeys zu sehen.

Elementor-Hotkeys

  • Inline-Bearbeitungsfunktion

Mit Elementor müssen Sie Ihre Inhalte nicht an anderer Stelle schreiben und sie kopieren, einfügen und deren Stil bearbeiten. Sie können direkt im WordPress-Dashboard den gewünschten Stil eingeben und so wertvolle Zeit sparen.

Design-Merkmale

  • Globale Schriftarten

Mithilfe von Elementor können Sie mit nur einem Klick einen bestimmten Schriftstil für Ihre gesamte Website festlegen. Dabei spielt es keine Rolle, ob es sich um eine Überschrift, einen Absatz, ein Zitat oder sogar einen Aufruf zum Handeln handelt. 

  • Globale Farben

Ebenso können Sie bei der Einstellung der globalen Schriftart bei Bedarf die Farbe Ihres gesamten Website-Textes auf die gleiche einstellen.

  • Hintergrundverläufe

Mit der Farbverlaufsfunktion können Sie den Hintergrund, den Sie für jeden Block und sogar Ihre Homepage festgelegt haben, beleuchten. Diese Verlaufsfarben gelten für jede Seite Ihrer Website.

  • Hintergrundvideos

Mit Elementor können Sie Videos als Hintergrund verwenden. Videos im Hintergrund könnten Ihre Webseite wirklich zum Leuchten bringen.

So verwenden Sie Designfunktionen in Elementor

Alle oben genannten Funktionen sind leicht im Elementor-Dashboard zu finden und Sie können sie nutzen, indem Sie einfach darauf klicken und testen, was auf Ihrer Webseite gut aussieht.

  • Andere Eigenschaften
  • Wenden Sie die Hintergrundüberlagerung an
  • Diashow in den Hintergrund stellen
  • Erstellen Sie eine Leinwand, damit Ihre Seite lebendig aussieht
  • Nutzen Sie Mischmodi
  • CSS-Stylingfilter
  • Formteiler
  • Box Schatten
  • Icons
  • Exportieren Sie SVG-Symbole von anderen Websites

Layoutfunktionen

Sie können das Webseiten-Layout ändern und es mit verschiedenen Funktionen so optimieren, dass es gut aussieht Elementor Bietet beispielsweise Abschnittsbreite und -höhe, Spaltenbreite, Lücke und deren Position.

Sie können auch die Ränder und den Abstand anpassen, was eine sehr wichtige Funktion auf einer Webseite ist. 

Funktionen des Elementor Pro-Plans

Essentielles

Neben der kostenlosen Funktion bietet Elementor Pro zwei weitere Funktionen.

1. Popup-Builder

Sie können Pop-ups für die Anmeldung, für ein zeitlich begrenztes Angebot und auch Exit-Intent-Pop-ups erstellen, um Ihren Umsatz zu steigern und Ihre Seite attraktiver zu machen.

Die Funktion ist wie andere Widgets im Dashboard von Elementor vorhanden.

Mit dem Popup-Builder können Sie die folgenden Popups erstellen:

  • E-Mail-Abonnement
  • Pop-ups des Anmeldeformulars
  • Pop-ups für Werbe- und Verkaufsbanner
  • Lead Capture
  • Inhaltssperre und Pop-ups anzeigen
  • Ankündigungen
  • Exit Absicht
  • Pop-ups vom Typ „Willkommensmatte“.
  • Verwandte Produkte und Upsells

2. Theme-Builder

Mit Elementor Pro haben Sie die volle Kontrolle über alle Funktionen, die Sie auf Ihrer Website verwenden. Sie können die 404-Seiten gestalten und Ihre Benutzer auf die Seite Ihrer Wahl leiten. 

Sie können die Kopf- und Fußzeile auf derselben Seite verwalten, auf der Sie entwerfen. Mit der leistungsstarken WooCommerce-Integration können Sie auch Ihre Produktseiten optimieren.

Design-Merkmale

1. Benutzerdefinierte CSS

Mit jedem von Ihnen hinzugefügten Widget können Sie ein benutzerdefiniertes CSS-Snippet hinzufügen, um den Inhalt personalisierter und attraktiver zu gestalten. Um diese Funktion nutzen zu können, sollten Sie jedoch über gute CSS-Kenntnisse verfügen. 

Auch die Nutzung ohne Vorkenntnisse kann schief gehen. Wenn Sie also nicht über die entsprechenden Fähigkeiten verfügen, sollten Sie die Finger von der benutzerdefinierten CSS-Funktion lassen.

2. Bewegungseffekte

Sie können tolle Animationen hinzufügen und Ihrer Website einen Cartoon-Stil verleihen. Dies trägt dazu bei, eine bestimmte Zielgruppe anzulocken und kann manchmal sehr vorteilhaft sein. 

So verwenden Sie die Designfunktion in Elementor

Nun, es ist keine Raketenwissenschaft. Wie bei anderen Widgets können Sie im Dashboard-Bereich scrollen und danach suchen oder einfach den Widget-Namen in das Suchfeld eingeben.

Marketing

Diese Funktionen fehlen in der kostenlosen Version von Elementor.

  • Formular-Widget

Mit dem Elementor-Formularersteller können Sie verschiedene Änderungen vornehmen und Ihre Formulare interessant und attraktiv zum Ausfüllen gestalten.

  • Wählen Sie ganz einfach das gewünschte Layout und den gewünschten Abstand.
  • Über 10 Felder zur Auswahl, die Sie in Ihrem Formular haben möchten.
  • Wählen Sie aus zahlreichen Farben und Typografien, die zum Design und Farbschema der Webseite passen und passen.
  • Sie können auch dynamische Formulare erstellen
  • Wenn Sie mit dem Form Builder von Elementor ein Langformular benötigen, können Sie es erstellen und in mehrere Schritte aufteilen, damit die Benutzer es auf einfache Weise ausfüllen können.

Formular-Widget

  • Testimonial Karussell Widget

Testimonial Karussell Widget

  • Sie können die vorgefertigten Vorlagen verwenden, die mit der Pro-Version von Elementor geliefert werden, und ein beeindruckendes Testimonial-Karussell für Ihr Unternehmen erstellen, um mehr Conversions zu erzielen.
  • Passen Sie den Inhalt und das Layout des Karussells an. Behalten Sie die volle Kontrolle über das Aussehen und die Ausrichtung des Karussells.
  • Die in Elementor Pro bereitgestellten Anpassungsvorlagen sind einfach zu verwenden und bieten sowohl demjenigen, der sie erstellt, als auch demjenigen, der sie sieht, ein benutzerfreundliches Erlebnis.

So verwenden Sie das Testimonial-Karussell-Widget in Elementor Pro

  • Suchen Sie in der Dashboard-Suchleiste nach „Testimonial Slider“. Öffnen Sie das Widget und Sie können sofort mit der Erstellung des Sliders beginnen. Es stehen zwei Skins zur Auswahl: Standard und Blase. Wählen Sie je nach Styling das Modell aus, das Sie benötigen.
  • Richten Sie das Layout Ihrer Testimonials aus und finalisieren Sie es. Dies kann über die fünf Optionen „Bild inline“, „Bild gestapelt“, „Bild oben“, „Bild links“ und „Bild rechts“ erfolgen.
  • Wählen Sie den Stil und das Design entsprechend Ihrem Farbschema und fügen Sie Inhalte zum Schieberegler hinzu.
  • Sie können die Folien auf dem Schieberegler automatisch abspielen lassen, ihn anhalten, wenn die Benutzer darauf klicken, oder eine bestimmte Zeit für die Folienwechseloption festlegen. Ich bevorzuge die Option „Interaktionspause“ für meine Testimonial-Slider.
  • Aktionslinks

Mit Elementor Pro können Sie Ihre Website mit WhatsApp, Google Kalender und vielen weiteren Apps verbinden.

So verwenden Sie Aktionslinks in Elementor Pro

  • Gehen Sie zum Elementor Dashboard und Suche nach Linkfeldern, einem der Pro-Widgets von Elementor.
  • Wählen Sie die dynamische Option, die in der oberen rechten Ecke des Widget-Popups verfügbar ist.
  • Wählen Sie unter der Aktionsoption die Kontakt-URL aus.
  • Fügen Sie alle vom Widget abgefragten Details hinzu, und schon können Sie Ihre Kontaktplattform in Ihre Website integrieren.

Theme Builder-Funktion

  • Dynamischer Inhalt
  • Nutzen Sie die einwandfreie Integration, um eine großartige dynamische Webseite zu erstellen.
  • Sie können Ihrer Webseite dynamische Farben, Bilder, sogar Website-Logos und vieles mehr hinzufügen.
  • Das Beste daran ist, dass Sie das Layout der von Ihnen erstellten dynamischen Inhalte speichern und überall auf der Website verwenden können.

So verwenden Sie dynamische Inhalte mit Elementor Pro

Ich werde das Beispiel der Verwendung eines Texteditors und der Dynamisierung des Inhalts zeigen. Stellen Sie sicher, dass Sie alle anderen Widgets sehen und probieren Sie sie aus.

  1. Öffnen Sie einen Texteditor und geben Sie den gewünschten Text auf Ihrer Webseite ein. Klicken Sie nun auf das Symbol in der oberen rechten Ecke des Editors, wie im Bild unten gezeigt.
  2. Wenn Sie auf das Symbol klicken, wird eine Liste mit Optionen angezeigt, die über ein Dropdown-Menü angezeigt werden. Diese werden in Post, Archiv und Site unterteilt. Wählen Sie die gewünschte Option und beginnen Sie sofort mit der Arbeit.
  3. Um nun den Titel Ihrer Seite weiter zu bearbeiten, sollten Sie auf ein Symbol klicken, bei dem es sich um einen Schraubenschlüssel handelt, wie im Bild unten gezeigt.

In den im Bild oben angezeigten Feldern, also vor, nach und Fallback, müssen Sie den Titel vor der Änderung eingeben, einen Titel, der nach der Änderung stehen sollte, und konsistenten Inhalt, der anstelle des dynamischen Inhalts angezeigt wird wenn es nicht vor und nach dem Titel steht.

Weitere Theme-Builder-Funktionen in Elementor Pro

  • Anzeigebedingung: Sie können entscheiden, was und wo angezeigt werden soll
  • Kopf- und Fußzeile: Durch einfaches Ziehen und Ablegen können Sie die Kopf- und Fußzeile Ihrer Webseite anpassen
  • Sticky-Header: Fügen Sie einen Sticky-Header zu bestimmten Seiten oder für Ihre gesamte Website weltweit hinzu.
  • 404-Seite: Entwerfen Sie eine benutzerdefinierte 404-Seite und leiten Sie Ihre Benutzer und Ihr Publikum auf die gewünschte Seite weiter.

Themeninhalte

  • Navigationsmenüleisten-Widget
  • Es gibt viele Gestaltungsoptionen, aus denen Sie für Ihre Navigationsleiste wählen können.
  • Diese Stile reagieren auf alle Geräte und Sie können sie in der mobilen Version sehen und bei Bedarf die erforderlichen Änderungen vornehmen.
  • Sie können Ihre Navigationsleiste mit Animations- und Hover-Effekten animieren. Es erleuchtet Ihre Seite wirklich.
  • Sie können wählen, wie Sie das Menü platzieren möchten, z. B. horizontal oder vertikal, es im Vollbildmodus anzeigen und vielleicht die Hamburger-Option ausprobieren.

So verwenden Sie das Navigationsmenüleisten-Widget

  1. Gehen Sie zum Dashboard und suchen Sie nach der Menüleiste
  2. Sie können Ihr Menü je nach Stil, der gut zu Ihrer Website passt, auf horizontal, vertikal oder als Dropdown-Menü einstellen.
  3. Sie können unter jedem Menüinhalt auch eine einfache oder doppelte Linie hinzufügen, um den Text über das Dashboard hervorzuheben und sogar die Farbe zu ändern.
  • Such-Widget

Das Such-Widget verfügt über drei Skins: das Standard-, das Minimal- und das Vollbild-Such-Widget.

Sie können das Design der Suchleiste sowie die Schaltfläche anpassen, um sie an das Design Ihrer Webseite anzupassen.

So verwenden Sie die Suchleiste mit Elementor Pro

Gehen Sie zum Elementor-Dashboard und suchen Sie nach dem Suchleisten-Widget, wählen Sie den gewünschten Stil aus, Standard, Vollbild oder Minimal, und ändern Sie die Typografie und Farben der Suchleiste entsprechend Ihrem Farbthema.

  • Weitere Funktionen für Themeninhalte, die Sie mit Elementor Pro erhalten
  • Beitrags-Widget: Ändern Sie das Aussehen der Seitenleiste, indem Sie Ihre letzten Beiträge dort platzieren.
  • WordPress-Kommentar-Widget: Mit diesem Widget können die Leser Kommentare zu dem von Ihnen verfassten Beitrag abgeben.
  • Portfolio-Widget: Wenn Sie viele Portfolios anzeigen möchten, verwenden Sie dieses Portfolio-Widget, um sie in einem innovativen und attraktiven Stil anzuzeigen.

Alle diese Funktionen sind im Haupt-Elementor-Dashboard verfügbar, ähnlich wie bei anderen Widgets. Schauen Sie sich unbedingt alle diese Funktionen an.

Integration

Die leistungsstärkste Funktion, die Sie mit Elementor Pro erhalten, ist die Leistungsfähigkeit der Integration. Schauen wir uns an, welche Plugins und Tools in Elementor integriert werden können und wie man sie verwendet.

  • MailChimp

Mailchimp ist die führende Marketing-Automatisierungssoftware für E-Mail-Marketing. Die von Mailchimp bereitgestellten Funktionen sind einzigartig und überzeugend. Mit der Integration von Mailchimp und Elementor Pro können Sie Wunder bewirken.

Aber wie richtet man Mailchimp mit Elementor ein? Werfen Sie einen Blick unten. Alle Ihre Zweifel werden ausgeräumt.

Schritte zur Integration von Mailchimp mit Elementor in 4 einfachen Schritten

  1. Legen Sie zuerst die Mailchimp-API fest. Gehen Sie dazu in die Elementor-Einstellung und öffnen Sie die Registerkarte „Integration“.
  2. Jetzt müssen Sie den Artikel, das Formular oder einen anderen Inhalt auswählen, den Sie per E-Mail bewerben möchten.
  3. Nachdem Sie den Inhalt ausgewählt haben, klicken Sie in der auf Ihrem Bildschirm angezeigten Liste der Integrationstools auf „Mailchimp“.
  4. Legen Sie die API fest, und Sie können entweder eine Standard-API verwenden oder sie in eine benutzerdefinierte ändern, Ihre Zielgruppe auswählen, die erforderliche Gruppe auswählen und je nach Nische optimale Tags für E-Mail-Marketing verwenden. Nachdem Sie alle diese Optionen ausgewählt haben, können Sie das Feldzuordnungsfeld aktivieren und schon kann es losgehen.
  • ActiveCampaign

Wie Mailchimp ist auch ActiveCampaign eine Marketing-Automatisierungssoftware. Es hilft Ihnen, durch Marketing- und Remarketing-Techniken mit Ihrer Zielgruppe in Kontakt zu treten.

So integrieren Sie aktive Kampagnen mit Elementor Pro

  1. Legen Sie zuerst die ActiveCampaign-API fest. Gehen Sie dazu in die Elementor-Einstellung und öffnen Sie die Registerkarte „Integration“.
  2. Jetzt müssen Sie den Artikel, das Formular oder einen anderen Inhalt auswählen, den Sie per E-Mail bewerben möchten.
  3. Nachdem Sie den Inhalt ausgewählt haben, klicken Sie in der auf Ihrem Bildschirm angezeigten Liste der Integrationstools auf ActiveCampaign.
  4. Stellen Sie sicher, dass Sie alle genannten Felder ausfüllen, z. B. E-Mail, Vorname, Nachname und Name der Organisation.
  • HubSpot

HubSpot ist ein komplettes Marketingpaket, das Ihre Website auf ein neues Niveau bringt. Es bietet Ihnen CRM, Automatisierung, Vertriebsservice und viele Integrationen, mit denen Sie arbeiten können.

So integrieren Sie HubSpot mit Elementor Pro

  1. Laden Sie das Plugin HubSpot All-In-One Marketing aus dem Plugin-Bereich von WordPress herunter. Melden Sie sich im Portal an und prüfen Sie, ob die Einstellungen korrekt sind.
  2. Anschließend können Sie im HubSpot-Menü Ihr bestehendes Elementor-Konto mit HubSpot verknüpfen und schon können Sie mit einem Kraftpaket für die Marketingleistung loslegen.
  • Zapier

Zapier ist ein Automatisierungstool, das Ihnen Zugriff auf über 1000 weitere Webintegrationen bietet, um Sie bei allen Funktionen zu unterstützen, die Sie auf Ihrer Website benötigen.

So integrieren Sie Zapier mit Elementor Pro

Zapier wird hauptsächlich zur Integration Ihres Elementor-Formulars verwendet.

Gehen Sie dazu zum Elementor-Formular-Widget und nehmen Sie wie gezeigt Änderungen an dem Formular vor, das Sie in Zapier integrieren möchten.

Sie müssen einen Hook von Zapier kopieren und dann Webhook im Formular öffnen und den Hook dort einfügen, um Ihr Formular mit Zapier zu verknüpfen.

Sobald Sie fertig sind, können Sie das Formular mit Zapier testen und schon kann es losgehen.

  • Andere Integrationen
  • Adobe TypeKit: Um den gewünschten Schriftstil zu erhalten.
  • Zwietracht: Zur Einreichung im Forum
  • Erhalten Antwort: Fügen Sie mehrere Besucher gleichzeitig zu einer Liste hinzu
  • ReCaptcha V3: Fügen Sie Ihren Formularen und Webseiten zusätzliche Sicherheit hinzu
  • Facebook-SDK: Verwalten und beantworten Sie alle Kommentare, die Benutzer zu Ihren Facebook-Beiträgen hinterlassen
  • Locker: Geben Sie Ihrem Team eine Plattform zum Reden
  • Benutzerdefinierte Symbolbibliotheken: Wählen Sie Symbole aus unzähligen verfügbaren Optionen aus und verwenden Sie sie kostenlos mit Elementor Pro

Elementor Pro-Preise

Der Preisplan von Elementor Pro

User Review 

User-Meinungen User-Meinungen User-Meinungen

Quick-Links:

FAQs zum WordPress Elementor-Tutorial

✅Sind die Integrationen mit der kostenlosen Version von Elementor verfügbar?

Sind die Integrationen mit der kostenlosen Version von Elementor verfügbar?

🤷‍♀️ Wie sieht es mit dem Kundenservice von Elementor aus?

Sie können sich sowohl für den kostenpflichtigen als auch für den kostenlosen Plan für den Kundenservice von Elementor anmelden. Elementor behandelt alle seine Kunden auf die gleiche Art und Weise und nach dem gleichen Verfahren. Sie können sie per E-Mail kontaktieren oder unter der gebührenfreien Nummer anrufen. Es empfiehlt sich, ihnen zunächst eine E-Mail zu schicken, da der Techniker Sie dann je nach Schwere des Problems anruft.

👍Was ist die bevorzugte kostenlose Elementor- oder Pro-Version?

Es wäre hilfreich, wenn Sie mit der kostenlosen Version von Elementor beginnen, die grundlegenden Webseiten erstellen und Ihre Website zu einem Ganzen machen würden. Sobald Sie feststellen, dass Ihre Website viel Verkehr erhält, können Sie zu Elementor Pro wechseln, da dies Türen zu endlosen Möglichkeiten öffnet und Ihnen mit seinen leistungsstarken Integrationen auch beim Produktmarketing hilft.

⁉️Wie einfach ist die Verwendung von Elementor / Ist Elementor für Anfänger geeignet?

Elementor ist der am einfachsten zu verwendende Seitenersteller, bietet aber auch die meisten kostenlosen Funktionen. Im Wesentlichen ist es die ideale Do-it-yourself-Option für alle, die ohne Programmier-, HTML- oder CSS-Kenntnisse beeindruckende Website-Designs erstellen möchten.

☑️Ist Divi besser als Elementor?

Sowohl Elementor als auch Divi bieten ausgefeilte Funktionen zur Seitenerstellung. Elementor ist kostenlos erhältlich und eine PRO-Edition ist für 49 US-Dollar erhältlich. Divi kostet 89 US-Dollar pro Jahr und ermöglicht Ihnen die Erstellung einer unendlichen Anzahl von Websites. Während der Divi Builder intuitiv ist, lässt sich mit Elementor schneller arbeiten. Wir empfehlen Elementor.

👍Welcher Beaver Builder oder Elementor ist besser?

Dem Beaver Builder fehlen einige der ausgefeilteren Anpassungsfunktionen, die in Elementor Pro und anderen Lösungen wie Divi Builder verfügbar sind, aber er glänzt in anderen. Die Benutzeroberfläche lädt schnell und zeichnet sich durch einen unkomplizierten, leicht verständlichen Stil aus. Dies beschleunigt den Prozess der Erstellung einzigartiger Layouts. Wir empfehlen Elementor.

📓Was ist das beste Add-on für Elementor?

Es gibt eine Menge, aber wenn Sie ein Elementor-Benutzer sind und die Funktionalität des Kernseitenerstellers mit kreativen Komponenten und Widgets erweitern möchten, ist Essential Addons einen Versuch wert. Darüber hinaus bietet Essential Addons einen umfassenden Kundensupport in Form von Live-Chat und Ticket-Support, der Sie bei der Lösung etwaiger Probleme unterstützt.

Lesen Sie auch:

Fazit: WordPress Elementor Tutorial 2024

Eine der führenden Webseiten-Design-Software, Elementorist eine zuverlässige und lebendige Plattform zum Aufbau Ihrer Website. Von der Erstellung einer einfachen Blog-Seite bis hin zur Erstellung einer stilvollen und atemberaubenden Produkt-Landingpage ist mit Elementor alles möglich.

Die Pro-Version von Elementor verfügt über unzählige Funktionen, mit denen Sie arbeiten und Ihre Website auf ein neues Niveau heben können. Es gibt Ihnen die Freiheit, auch die vollständige Kontrolle über Ihre Website zu haben.

Sie müssen kein Programmierer sein, um Elementor zu verwenden. Die Verwendung von Elementor ist so einfach wie das Erlernen des Klickens und Ziehens und Ablegens von Funktionen.

Ja, es braucht etwas Zeit, um alle Funktionen zu sehen und zu wissen, welche Funktionen für Ihre Website nützlich sind, aber die Zeit, die Sie Elementor widmen, wird sich auf jeden Fall lohnen, das kann ich Ihnen versichern.

Probieren Sie Elementor also aus und teilen Sie mir Ihre Erfahrungen mit, indem Sie unten einen Kommentar hinterlassen! 

Beliebte Elementor-Videos

Elementor in den sozialen Medien

WordPress Elementor-Tutorial

GESAMTURTEIL

Eine der führenden Webseiten-Design-Software, Elementor, ist eine zuverlässige und äußerst lebendige Plattform, auf der Sie Ihre Website erstellen können. Von der Erstellung einer einfachen Blog-Seite bis hin zur Erstellung einer stilvollen und atemberaubenden Produkt-Landingpage ist mit Elementor alles möglich.
8.5

Aus 10 heraus

Vorteile

Nachteile

BEWERTUNG:

Preis: $

Diksha Dutt

Als Absolventin des IIMC spricht Diksha gerne über Selbstwachstum und Online-Lernplattformen. Diksha hat eine Leidenschaft für Bildung und Unternehmertum und ist seit über einem Jahrzehnt in beiden Bereichen tätig. Ihr Ziel ist es, anderen dabei zu helfen, fundiertere Entscheidungen über die besten Online-Ressourcen, Kurse und Bildungsplattformen zu treffen. Sie schreibt über Online-Lernplattformen und Online-Kurse auf Megablogging.org, wo sie die besten Ressourcen für verschiedene Fähigkeitsniveaus und Ziele überprüft und empfiehlt. Wenn Diksha nicht arbeitet, liest sie gerne Bücher, spielt Schach und reist mit ihrem Mann und ihren beiden Kindern. Du kannst ihr folgen LinkedIn und Facebook.

1 Gedanke zu „WordPress Elementor Tutorial | Eine Schritt-für-Schritt-Anleitung im Jahr 2024“

  1. Sehr toller Beitrag. Ich bin zufällig auf Ihr Blog gestoßen und wollte erwähnen, dass es mir wirklich gut gefallen hat
    Durchsuchen Sie Ihre Blogbeiträge. Schließlich werde ich Ihren Feed abonnieren
    und ich hoffe, dass du bald noch einmal schreibst!

Hinterlasse einen Kommentar

Elementor
0 Shares
Tweet
Teilen
Teilen
Pin