Landingpage mit dem Elementor Plugin

Landingpage mit dem Elementor Plugin

Wie ich Landingpages mit dem Elementor Plugin erstelle

Als ich das ersten Mal versuchte, eine Landingpage (Zielseite) für mein Geschäft zu machen, muss ich zugeben, dass ich gekämpft habe. Ich hatte keine Ahnung, wo und wie ich tatsächlich anfangen soll oder was ich wirklich zu tun habe. Ich verbrachte Wochen mit der Suche nach verschiedenen WordPress-Themen, erforschte die Webseiten der Mitbewerber nach Plugins und Ideen. Kaufte verschiedene E-Books, Kurse, Plugins und zahlte viel Lehrgeld. Nicht nur Monetär sondern auch Zeitlich.
Und dann fand ich den Elementor Page Builder für WordPress. Dieses Live WordPress Plugin ist ein fantastisches Werkzeug für Unternehmer und es hilft, die meist Furcht einflößende Aufgabe zu meistern, die perfekte Landungsseite komplett simpel und schmerzlos zu gestalten. Und das mit einer unglaublich einfach zu bedienenden Oberfläche. Zudem sind keine Fähigkeiten erforderlich, HTML Code zu schreiben. Besonders die Tatsache, dass es völlig kostenlos ist, hat mich begeistert. Bevor ich es dann heruntergeladen habe, informierte ich mich auf YouTube und schaute mir Videos an. Allerdings sind die meisten auf Englisch und da hat man als Senior so seine Schwierigkeiten.

Anpassen Ihrer Landingpage

Elementor erlaubt Ihnen, und das ist das wirklich besondere, vollen Zugriff über das Design Ihrer Website zu haben. Ich empfehle Ihnen, sich zuerst einen spielerischen Überblick zu verschaffen. Schauen Sie sich zu allererst alle Optionen an, die Ihnen jetzt offen stehen, welche Styles Sie verwenden können und welche Einstellungen jetzt verfügbar sind. Ein weiteres fantastisches Merkmal von Elementor ist die Tatsache, dass es nahtlos mit nahezu jedem Theme funktioniert und auf jeder Seite Ihres Blogs arbeiten kann.

Mein Favoriten Theme ist “GeneratePress” ein kostenloses WP-Theme das aber erstaunlich flexibel ist. Weiter Infos habe ich hier beschrieben.
Durch die Verwendung von Elementor können Sie sowohl die eingebauten Widgets als auch die aller Drittanbieter anpassen, die Sie verwenden können. Sie können Spalten, Abstand, Ränder, Kopf- und Fußzeilen anpassen sowie zusätzliche Funktionen wie Tabs, Bildergalerien und sogar eine Google Map-Funktion hinzufügen.

Einfache Bearbeitung

Sobald Sie sich einen kleinen Überblick verschafft haben, ist es Zeit, mit der Gestaltung Ihrer erste Landingpage zu beginnen. Sie können natürlich ebenso Ihre vorhandenen Seiten bearbeiten oder einige der enthaltenen Elementor-Vorlagen verwenden.
Wie Sie bereits bemerkt haben, können Sie Ihre Website in der gleichen Weise wie vorher gestalten. Aber jetzt können Sie einfach per Drag & Drop Ihre Multimedia-Elemente auf Ihre Seite platzieren. Dies ist eine Million Mal einfacher als es vorher war und gibt Ihnen eine größere Kontrolle darüber, wo und wie Sie Ihre Inhalte positionieren.
Sie werden auch die zahlreichen Schaltflächen und Widgets bemerken, die jetzt für Sie verfügbar sind. So haben Sie noch mehr Möglichkeiten, Ihre Landingpage benutzerfreundlich und gut aussehen zu lassen . Sie können alles von Text- und Bildgröße, Schriftarten, Layouts und Zugriff auf Hunderte und Hunderte von Widgets bearbeiten.

Visual Content ist ein wesentliches Element für eine erfolgreiche Landingpage

