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

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

Elementor 2.0 – der erste Beta-Test

Elementor 2.0 - Mein 1. Beta - Test

Elementor 2.0 Beta-Test: mein 1. Versuch

Seit kurzem ist die lang erwartete Version 2.0 vom Elementor PageBuilder zum testen da. Und selbstverständlich muss die sofort getestet werden, aber nicht in einer Live geschalteten Webseite. Darum werde ich sie auf einen lokalen WordPress Webseite einem kleinen Test unterziehen.

Heute, am Sonntag, den 11. März 2018 habe ich den ultimativen 1. Versuch gewagt und dabei noch ein kurzes Video aufgenommen, das ich jetzt gleich auch auf YouTube veröffentlichen werde. Und Du kannst dann weiter unten das Ergebnis sehen. 

Als erstes fällt auf, das bei den Vorlagen ein neuer Tab-Reiter links hinzugekommen ist. Dieser trägt die Aufschrift Blocks. Derzeit sind Blöcke in 13 Kategorien (categorys) vorhanden und es werden bis zum finalen Start bestimmt noch einige hinzu kommen. Was derzeit wohl die meisten vermissen werden sind Header und Footer Blöcke. Die Blöcke sind in 2 Versionen vorhanden. 1 mal mit weißem und zum anderen mit schwarzem Hintergrund. Und klar ist Du kannst sie deinen Wünschen anpassen. Die Texte sind naturgemäß in englisch.

Elementor 2.0 Beta-Test: Die Kategorien

Zuerst einmal möchte ich Dir jetzt die einzelnen Kategorien vorstellen und zwar dem Alphabet nach. Das wären im einzelnen:

  1. About (über uns)
  2. Call To Action
  3. Clients (Kunden)
  4. Kontakt(Kontakt-Formular)
  5. FAQ (Fragen und Antworten)
  6. Features (Merkmale und Eigenschaften)
  7. Hero (Idole, Protagonisten)
  8. Portfolio (Geschäftsbereiche)
  9. Pricing (Preisangaben)
  10. Services (Dienstleistungen, Serviceleistungen)
  11. Stats (Statistiken, Übersicheten)
  12. Team (Mannschaft, Belegschaft, Team)
  13. Testimonial (Referenzen)

Elementor 2.0 Beta-Test: Die einzelne Blöcke

Und als nächstes möchte ich Dir jetzt die einzelnen Blöcke vorstellen. 

Unter der Kategorie About findest Du 20 Blöcke. Das heißt, je 10 verschiedene mit weißem und mit schwarzem Hintergrund.

So bietet die Kategorie Call To Action, jeweils 13 Blöcke. Die Kategorie Clients, Portfolio & Team verfügen über 8 unterschiedliche Blöcke. FAQ weist 5 weiße und 5 schwarze Blöcke aus, während Features & Hero je 12 Blöcke inne hat. Dann hat Pricing & Stats 7 von jeder Farbstellung und 21 Blocks findest Du unter Services & Testimonials

Elementor 2.0 Beta-Test: Fazit

Zusammenfassend kann ich sagen, die Blöcke machen schon einen stabilen Eindruck Und es werden auch bestimmt in den nächsten Wochen die fehlenden Dinge und weitere Blöcke hinzukommen. Zumal heute Ben Pines verkündet hat, dass jetzt bereits 600.000 Installationen bereits Elementor nutzen und allein im letzten Monat 100.000 neue Nutzer zu Elementor gefunden haben. Das Alles wird einen neuen Schub der Motivation dem ganzen Team von Elementor geben und ich bin zuversichtlich, das sich die Innovationen weiter fortsetzen, so wie in der Vergangenheit.

Unten wirst Du jetzt noch das Video finden: