Divi-Plugin-Highlight: Table Maker

Obwohl Divi viele Module hat, hat es kein Modul zum Erstellen von Tabellen. Glücklicherweise gibt es eine Lösung. Table Maker ist ein Drittanbieter-Plugin, mit dem Sie vollständig anpassbare Tabellen mit dem Divi Builder erstellen können. Um Ihnen bei der Entscheidung zu helfen, ob dies das richtige Plugin für Ihre Divi-Website ist, werfen wir in diesem Artikel einen Blick auf Table Maker und sehen, was es kann.

Table Maker installieren

Die Installation ist einfach und unkompliziert.

1. Navigieren Sie zu Plugins > Neu hinzufügen > Plugin hochladen
2. Klicken Sie auf Datei auswählen
3. Suchen Sie die ZIP-Datei des Plugins auf Ihrem Computer und wählen Sie sie aus
4. Klicken Sie auf Jetzt installieren
5. Klicken Sie auf Aktivieren

Table Maker-Modul

Dem Divi Builder wird ein neues Modul namens Table Maker hinzugefügt. Schauen wir uns die Hauptfunktionen an.

Table Maker-Inhaltsregisterkarte

Die Registerkarte Inhalt enthält einen Bereich für Untermodule. Diese werden verwendet, um die Spalten für die Tabelle zu erstellen. Für die Spalten können Sie die Anzahl der Kopf- und Fußzeilen sowie die Größe für die Spalten und Zeilen anpassen, die Reaktionshaltepunkte für jeden Gerätetyp anpassen, das Scrollen aktivieren und Symbole, Schaltflächen und Bilder auswählen. Die Symbole, Schaltflächen und Bilder können in Bezug auf Größe, Farbe, Platzierung usw. angepasst werden.

Spalten-Submodule

Die Untermodule definieren die Spalten und enthalten ein Feld zum Hinzufügen von Inhalt zu den Zeilen. Es funktioniert ähnlich wie ein Code-Editor, bei dem jede Zeile nummeriert ist. Sie können auch die Breite, Symbole, Schaltflächen und Bilder anpassen.

Die erste Zeile ist standardmäßig der Titel der Spalte, aber Sie können dies ändern, wenn Sie keine Kopfzeile haben möchten. Sie können HTML einfügen, was bedeutet, dass Sie bestimmte Zeichen vermeiden müssen, die für Markup verwendet werden. Sie können auch CSS, Shortcodes, iFrames, Symbole, Bilder, Schaltflächen und mehr hinzufügen.

Die Spalten enthalten Designanpassungen für jedes Element, einschließlich Text, Hintergrund, Zellen, Kopf- und Fußzeilenzellen usw.

Erstellen Sie so viele Spalten wie Sie möchten. Sie können sie unabhängig voneinander stylen, Stile von einer auf die anderen erweitern usw. Ich habe 4 Spalten hinzugefügt und die Farben und Breiten jeder Spalte separat angepasst.

Kopf-und Fußzeilen

Sie können die Anzahl der Spalten für Kopf- und Fußzeilen festlegen. Standardmäßig hat es 1 Kopfzeile und keine Fußzeile. In diesem Beispiel habe ich die ersten 2 als Kopfzeilen und die letzten als Fußzeilen festgelegt. Die Farben werden unabhängig gestylt.

Dasselbe können Sie für Zeilen tun. In diesem Beispiel habe ich 2 Zeilen als Kopfzeilen (die beiden links) und eine als Fußzeile (die rechte) festgelegt.

Tabellenblättern

Table Scrolling bietet sowohl horizontales als auch vertikales Scrollen. Sie können die Spalten- und Zeilenüberschriften kleben, wenn Sie möchten. Dadurch bleiben sie an Ort und Stelle, damit sie nicht aus dem Blickfeld gescrollt werden. In diesem Beispiel habe ich das Scrollen aktiviert und die Kopfzeilen klebrig gemacht. Ich habe viele Spalten hinzugefügt, damit es vertikal scrollen kann. Die Zeilenüberschriften bleiben erhalten.

Tabellensymbole

Sie können jeder Zelle beliebig viele Symbole hinzufügen. Richten Sie ein Standardsymbol ein und wählen Sie Symbole für jede Zelle separat aus. Wählen Sie das Standardsymbol und passen Sie Größe und Farbe auf der Registerkarte Inhalt an.

