Elementor PRO 2.8: Das Table of Contents Widget kennenlernen

Elementor PRO 2.8: Das Table of Contents Widget kennenlernen

Mit Elementor Pro 2.8 erhalten Sie ein wichtiges Tool, das Ihnen hilft die Benutzerfreundlichkeit, die Barrierefreiheit und die Suchmaschinenoptimierung Ihrer Website zu verbessern . Lernen Sie das Widget “Table of Contents” o. auf deutsch “Inhaltsverzeichnis” kennen.

Video abspielen

Lesbarkeit steigern? Prüfen. Eingabehilfen? Prüfen. SEO Boost? Prüfen. TOC macht alles

Content-Vermarkter, SEO-Pros, Blogger – auf diesen Moment haben Sie gewartet!

Wenn Sie eine Person sind, die Inhalte erstellt, haben Sie sich wahrscheinlich gefragt, wie Sie Ihren Blog-Posts und -Seiten in Elementor am besten ein Widget für das Inhaltsverzeichnis hinzufügen können.

Denken Sie nicht mehr nach… Lernen Sie das Widget Inhaltsverzeichnis (TOC) kennen!

Das TOC-Widget zählt zu den am besten anzupassenden und funktionsreichsten Widget seiner Art. Dies vereinfacht den Zugriff auf Ihre Inhalte erheblich und ermöglicht es den Lesern, diese zu scannen und sich ein Bild von der Struktur des Inhalts zu machen, den sie gerade lesen.

Sie können es für einzelne Seiten und Posts einrichten oder mit einem einzigen Klick auf Ihrer gesamten Website verteilen, indem Sie es mit dem Theme Builder einbinden.

Überblick

Was ist ein Inhaltsverzeichnis (TOC)?

Ein Inhaltsverzeichnis ist ein Tool, das dynamisch eine Liste von Links generiert, die Ihren Leser mit den verschiedenen Abschnitten Ihrer Seite verbindet. Die Verwendung verbessert die Lesbarkeit, Zugänglichkeit und Suchmaschinenoptimierung Ihres Artikels. Es hilft Google und den Lesern, die Struktur Ihrer Website besser zu verstehen. Dies wiederum hilft auch dabei, in Rich Snippets über den Suchergebnissen von Google aufgelistet zu werden.

Hauptvorteile

7 Dinge, die nur das Inhaltsverzeichnis von Elementor kann

Hier sind die 7 Gewinnerfunktionen des Inhaltsverzeichnis-Widgets.

1. Absolute Kontrolle darüber, welche Untertitel aufgelistet werden

Sind Sie ein H2 oder eher ein H4?

Verwenden Sie die Einstellung Einschließen, um die genauen Überschriften-Tags auszuwählen, die in Ihrem Inhaltsverzeichnis angezeigt werden sollen, oder verwenden Sie nur Überschriften aus einem bestimmten Container auf der Seite. Sie können auch bestimmte HTML-Selektoren als Ziel festlegen und von der Anzeige in der Tabelle ausschließen. Auf diese Weise haben Sie die vollständige Kontrolle darüber, welche Titel in Ihrem Inhaltsverzeichnis aufgeführt und welche ausgelassen werden.

2. Anhaftendes Inhaltsverzeichnis, das hervorgehoben wird

Ein anhaftendes Inhaltsverzeichnis eignet sich hervorragend für Wissensdatenbankseiten und für viele andere Anwendungsfälle.

Auf diese Weise bleibt die Titelliste immer im Blick, egal wie oft der Besucher blättert.

Durch Festlegen einer Farbe oder einer Unterstreichung für “Aktiv” (wenn ein bestimmter Titel angezeigt wird) können wir den Bereich der Seite markieren, den der Besucher gerade überprüft. Ebenso kann das Unterelement automatisch erweitert werden, wenn der Besucher diesen Bereich erreicht.

In beiden Fällen erhalten die Besucher einen klaren Überblick über den Bereich, den sie gerade anzeigen, und können ihren Verlauf auf der gesamten Seite nachverfolgen.

3. Einzigartige Listenstile

Sie können nicht nur zwischen nummerierten Listen und Listen mit Aufzählungszeichen wechseln, sondern auch ein beliebiges Symbol auswählen, das als Aufzählungszeichen verwendet werden soll.

Sie können auswählen, ob die Listenelemente als flache Liste oder als hierarchische Liste angezeigt werden sollen. Selbst wenn Besucher Ihre längsten Seiten im Wiki-Stil lesen, haben sie dennoch einen Überblick über das gesamte Dokument.

4. Das flexibelste Inhaltsverzeichnis

Inhaltsverzeichnis-Plugins bieten normalerweise eine begrenzte Auswahl an Designs. Entsprechend der Art und Weise, wie wir unsere Werkzeuge normalerweise konstruieren, bieten wir mit diesem Widget die höchstmögliche Flexibilität bei der Anpassung des Designs.

Vom Zeilenumbruch über die Typografie und den Abstand bis hin zum Box-Design. Sie können dieses Widget an jede Art von Website anpassen, egal ob es sich um eine Wissensdatenbank, eine Wiki-Site, ein Magazin oder eine E-Commerce-Site handelt.

5. Minimierte Einstellung für Tablet & Mobile Displays

Um sicherzustellen, dass es nicht im Weg ist, haben wir eine Reihe von Steuerelementen zum Minimieren des Inhaltsverzeichnisses hinzugefügt.