Du hast auch die Möglichkeit, deinen eigenen Inhalt hochzuladen und mit Elementor zu bearbeiten und zu zuschneiden. Als ich meine Website erschuf, hatte ich nicht die Zeit oder das Budget, um selbst zu fotografieren oder einen Fotografen anzumieten, um qualitativ hochwertige Bilder für meine Seite zu machen.
Eine fantastische Online-Seite, die ich mir bei dieser Frage gleich notiert habe, war Pixabay. Auf dieser Website können Sie auf Tausende von kostenloser Bilder zugreifen, die Sie als User direkt auf Ihrer Website verwenden können. Und das, wirklich kostenlos. Alle Fotos auf der Website sind unter dem Creative Commons Act veröffentlicht, was bedeutet, dass sie kein Urheberrecht beachten müssen, so dass Sie diese verteilen, ändern, verwenden oder sogar verkaufen können, ohne den ursprünglichen Besitzer bezahlen zu müssen.

Elementor Visual Content

Außerdem ist dies eine großartige Technik, die von Online-Unternehmen verwendet wird, um ihren Leser auf ihre Seiten festzuhalten, beispielsweise mit Infografiken. Um Ihnen zu helfen, Ihre eigenen Infografiken zu erstellen, gibt es eine Reihe von Tools, die Sie online verwenden können, wie z.B. wie Canva.
Ein weiterer Weg vieler erfolgreichen Unternehmen ist, ihre Leser durch die Verwendung von Videos auf ihren Websites zu halten. Ein tolles Werkzeug, um Ihnen bei der Erstellung dieser Videos zu helfen ist Screecast-o-Matic. Die Leute wollen schöne leicht zu konsumierende Häppchen an Inhalten, die sie leicht aufnehmen und auf Ihrer Webseiten zeigen können, wie bspw. Videos. Mit dieser Online-Video-Bearbeitungs-Plattform können Sie leicht atemberaubende Videos für Ihre Website erstellen und unterstützt Video-Auflösungen des ganzen Bildschirms. Und das ganue GRATIS für Videos biz zu 15 Minuten Dauer.
Sowohl mit Elementor als auch mit kostenlosen Online-Content-Erstellungswerkzeugen können Sie eine attraktive und effektive Landingpage erstellen.

Anpassbare Optionen für die ganze Website

Das größte Feature, das Elementor mir gibt, war die Fähigkeit einfach vieles mit drag und drop machen zu können. Und zudem die große Anzahl von anpassbaren Optionen, die mir jetzt zur Verfügung stehen. Früher war ich mit Text-Widgets sowie Tabellen erstellen beschäftigt gewesen und versuchte schön und ordentlich Layouts auszurichten. Dieses Problem wurde dank Elementor beseitigt.
Das Beste an diesem Plug-In ist, dass man es nicht nur auf Ihrer Landingpage (Zielseite) benutzen muss, man kann es auf allen Seiten Ihrer Webseite nutzen. Dies bedeutet, dass Sie die gleiche saubere Funktionalität und Stil für Ihre gesamte Website bekommen und so Ihrer Website besser funktioniert und aussieht als je zuvor.

Vergiss nicht, dass nur Content King ist

Wenn Sie einen Textinhalt für Ihrer Website erstellen, egal ob auf der Zielseite oder in Form eines Blogposts, ist es wichtig, dass Sie sich daran erinnern, es Sie richtig zu machen. Jeder Fehler oder schlecht strukturiert Sätze und die Leute werden in Sekunden von der Seite verschwunden sein. In meiner persönlichen Erfahrung habe ich viele tolle Werkzeuge gefunden, um dabei zu helfen, den Inhalt perfekt zu machen.
Wenn Sie beispielsweise Online-Plattformen wie Heimarbeit-online.de oder Nebenjob.de verwenden, können Sie Ihre schriftlichen Inhalte hochladen und einreichen und von guten Schriftstellern überprüfen lassen. Außerdem ist das WordPress-Plugin Yoast ein weiteres nützliches Werkzeug, das neben diesen Korrekturlesen verwendet werden kann, um Ihnen bei der Optimierung Ihrer Inhalte für Suchmaschinen zu helfen.

Ellementor Text-Editor-Widget

Fazit:

Viele Unternehmer kämpfen heute darum die Zeit zu finden, um mehr über WordPress und die genauen und komplizierten Einzelheiten des Website-Design zu lernen. Ob Ihr Hosting ein Blog oder ein Online-Shop ist, Sie haben bestimmt wichtigere Dinge um die Ohren, um die Sie sich Sorgen machen. Elementor wurde entwickelt, um die gesamte Website-Erstellung , die heutzutage einfach Teil Ihres Unternehmens sein muss, problemlos und erschwinglich zu machen.
Jetzt, wo Sie anfangen, die Vorteile die Elementor ihnen bietet verspüren und jetzt entdecken, was das für Ihre Website bedeuten kann, beginnen Sie augenblicklich selbst das für sich zu nutzen und Sie werden rasch erfahren was Sie schaffen können.

Elementor 2.0 ist da

Elementor 2.0 ist da

Die Einführung von Blöcken - Der schnellste Weg zur Erstellung von WordPress-Webseiten

Elementor 2.0 ist da
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?time_continue=1&v=VRoPdyk97mg

Wir stellen vor: #elementor Blocks, eine neue, flexible Möglichkeit, #WordPress-Seiten zu erstellen.

Wir freuen uns, #Elementor Blocks vorzustellen, bereits vorgefertigte Sektionsvorlagen, die einfach zu einer kompletten und schönen Website oder Landingpage kombiniert werden können.

Denke bei den Blöcke an Legosteine. Sie wählen die relevanten Blöcke aus – beginne mit den Heros (Helden), den Dienstleistungen (Services), einem Testimonial (testimonial)  und den anderen Teilen Deiner Seite, und dann passt Du jeden einzelnen an, damit er zu Deiner Website passt.

Die Arbeit mit einer solch vollständigen Seitenvorlage ist großartig, aber manchmal möchtest Du nicht, dass die gesamte Seite für Dich voreingestellt ist. Mit den Blocks erhältst Du die Bequemlichkeit vorgefertigter Layouts und die Flexibilität der einzelnen Zusammenstellung und Auswahl der einzelnen Abschnitte.

elementor-blocks-library

Wie es funktioniert

Brauchen Sie eine Heldensektion? Vielleicht ein Empfehlungsschreiben? Sortieren Sie durch die Liste der relevanten Blöcke und finden Sie denjenigen, der am besten zu Ihnen passt.

Wir haben alle Elemente einer Seite identifiziert und kategorisiert und Ihnen eine breite Palette von Blöcken zur Verfügung gestellt.

Und so funktioniert es

Wenn Sie auf’Vorlage hinzufügen’ klicken, sehen Sie die Registerkarte’Blöcke’. Hier können Sie die verschiedenen verfügbaren Blöcke durchsuchen und filtern, indem Sie den gewünschten auswählen.

Anstatt mit einem leeren Abschnitt zu beginnen, können Sie einen Block auswählen, um Ihren Abschnitt mit Inhalt zu füllen. Dann können Sie es anpassen und zu Ihrem eigenen machen. Jeder Block ist mit Blick auf Einfachheit und Unabhängigkeit gebaut, was dem Anwender das Zusammenfügen der verschiedenen Blöcke erheblich erleichtert.

vid_gif_1

Für Anfänger und Profis gleichermaßen geeignet

Blöcke sind nicht nur ein neues Feature, sie stellen einen alternativen Workflow dar, der sowohl für Anfänger als auch für professionelle Webdesigner, die Websites für ihren Lebensunterhalt erstellen, nützlich sein kann.

Für Anfänger es ermöglicht Dir, das zu erstellen, was Du willst – Anfängern fehlt es manchmal an Erfahrung, um einen notwendigen Teil einer Seite zu erstellen. Sie wissen, dass ihre Landingpage einen Kontaktformularbereich benötigt, sie wissen nur nicht, wie man ihn erstellt. Bei Blocks geht es nur darum, den richtigen Block auszuwählen, ihn einzufügen und den Inhalt ein wenig zu optimieren.