Die Symbole werden den spezifischen Zellen hinzugefügt, in denen sie angezeigt werden sollen, indem Sie das Symbol-Tag im Inhaltsbereich der Untermodule verwenden. Sie können das Standardsymbol überschreiben und einen Standardwert für diese Spalte festlegen, indem Sie es auf der Registerkarte Symbol im Untermodul auswählen, und Sie können den Namen eines bestimmten Symbols eingeben, das angezeigt werden soll. Die Verkaufsseite im Elegant Themes Marketplace bietet einen Link zur Liste der Symbole und deren Namen.

Tabellenschaltflächen

Tabellenschaltflächen werden auch mithilfe von Tags hinzugefügt. Fügen Sie auf der Registerkarte Inhalt eine Standardschaltfläche hinzu. Sie können die Schaltfläche auch über diese Einstellungen gestalten. Überschreiben Sie die Standardschaltfläche mit denselben Einstellungen in jedem Spalten-Submodul.

Fügen Sie die Schaltfläche jeder Zelle mit dem Button-Tag im Inhaltsbereich des Untermoduls hinzu. Ändern Sie den Text auf der Schaltfläche, indem Sie ihn innerhalb der Tags hinzufügen. In diesem Beispiel habe ich der Standardschaltfläche ein paar Zellen hinzugefügt und den Text für die zweite Schaltfläche geändert.

Tabellenbilder

Sie können den Zellen Bilder, Symbole und andere Inhaltstypen hinzufügen. Stellen Sie Bildqualität, Proportion, Skalierung und horizontale und vertikale Ausrichtung ein. Es hat viele Optionen für Bilder.

Obwohl die Bilder der Galerie hinzugefügt werden, werden sie erst angezeigt, wenn Sie ihnen sagen, in welcher Zelle sie angezeigt werden sollen. Dies geschieht mithilfe von Tags. Durch Eingabe des öffnenden Bild-Tags wird das schließende Tag automatisch hinzugefügt und das Bild wird in dieser Zelle angezeigt. Sie können es mit anderen Inhalten in die Zellen einschließen. Fügen Sie eine Zahl zwischen den Tags hinzu, um ein bestimmtes anzuzeigendes Bild anzugeben.

Registerkarte „Tabellenmacher-Design“

Die Registerkarte Design enthält Einstellungen für Tabellenrahmen, Streifen, Zellen, Text, Kopfzeile, Fußzeile, Größe, Abstand, Rahmen usw. Hier sind die wichtigsten Einstellungen.

Tischrahmen

Die Registerkarte "Design" enthält Anpassungen für Tabellenrahmen, Zellen, Text, Kopfzeile, Zeile, Fußzeile, Größe, Abstände, Rahmen usw. Dies ist der Tabellenrahmen. Der Standardrahmentyp verwendet Lücken, wodurch ein wenig Platz zwischen den Zellen entsteht. Dies ist None, wodurch die Grenzen zwischen den Zellen entfernt werden.

Bei Lücken können Sie die Spalten- und Zeilenabstände unabhängig voneinander anpassen. Ich habe die Spaltenlücke auf 8px und die Zeilenlücke auf 4px erhöht.

Lines setzt einen Rahmen um jede Zelle. Sie haben die Kontrolle über den Stil, die Farbe und die Stärke der Linien. Dies ist die Standardeinstellung.

In diesem Beispiel habe ich den Stil auf gepunktet gesetzt, die Farbe geändert und die Linienbreite auf 3px angepasst.

Tischstreifen

Table Stripes erzeugt einen Streifeneffekt wie bei einer Standardtabelle. Sie können auswählen, wo es gilt, die Reihenfolge auswählen und den Farbton, die Sättigung und die Helligkeit anpassen. Dies sind die Standardeinstellungen.

Für dieses Beispiel habe ich den Streifenfarbton auf 86 Grad, die Sättigung auf 172% und die Helligkeit auf 82% eingestellt. Alle drei Anpassungen arbeiten zusammen, um interessante Farboptionen zu schaffen.

Für dieses Beispiel habe ich die Farbe der Tabellenzellen, Kopfzellen und Spaltenkopfzellen angepasst.

