So verwenden Sie TablePress mit Elementor (Widget + Shortcode)

Wichtige Erkenntnisse

• TablePress arbeitet auf zwei Arten mit Elementor zusammen: ein Widget namens TablePress-Tabelle, das TablePress 3.4 zum Elementor-Panel hinzufügt, und der Shortcode [Tabelle id=1 /], der im Shortcode-Widget platziert ist.
• Das TablePress-Tabellen-Widget in Elementor verfügt über einen Table-Dropdown und ein Konfigurationsparameterfeld und verfügt über keine Style-Registerkarte.
• TablePress schaltet standardmäßig Sortierung, Suche und Paginierung für Besucher ein, mit 10 Zeilen pro Seite.
• Horizontales Scrollen ist in TablePress standardmäßig ausgeschaltet, sodass eine fünfspaltige Tabelle auf einem 390-px-Telefon überläuft, bis Sie sie in den Einstellungen der Tabelle angekreuzt haben.
• Für eine kurze Tabelle, die innerhalb von Elementor bearbeitet und gestylt werden sollte, ist ein Tabellen-Widget wie Master Addons Dynamic Table weniger Arbeit als TablePress.

TablePress und Elementor arbeiten ohne Bridge-Plugin zusammen, Sie bauen die Tabelle in TablePress auf, legen sie dann auf eine Elementor-Seite mit dem TablePress-Tabellen-Widget oder mit einem Shortcode abDie Tabelle behält ihre Sortierung, Suche und Paginierung.

Diese Anleitung behandelt beide Methoden, das Styling und die Einstellung, die breite Tabellen auf Telefonen fixiert, Außerdem steht da, wann ein einfaches Tisch-Widget die bessere Wahl ist Hier wurde alles mit TablePress 3.4 und Elementor 4.3 getestet.

Schritt 1: Erstellen oder importieren Sie die Tabelle in TablePress

Die Tabelle selbst wird außerhalb von Elementor erstellt, auf den TablePress-Bildschirmen im WordPress-Dashboard.

1. Installieren und aktivieren TablePress von Plugins, Neues hinzufügen.
2. Offen TablePress Im Dashboard Menü.
3. Um eine Tabelle einzugeben, klicken Sie Neu hinzufügenGeben Sie einen Namen ein, legen Sie die Anzahl der Zeilen und Spalten fest und füllen Sie die Zellen aus.
4. Um eine Tabelle einzugeben, klicken Sie auf ImportWählen Datei HochladenWählen Sie die Datei aus und behalten Sie sie bei Als neue Tabelle hinzufügen und klicken Import.
5. Die ID der Tabelle beachten Die erste Tabelle ist ID 1.

TablePress importiert Excel, CSV, HTML - und JSON-Dateien, Wir haben eine sechsreihige CSV der Versandraten importiert, und sie kam mit der ersten Zeile, die bereits als Kopfzeile festgelegt war.

Schritt 2: Fügen Sie es mit dem TablePress-Tabellen-Widget hinzu

TablePress registriert ein eigenes Elementor-Widget, sodass diese Methode keinen Shortcode benötigt.

1. Bearbeiten Sie Ihre Seite mit Elementor.
2. Durchsuchen Sie das Widget-Panel nach TabellePressetisch.
3. Ziehen Sie das Widget in einen Container.
4. Öffnen Sie die Tabelle Dropdown und wählen Sie Ihre Tabelle Tabellen sind nach ID und Name aufgelistet.
5. Veröffentlichen Sie die Seite.

Die Fortgeschritten Abschnitt unter dem Dropdown enthält ein Feld, Konfigurationsparameter. Es akzeptiert die gleichen Parameter, die Sie in einen Shortcode einfügen würden, für Fälle, in denen eine Seite die Tabelle mit verschiedenen Optionen anzeigen sollte.

Oder fügen Sie es mit einem Shortcode hinzu

Der Shortcode erledigt die gleiche Arbeit und funktioniert überall dort, wo Shortcodes funktionieren.

1. Drag Elementors Kurzcode Widget in einen Container.
2. Typ [table id=1 /]1 durch die ID Ihres Tisches ersetzen.
3. Klicken Sie auf Bewerben Vorschau zu laden.

Auf unserer Testseite druckten das Widget und der Shortcode dieselbe Tabelle, Verwenden Sie das Widget, wann immer Sie können, denn durch die Auswahl aus einem Dropdown werden Tippfehler in der ID vermieden.