Aktivieren Sie die Option “Minimieren”, und im Feld “Inhaltsverzeichnis” wird ein Symbol zum Minimieren angezeigt. Darüber hinaus können Sie es standardmäßig als minimiert für Mobil- und Tablet-Displays festlegen. Auf diese Weise ist es weiterhin für den Besucher nutzbar und nimmt nicht viel Platz ein.

6. Die Leistungsfähigkeit von Theme Builder & Inhaltsverzeichnis

Bisher gab es nur begrenzte Möglichkeiten, ein Inhaltsverzeichnis zu einer WordPress-Website hinzuzufügen: Verwenden von Ankern, Shortcodes oder Aktivieren über Ihre Websites hinweg.

Alle diese Lösungen bieten nicht viel Flexibilität, wenn das Inhaltsverzeichnis gilt.

Hier spielt das Theme Builder- Dienstprogramm von Elementor eine große Rolle.

Durch Hinzufügen des Inhaltsverzeichnis-Widgets zu einer Einzelseitenvorlage können Sie die genauen Sichtbarkeitsbedingungen festlegen, die darauf angewendet werden.

Möchten Sie, dass das Inhaltsverzeichnis nur auf Seiten Ihrer Kategorie “Lernprogramm” angezeigt wird? Nur für einen bestimmten Tag? Du hast es!

Durch die Verwendung der Bedingungen des Theme Builder erhalten Sie ein Maß an Flexibilität, das Sie sonst nirgendwo finden können.

7. SEO, Google Schema und Rich Snippets

Wir haben dieses Widget unter Berücksichtigung von Google erstellt. Jeder, der sich jemals mit langgestreckten Blogposts und Tutorials befasst hat, weiß, wie wichtig umfangreiche Snippets sind. Mit diesem Tool können Sie die Darstellung Ihrer Seitenstruktur für Google sofort verbessern.

Widget für das Inhaltsverzeichnis von Elementor: Fügen Sie es einmal hinzu, alle Ihre Artikel sind sofort einfacher zu lesen.

Das ist eine Übersetzung des original Beitrages von: Elementor

Was genau ist der Elementor Page Builder?

Was genau ist der Elementor Page Builder

Was genau ist der Elementor Page Builder?

Hier muss ich zunächst erklären, was genau ein Page Builder ist. Hast du jemals mit LEGO gespielt? Ich bin mir sicher, du hast oder du hast zumindest davon gehört – wer hat das nicht? 🙂 Ein Page Builder (auf deutsch: Seitenersteller) ist wie eine Kiste mit LEGO-Bauteilen, mit denen du einen beliebigen Typus Webseiten erstellen kannst.


Wenn du das klassische WordPress-Dashboard verwendest und das Ergebnis während der Arbeit an einer Seite nicht sehen kannst, musst du auf die Schaltfläche „Vorschau“ klicken, um zu sehen, wie die Seite aussieht. Page Builder wurden daher entwickelt, um dies zu überwinden. Sie bieten dir die Möglichkeit, die Änderungen so zu sehen, wie du sie vornimmst. Die gesamte Bearbeitung des Erscheinungsbilds deines Artikels erfolgt im Drag-and-Drop-Modus mit vorhanden Elementen, den sogenannten Widgets. Vereinfacht ausgedrückt, erstellst du die Seite oder den Beitrag aus diesen Elementen und passt sie dann an, um eine beeindruckend aussehende Seite zu erstellen.

Es gibt jetzt zahlreiche verschiedene Page Builder: BeaverBuilder, Novi Builder, Visual Composer und wie bereits erwähnt, sogar WordPress hat jetzt einen eigenen nativen Builder namens Gutenberg. Du könntest jetzt vielleicht sagen: “Hey, wenn WordPress bereits einen Page Builder hat, warum etwas anderes installieren?” Das ist eine faire Frage, und hier ist meine etwas voreingenommene Antwort…

Ich liebe es einfach, Elementor zu benutzen, und das ist alles!

Ich habe Elementor bereits verwendet, bevor das WordPress-Team Gutenberg startete und ich ziehe es vor, den Elementor Page Builder auf den meisten meiner Websites weiter zu verwenden. Es gibt Dutzende von nützlichen Add-Ons auf dem Elementor-Marktplatz, deren Installation die verfügbaren Optionen erheblich erweitert. Sie können natürlich auch andere Page Builder ausprobieren, was ich gelegentlich auch tue. Da ich jedoch persönlich ein Fan von Elementor bin, werde ich dies als Beispiel für die Vorteile von Page Buildern verwenden.

Warum ich Elementor mehr als andere Page Builder liebe

Ja, ich habe mich an Elementor gewöhnt, aber das ist nicht der einzige Grund, warum ich ihn mag. Es hat eine Reihe von guten Vorteilen:

  • Er ist kostenlos: Es gibt eine kostenpflichtige Version von Elementor Pro, die ihre Vorteile hat, aber das Kern-Plugin ist völlig kostenlos. Du kannst es ohne weitere Add-Ons herunterladen, installieren und verwenden und es verfügt dennoch über eine enorme Funktionalität. Besonders wichtig für Anfänger, die kein großes Budget haben!
  • Einfache Bedienung: Die Benutzeroberfläche ist einfach, die Verwendung der Widgets ist leicht verständlich und die Benutzeroberfläche sehr benutzerfreundlich.
  • Gut dokumentiert: Anfänger machen immer Fehler, es ist normal und wenn Sie einige Probleme haben, können Sie die Lösung in der Anleitung finden.
  • Es ist ein Plugin, kein Thema: Einige Page Builder sind selbst ein Thema, von dem du vielleicht denkst, dass es in mancher Hinsicht ein Plus ist. Wenn Sie jedoch jemals zu einem neuen Thema wechseln möchtest, kannst du das nicht!
  • Es gibt jede Menge Tutorials: Es gibt Dutzende von Video-Tutorials zur Verwendung von Elementor. Fast jedes Widget verfügt über einen Artikel mit Anleitungen. Beispiel: Hier ist ein Video, das den Prozess der Installation der Elementor-Vorlage beschreibt. Zwar nur auf englisch aber leicht verständlich:
Video abspielen

Das sind die Vorteile für Anfänger, erfahrene Webentwickler wissen, dass es in Elementor noch andere Profis gibt. Wenn du interessiert bist – lies diesen Artikel , es gibt viele Bewertungen von verschiedenen Personen.
Jetzt habe ich Dir erklärt, warum ich Elementor Page Builder für großartig halte. Kommen wir zu weiteren praktischen Beispielen. Ich gehe davon aus, dass du das Elementor-Plugin bereits installiert hast und es betriebsbereit ist. Ich werde den Prozess der Erstellung einer Seite und eines Beitrages durchlaufen. Wenn du dem folgst, wist wissen, wie du so etwas mit Elementor veröffentlichst, bevor du es verinnerlicht hast.

Also fangen wir an.

Die Verwendung von Elementor in WordPress

  • Installiere das Elementor-Plugin
  • Installiere ein separates Thema, wenn du eine besonderes verwenden willst
  • Füge mit Elementor eine neue Seite hinzu
  • Verwende ein Widget-Element oder füge eine Vorlage hinzu
  • Erstelle Abschnitte nach Bedarf
  • Erfahre, wie du Elementor-Widgets verwenden kannst
  • Bearbeite Hintergrundbilder nach Ihren Wünschen
  • Ändere die Schriftarten nach Bedarf
  • Vorgang für Beiträge wiederholen

So erstelle eine Seite mit Elementor

Öffne dein WordPress-Verwaltungs-Dashboard und gehe zu Seiten -> Neu hinzufügen.

Klicke anschließend auf die Schaltfläche „Mit Elementor bearbeiten“ und du wirst zum Elementor-Anpassungsfenster weitergeleitet.

Jetzt hast du zwei Möglichkeiten. Die erste besteht darin, die Seite von Grund auf neu zu erstellen. Dies bedeutet, dass du verschiedene Elemente per Drag & Drop in den Seitenarbeitsbereich ziehen. Der zweite ist viel einfacher, also zeige ich dir diesen Weg …
In der Mitte des Arbeitsbereichs siehst du zwei Schaltflächen. Klicke auf die graue Schaltfläche „Vorlage hinzufügen“.

Vorlage hinzufügen

Die jetzt geöffnete Bibliothek enthält viele Seitenvorlagen, von denen viele kostenlos verwendet werden können. Elementor-Vorlagen sind nicht dasselbe wie Themes. Ein Thema ist eine Reihe von vorgefertigten Seiten, die alle in einem soliden Design gestaltet sind, während eine Vorlage eine Sammlung von LEGO-Stücken (Elementen auch Widgets genannt) ist. Vorlagen sind im Grunde genommen eine Seite, die aus zahlreichen Elementen besteht.

Wähle die gewünschte Seite aus und klicke auf die Schaltfläche “Einfügen”. Ich habe die Produkt-Homepage ausgewählt, um dir zu zeigen, wie sie aussieht. Die Seite, die du geladen hast, wirkt sich nicht auf die Kopf- und Fußzeile deiner Website aus – sie füllt nur den „Body“ mit Demo-Inhalten. Wie du siehst, wird die eingefügte Seite mit benutzerdefinierten Standardelementen kombiniert und du kannst sie nach Belieben ändern.

Muster Produkt-Homepage

Um die Anpassung zu starten, musst du auf das Element klicken, das du ändern möchtest. Im Feld links wird ein Menü geöffnet. Dieses Menü hat drei Registerkarten: “Inhalt”, “Stil” und “Erweitert”.
Auf der Registerkarte “Inhalt” kannst du ändern, was in diesem Element angezeigt wird – Text, Bild, Link oder etwas anderes. Hier kannst du den gesamten Inhalt ganz ohne Styling anpassen.

Inhalt-Tab

Auf der Registerkarte “Stil” findest du die Tools, mit denen du das Erscheinungsbild deines Inhalts ändern kannst. Farben, Schriftarten, Hintergründe, Ausrichtungen, Ränder und Ränder. Die Benutzeroberfläche ist einfach, daher wirst du sicher verstehen wollen, wie man sie verwendet, nachdem du ein paar Minuten herumgespielt hast.

Produktseite anpassen-Stil

Die Registerkarte „Erweitert“ enthält verschiedene Zusatzfunktionen wie den Hintergrund des gesamten Elements oder die Eingangsanimation. Du wirst es nicht oft brauchen, aber du solltest dir trotzdem die Funktionen hier schauen, wenn du sie mal brauchst.

Erweitert-Tab

Mit Elementor Page Builder wird das Erstellen von Seiten so einfach und interessant wie das Spielen eines Videospiels. Du wählst die Vorlage mit passender Struktur aus, wendest sie an und passt sie dann an das Design des von dir verwendeten Themas an (oder nicht, es liegt ganz bei dir, wie deine Site aussehen soll, aber ich empfehle, sich mindestens an eine festgelegte Farbe zu halten). Nach dem Erstellen einer Seite kannst du diese Seite als Vorlage speichern und für alle anderen Teile deiner Webseite verwenden.

So erstellst du einen Beitrag mit Elementor

Wenn es um die Erstellung neuer Beiträge geht, kannst du nicht einfach den oben beschriebenen Prozess ausführen. Versuchen wir also, einen Beitrag von Grund auf zu erstellen, und sehen wir uns einige andere Funktionen an.

Woraus besteht ein Beitrag? Normalerweise besteht es aus dem Titel, dem angezeigten Bild, den Metadaten, dem Text, den Schaltflächen zum Teilen und den Kommentaren. In deinem Fall können sich auch einige Unterschiede ergeben. Wenn du also der Meinung bist, dass du weitere Schaltflächen oder Listen hinzufügen musst, solltest du dies einfach machen.

Hier erstelle ich einen sehr einfachen Beitrag, damit du sehen kannst, wie alle grundlegenden Funktionen gelingen. Ich werde damit beginnen, alle genannten Elemente auf dem Arbeitsfeld abzulegen (einige davon sind bereits vorhanden). Keine Sorge, wenn du irgendwann die Position eines Elements ändern möchten, ist dies kein Problem.

Beitrag 1

Es ist Zeit, alles schöner aussehen zu lassen. Drücke auf das Titelelement und lege die Details des gewünschten Erscheinungsbilds fest. In meinem Fall kann ich die Schriftart, Ausrichtung und Größe des Titels ändern.

Beitrag-Titel

Jetzt legen wir das Bild fest. Klicke auf das Bildelement, wähle das Bild aus und lege die Ränder fest.

Bild eingefügt

Ich habe auch den Text des Beitrags zum Textabschnitt hinzugefügt und die Schriftart und Größe der Buchstaben geändert. Die Schaltflächen und der Kommentarbereich sind in Ordnung, daher habe ich sie unverändert gelassen.

Als Vorlage speichern

Super! Eine einfache Beitragsseite ist fertig. Um es als Vorlage für die weitere Verwendung zu speichern, musst du die kleine Pfeiltaste unten neben dem Speichern Button drücken und eine Speicheroption auswählen.

Beitrag Schrift verändert

Fazit

Es gibt eine Menge anderer Funktionen, die Elementor Ihnen anbieten kann. Wenn Sie jedoch die Grundlagen von Elementor Page Builder beherrschen, steht Ihnen eine umfangreiche und praktische Toolbox zur Verfügung. Elementor Page Builder ist ein großartiges Tool, mit dessen Hilfe Sie ein noch besseres Blog erstellen können, als Sie es bereits getan haben.

Visual Composer Website Builder vs. Elementor; Aus Entwicklersicht

Elementor & Visual Composer

Visual Composer Website Builder vs. Elementor; aus der Sicht eines WordPress-Webseitenentwicklers

Der Visual Composer Website Builder und der Elementor PageBuilder sind großartige, moderne Plugins für die Gestaltung einer WordPress-Webseite und deren Inhalt. Sie bieten fast die gleichen Funktionen und funktionieren auf sehr ähnliche Weise. So können Benutzer die Struktur und das Layout von WordPress-Seiten und -Postings entwerfen, ohne dass sie die Funktion und die Codierung in irgend einer Art und Weise verstehen müssen.

Elementor wurde im Jahr 2016 veröffentlicht und verfügt über mehr als 2 Millionen aktive Installationen, während der Visual Composer Website Builder (ab hier VCWB ) im Jahr 2017 veröffentlicht wurde und über mehr als 100.000 aktive Installationen verfügt. Beide Plugins bieten großartige UX-, Interaktions- und superschnelle Leistung. 

Elementor & Visual Composer
Elementor & Visual Composer

Schauen wir uns an, wie Entwickler diese beiden Produkte als Teil eines WordPress-Themas verwenden können.

1. Lizenz

Sowohl VCWB als auch Elementor sind als kostenlose und Premium-Version erhältlich. Die Theme-Integration ist nur mit den kostenlosen Versionen möglich. Sie können die Premium-Versionen nicht zu Ihrem Thema hinzufügen oder weiterverkaufen – es gibt keine sogenannte “Lagerlizenz” -, auch wenn Sie eine Entwicklerlizenz erworben haben (was mehrere Lizenzen für Agenturen ermöglicht). Sie können Benutzer jedoch jederzeit zu einem Upgrade ermutigen, wenn Sie der Meinung sind, dass diese von den erweiterten Funktionen profitieren würden.

Die kostenlose Version von Elementor wird WordPress.org gehostet, sodass Sie sie nicht in Ihr Theme-Pack aufnehmen müssen. Die kostenlose Version von Visual Composer Website Builder ist jedoch auf WordPress.org nicht verfügbar. Sie müssen entweder die kostenlose Version herunterladen und in Ihr Theme-Pack aufnehmen oder den Download-Link mit dem TGM-Plugin-Aktivator verwenden.

TGM Plugin Activation
Durch die Aktivierung des TGM-Plugins können neue Theme-Käufer empfohlene Plugins direkt herunterladen