Für professionelle Designer, es ermöglicht durch Blöcke einen schnelleren Workflow – Blöcke sind einfach und unabhängig. Dies macht es einfach, verschiedene Blöcke miteinander zu kombinieren. Sobald Du einen bestimmten Block hinzugefügt hast, kannst Du den Block ganz einfach duplizieren, ziehen, löschen oder ändern, ohne die anderen Bereiche der Seite zu beeinflussen.

Schnellerer Workflow

Die Verwendung von Blöcken kann einen echten, psitiven Einfluss auf Deinen Workflow haben.

Bei richtiger Anwendung kannst Du einen schlanken Prozess entwickeln, der so aussieht:

  • Erzeugen von Basis-Elementen
  • Erstellen von Seiten mit Blöcken
  • Anpassen jedes Blocks
  • Speichern Deiner neuen benutzerdefinierten Blöcke als Abschnittsvorlagen.
  • Wiederverwenden gespeicherte Abschnitte in anderen Projekten 


Dieser Erzeugen > Erstellen > Anpassen > Sichern > Wiederverwenden Workflow ist ein kontinuierlicher Prozess, der optimiert werden kann, um Dich als Webdesigner in die Lage zu versetzen, viel mehr Projekte in viel kürzerer Zeit abzuschließen.

Eine riesige Liste von Blöcken, die weiter wachsen wird

Wir haben eine riesige Auswahl an Designer-Blöcken erstellt, die so gut wie jeden benötigten Abschnitt abdecken.

Es gibt nicht weniger als 235 verschiedene Blöcke in Elementor, verteilt auf 15 beliebte Kategorien: Header, Services, Kontakte, Preis, Team, Testimonials, Portfolio / Galerie, Kunden / Freunde, About, Call to action, FAQ, Progress Bar, Countdown, Subscribe, Formulare, Footer, Features.

Wir haben sowohl dunkle als auch helle Block-Bausteine aufgenommen. Dies ist entscheidend, da Du einen dunklen Block leicht mit einer einfachen Änderung der Hintergrundfarbe und einigen kleinen Optimierungen an eine dunkle Website anpassen kannst.

Suche nach dem, was Du suchst und wähle Deine beste Kombination. In Zukunft wird die Blocks-Bibliothek auch Kategoriefilter enthalten.

List-Blocks-4.2-1

Arbeiten Sie klüger, nicht härter. Beginnen Sie mit #elementor Blocks, und bauen Sie Websites unglaublich – schnell!

Erstelle jetzt Deine erste Seite mit Blöcken

Blöcke sind das erste Feature-Release von Elementor 2.0. Wenn Du es verpasst haben solltest, schaue unsere 2.0-Roadmap an.

Nächsten Monat werden wir die Header-Footer-Funktion veröffentlichen, die Dir die Kontrolle über das Header- und Footer-Design gibt, was bisher statisch war und was vom Theme stammt.

Da wir immer mehr Funktionen von Elementor 2.0 veröffentlichen, werden Blöcke immer relevanter, da sie zur Erstellung dynamischer Inhalte verwendet werden.

Welche Blöcke möchtest Du gerne sehen? Gehe die Liste durch und teile uns in den Kommentaren mit, welche Blöcke Du am liebsten hinzufügen möchtest.

Dieser Beitrag ist eine Übersetzung des original Beitrags von Elementor.com Auch die Bilder sind © Elementor.com

Bitte Teilen

Widget Eintragungsformular-Test

Leadgeneireungs-Widget

Wie kannst Du in Elementor ein Formular zur Leadgewinnung im Widget machen?

Heute habe ich mal einige Versuche gemacht um Dir zeigen zu können, ist es überhaupt möglich einen Beitrag oder eine Seite so zu gestalten, dass diese in einem Widget in der Seitenleiste sichtbar wird und Du damit eine Formular zu Leadgewinnung erstellen kannst.

Und ja, es ist gelungen. jetzt willst Du sicherlich wissen, wie kannst Du das auch realisieren. Du sieht unten das Ergebnis, das ich als Dummy-Vorlage hier erstellt habe. Und das Du jetzt in der rechten Seitenleiste sehen kannst. 