In diesem Beispiel habe ich den Kopfzeilenzellen einen Kastenschatten Nr. 1 und den Zeilenkopfzeilenzellen einen Kastenschatten Nr. 3 hinzugefügt. Ich habe die horizontale und vertikale Ausrichtung des Textes für jeden Zelltyp einzeln zentriert. Ich habe auch mehr Platz für die Lücken hinzugefügt.

Kopf- und Fußzeilen-Styling

Sie können die Farben für den Kopf- und Fußzeilentext und die Zellen unabhängig voneinander formatieren. In diesem Beispiel habe ich eine Fußzeile hinzugefügt, den Text weiß und in Großbuchstaben geschrieben, die Zellenfarbe auf dunkelblau gesetzt und den Zellen einen Boxschatten hinzugefügt.

In diesem Beispiel habe ich die Rahmen für die Zellen, Kopfzeilenzellen und Fußzeilenzellen unabhängig angepasst.

Table Maker-Beispiele

Ich habe eine Tabelle mit 5 Spalten, einer Spaltenüberschrift und einer Zeilenüberschrift erstellt. Der Zeilenkopf enthält eine Shopping-Schaltfläche, die Sie zur Produktseite für jedes Produkt führt, und ein Produktbild. Beide Header verwenden einen schwarzen Hintergrund, abgerundete Ecken und Schriftarten aus dem Layout.

Die Zellen verwenden Streifen, eine größere Schriftart aus dem Layout und abgerundete Ecken. In der letzten Spalte werden Symbole angezeigt, um anzuzeigen, ob ein Produkt auf Lager ist. Ich habe jedem der Überschriften und Zellen einen Kastenschatten hinzugefügt. Der Tabellenrahmen verwendet Lücken mit 4 Pixeln für die Spaltenlücke und 7 Pixeln für die Zeilenlücke.

Hier ist das gleiche Design ohne die Bilder im Zeilenkopf.

Hier ist das Layout mit den Produktbildern, wie es auf dem Handy erscheint. Es reduziert die Tabelle auf 2 Spalten, von denen eine der Zeilenkopf ist. Dieser bricht es nach Spalten.

Sie können es auch nach Zeilen unterbrechen lassen. In diesem Beispiel werden die Bilder entfernt und die Tabelle nach Zeilen unterteilt angezeigt.

Dieses zeigt die Reihen als Akkordeon. Wenn Sie auf eines klicken, wird es geöffnet, um seinen Inhalt anzuzeigen.

Wo kann man Table Maker kaufen?

Sie können Table Maker im Divi Marketplace kaufen. Es kostet 35 US-Dollar für unbegrenzte Websites und beinhaltet eine 30-tägige Geld-zurück-Garantie sowie ein Jahr Support und Updates. Die Dokumentation wird in Form von Video-Walkthroughs und Text bereitgestellt.

Gedanken beenden

Das ist unser Blick auf Table Maker für Divi. Es hat viele Funktionen zum Erstellen und Anpassen von Tabellen für Divi, einschließlich einiger, die ich hier nicht behandelt habe. Ich brauchte die Dokumentation nur, um zu sehen, wie Bilder, Symbole und Schaltflächen verwendet werden.

Anfangs schien es etwas umständlich, der Tabelle Schaltflächen, Symbole und Bilder mithilfe von Tags hinzuzufügen, aber es ist einfach und da der Inhalt für die Zellen mit einem Code-Editor hinzugefügt wird, haben Sie viel mehr Kontrolle als Sie. d normalerweise haben.

Table Maker ist ein hervorragendes Plugin zum Erstellen von Tabellen mit Divi. Die Möglichkeit, Inhalte wie HTML, Shortcodes, iFrames, CSS usw. hinzuzufügen, verbessert die Arten von Tabellen, die Sie erstellen können, erheblich. Wenn Sie daran interessiert sind, Ihre eigenen benutzerdefinierten Tische mit Divi zu erstellen, ist Table Maker einen Blick wert.

Wir wollen von dir hören. Haben Sie Table Maker für Divi ausprobiert? Lassen Sie uns in den Kommentaren wissen, was Sie davon halten.

Ausgewähltes Bild über PCH.Vector / shutterstock.com