So erstellen Sie eine Elementor-Tabelle in WordPress

Tabellen sind eine Schlüsselkomponente in den meisten Websites. Sie können sie verwenden, um alle Arten von Informationen zu teilen, von Preisen bis hin zu Listen mit Funktionen und Links. Mit WordPress können Sie grundlegende Tabellen für Ihre Website einrichten, aber Sie suchen möglicherweise nach weiteren Anpassungsoptionen.

Mit Elementor erhalten Sie Zugriff auf mehrere Tabellen-Widgets. Darüber hinaus gibt es viele Elementor-Tabellen-Plugins, die dem beliebten Seitenersteller neue Widgets hinzufügen.

In diesem Artikel werden wir darüber sprechen, wie WordPress-Tabellen funktionieren und wie sie mit Elementor-Widgets verglichen werden. Dann zeigen wir Ihnen, wie Sie Elementor-Tabellen manuell erstellen, und stellen Ihnen einige Plugins vor, die dem Editor neue Tabellen-Widgets hinzufügen. Lasst uns anfangen!

Wann man WordPress-Tabellen verwendet

Sobald Sie anfangen, danach zu suchen, werden Sie feststellen, dass Tabellen überall im Web zu finden sind. Das liegt daran, dass sie zu den vielseitigsten Elementen gehören, die Sie auf einer Website verwenden können.

Nehmen Sie zum Beispiel Preistabellen. Es ist schwer, eine Service- oder Abonnement-Website zu finden, die keine Tabellen verwendet, um Ihnen beim Vergleichen von Optionen zu helfen:

Mithilfe von Tabellen können Sie große Mengen an Informationen auf eine Weise darstellen, die für den Leser leicht verdaulich ist. Noch besser, Tabellen machen es Benutzern einfacher, mehrere Datensätze miteinander zu vergleichen:

Tabellen helfen Ihnen nicht nur beim Teilen von Informationen, sondern können auch dazu beitragen, die Monotonie langer Absätze in einem Blogbeitrag oder einer Seite zu durchbrechen. In der Regel empfehlen wir Ihnen, lange Textwände zu vermeiden, da sie schwer zu navigieren sind.

Der Blockeditor bietet Ihnen die Möglichkeit, Ihrer Website ganz einfach Tabellen hinzuzufügen. Mit dem Tabellenblock können Sie die Anzahl der Zeilen und Spalten festlegen, die Sie benötigen:

Obwohl das Hinzufügen von Tabellen in WordPress einfach ist, sind Sie in Bezug auf die Anpassungsoptionen etwas eingeschränkt. Sie können Hintergrundfarben ändern, Schaltflächenstile anpassen und Schriftgrößen ändern, aber das war es auch schon. Wenn Sie stilvollere und komplexere Tabellen erstellen möchten, müssen Sie einen Seitenersteller wie Elementor (oder sogar Divi) verwenden.

Was ein Elementor-Tisch leisten kann

Wenn Sie über die grundlegenden WordPress-Tabellen hinausgehen möchten, erhalten Sie mit Elementor Zugriff auf ein hochgradig anpassbares Preistabellen -Widget. Auf diese Weise können Sie Tabellentitel bearbeiten, Überschriften-Tags festlegen, Funktionslisten hinzufügen, Calls To Action (CTAs) optimieren und vieles mehr:

Denken Sie daran, dass Sie mit Elementor jede Art von Layout erstellen können, die Sie für jede Seite oder jeden Beitrag wünschen. Das bedeutet, dass Sie mehrspaltige Designs einrichten können, sodass Sie mehrere Preistabellen -Widgets nebeneinander haben können:

Elementor enthält auch ein Inhaltsverzeichnis -Widget. Dies erleichtert Ihren Lesern das Navigieren in langen Inhalten erheblich.

So erstellen Sie eine Elementor-Tabelle (manuell)

Das Erstellen einer Preistabelle mit Elementor ist einfach. Öffnen Sie zunächst den Elementor-Editor. Von hier aus können Sie wählen, ob Sie mit einer leeren Seite beginnen oder eine Vorlage aus der Elementor-Bibliothek importieren möchten:

Wenn Sie bereit sind, das Element hinzuzufügen, sollten Sie die Anzahl der Spalten auswählen, die die Tabelle haben soll. Klicken Sie unten im Editor auf das Elementor-Pluszeichen und wählen Sie die Spaltenstruktur aus, die Sie für den Preisabschnitt verwenden möchten:

Denken Sie daran, dass Sie bei Verwendung mehrerer Spalten in jeder Spalte ein separates Preistabellen- Widget hinzufügen müssen. Obwohl jede Tabelle ein einzigartiges Element ist, sehen Benutzer sie nebeneinander (oder untereinander auf Mobilgeräten) als Teil eines Abschnitts:

Wir empfehlen, ein Preistabellenmodul hinzuzufügen und es zuerst zu gestalten. Anschließend können Sie dieses Element in die verbleibenden Spalten duplizieren oder kopieren und jedem einen eindeutigen Text hinzufügen.

Um die Tabelle anzupassen, wählen Sie das Element aus und wechseln Sie unter den Widget-Einstellungen zur Registerkarte Stil . Elementor bietet Ihnen viele Styling-Optionen. Dazu gehören Farbauswahl, Typografieeinstellungen und einzigartige Konfigurationen für jeden Abschnitt der Tabelle:

Wenn Sie mit dem Stil der Preistabelle zufrieden sind, klicken Sie mit der rechten Maustaste auf das Element und wählen Sie die Option Duplizieren . Unter dem ursprünglichen Element erscheint eine Kopie der Tabelle, die Sie in eine der leeren Spalten ziehen können:

Sie sollten diesen Vorgang für so viele Spalten wiederholen, wie Sie haben. Denken Sie daran, dass jede Tabelle einen einzigartigen Stil haben kann, wenn Sie die Einstellungen lieber nicht wiederverwenden möchten. Stellen Sie in diesem Fall sicher, dass die Stile ähnlich genug sind, damit die Besucher verstehen, dass sie sich einen Vergleich ansehen.

Denken Sie beim Anpassen Ihrer Tabelle daran, dass Sie mit Elementor benutzerdefiniertes CSS zu jedem Modul hinzufügen können. Gehen Sie dazu zu den erweiterten Einstellungen des Widgets und wählen Sie die Registerkarte Benutzerdefiniertes CSS aus:

Das Hinzufügen von benutzerdefiniertem CSS über Elementor ist viel einfacher als das manuelle Bearbeiten von WordPress-Code. Ebenso erfordert das Bearbeiten von CSS in WordPress, dass Sie auf Designdateien zugreifen und den Code für Spitzenleistung optimieren. Bei Elementor müssen Sie nur den CSS-Code in das entsprechende Feld für jedes Modul einfügen.

Wenn das manuelle Hinzufügen von CSS einschüchternd klingt, machen Sie sich keine Sorgen. Um CSS zu lernen, müssen Sie kein Webentwickler sein. Es ist jedoch eine wertvolle Fähigkeit, die Ihnen helfen wird, Ihre WordPress-Websites anzupassen (und vielleicht sogar eine Karriere in der Webentwicklung zu finden).

Sobald alle Ihre Tische eingerichtet sind, ist es an der Zeit, ihren Text zu bearbeiten und so viele Funktionen hinzuzufügen, wie Sie für jeden Eintrag benötigen. Sie können dies tun, indem Sie eine Tabelle auswählen und zur Registerkarte Inhalt unter den Widget-Einstellungen wechseln:

Die Bearbeitung des Inhalts Ihrer Preistabellen ist einfach. Sie können auf jedes Element innerhalb des Widgets klicken, um mit der Bearbeitung zu beginnen. Sobald Sie mit den Ergebnissen zufrieden sind, sind Ihre Preistabellen einsatzbereit.

Top Elementor Table Plugins (12 Optionen)

Obwohl Elementor viele Tools enthält, die Ihnen beim Erstellen von Tabellen helfen, können Sie der Liste jederzeit weitere Widgets hinzufügen. In diesem Abschnitt sehen wir uns 12 Elementor-Plugins an, mit denen Sie Ihren Beiträgen und Seiten neue Arten von Tabellen hinzufügen können. Obwohl viele dieser Addons für Elementor entwickelt wurden, können Sie sie als reguläre Plugins installieren.

Wie immer empfehlen wir nur erstklassige WordPress-Plugins, die eine hervorragende Leistung bieten und regelmäßig aktualisiert werden. Die Verwendung gut optimierter Plugins hilft Ihnen, Ihre Website zu skalieren, ohne auf Leistungsprobleme zu stoßen.

1. ElementsKit-Add-Ons für Elementor

ElementsKit fügt Elementor über 85 Widgets hinzu. Sie haben Optionen für Basistabellen, Preistabellen, Unterstützung für das Einbetten von TablePress-Elementen und mehr.