Die Premium-Versionen enthalten in beiden Fällen Header- und Footer-Builder sowie Template-Systeme. Sie können Funktionen der Pro-Version für Ihre eigenen Projekte verwenden, aber Sie können kein Thema für den Verkauf entwickeln, falls Sie darauf angewiesen sind und damit Geld verdienen möchten. Mit der kostenlosen Version können Ihre Kunden die schnellen Editoren, großartigen Oberflächen, ein paar kostenlose Widgets und Module sowie die Früchte der großartigen Entwickler-APIs genießen (Sie können und sollten Ihr Thema mit benutzerdefinierten Elementen erweitern).

2. Anforderungen

Elementor benötigt nicht mehr als die allgemeinen Anforderungen für WordPress, aber mit Visual Composer Website Builder müssen Sie auch die folgenden technischen Anforderungen erfüllen:

  • Webpack 4.0 oder höher
  • Node 8.0

Und hier fangen die Unterschiede zwischen diesen beiden Produkten an.

3. Entwickler-APIs

Im Gegensatz zu WP Bakery Page Builder werden die Elemente in Visual Composer Website Builder und Elementor nicht mehr auf  der Basis von Shortcodes benutzt.  Ein Element wird als unabhängiger Teil des Systems beschrieben. Ein HTML-basierter Block, der Medien und dynamische Inhalte ausgeben kann.

In Visual Composer Website Builder arbeitet der Editor mit Elementen als React-Komponenten. Diese Komponenten müssen mit Webpack erstellt und per API in die Warteschlange gestellt werden. Jedes Element verfügt über ein Vorschaubild, ein Miniaturbild, eine Kategorie und eine reaktionsbasierte Komponente. Der beste Weg, diese Elementstruktur zu verstehen, ist das Klonen des VCWB Boilerplate-Repository auf GitHub.  Jedes Element umfasst einen Ordner mit JavaScript-, JSON-, PHP-, CSS- und Mediendateien. Das VCWB-Elementsystem ist etwas kompliziert und Sie sollten mit React vertraut sein, um es besser zu verstehen.

Das Erstellen eines benutzerdefinierten Elementor-Widgets unterscheidet sich nicht wesentlich vom Erstellen eines nativen WordPress-Widgets. Erstellen Sie zunächst eine Klasse, die die Widget_Base Klasse erweitert, und füllen Sie alle erforderlichen Methoden aus

Wordpress Einführung

WORDPRESS
Einführung in die Erstellung Ihrer ersten WordPress-Webseite

Jörg Rothhardt

Dieser Ansatz ist jedem WordPress-Entwickler vertraut, und ich persönlich finde es viel einfacher, neue Elemente für Elementor zu erstellen als für VCWB.

Fazit

Im Folgenden finden Sie eine kurze tabellarische Bewertung dieser beiden Plugins aus Entwicklersicht, die zum Zeitpunkt der Veröffentlichung aktuell war:

Gegenüberstellung Elementor - Visual Composer

Hier hast du es; meine subjektive Einschätzung, basierend auf meiner Erfahrung als Entwickler mit diesen beiden WordPress Page Builder Plugins.

Sie fragen sich vielleicht, warum ich diese beiden Plugins verglichen habe, da Elementor der Marktführer ist und viel mehr aktive Installationen hat. Nun, ich glaube, dass jedes großartige Produkt großartige Konkurrenten haben sollte. VCWB verwendet neue Technologien, die bei der Entwicklung von Themen sehr beliebt sein können. Es hat ein sehr fortgeschrittenes und leistungsfähiges Starter-Thema ohne Einschränkungen . Die Entwickler von VCWB haben uns bereits ein großartiges Produkt in Form von WPBakery Page Builder zur Verfügung gestellt. Ich glaube fest an ihre professionelle Strategie.

Auf der anderen Seite ist Elementor ein sehr beliebtes Produkt, das sich durch hervorragende Leistung auszeichnet und sehr einfach zu verarbeiten ist. Elementor hat auch ein Starter-Theme, das die Styling-Umgebung in WordPress zurücksetzt. Als Entwickler sehe ich jetzt, dass Elementor der fortschrittlichere und mehr genutzte Builder für Webseiten ist, und ich empfehle dringend, mit diesem Plugin Webseiten zu entwickeln. Behalten Sie jedoch den Visual Composer Website Builder im Auge!

Kompatible Designs auf Themeforest

Im Jahr 2018 wuchsen die Elementor-kompatiblen Themen auf Themeforest von 90 auf 350. Derzeit sind es über 450.

Bitte denken Sie immer daran

Informationen nützen nur dem, der Sie auch bekommt.

Ihr Jörg Rothhardt

Jörg Rothhardt

Das Unternehmen

Rechtliches und mehr

Unser Newsletter

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.

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

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

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. 

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:

Video abspielen

Elementor 2.0

Elementor 2.0 startet bald

Heute hat Ben Pines einen Blog-Artikel auf Elementor.com und ein Video in der Facebook Elementor Community veröffentlicht zu Elementor 2.0, den ich mal auf deutsch übersetzt habe:

Elementor v 2.0

Endlich ist alles innerhalb Ihrer WordPress-Website in Reichweite. Sie werden in der Lage sein, es visuell und einfach zu gestalten: Blöcke, Kopf- und Fußzeilen, dynamische Inhalte, einzelne Beiträge, Archivseiten, Suchergebnisseiten, 404 Seiten und vieles mehr.

Elementor startete vor 20 Monaten, und in dieser Zeit etablierten wir es als die Nummer 1 Lösung für den Seitenaufbau.

Jetzt ist es an der Zeit, über die Seitenebene hinauszugehen.

