In diesem Artikel erkl\u00e4ren wir dir, wie WordPress-Tabellen funktionieren und wie sie mit Elementor-Widgets zu vergleichen sind. Dann zeigen wir dir, wie du Elementor-Tabellen manuell erstellst, und stellen dir einige Plugins vor, die den Editor um neue Tabellen-Widgets erweitern. Los geht’s!<\/p>\n
Wann du WordPress-Tabellen verwenden solltest<\/h2>\n
Sobald du anf\u00e4ngst, nach ihnen zu suchen, wirst du feststellen, dass Tabellen \u00fcberall im Internet zu finden sind. Das liegt daran, dass sie zu den vielseitigsten Elementen geh\u00f6ren, die du auf einer Webseite verwenden kannst.<\/p>\n
Nimm zum Beispiel Preistabellen. Es gibt kaum eine Webseite f\u00fcr Dienstleistungen oder Abonnements, die keine Tabellen verwendet, um dir den Vergleich von Angeboten zu erleichtern:<\/p>\n Mit Tabellen kannst du gro\u00dfe Mengen an Informationen so darstellen, dass sie f\u00fcr die Leser\/innen leicht verdaulich sind. Noch besser: Tabellen machen es den Nutzern einfacher, mehrere Datens\u00e4tze miteinander zu vergleichen:<\/p>\n Tabellen helfen dir nicht nur dabei, Informationen zu teilen, sondern k\u00f6nnen auch die Monotonie langer Abs\u00e4tze in einem Blogpost oder auf einer Seite durchbrechen. Normalerweise empfehlen wir dir, lange Textpassagen zu vermeiden, da sie schwer zu navigieren sind.<\/p>\n Mit dem Block-Editor<\/a> kannst du ganz einfach Tabellen zu deiner Webseite hinzuf\u00fcgen. Mit dem Tabellenblock <\/strong>kannst du die Anzahl der Zeilen und Spalten festlegen, die du ben\u00f6tigst:<\/p>\n Obwohl das Hinzuf\u00fcgen von Tabellen in WordPress einfach ist, sind deine Anpassungsm\u00f6glichkeiten etwas eingeschr\u00e4nkt. Du kannst zwar die Hintergrundfarbe \u00e4ndern, den Stil der Schaltfl\u00e4chen anpassen und die Schriftgr\u00f6\u00dfe ver\u00e4ndern, aber das war’s auch schon. Wenn du elegantere und komplexere Tabellen erstellen willst, musst du einen Page Builder wie Elementor (oder sogar Divi)<\/a> verwenden.<\/p>\n\n Wenn du \u00fcber die grundlegenden WordPress-Tabellen hinausgehen willst, bietet dir Elementor Zugang zu einem hochgradig anpassbaren Preistabellen-Widget<\/strong>. Damit kannst du Tabellentitel bearbeiten, \u00dcberschriften setzen, Listen von Merkmalen hinzuf\u00fcgen, Calls To Action (CTAs) anpassen und vieles mehr:<\/p>\n Vergiss nicht, dass du mit Elementor jede Art von Layout f\u00fcr jede Seite oder jeden Beitrag erstellen kannst, die du m\u00f6chtest. Das bedeutet, dass du mehrspaltige Designs einrichten kannst, so dass du mehrere Preistabellen-Widgets <\/strong>nebeneinander haben kannst:<\/p>\n Elementor verf\u00fcgt auch \u00fcber ein Inhaltsverzeichnis-Widget<\/strong>. Das macht die Navigation durch lange Inhalte<\/a> f\u00fcr deine Leser viel einfacher.<\/p>\n Die Erstellung einer Preistabelle mit Elementor ist ganz einfach. \u00d6ffne den Elementor-Editor, um loszulegen. Hier kannst du entweder mit einer leeren Seite beginnen oder eine Vorlage aus der Elementor-Bibliothek importieren:<\/p>\n Wenn du bereit bist, das Element hinzuzuf\u00fcgen, musst du die Anzahl der Spalten ausw\u00e4hlen, die die Tabelle haben soll. Klicke auf das Elementor-Pluszeichen am unteren Rand des Editors und w\u00e4hle die Spaltenstruktur aus, die du f\u00fcr den Preisbereich verwenden m\u00f6chtest:<\/p>\n Wenn du mehrere Spalten verwendest, musst du f\u00fcr jede Spalte ein eigenes Preistabellen-Widget <\/strong>einf\u00fcgen. Obwohl jede Tabelle ein eigenes Element ist, sehen die Nutzer sie nebeneinander (oder untereinander auf dem Handy) als Teil eines Abschnitts:<\/p>\n Wir empfehlen, zuerst ein Preistabellenmodul <\/strong>hinzuzuf\u00fcgen und es zu gestalten. Dann kannst du dieses Element in die verbleibenden Spalten duplizieren oder kopieren und jeder Spalte einen eigenen Text hinzuf\u00fcgen.<\/p>\n Um die Tabelle anzupassen, w\u00e4hlst du das Element aus und gehst zum Reiter Stil <\/strong>unter den Widget-Einstellungen. Elementor bietet dir eine Vielzahl von Styling-Optionen. Dazu geh\u00f6ren Farbauswahl, Typografieeinstellungen und einzigartige Konfigurationen f\u00fcr jeden Abschnitt der Tabelle:<\/p>\n Wenn du mit dem Stil der Preistabelle zufrieden bist, klicke mit der rechten Maustaste auf das Element und w\u00e4hle die Option Duplizieren<\/strong>. Eine Kopie der Tabelle wird unter dem urspr\u00fcnglichen Element angezeigt und du kannst sie in eine der leeren Spalten ziehen:<\/p>\n Diesen Vorgang wiederholst du f\u00fcr so viele Spalten, wie du haben m\u00f6chtest. Denke daran, dass jede Tabelle einen eigenen Stil haben kann, wenn du die Einstellungen nicht wiederverwenden willst. Achte in diesem Fall darauf, dass die Stile \u00e4hnlich genug sind, damit die Besucher wissen, dass sie einen Vergleich sehen.<\/p>\n Wenn du deine Tabelle anpasst, denke daran, dass du mit Elementor jedem Modul eigene CSS hinzuf\u00fcgen kannst. Gehe dazu in die erweiterten <\/strong>Einstellungen des Widgets und w\u00e4hle den Reiter Custom CSS<\/strong>:<\/p>\n Das Hinzuf\u00fcgen von benutzerdefiniertem CSS \u00fcber Elementor ist viel einfacher als das manuelle Bearbeiten von WordPress-Code<\/a>. Wenn du CSS in WordPress be arbeitest<\/a>, musst du auf die Themadateien zugreifen und den Code f\u00fcr eine optimale Leistung optimieren<\/a>. Mit Elementor musst du nur den CSS-Code in das entsprechende Feld f\u00fcr jedes Modul einf\u00fcgen.<\/p>\n Wenn das manuelle Hinzuf\u00fcgen von CSS einsch\u00fcchternd klingt, mach dir keine Sorgen. Um CSS zu lernen<\/a>, musst du kein Webentwickler sein<\/a>. Aber es ist eine wertvolle F\u00e4higkeit, die dir helfen wird, deine WordPress-Webseiten anzupassen (und vielleicht sogar eine Karriere in der Webentwicklung<\/a> zu finden).<\/p>\n Wenn alle Tabellen fertig sind, kannst du ihren Text bearbeiten und so viele Funktionen hinzuf\u00fcgen, wie du f\u00fcr jeden Eintrag brauchst. Dazu w\u00e4hlst du eine Tabelle aus und wechselst zum Reiter Inhalt <\/strong>unter den Widget-Einstellungen:<\/p>\n Die Bearbeitung des Inhalts deiner Preistabellen ist ganz einfach. Du kannst auf ein beliebiges Element innerhalb des Widgets klicken, um es zu bearbeiten. Wenn du mit dem Ergebnis zufrieden bist, sind deine Preistabellen einsatzbereit.<\/p>\n Obwohl Elementor viele Tools enth\u00e4lt, die dir bei der Erstellung von Tabellen helfen, kannst du immer noch weitere Widgets hinzuf\u00fcgen. In diesem Abschnitt stellen wir dir 12 Elementor-Plugins vor, mit denen du neue Arten von Tabellen zu deinen Beitr\u00e4gen und Seiten hinzuf\u00fcgen kannst. Auch wenn viele dieser Addons f\u00fcr Elementor entwickelt wurden, kannst du sie auch als normale Plugins installieren<\/a>.<\/p>\n Wie immer empfehlen wir nur erstklassige WordPress-Plugins<\/a>, die eine gute Leistung bieten und regelm\u00e4\u00dfig aktualisiert werden. Wenn du gut optimierte Plugins verwendest, kannst du deine Webseite skalieren<\/a>, ohne dass es zu Leistungsproblemen kommt.<\/p>\n ElementsKit<\/a> f\u00fcgt \u00fcber 85 Widgets zu Elementor hinzu. Du hast Optionen f\u00fcr einfache Tabellen, Preistabellen, Unterst\u00fctzung f\u00fcr die Einbettung von TablePress-Elementen und mehr.<\/p>\n Die Professional-Version von ElementsKit enth\u00e4lt au\u00dferdem ein erweitertes Tabellen-Widget. Damit kannst du den Tabellen Such- und Filterfunktionen hinzuf\u00fcgen. Au\u00dferdem kannst du eine Paginierung einbauen, damit die Nutzer\/innen durch die Eintr\u00e4ge navigieren k\u00f6nnen, ohne dass du riesige Tabellen auf deiner Webseite hast.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> ElementsKit-Lizenzen gibt es ab $39 pro Jahr<\/a>.<\/p>\n Wenn du ein Fan von Drag-and-Drop-Editoren bist (was du sein solltest, wenn du Elementor verwendest), wirst du WP Table Builder<\/a> lieben. Mit diesem Plugin kannst du Tabellen mit vorkonfigurierten Elementen wie Schaltfl\u00e4chen, Bewertungsabschnitten, Produktbewertungen und mehr erstellen.<\/p>\n Zus\u00e4tzlich zu den fortgeschrittenen Elementen hast du Zugriff auf grundlegende Module wie Text und Bilder. Das Plugin wird au\u00dferdem mit Tabellenvorlagen geliefert, die deine Arbeit noch einfacher machen.<\/p>\n Du kannst WP Table Builder-Tabellen mit dem Block-Editor zu deiner Webseite hinzuf\u00fcgen. Das Plugin l\u00e4sst sich auch mit Elementor integrieren, sodass du Tabellen ganz einfach \u00fcberall auf deiner Webseite platzieren kannst.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> WP Table Builder-Lizenzen beginnen bei $39 pro Jahr<\/a>.<\/p>\n TablePress<\/a> ist ein kostenloses Plugin, das einer Tabellenkalkulation in WordPress sehr nahe kommt. Das Plugin kann Daten in verschiedenen Formaten importieren, darunter Excel-, CSV- und JSON-Dateien. Du kannst sogar Tabellendaten f\u00fcr andere Programme exportieren.<\/p>\n Mit TablePress kannst du Tabellen erstellen, die eine Suchfunktion enthalten. Die Nutzer\/innen k\u00f6nnen w\u00e4hlen, wie viele Eintr\u00e4ge angezeigt werden sollen und sich von Seite zu Seite bewegen, wenn du gro\u00dfe Datens\u00e4tze anzeigst.<\/p>\n Das Einbinden von TablePress-Tabellen in Elementor ist einfach. Das Plugin erstellt einzigartige Shortcodes<\/a> f\u00fcr jede Tabelle. Mit dem Elementor Shortcode <\/strong>Widget kannst du diese Codes \u00fcberall auf deiner Webseite einf\u00fcgen.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> TablePress ist ein kostenloses Plugin, aber du kannst Premium-Erweiterungen<\/a> daf\u00fcr finden.<\/p>\n Essential Addons for Elementor<\/a> f\u00fcgt dem Page Builder \u00fcber 80 neue Widgets hinzu. Du hast Optionen f\u00fcr Preistabellen, Datentabellen, Inhaltsverzeichnisse und mehr.<\/p>\n Essential Addons for Elementor gibt es in zwei Versionen. Das kostenlose Plugin f\u00fcgt eine bessere Version des Preistabellen-Widgets hinzu, mit dem Elementor geliefert wird. Wenn du Zugriff auf Datentabellen haben m\u00f6chtest (mit Filterung, Suche und mehreren Stilen), musst du eine Premium-Lizenz erwerben.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Es gibt eine kostenlose Version von Essential Addons f\u00fcr Elementor und Premium-Lizenzen ab 39,97 $ pro Jahr<\/a>.<\/p>\n PowerPack f\u00fcr Elementor<\/a> f\u00fcgt dem Page Builder \u00fcber 70 Widgets hinzu. Das Plugin enth\u00e4lt au\u00dferdem eine gro\u00dfe Anzahl neuer Vorlagen, mit denen du Webseiten schneller gestalten<\/a> kannst.<\/p>\n Was Tabellen angeht, kannst du mit dem PowerPack sortierbare und durchsuchbare Datentabellen einrichten. Du kannst Daten mit Hilfe von CSV-Dateien in Tabellen importieren. Das Plugin enth\u00e4lt au\u00dferdem mehrere Optionen f\u00fcr Tabellenvorlagen.<\/p>\n Neben den Datentabellen bietet PowerPack auch Widgets f\u00fcr Info- und Preistabellen. Infotabellen sind ideal, wenn du deinen Besuchern eine \u00dcbersicht \u00fcber die von dir angebotenen Dienstleistungen geben m\u00f6chtest.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> PowerPack-Lizenzen gibt es ab $44 pro Jahr<\/a>.<\/p>\n Exclusive Addons f\u00fcr Elementor gibt es in einer kostenlosen und einer Premium-Version. Das kostenlose Plugin f\u00fcgt Elementor 39 neue Widgets hinzu, w\u00e4hrend du mit einer Premium-Lizenz \u00fcber 69 neue Elemente erh\u00e4ltst.<\/p>\n Bei den Tabellen f\u00fcgt die kostenlose Version ein neues Preistabellenmodul dem Mix hinzu. Mit der Premium-Version erh\u00e4ltst du Zugang zu Vergleichs- und Datentabellen. Die Vergleichstabellen funktionieren \u00e4hnlich wie die Preiselemente, aber du kannst neue Layouts und Stile verwenden.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Es gibt eine kostenlose Version von Exclusive Addons f\u00fcr Elementor<\/a>. Premium-Lizenzen gibt es ab $29 pro Jahr<\/a>.<\/p>\n JetElements<\/a> f\u00fcgt 45 neue Widgets zu Elementor hinzu. Die meisten von ihnen sind f\u00fcr E-Commerce-<\/a> und Abonnement-Webseiten<\/a> gedacht. JetElements hat aber auch einige interessante Tabellen-Widgets im Programm.<\/p>\n Zu diesen Widgets geh\u00f6ren Preistabellen und responsive Tabellen. Im Vergleich zu den grundlegenden Preistabellen in Elementor bietet dir die JetElements-Version viele neue Anpassungsm\u00f6glichkeiten. So kannst du zum Beispiel mit vielen visuellen Effekten wie Parallaxen und Mikroanimationen f\u00fcr Tabellenelemente spielen.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> JetElements All-Inclusive-Lizenzen gibt es ab 130 $ pro Jahr<\/a>. Du kannst auch benutzerdefinierte Widget-Bundles erstellen und nur die Optionen ausw\u00e4hlen, die du verwenden m\u00f6chtest.<\/p>\n Premium Addons f\u00fcr Elementor<\/a> gibt es sowohl in der kostenlosen als auch in der Premium-Version. Allerdings f\u00fcgt nur das Premium-Plugin neue Tabellen-Widgets zu Elementor hinzu.<\/p>\n Wenn du f\u00fcr eine Premium-Lizenz bezahlst, erh\u00e4ltst du Zugang zu neuen Daten- und Preistabellen-Widgets. Du kannst Datentabellen mit Diagramm- und Grafik-Widgets erg\u00e4nzen, wenn du deinen Besuchern mehr Informationen zeigen m\u00f6chtest.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Lizenzen f\u00fcr Premium Addons f\u00fcr Elementor gibt es ab $39 pro Jahr<\/a>.<\/p>\n DataMentor<\/a> ist ein Plugin, das Elementor ein einzelnes Tabellen-Widget hinzuf\u00fcgt. Dieses Widget bietet jedoch viel mehr Funktionen als die meisten Add-ons, die wir bisher gesehen haben.<\/p>\n DataMentor-Tabellen sind unglaublich vielseitig. Du kannst Bilder, Schaltfl\u00e4chen, Listen und Icons in jedes Element einf\u00fcgen. Das Widget erm\u00f6glicht es dir, Tabellen mit individuellen Stilen f\u00fcr jede Spalte oder Zeile zu erstellen. Du hast au\u00dferdem Zugriff auf verschiedene Tabellenvorlagen, wenn du mit der Gestaltung beginnen m\u00f6chtest.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> DataMentor ist ein kostenloses Plugin.<\/p>\n Happy Addons f\u00fcr Elementor<\/a> ist eines der umfangreichsten Plugins f\u00fcr den Page Builder. Dieses Tool f\u00fcgt Elementor \u00fcber 99 Widgets und eine breite Sammlung neuer Vorlagen hinzu.<\/p>\n F\u00fcr Tabellen bietet Happy Addons sowohl einfache als auch erweiterte Tabellen-Widgets. Die erweiterte Version unterst\u00fctzt den Import von Daten in verschiedenen Formaten sowie die Suche, Filterung und Paginierung. Au\u00dferdem hast du Zugriff auf mehrere vorgefertigte Tabellenlayouts. Zus\u00e4tzlich zu diesen Optionen bietet Happy Addons auch Elemente f\u00fcr Preis- und Vergleichstabellen.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Es gibt eine kostenlose Version von Happy Addons. Premium-Lizenzen gibt es ab 39 $ pro Jahr<\/a>.<\/p>\n Royal Elementor Addons<\/a> f\u00fcgt \u00fcber 40 neue Widgets zu Elementor hinzu. Diese sind alle kostenlos, aber das Plugin gibt es auch in einer Premium-Version, die zus\u00e4tzliche Anpassungsoptionen f\u00fcr jedes Widget freischaltet.<\/p>\n Mit den Royal Elementor Addons erh\u00e4ltst du eine neue Preistabelle, die du in Elementor verwenden kannst. Dieses Widget enth\u00e4lt mehrere neue Styling-Optionen. Au\u00dferdem verf\u00fcgt es \u00fcber eine Umschaltoption, mit der Besucher zwischen monatlichen und j\u00e4hrlichen Preisen (oder anderen Optionen) wechseln k\u00f6nnen.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Royal Elementor Addons ist kostenlos. Premium-Lizenzen kosten $29 pro Website<\/a> (es handelt sich um eine einmalige Geb\u00fchr).<\/p>\n Elementor Addon Elements ist ein kostenloses Plugin, das \u00fcber 24 neue Widgets zu Elementor hinzuf\u00fcgt. Darunter findest du Optionen f\u00fcr Preis-, Vergleichs- und Datentabellen.<\/p>\n Preistabellen bieten viele zus\u00e4tzliche Anpassungsm\u00f6glichkeiten, die das Standard-Widget von Elementor nicht hat. Bei Datentabellen kannst du w\u00e4hlen, ob du durchsuchbare oder filterbare Elemente erstellen m\u00f6chtest. Au\u00dferdem unterst\u00fctzen die Tabellen Animationen, was sie optisch viel ansprechender macht.<\/p>\n Hauptmerkmale:<\/strong><\/p>\n Preis:<\/strong> Elementor Addon Elements ist kostenlos<\/a>.<\/p>\n\n![\"Preistabellen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/kinsta-plans.png\")
![\"Mehrere](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/food-table-example.png\")
![\"Tabellen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/block-editor-table.png\")
Was eine Elementor-Tabelle leisten kann<\/h2>\n
![\"Das](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-pricing-table.png\")
![\"Beispiel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementor-price-table-template.png\")
So erstellst du eine Elementor-Tabelle (manuell)<\/h2>\n
![\"W\u00e4hle](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/import-elementor-template.png\")
![\"Ein](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/select-elementor-columns.png\")
![\"Bei](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/price-table-elementor.png\")
![\"Anpassen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/customize-table-style.png\")
![\"Dupliziere](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/duplicate-price-table.png\")
![\"Benutzerdefiniertes](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/custom-css-elementor.png\")
![\"Tabellentext](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/price-tables-example.png\")
Die besten Elementor-Tabellen-Plugins (12 Optionen)<\/h2>\n
1. ElementsKit Add-Ons f\u00fcr Elementor<\/h3>\n
![\"ElementsKit](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/elementskit-1.png\")
\n
2. WP Table Builder<\/h3>\n
![\"WP](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/wp-table-builder.png\")
\n
3. TablePress<\/h3>\n
![\"TablePress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/tablepress.png\")
\n
4. Essential Addons f\u00fcr Elementor<\/h3>\n
![\"Essential](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/essential-addons-elementor.png\")
\n
5. PowerPack f\u00fcr Elementor<\/h3>\n
![\"PowerPack](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/powerpack-elementor-1.png\")
\n
6. Exclusive Addons f\u00fcr Elementor<\/h3>\n
![\"Exclusive](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/exclusive-addons-elementor.png\")
\n
7. JetElements<\/h3>\n
![\"JetElements](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/jetelements-1.png\")
\n
8. Premium Addons f\u00fcr Elementor<\/h3>\n
![\"Premium](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/premium-addons-elementor.png\")
\n
9. DataMentor<\/h3>\n
![\"DataMentor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/datamentor.png\")
\n
10. Happy Addons f\u00fcr Elementor<\/h3>\n
![\"Happy](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/happy-addons-elementor.png\")
\n
11. Royal Elementor Addons<\/h3>\n
![\"Royal](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/royal-addons.png\")
\n
12. Elementor Addon Elements<\/h3>\n
![\"Elementor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/03\/Elementor-Addon-Elements-1.png\")
\n
Zusammenfassung<\/h2>\n