Die Professional-Version von ElementsKit enthält auch ein erweitertes Tabellen-Widget. Dadurch können Sie Tabellen Such- und Filterfunktionen hinzufügen. Außerdem können Sie Paginierung einfügen, damit Benutzer durch Einträge navigieren können, ohne riesige Tabellen auf Ihrer Website zu haben.

Hauptmerkmale:

• Drei Arten von Tabellen-Widgets
• Unterstützung für das Filtern, Suchen und Paginieren von Tabellen
• Integration mit TablePress zum Einbetten von Tabellen

Preis: ElementsKit-Lizenzen beginnen bei 39 $ pro Jahr.

2. WP-Tabellengenerator

Wenn Sie ein Fan von Drag-and-Drop-Editoren sind (was Sie sein sollten, wenn Sie Elementor verwenden), wird Ihnen die Verwendung von WP Table Builder gefallen. Mit diesem Plugin können Sie Tabellen mit vorkonfigurierten Elementen wie Schaltflächen, Bewertungsabschnitten, Produktbewertungen und mehr erstellen.

Zusätzlich zu den erweiterten Elementen erhalten Sie Zugriff auf grundlegende Module wie Text und Bilder. Das Plugin wird auch mit Tabellenvorlagen geliefert, die Ihre Arbeit noch einfacher machen.

Sie können WP Table Builder-Tabellen mit dem Blockeditor zu Ihrer Website hinzufügen. Das Plugin lässt sich auch in Elementor integrieren, wodurch es einfach ist, Tabellen überall auf Ihrer Website zu platzieren.

Hauptmerkmale:

• Verwenden Sie einen Drag-and-Drop-Tabellengenerator
• Erhalten Sie Zugriff auf vorgefertigte Elemente wie Schaltflächen, Bewertungsabschnitte und Produktbewertungen
• Passen Sie den Stil jedes Elements in Ihren Tabellen an
• Verwenden Sie vorgefertigte Seitenvorlagen

Preis: WP Table Builder-Lizenzen beginnen bei 39 $ pro Jahr.

3. TablePress

TablePress ist ein kostenloses Plugin, das dem Hinzufügen von Tabellenkalkulationsfunktionen zu WordPress so nahe wie möglich kommt. Das Plugin kann Daten in verschiedenen Formaten importieren, darunter Excel-, CSV- und JSON-Dateien. Sie können sogar Tabellendaten für andere Programme exportieren.

Mit TablePress können Sie Tabellen erstellen, die eine Suchfunktion enthalten. Benutzer können auswählen, wie viele Einträge angezeigt und von Seite zu Seite verschoben werden sollen, wenn Sie riesige Datensätze anzeigen.

Das Einbetten von TablePress-Tabellen mit Elementor ist einfach. Das Plugin erstellt eindeutige Shortcodes für jede Tabelle. Das Elementor Shortcode- Widget hilft Ihnen, diese Codes überall auf Ihrer Website hinzuzufügen.

Hauptmerkmale:

• Importieren und exportieren Sie Datensätze in den Formaten Excel, CSV, JSON und HTML
• Füge durchsuchbare Tabellen zu WordPress hinzu
• Paginierung für Tabellen aktivieren

Preis: TablePress ist ein kostenloses Plugin, aber Sie können Premium-Erweiterungen dafür finden.

4. Wesentliche Add-ons für Elementor

Essential Addons for Elementor fügt dem Seitenersteller über 80 neue Widgets hinzu. Sie haben Optionen für Preistabellen, Datentabellen, Inhaltsverzeichnisse und mehr.

Essential Addons für Elementor gibt es in zwei Versionen. Das kostenlose Plugin fügt eine bessere Version des Preistabellen-Widgets hinzu, mit dem Elementor geliefert wird. Wenn Sie auf Datentabellen zugreifen möchten (einschließlich Filtern, Suchen und mehreren Stilen), müssen Sie für eine Premium-Lizenz bezahlen.

Hauptmerkmale:

• Fügen Sie Preis-, Daten- und Inhaltstabellen-Widgets hinzu
• Aktivieren Sie das Suchen und Filtern innerhalb von Tabellen

Preis: Es gibt eine kostenlose Version von Essential Addons für Elementor und Premium-Lizenzen beginnen bei 39,97 $ pro Jahr.

5. PowerPack für Elementor

PowerPack für Elementor fügt dem Seitenersteller über 70 Widgets hinzu. Das Plugin enthält auch eine Vielzahl neuer Vorlagen, mit denen Sie Websites schneller gestalten können.