Sortieren, Suchen und Paginieren

Diese werden bei jeder neuen Tabelle eingeschaltet, Sie ändern sie pro Tabelle, in der benannten Box Tischfunktionen für Website-Besucher Auf dem Bearbeitungsbildschirm der Tabelle.

Bei einer Tabelle mit sechs Zeilen sind Suche und Paginierung unübersichtlich. Kleben Sie sie nicht an und die Tabelle zeigt sie als einfaches Raster an.

Styling einer TablePress-Tabelle in Elementor

Das TablePress-Tabellen-Widget verfügt über keine Tisch-Styling-Steuerelemente in Elementor, sodass der Look an drei weiteren Stellen eingestellt ist.

• Tabellenoptionen Auf dem Bearbeitungsbildschirm der Tabelle: Welche Zeilen sind Kopf - und Fußzeile, die Alternierende Reihenfarben, Hervorhebung des Zeilenausschlags, und ein Zusätzliche CSS-Kurse Feld.
• Benutzerdefiniertes CSS Für Farben, Schriftarten und Ränder TablePress gibt jeder Tabelle eine Klasse basierend auf ihrer ID, sodass Sie eine Tabelle anvisieren können.
• Der Reiter Erweitert des Widgets In Elementor für Rand, Polsterung und Breite um den Tisch.

Ein kurzes CSS-Beispiel, das den Header von Tabelle 1 neu gestaltet:

.tablepress-id-1 thead th {
  background: #101223;
  color: #ffffff;
}
.tablepress-id-1 tbody td {
  padding: 12px 16px;
}

Fügen Sie es in Erscheinungsbild, Anpassung, zusätzliches CSS oder in eine beliebige benutzerdefinierte CSS-Box ein, die Ihr Setup hat. Elementor Pro verfügt über eines pro Element und die Master-Add-ons Benutzerdefinierte CSS-Erweiterung Fügt auch eines hinzu.

Fixieren Sie den Tisch auf Telefonen

Auf einem 390 px breiten Telefon lief unsere fünfspaltige Tabelle am rechten Bildschirmrand vorbei und die letzte Spalte konnte nicht gelesen werden.

1. Bearbeiten Sie die Tabelle in TablePress.
2. Unter Tischfunktionen für Website-BesucherAnkreuzen Horizontales Scrollen.
3. Klicken Sie auf Änderungen speichern und laden Sie die Seite auf Ihrem Telefon neu.

TablePress verkauft auch eine Responsive Tables-Funktion in seinem Pro-Plan (89 $ pro Jahr, als wir nachgesehen haben), mit Modi, die Zeilen auf kleinen Bildschirmen stapeln oder zusammenklappen. Andere Möglichkeiten, mit breiten Tabellen umzugehen, finden Sie in unserem Leitfaden Responsive Tabellen in Elementor.

Wenn ein Tabellen-Widget die bessere Wahl ist

TablePress ist für Daten gebaut Für eine kleine Tabelle, die wirklich Teil des Seitendesigns ist, fügt sie Schritte hinzu: einen zweiten Admin-Bildschirm, CSS an einer anderen Stelle und ein Plugin, um auf dem Laufenden zu bleiben.

Brauchen Sie nur einen kleinen Tisch? Die Dynamisches Tabellen-Widget Baut es im Elementor-Panel auf, mit einer Style-Registerkarte und Zeilen, die auf Telefonen gestapelt werden.

Dynamic Table hat keine Sortierung, Suche oder Import, also verwenden Sie TablePress für Daten und das Widget für Layout-Tabellen wie einen Zeitplan oder ein Spezifikationsblatt Die anderen Optionen werden in unserem verglichen Rondierung von Elementortisch-Plugins.

Häufig gestellte Fragen

Letzte Gedanken

TablePress und Elementor passen gut zusammen für Datentabellen: Importieren Sie die Datei, lassen Sie das TablePress-Tabellen-Widget fallen und denken Sie daran, das horizontale Scrollen für Telefone einzuschalten. Das Styling erfordert ein wenig CSS, da das Widget keinen Style-Tab hat.

Für kurze Tabellen, die wie ein Teil der Seite aussehen sollten, ist Dynamische Tabelle Behält die Zellen und das Styling im Elementor.

Verwandte Lektüre

• So erstellen Sie eine Tabelle in Elementor (4 Wege)
• Beste Inhaltsverzeichnis Plugins für WordPress