Ich würde gerne unsere kommende Roadmap durchgehen und beschreiben, wie wirkungsvoll Elementor 2.0 für Ihren Workflow sein wird.

Die Roadmap für die Zukunft

Wie bereits erwähnt, wird Elementor 2.0 bewusst nicht auf einmal gestartet. Die schrittweise Einführung jeder neuen Funktion hilft Ihnen dabei, sich an die einzelnen Funktionen zu gewöhnen.

Diese Methode ermöglicht es uns, gleichzeitig an einer Reihe von Funktionen zu arbeiten und jedes einzelne erst dann freizugeben, wenn es vollständig erprobt, getestet und zur Auslieferung bereit ist. Dies ist ein effektiver und stabiler Prozess, der uns seit der Einführung gute Dienste geleistet hat.

Nächste Woche werden wir die erste Beta-Version von Elementor 2.0 veröffentlichen – das Blocks-Feature. Blöcke sind eine neue Reihe von vorgefertigten Layouts, die es Ihnen ermöglichen, schnell verschiedene Sektionsdesigns zu mischen und aufeinander abzustimmen, wodurch Sie Ihre Websites und Landing Pages schneller als je zuvor generieren können.

Dann, im nächsten Monat, werden wir die lang erwartete Kopf- und Fußzeile veröffentlichen, die es Ihnen ermöglicht, Ihre gesamte Seite von oben nach unten zu gestalten, einschließlich des Kopf- und Fußbereiches, alles mit Elementor. Dies schließt das Entwerfen Ihres Menüs, Logos und Suchleiste ein; löst einen riesigen Schmerz von Theme-Benutzern, die mit dem Header- oder Footer-Design eines bestimmten Themas feststecken.

Nach dieser Veröffentlichung kommen weitere Goodies hinzu:

  • Die Möglichkeit, einzelne Beiträge und Archivseiten zu erstellen.
  • Anpassung Ihrer Suchergebnisse und 404 Seiten
  • Leistungsstarke Designkontrolle für WooCommerce-Shops, Produktseiten und andere eCommerce-Seiten
  • Umfassender Entwickler-Support, der neue Möglichkeiten für Plugin- und Theme-Entwickler bietet, die Elementor erweitern.
  • Neues Ressourcen-Center für Elementor-Entwickler mit ausführlichen Anleitungen und Tutorials zum Erstellen von Elementor-Erweiterungen.
  • Ein brandneuer Prozess, der die Erstellung dynamischer Inhalte in Gang setzt, die Sie begeistern werden, einschließlich einer umfassenden Integration von Advanced Custom Fields & Toolset.
  • Die neuen, bahnbrechenden Funktionen werden hier nicht enden. Dies ist ein neuer Weg, und er wird Ihnen die Arbeit wesentlich erleichtern.

Kompatibilität mit WordPress 5.0

Eine immer wiederkehrende Frage ist, wie gut sich Elementor in Gutenberg integrieren wird. Unser Team beobachtet das Gutenberg-Projekt sehr genau, und es scheint ein wertvoller und dringend benötigter visueller Texteditor zu sein.

Die neue Version von Elementor wird vollständig mit Gutenberg kompatibel sein, und wir denken jetzt über verschiedene Möglichkeiten nach, den neuen WordPress-Editor mit Elementor zu verbinden. Sobald es fertig ist, kannst du deinen Beitrag in Gutenberg schreiben und ihn dann mit Elementor gestalten.

Mit über 500.000 aktiven Installationen und Zählungen ist es jetzt klarer denn je – Elementor ist ein unverzichtbares Werkzeug für Webdesigner. Sobald die kommenden Features veröffentlicht sind, wird Elementor zu einem noch leistungsfähigeren Designer-Tool, das in der Lage sein wird, die gesamte Website dynamisch zu erstellen und dabei jede Menge Zeit bei jedem Projekt einzusparen.

Ein Theme Builder ist Teil Ihres Pakets

Nach der Veröffentlichung von Elementor 2.0 werden wir alle Themenbauteile in der bestehenden Pro-Version bündeln, so dass Sie kein weiteres Plugin kaufen müssen.

Wir betrachten die erweiterten Fähigkeiten nicht als ein”nice to have”-Projekt. Es ist Teil des Pro-Pakets, das jeder Elementor-Benutzer in seinem täglichen Arbeitsablauf anwenden wird.

Es ist schon einige Monate her, seit wir mit der Entwicklung von Features begonnen haben, die dynamisches Content Design ermöglichen. Ich kann Ihnen versprechen, dass Sie, sobald Sie sie einmal benutzt haben, nicht mehr in der Lage sein werden, zur vorherigen statischen Methode zurückzukehren.

Das Beste ist: Elementor versucht immer ein wenig besser zu werden!

Mit Elementor 2.0 war es noch nie so einfach, ein Upgrade auf Pro durchzuführen. Wir freuen uns wie immer über Ihre Kommentare, Fragen und Rückmeldungen.

Die Zukunft des Webdesigns kommt. Melden Sie sich unten an und lassen Sie sich benachrichtigen, sobald die erste v2.0-Funktion der nächsten Woche veröffentlicht wird.

Und hier gehts zur Seite oben

Wie Du in Elementor Vorlagen einsetzt

Wie Du in Elementor Vorlagen einsetzt

Wie Vorlagen von Elementor Dir helfen

neue Suche in Bibliothek
© Elementor.com