Gib hier deine Überschrift ein

Kurzer Text

  • Listenelement #1
  • Listenelement #2
  • Listenelement #3

Die einzelnen Schritte

Zuerst habe ich mit einem Beitrag (Post) wie diesem hier experimentiert und war da mit dem Einfügen in ein Widget auf dem Holzweg. Also nächster Versuch und kam dann über das Backend unter Design in den Widget-Einstellung dahinter, dass nur Seiten scheinbar in ein Widget angezeigt werden können. Also nächster Versuch:

  • Seite erstellen.
  • Abschnitt mit Überschrift anfertigen
  • dann Text-Widget darunter.
  • Bild-Widget hinzufügen und
  • anschließend das Formularfeld,
  • sowie alternativ ein Listenelement-Widget.
  • Im weiteren Verlauf, den Abschnitt zum bearbeiten anklicken und
  • Jetzt die Inhaltsbreite auf 240 px einstellen
  • Sodann die Headline Schriftgröße und Farbe einrichten
  • Bild des Reports hinzufügen und eventuell Größe anpassen.
  • Nachfolgend das Formular mit Autoresponder (MailChimp, MailPoet oder passenden von Elementor vorgegebenen) verbinden
  • Und weitere Einstellungen am Formular nach Wunsch vornehmen
  • Zum Schluss kannst Du um das Element (Die Spalte) in der Mitte noch weitere Anpassungen realisieren, wie Rahmen, Hintergrundfarbe etc.

Und das Ganze dann entweder als Vorlage speichern oder die Seite veröffentlichen. Ich habe es als Vorlage gespeichert und als privat veröffentlicht, damit es nich gefunden wird.

Der nächste Schritt

Nachdem das geschafft war, habe ich mich im Backend unter Design, Widget, die Elementor Bibliothek in die Seitenleiste gezogen und dort kannst Du dann einstellen welche Seite angezeigt werden soll. Abschließend alles überprüfen und wenn alles OK aussieht ist das geschafft.

So kannst Du also mit eigenen Mitteln und Ohne zusätzliche kostenpflichtige Plugins auch ein solches Formular einbinden. Und ja, es ist nicht 100 % perfekt. Warum, weil Du keinen einfachen Splittest damit machen kannst.

Wenn Dir dieser Beitrag gefallen hat, freue ich mich über einen Kommentar unten. 

Hol Dir Jetzt den GRATIS Report!

erfolgreiche Landingpages mit Elementor
  • Wie Du Deine Landingpage von Beginn richtig aufbaust
  • Die Vorteile einer Landingpage
  • Dein Erfolg dank effektiverer Langingpages

Trag unten Deine E-Mail Adresse und Du erhältst den REPORT gratis und sofort!

Elementor: Landingpage – Vielfalt ohne Ende

Elementor: EASYLandingpage Online-Marketing für Alle!

Elementor: Landingpage Projekt - Übersicht

In den vergangen Tagen habe ich mal einige landingpages im Rahmen eines Projektes erstellt. Diese möchte hiermit mal öffentlich zeigen.

14 Landingpages zur Auswahl

Du siehst in dieser Landingpage Slideshow 14 Landingpages unterschiedlicher Ausprägung, die aber für weitere Gelegenheiten abgewandelt werden können, so dass es eigentlich unzählige Varianten geben könnte. Allein den Hintergrund zu wechseln, Die Headline abzuändern, die Farbe der Headline anzupassen (mehr als 1.6 Mill. Farben). Headline animiert zu gestalten. Die Texte, die Bilder, Videos, Buch-Cover, Podcasts, etc., etc. pp. 

Darum versuche Deine eigenen landingpages zu kreieren. Kopiere nicht die die landingpages der Gurus! Diese mögen ja optimiert und getestet sein, aber vielleicht sind Sie schon abgelutscht wie ein alter Drops. Klar, Du darfst Dir Anregungen holen. Keine Frage!

Und falls Du noch weitere Fragen hast, hole Dir mein E-Book: “Geheimnisse erfolgreicher Elementor Landingpages!” Klicke einfach unten auf den Link.