So erstellen Sie Ihre erste Tabelle in WP Table Builder

Anforderungen #

Was Sie bauen werden #

In diesem Tutorial erstellen Sie eine einfache Produktübersichtsseite mit fünf Elementtypen: einem Textinhalt, einem Produktbild, einer Merkliste, einer Sternebewertung und einem Schaltflächen-Button zum Handeln. Am Ende wissen Sie, wie Sie jedes Element in jede beliebige Zelle einfügen und wie Sie die fertige Tabelle überall auf Ihrer WordPress-Website einbetten können.

Schritt 1: Öffnen Sie den Tabelleneimer #

Nachdem die Erweiterung installiert und aktiviert WP Table Builder wurde, öffnen Sie Ihr WordPress-Dashboard. Sie werden ein neues Element sehen. WP Table Builder Menüpunkt in der linken Admin-Seitenleiste.

Rufen Sie die Schaltfläche „Über“ an. WP Table Builder Menü, dann klicken Sie Neu hinzufügen in der Popup-Ansicht.

Alternativ können Sie auf die Schaltfläche „Weiter“ klicken. WP Table Builder Menüpunkt (1) und dann Neu hinzufügen (2) von der sekundären Seitenleiste aus.

Schritt 2: Zeilen und Spalten festlegen #

Geben Sie auf dem Setup-Bildschirm die gewünschte Anzahl an reihen (1) und Spalten (2) Ihre Tabelle benötigt, und klicken Sie dann auf Neu erstellen (3).

Sie können später Zeilen und Spalten hinzufügen oder entfernen, also keine Sorge, dass es genau so aussieht.

Schritt 3: Namn für Ihre Tabelle #

Sie sehen nun den WP Table Builder Editor. Fügen Sie im oberen Titelfeld einen Namen für Ihre Tabelle ein (1). Ein eindeutiger Name erleichtert die späteren Suche nach Tabellen, wenn Sie viele davon haben.

Schritt 4: Elemente verstehen (Frei vs. Pro) #

WP Table Builder Es gibt zwei Arten von Elementen:

• Grundelemente (Frei und Pro): Text, Bild, Liste, Sternebewertung, Schaltfläche, benutzerdefinierter HTML, Kurzcode
• Pro-Elemente: Symbol, Textsymbol, gestaltete Liste, Kreisskala, Band, Badge, Fortschrittsbalken

Grundelemente sind sowohl in der kostenlosen als auch in der Pro-Version erhältlich. Für Pro-Elemente ist eine WP Table Builder Pro Lizenz.

Um ein Element hinzuzufügen, ziehen Sie es von der linken Seitenleiste und legen Sie es in eine Tabellenzelle ab.

Schritt 5: Text hinzufügen #

Text ist das häufigste Element. Es gibt zwei Möglichkeiten, es hinzuzufügen:

• Ziehen und Ablegen: Ziehen Sie die Text Ein Element aus der Seitenleiste in eine Zelle einfügen.
• Klicken Sie, um zu typenKlicken Sie direkt in eine leere Zelle und beginnen Sie mit der Eingabe.

Sobald ein Textelement ausgewählt ist, zeigt die linke Seitenleiste Stylingoptionen an:

1. Schriftfarbe — Farbe des Textes
2. Link font color — Farbe aller Hyperlinks innerhalb des Textes
3. Schriftgröße — Textgröße in Pixeln
4. Padding — innere Abstände
5. Margin — Außenabstand

Eine schwebende Symbolleiste erscheint ebenfalls über dem ausgewählten Text. Fettschrift, Kursivschrift, durchgezogener Strich, Link und Ausrichtung Steuerung.

Schritt 6: Ein Bild hinzufügen #

Ziehen Sie die Bild Element in eine Zelle einfügen, dann klicken Hochladen Um ein Bild aus Ihrer WordPress-Mediathek auszuwählen oder ein neues zu laden.

Nachdem Sie das Bild ausgewählt haben, verwenden Sie die linke Seitenleiste, um es zu konfigurieren:

• Allgemeiner Tab — Einstellung der Bildausrichtung (1) und Hinzufügen von Alternativtexten (2) für SEO und Barrierefreiheit
• Tab "Größe" — ändern Sie die Bildbreite und -höhe
• Tab „Verknüpfung“ — machen Sie das Bild klickbar, indem Sie eine URL hinzufügen, und legen Sie optional fest, dass der Link in einer neuen Registerkarte geöffnet wird Ziellink → Leer

Tipp: Legen Sie immer Text zu den Bildern in Tabellen bei. Das verbessert die Barrierefreiheit und hilft Suchmaschinen, Ihre Inhalte zu verstehen.

Schritt 7: Eine Liste hinzufügen #

Ziehen Sie die Liste Element in eine Zelle einfügen und die Elemente direkt in der Zeile bearbeiten.

Die Liste kann aus drei Registerkarten in der linken Seitenleiste konfiguriert werden:

• Allgemeiner Tab — Änderung der Listenart (punktierte/numerierte Liste), der Randbreite und des Randzusatzes
• Schriftart-Tab — Anpassen der Schriftfarbe und Größe der Listenelemente
• Registerkarte „Layout“ — Steuerung der Zeilenabstand und der Listeneinrichtung

Schritt 8: Sternebewertung hinzufügen #

Ziehen Sie die Sternebewertung Fügen Sie das Element in eine Zelle ein und klicken Sie auf die Sterne, um die Bewertung festzulegen.

Aus der linken Seitenleiste können Sie die folgenden Einstellungen vornehmen:

1. Höchste Bewertung — Höchstzahl an Sternen (Standardwert ist 5)
2. Bewertungswertung — die aktuelle Bewertung zur Anzeige
3. Größe — Sterngröße
4. Ausrichtung — links, mittig oder rechts
5. Farbe — Sternfarbe
6. Anzeige der Bewertungsumfang — Wechseln Sie die Anzeige der numerischen Werte neben den Sternen.

Schritt 9: Ein Button hinzufügen #

Ziehen Sie die Schaltfläche Fügen Sie das Element in eine Zelle ein und klicken Sie dann auf das Element, um den Text und den Link des Buttons zu bearbeiten.

Die linke Seitenleiste ermöglicht es Ihnen, Größe, Randradius, Hintergrundfarbe, Hubfarbe, Textfarbe, Text-Hubfarbe, Schriftgröße, Schaltflächenausrichtung, Inhaltsausrichtung und Schaltflächen-ID anzupassen.

Ihr fertiges Tablett sollte nun so aussehen:

Schritt 10: Ihre Tabelle speichern #

Wichtig: Sie müssen Ihre Tabelle speichern, bevor Sie sie ansehen, einbetten oder später wieder aufrufen können. Klicken Sie auf Tabellen speichern Button in der rechten oberen Ecke des Editors.

Wenn Sie den Editor schließen, ohne die Änderungen zu speichern, werden Ihre Änderungen verloren.

Schritt 11: Die Tabelle in einen Beitrag oder eine Seite einbetten #

Sobald Sie die Datei gespeichert haben, klicken Sie auf Einbetten Die Schaltfläche befindet sich in der oberen Symbolleiste. Sie kopiert den Kurzcode der Tabelle automatisch in Ihren Zwischenablageordner.

Öffnen Sie nun einen beliebigen WordPress-Beitrag oder eine beliebige Seite, auf der die Tabelle angezeigt werden soll, und fügen Sie den Kurzcode ein. Er wird wie folgt aussehen: [wptb id=123].

• Block-Editor (Gutenberg): Hinzufügen eines Kurzbeschreibungsblock und füge den Shortcode dort ein. (Komplettes Gutenberg-Handbuch →)
• Classic-Editor: Fügen Sie den Kurzcode direkt in den Inhaltsbereich ein.
• Elementor: Verwenden Sie die Shortcode-Widget. (Komplettes Elementor-Handbuch →)
• Divi: Verwenden Sie die Textmodul und fügen Sie den Shortcode ein. (Voller Divi-Leitfaden →)

Veröffentlichen oder aktualisieren Sie den Beitrag, und Ihre Tabelle wird auf der Frontend-Seite angezeigt.

Fehlerbehebung #

Meine Tabelle wird im Frontend nicht angezeigt.

Achte darauf, dass du geklickt hast Tabellen speichern Bevor Sie den Shortcode kopieren, müssen Sie sicherstellen, dass der Shortcode-ID mit der gespeicherten Tabelle übereinstimmt. Wenn der Shortcode weiterhin als normales Textfeld angezeigt wird, lesen Sie bitte Tabellen werden nicht im WP Table Builder Dashboard angezeigt.

Elemente fallen nicht in Zellen.

Vergewissern Sie sich, dass Sie in eine leere Zelle ziehen, nicht in die Zellegrenze. Eine Neuaufladung des Browsers löst in der Regel verhinderte Ziehaktionen auf.

Meine Tabelle sieht auf dem Smartphone fehlerhaft aus.

WP Table Builder Die Tabellen sind responsiv, aber Sie müssen möglicherweise den responsiven Modus aktivieren. Siehe So stellen Sie eine Tabelle responsive dar.

Die Darstellung in meiner Tabelle sieht anders aus als in der Vorschau im Editor. Es kann sein, dass Ihr Theme die Stile von WP Table Builder’s überlagert. Siehe So deaktivieren Sie Themenstile für Tabellen.

Allgemeine Fragen #

Verwandte Dokumente #

• So installieren und aktivieren Sie das WP Table Builder Plugin
• So stellen Sie eine Tabelle responsive dar
• So verwenden Sie es WP Table Builder mit dem Blockeditor (Gutenberg)
• So fügen Sie eine Tabelle in Elementor hinzu
• Wie man eigenes CSS in WP Table Builder hinzufügt