Um Dir bei der Gestaltung Deiner Webseite zu helfen, ist des kostenlose WordPress-Plugin Elementor Pagebuilder eine große Hilfe. Es ermöglicht Dir dank fast 100 gratis Vorlagen, einfach und schnell eine für Dich passende Webseite zu gestalten. Und das sind die 7 wichtigsten Punkte die Du beachten musst:

Darum lautet meine klare Empfehlung für Dich. Nutze die Vorlagen von Elementor und zwar je nach Möglichkeit. Und ja die ElementorPRO-Vorlagen bieten Dir noch mehr Möglichkeiten. Genauer gesagt 21 zusätzliche Widgets-Elemente. Wie beispielsweise Formulare und Slider, Beiträge einfügen, Preislisten, Preistabellen etc. 

Eine weitere wichtige Tatsache ist, dass Du die vorhandenen Bilder entweder durch eigene Bilder ersetzen solltest oder zumindest die vorhandenen Bilder auf die Nutzung hin überprüfen solltest. Ob Du die Berechtigung zur Nutzung hast und welche Angaben Du diesbezüglich machen musst. Dazu gibt es zum Beispiel die Webseite: https://www.tineye.com/ , damit kannst Du die Herkunft von Bildern überprüfen. Besonders praktisch ist, dass Du das über den Browser machen kannst. Denn es gibt für Chrome, FireFox, Opera und deren Ableger eine solche Erweiterung und dann kannst Du das Bild per rechtem Mausklick in Augenschein nehmen.

Dieser wohl gemeinte Rat ist für Deutschland wichtig und stellt keine Rechtsberatung dar, da ich kein Anwalt bin und dementsprechend keine verbindliche Rechtsauskunft geben darf!

Ich hoffe, Du hast jetzt , dank des kleinen Tipps, wieder einen kleinen Schritt zur Entwicklung Deiner eignen Webseite gemacht. Falls Du weitere Fragen hast schreib unten in den Kommentar und ich werde versuchen Dir zu antworten.

Beste Grüße aus Calau

Jörg Rothhardt

Weitere Infos zu Elementor gibt es auf diesem Beitrag.

Elementor: Visueller Formular-Editor

Elementor-Kontaktformular

Interessant: Der visuelle Formular-Editor für WordPress​

Formular Widget (Pro)

So verwendest Du das Elementor Form Widget

Mit dem Formular-Editor – Widget musst Du die Seite, die Du gestalten willst, nicht verlassen, wenn Du ein neues Formular erstellst. In diesem Tutorial werden wir alle verfügbaren Optionen dieses Widgets durchgehen.

So verwendest Du das Elementor Form Widget

Formularname – Hier kannst Du den Namen des Formulars eingeben.
Formularfelder – Eine Liste aller Felder des Formulars. Sie können Felder beliebig duplizieren, hinzufügen oder löschen. Du kannst sie auch per Drag & Drop verschieben, um die Reihenfolge zu ändern.
Wenn Du direkt auf eines der Felder klicken, werden alle seine Einstellungen angezeigt.

  • Typ – Wählen Sie den gewünschten Feldtyp aus.
  • Label – Der Name des Feldes, das auf dem Formular und in der E-Mail angezeigt wird, die Sie vom Benutzer erhalten.
  • Platzhalter – Der Text innerhalb des Feldes, der dem Benutzer hilft, das Feld auszufüllen.
  • Erforderlich – Setzen Sie das Feld wie gewünscht, wenn Sie dem Benutzer nicht die Möglichkeit geben möchten, das Feld zu überspringen.
  • Spaltenbreite – Ermöglicht es Ihnen, die Breite des Feldes festzulegen. Dies ist nützlich, wenn Sie mehrere Felder in einer Zeile erhalten möchten. Wenn Sie z.B. 3 Felder in einer Zeile erhalten möchten, müssen Sie jedes Feld mit einer Breite von 33% setzen.
  • Nachricht – Ein Textfeld, in dem Sie die Anzahl der angezeigten Zeilen festlegen können.

Elementor Form Widget - Die Feldtypen

  • Text – Ein einfaches Textfeld. Als Beispiel, das diesen Typ verwendet: Name
  • Tel – Vom Typ – Telefonnummern. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • E-Mail – Ein Feld vom Typ – E-Mail. Inklusive Validierung für E-Mail.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Zahl – Ein Nummernfeld. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • Auswahl – Mit einem Auswahlfeld kann der Benutzer aus einer Dropdown-Liste von Optionen auswählen. Die Optionen werden durch das Schreiben getrennter Textzeilen in der Einstellung Optionen erstellt.
  • URL – Mit diesem Typ kann der Benutzer seine Website-URL eingeben.
  • Kontrollkästchen – Ein Kontrollkastchenfeld (CheckBox) ermöglicht es dem Benutzer, eine oder mehrere der Optionen zu aktivieren. Die Optionen werden wieder durch das Schreiben von getrennten Textzeilen in der Einstellung “Optionen” erzeugt. Bei diesem Typ haben Sie auch die Einstellung”Inline-Liste”, mit der Du die Ankreuzfelder in einer horizontalen Linie darstellen können.
  • Radio – Ein Feld vom Typ Radio ermöglicht es dem Benutzer, eine Option zu aktivieren. Die Optionen werden wiederum durch das Schreiben von getrennten Zeilen erzeugt. Bei diesem Typ hast Du wieder die Einstellung”Inline-Liste”.
  • reCAPTCHA – Füge Deinem Formular einen reCAPTCHA hinzu, um sicherzustellen, dass der Benutzer kein Roboter ist. Du kannst die Größe als normal oder kompakt und den Stil als hell oder dunkel einstellen.
  • Honeypot – Diese Anti-Spam-Technik funktioniert durch Hinzufügen eines Feldes, das für den Benutzer nicht sichtbar ist, aber dennoch von Spambots gesehen wird. Auf diese Weise, wenn der Spambot das Feld automatisch ausfüllt, kann die Spam-Einsendung erkannt und blockiert werden.
  • Versteckt – Füge ein verstecktes Feld hinzu, das für den Benutzer nicht sichtbar ist, aber ein Feld als Teil des Kontaktformulars übermittelt.