Soweit Tabellen gehen, ermöglicht Ihnen PowerPack, sortierbare und durchsuchbare Datentabellen einzurichten. Sie können Daten mithilfe von CSV-Dateien in Tabellen importieren. Das Plugin enthält auch mehrere Optionen für Tabellenvorlagen.

Über Datentabellen hinaus bietet PowerPack Info- und Preistabellen-Widgets. Infotafeln sind perfekt, wenn Sie Besuchern eine Aufschlüsselung der von Ihnen angebotenen Dienstleistungen bieten möchten.

Hauptmerkmale:

• Erstellen Sie sortierbare und durchsuchbare Datentabellen
• Importieren Sie Datentabellen im CSV-Format
• Fügen Sie Preis- und Infotabellen-Widgets hinzu

Preis: PowerPack-Lizenzen beginnen bei 44 $ pro Jahr.

6. Exklusive Add-ons für Elementor

Exklusive Addons für Elementor gibt es sowohl in kostenlosen als auch in Premium-Versionen. Das kostenlose Plugin fügt Elementor 39 neue Widgets hinzu, während eine Premium-Lizenz Ihnen über 69 neue Elemente einbringt.

Wenn es um Tabellen geht, fügt die kostenlose Version dem Mix ein neues Preistabellenmodul hinzu. Mit der Premium-Version erhalten Sie Zugriff auf Vergleichs- und Datentabellen. Vergleichstabellen funktionieren ähnlich wie Preiselemente, aber Sie können neue Layouts und Stile verwenden.

Hauptmerkmale:

• Fügen Sie ein neues Preistabellenmodul hinzu
• Erhalten Sie Zugriff auf Vergleichs- und Datentabellen
• Greifen Sie auf mehrere Layouts für Tabellen-Widgets zu

Preis: Es gibt eine kostenlose Version von Exclusive Addons für Elementor. Premium-Lizenzen beginnen bei 29 $ pro Jahr.

7. JetElements

JetElements fügt Elementor 45 neue Widgets hinzu. Die meisten von ihnen sind auf E-Commerce- und Abonnement-Websites ausgerichtet. JetElements enthält jedoch auch mehrere interessante Tabellen-Widgets in seiner Liste.

Unter diesen Widgets befinden sich Preis- und Reaktionstabellen. Im Vergleich zu den Basispreistabellen in Elementor bietet Ihnen die JetElements-Version viele neue Anpassungsoptionen. Sie können beispielsweise mit vielen visuellen Effekten wie Parallaxe und Mikroanimationen für Tischelemente spielen.

Hauptmerkmale:

• Fügen Sie Elementor Preise und responsive Tabellen hinzu
• Passen Sie Tabellen mit neuen visuellen Effekten wie Parallaxe an

Preis: JetElements All-Inclusive-Lizenzen beginnen bei 130 $ pro Jahr. Sie können auch benutzerdefinierte Widget-Pakete erstellen und nur die Optionen auswählen, die Sie verwenden möchten.

8. Premium-Addons für Elementor

Premium-Addons für Elementor gibt es sowohl in kostenlosen als auch in Premium-Versionen. Allerdings fügt nur das Premium-Plugin neue Tabellen-Widgets zu Elementor hinzu.

Wenn Sie für eine Premium-Lizenz bezahlen, erhalten Sie Zugriff auf neue Daten- und Preistabellen-Widgets. Sie können Datentabellen mit Diagramm- und Grafik-Widgets begleiten, wenn Sie Ihren Besuchern mehr Informationen anzeigen möchten.

Hauptmerkmale:

• Fügen Sie Daten- und Preistabellen-Widgets zu Elementor hinzu
• Begleiten Sie Tabellen mit Diagramm- und Grafik-Widgets

Preis: Lizenzen für Premium-Add-ons für Elementor beginnen bei 39 $ pro Jahr.

9. DatenMentor

DataMentor ist ein Plugin, das Elementor ein einzelnes Tabellen-Widget hinzufügt. Dieses Widget bietet jedoch viel mehr Funktionen als die meisten Add-Ons, die wir bisher gesehen haben.

DataMentor-Tabellen sind unglaublich vielseitig. Sie können jedem Element Bilder, Schaltflächen, Listen und Symbole hinzufügen. Mit dem Widget können Sie Tabellen mit individuellen Stilen für jede Spalte oder Zeile erstellen. Sie erhalten auch Zugriff auf mehrere Tabellenvorlagen, wenn Sie mit dem Designprozess beginnen möchten.

Hauptmerkmale:

• Fügen Sie Elementor ein neues Tabellen-Widget hinzu
• Erhalten Sie Zugriff auf mehrere Tabellenvorlagen
• Fügen Sie Bilder, Text, Schaltflächen, Listen und Symbole in Tabellen hinzu

Preis: DataMentor ist ein kostenloses Plugin.

10. Fröhliche Addons für Elementor

Happy Addons for Elementor ist eines der umfassendsten Plugins für den Page Builder. Dieses Tool fügt Elementor über 99 Widgets und seiner Bibliothek eine breite Sammlung neuer Vorlagen hinzu.

Was Tische betrifft, enthält Happy Addons sowohl grundlegende als auch erweiterte Tisch-Widgets. Die erweiterte Version unterstützt importierte Daten in mehreren Formaten sowie Suchen, Filtern und Paginieren. Außerdem erhalten Sie Zugriff auf mehrere vorgefertigte Tabellenlayouts. Zusätzlich zu diesen Optionen enthält Happy Addons auch Preis- und Vergleichstabellenelemente.

Hauptmerkmale:

• Zugriff auf grundlegende und erweiterte Tabellen-Widgets
• Importieren Sie Daten für erweiterte Funktionen
• Verwenden Sie vorgefertigte Tabellenlayouts
• Preis- und Vergleichstabellen hinzufügen

Preis: Es gibt eine kostenlose Version von Happy Addons. Premium-Lizenzen beginnen bei 39 $ pro Jahr.

11. Königliche Elementor-Addons

Royal Elementor Addons fügt Elementor über 40 neue Widgets hinzu. Diese sind alle kostenlos, aber das Plugin ist auch in einer Premium-Version erhältlich, die zusätzliche Anpassungsoptionen für jedes Widget freischaltet.

Mit Royal Elementor Addons erhalten Sie eine neue Preistabelle zur Verwendung in Elementor. Dieses Widget enthält mehrere neue Gestaltungsoptionen. Außerdem gibt es eine Umschaltoption, mit der Besucher zwischen monatlichen und jährlichen Preisen (oder anderen Optionen) wechseln können.

Hauptmerkmale:

• Fügen Sie Elementor ein neues Preistabellen-Widget hinzu
• Passen Sie Preistabellen mit neuen Gestaltungsoptionen an
• Fügen Sie Ihren Tabellen einen Preisumschalter hinzu

Preis: Royal Elementor Addons ist kostenlos. Premium-Lizenzen kosten 29 US-Dollar pro Website (eine einmalige Gebühr).

12. Elementor Addon-Elemente

Elementor Addon Elements ist ein kostenloses Plugin, das Elementor über 24 neue Widgets hinzufügt. Darunter haben Sie Optionen für Preis-, Vergleichs- und Datentabellen.

Preistabellen enthalten viele zusätzliche Anpassungsoptionen, die das standardmäßige Elementor-Widget nicht bietet. Bei Datentabellen können Sie wählen, ob Sie durchsuchbare oder filterbare Elemente erstellen möchten. Darüber hinaus unterstützen Tabellen Animationen, wodurch sie optisch ansprechender werden können.

Hauptmerkmale:

• Fügen Sie Preis-, Vergleichs- und Datentabellen zu Elementor hinzu
• Wählen Sie zwischen filterbaren und durchsuchbaren Datentabellen
• Fügen Sie Animationen zu Datentabellen hinzu

Preis: Elementor Addon Elements ist kostenlos.

Zusammenfassung

Elementor bietet Ihnen eine breite Palette von Tools, um stilvolle und komplexe WordPress-Tabellen zu erstellen. Viele WordPress-Tabellen-Plugins sind auch mit Elementor kompatibel, was bedeutet, dass Sie mit dem Seitenersteller fast jede Art von Tabelle zu Ihrer Website hinzufügen können.

Der Elementor-Seitenersteller enthält ein intuitives Preistabellen -Widget. Wenn Sie andere Arten von Tabellen hinzufügen möchten, empfehlen wir die Verwendung von Elementor-Tabellen-Plugins wie ElementsKit oder WP Table Builder.

Kinsta CDN ist ein Hochleistungs-CDN, das allen Kinsta-Kunden ohne zusätzliche Kosten zur Verfügung steht. Es basiert auf unserer kostenlosen Cloudflare-Integration und stellt Ihre Inhalte automatisch von über 200 PoPs auf der ganzen Welt bereit. Wenn du Fragen zu Kinsta CDN hast, kannst du dich gerne an unser 24/7-Support-Team wenden, um weitere Unterstützung zu erhalten!