Eingabegröße – Lege die Größe der Felder fest, von extra klein bis extra groß.

Beschriftungen – Du kannst die Beschriftungen auf dem Formular ein- oder ausblenden.

Elementor Form Widget - Der Absenden-Button

  • Text – Wählen Sie den Text, der auf der Schaltfläche”Senden” angezeigt wird.
  • Größe – Legt die Größe der Schaltfläche”Senden” fest.
  • Spaltenbreite – Legt die Breite des Buttons in Prozent fest.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Ausrichtung – Legt die Ausrichtung rechts, zentriert, links oder ausgerichtet fest.
  • Icon – Fügt dem Absende -Button ein Icon aus der Font “Awesome Icon-Liste” hinzu.
  • Icon Position – Vor oder nach dem Text in der Schaltfläche.
  • Icon Abstand – Legt den Abstand zwischen dem Symbol und dem Schaltflächentext fest.

Elementor Form Widget - E-Mails & Optionen

  • E-Mail an – Legt fest, wohin die E-Mail gesendet wird. Sie können mehrere E-Mails einstellen, indem Sie jede E-Mail mit einem Komma trennen.
  • Betreff der E-Mail – Legt die Betreffzeile der E-Mail fest.
  • Von E-Mail – Hiermit wird das Feld von E-Mail festgelegt.
  • Von Name – Hiermit wird der Name der Person festgelegt, die die E-Mail gesendet hat.
  • Antwort auf – Wenn Du die E-Mail erhältst und auf Antwort klickst, ist dies die E-Mail, an die die Antwort gesendet wird. Um dem Benutzer, der die Nachricht gesendet hat, zu antworten, wählen Sie die Option “E-Mail-Feld”.
  • Metadaten – Füge weitere Informationen wie Datum, Uhrzeit, Seiten-URL, User Agent, Remote IP und Credit in die E-Mail ein.
  • HTML senden – Diese Option sendet die E-Mail-Benachrichtigungen in HTML.
  • Redirect to – Fügen Sie den Link hinzu, zu dem der Benutzer automatisch weitergeleitet wird, nachdem er das Formular erfolgreich abgeschickt hat.
  • Benutzerdefinierte Nachrichten – Bearbeiten Sie die Nachrichten, die der Benutzer sehen wird: Erfolgsmeldung, Fehlermeldung, Pflichtfeldnachricht und ungültige Nachricht.
Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden: https://elementor.com/pro-v140-form-integrations/ Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Elementor Form Widget - MailPoet & MailChimp-Integration

Für uns interessant! Du kannst auch in MailChimp und MailPoet mit der eingebauten Integration von Elementor arbeiten. Sieh Dir dazu dieses MailChimp-Tutorial-Video an.

Elementor Form Widget - Formular Design

Formular

  • Spaltenabstand – Legt den exakten Abstand zwischen den Spalten der Formularfelder fest.
  • Zeilenabstand – Legt den Abstand zwischen den Zeilen fest.

Etikett

  • Abstand – Legt den Abstand zwischen den Beschriftungen und den Feldern fest.
  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest.
  • Typografie – Passt die Typografie des Etiketts an.

Feld

  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest (Der Text, den der Benutzer ausfüllt).
  • Typografie – Legt die Typografie des eingegebenen Textes fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe der Felder fest.
  • Randfarbe – Legt die Randfarbe der Felder fest.
  • Rahmenbreite – Legt die Breite der Feldgrenzen fest.
  • Radius des Randes – Legt den Radius des Randes fest. Die Standardeinstellung hat einen abgerundeten Rand

Taste/Schalter (Button)

  • Normal / Hover – Wählen Sie diese Option, um die Schaltflächeneinstellungen für Normal- und Hover-Status zu ändern.

Normal

  • Textfarbe – Legt die Textfarbe der Schaltfläche fest.
  • Typografie – Legt die Typografie für den Text der Schaltflächen fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche fest.
  • Rahmentyp – Wähle den Typ des Knopfrahmens aus.
  • Breite – Legt die Breite des Rahmens fest.
  • Farbe – Legt die Farbe des Rahmens fest.
  • Rand Radius – Verleiht dem Button eine abgerundete Kantenform.
  • Text-Padding – Fügt einen Abstand zwischen dem Text und dem Rand des Buttons ein.

Hover (Schweben)

  • Textfarbe – Legt die Textfarbe für die Schaltfläche für den Hover-Modus fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche für den Hover-Modus fest.
  • Randfarbe – Legt die Randfarbe im Hover-Modus fest.
  • Animation – Fügt der Schaltfläche eine Hover-Animation hinzu.

Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden:

https://elementor.com/pro-v140-form-integrations/

Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Generelle Hilfe bekommst Du, leider wiederum nur auf Englisch, auf der Dokumenten-Seite von Elementor.