So fügen Sie Ihrer WordPress-Website eine Vergleichstabelle hinzu

Haben Sie schon einmal nach etwas gesucht und es gefunden? schwer zu vergleichen die verschiedenen Vor- und Nachteile Ihrer Wahl? Vielleicht versuchen Sie alles zu vergleichen, von Paar Schuhen über komplexe Softwarelösungen bis hin zu Kraftfahrzeugen und Immobilien. Das Zusammentragen und Vergleichen vieler Daten kann schwierig sein im Kopf zu erledigen und zeitaufwändig, es selbst zu tun. Häufig lösen Webdesigner und Online-Shop-Betreiber dieses Problem mit einem Tabellen-Plugin oder ggf. einer Preistabelle. Aber manchmal gibt es viel zu beachten, und Sie brauchen eine ansprechende Möglichkeit, alle relevanten Daten zu präsentieren. Hier kommen Qi Addons und sein Vergleichstabellen-Widget ins Spiel. Und Sie können alles innerhalb von Minuten einrichten. Dazu das folgende Video:



Möglicherweise bevorzugen Sie jedoch Ihre Tutorials in Textform. Keine Angst, wir haben Sie abgedeckt. Wir möchten uns aber auch etwas Zeit nehmen, um mit Ihnen über einige Anwendungsfälle für eine Vergleichstabelle sowie Qi-Addons und Elementor zu sprechen.

So haben wir es aufgeteilt:

Was ist eine Vergleichstabelle

Eine Vergleichstabelle ist eine Tabelle, die es dem Leser ermöglicht, … Daten zu vergleichen.

Nun, das ist ein nutzloser Satz, falls es jemals einen gegeben hat, nicht wahr?

Um etwas klarer zu sein, ist eine Vergleichstabelle eine Art Vergleichstabelle: ein Datenvisualisierungstool, das dem Leser einen Überblick darüber verschafft, wie verschiedene Elemente, die zu verschiedenen Datensätzen gehören, miteinander in Beziehung stehen könnten.

Immer noch nicht klar?

Betrachten wir ein Beispiel. Angenommen, Sie erwägen einen robusten, männlichen Urlaub in den Bergen, und zwei oder mehr Cottages passen ins Bild. Sie sollten die Vor- und Nachteile von jedem berücksichtigen, bevor Sie sich festlegen. Wie weit ist der nächste Laden? Hat das Cottage einen Warmwasserbereiter oder müssen Sie sich mit kalten Duschen begnügen? Wie sieht es mit der Anzahl der Zimmer bzw. Betten aus? Vereinfacht gesagt, gibt es Dealbreaker oder Dealmaker?

Genau hier wäre eine Vergleichstabelle mit den Merkmalen der einzelnen Cottages sehr praktisch. Und genau darüber werden wir mit Ihnen sprechen.

Vergleichstabelle

Was sind Qi-Addons für Elementor

Qi Addons for Elementor ist ein Plugin, das von einem preisgekrönten Team professioneller WordPress-Designer entwickelt wurde, um die bereits beeindruckenden Fähigkeiten von Elementor zu erweitern. Und wir sind stolz darauf, es unser Eigen zu nennen.

Alles, was Sie tun müssen Verwenden Sie Qi-Addons ist Installieren Sie die neueste Version von Elementor (Die kostenlose Version reicht aus) und installieren und aktivieren Sie dann das Qi-Addons-Plugin, wie Sie es mit jedem anderen Plugin tun würden. Das Vergleichstabellen-Widget ist nur mit der Premium-Version von Qi Addons verfügbar.

So fügen Sie Ihrer Website mithilfe von Qi-Addons ein Vergleichstabellen-Widget hinzu

Wir zeigen Ihnen, wie Sie einem Beitrag eine Vergleichstabelle hinzufügen, aber der Vorgang funktioniert für eine Seite genau gleich. Wir haben mit einem leeren Post und einem Titel begonnen.

Um einer Seite eine Vergleichstabelle hinzuzufügen, suchen Sie sie einfach im Menü auf der linken Seite und ziehen Sie sie an die gewünschte Stelle auf der Seite.

Element ziehen

Das Element wird in seinem Standardzustand mit zwei Spalten und drei Zeilen mit etwas Platzhaltertext angezeigt.

Verwandt :  So finden Sie die Seriennummer eines iPhones
Standard-Look

Füllen Sie Ihr Vergleichstabellen-Widget aus

Das Inhalt Registerkarte und seine Allgemein Abschnitt sollte standardmäßig geöffnet werden. Das Titel der Hauptspalte Feld ändert den Titel in der oberen linken Ecke der Tabelle. Wir werden den generischen Titel durch ersetzen Automatische Monatspläne.

Das Überschriften und Säulen Teile der Registerkarte enthalten die Steuerelemente für die Zeilen bzw. Spalten. Sie können sie hinzufügen, indem Sie auf klicken +Element hinzufügen Schaltfläche unter jeder Überschrift. Wir werden zwei weitere Zeilen hinzufügen. Klick auf ein Artikel in dem Überschriften Abschnitt wird es erweitern, und Sie können einen beliebigen Zeilentitel eingeben. Wir werden dies mit all unseren Reihen tun.

Artikeltitel

Erweitern a Säulen Artikel zeigt weitere Optionen an. Das Spaltentitel ist der Text im obersten Feld der Spalte, der Zeilenwerte sind durch Kommas getrennte Werte von – und +, je nachdem, ob eine Funktion verfügbar ist oder nicht, und die Spaltenlinktext ist der Text am Ende der Spalte, der (fiktiv) zum Kauf führt. Das Spaltenverknüpfung Feld direkt darüber ist, wo Sie den Link eingeben sollten.

Säulen

Das Taste Abschnitt der Registerkarte hat nur ein Steuerelement: die Schaltflächentext unterstreichen aktivieren Umschalten. Wir werden es umstellen Ja. Du kannst den … benutzen Schaltflächensymbol Abschnitt zum Hinzufügen einer .svg Symbol zu Kaufen Taste. Wir werden es in diesem Design nicht verwenden.

Taste

Gestalten Sie Ihre Vergleichstabellenfelder

Die Standardversion der Registerkarte ist effektiv, aber schlicht. Vielleicht ist es genau das, was Sie wollen, aber vielleicht auch nicht. Das Stil Registerkarte des Widgets ist, wo Sie das tun können.

Das Stil Abschnitt der Stil Registerkarte verfügt über mehrere grundlegende Steuerelemente. Die erste Kontrolle ist die Tabellenlayout umschalten, mit dem Sie zwischen den Standardeinstellungen wählen können Auto und Fest, wodurch die Spaltenbreite ausgeglichen wird. Das Minimale Breite Mit dem Schieberegler können Sie die Mindestbreite für jede Spalte steuern, um die Lesbarkeit zu verbessern, aber wir haben nur drei Spalten, also brauchen wir sie nicht.

Das Rahmenstil Mit der Steuerung können Sie den äußeren Rahmen ein- und ausschalten: die Alle Einstellung bedeutet, dass alle Grenzen vorhanden sind, während die Nur innen Bei der Einstellung bleiben nur die inneren Grenzen übrig. Das Grenztyp Mit den Steuerelementen können Sie einen anderen Rahmentyp auswählen, z Doppelt, Gestrichelt, Gerillt und mehr. Wir gehen mit a Fest Linie, setze seine Breite bis 2 Pixel, und seine Farbe zu einem hellen Rosa (#ffc9c9).

Stil-Grenze

Weiter nach unten Stil Abschnitt finden Sie die Zellenauffüllung des Spaltentitels und Zellenpolsterung steuert. Sie werden verwendet, um den Abstand zwischen dem Text einer Zelle und ihren Rändern festzulegen. Wir werden unsere anpassen, damit die Tabelle schöner aussieht, aber Sie können wählen, was am besten zum Stil Ihrer Website passt. Das Breite der ersten Spalte Der Schieberegler legt die Breite für die erste Spalte fest. Wir werden uns darauf einstellen 41% Prozent.

Stilspalten

Die letzten Bedienelemente dieses Abschnitts sind die Hintergrundstil und Hintergrundfarbe. Sie können aus einer Vielzahl von Optionen wählen, aber wir werden mitgehen Abwechselnd, was abwechselnde Farben für jede Zeile bedeutet. Wir werden auch unsere erste Farbe auf ein helles Grau setzen (#f9f9f9), wobei die andere Farbe auf dem Standardwert belassen wird. Dadurch sind Reihen leichter zu erkennen.

Verwandt :  So spielen Sie kostenlose YouTube-Musik im Hintergrund auf Android und iPhones
Hintergrundstil

Gestalten Sie Text und Symbole Ihrer Vergleichstabelle

Das Stil des Haupttitels Abschnitt der Spalte steuert den Text in der ersten Zeile – die Titel der Spalten. Sie können dafür ein HTML-Tag auswählen, aber wir bleiben bei der Standardeinstellung. Sie können auch die einstellen Haupttitelfarbe (wir gingen mit einem hellorange (#e85656) sowie die Standard-Typografieeinstellungen für die oberste Zeile. Wir haben nur die Schriftgröße auf geändert 17aber es gibt eine Vielzahl von Optionen, mit denen Sie Ihren Haupttitel gestalten können.

Stil des Haupttitels

Das Zeilentitelstil hat genau die gleichen Einstellungen, nur für die Spalte ganz links. Wir verwenden die gleichen Einstellungen wie für die Stil des Haupttitels.

Zeilentitelstil

Das Zeichenstil Im Abschnitt können Sie ein alternatives Symbol für das Häkchen und das X in den Spalten verwenden. Sie können ein Symbol aus der Upload-Bibliothek auswählen oder ein hochladen .svg Datei. Wir werden einige Symbole aus unserer Mediathek auswählen. Wir geben ihnen auch die gleiche Farbe wie der Text und ändern ihre Größe in 14 und 13 Pixel bzw.

Zeichenstil

Gestalten Sie Ihre Vergleichstabellen-Schaltflächen

Schließlich kommen wir zu den Schaltflächen der unteren Reihe.

Das Schaltflächenstil Abschnitt hat eine Normal/Schweben Umschalten, mit dem Sie verschiedene Einstellungen für das Verhalten Ihrer Schaltfläche beim Schweben vornehmen können.

In dem Normal Version der Schaltfläche ändern wir die Schriftstärke auf 700 um es stärker hervorzuheben, und wählen Sie die aus Großbuchstaben Einstellung von der Verwandeln Menü aus dem gleichen Grund. Wir färben den Text auch in dieselbe hellorange Farbe wie den Rest der Tabelle. Das Knopfpolsterung Steuerelemente funktionieren genauso wie die anderen Steuerelemente. Wir werden sie auf 22 Pixel setzen.

Endlich finden wir die Hintergrundfarbe der Knopfzelle und die Knopfzellen-Hover-Hintergrundfarbe steuert. Mit diesen können Sie den Hintergrund im Normal- und Hover-Modus ändern. Wir ändern es im normalen Modus in das Pink, das wir bereits für den Rand verwendet haben. Wir werden keine speziellen Verhaltensweisen beim Schweben auswählen, aber Sie können natürlich tun, was Sie wollen.

Schaltflächenstil

Das Button-Icon-Stil Optionen werden auf die gleiche Weise wie die verwendet Schaltflächenstil Optionen, aber da wir für dieses Design kein Symbol verwendet haben, sind sie nicht erforderlich.

Endlich, das Schaltflächen-Unterstreichungsstil können Sie das Verhalten des Unterstreichungselements Ihrer Schaltfläche steuern. Es hat, wie die anderen Button-Styling-Abschnitte, a Normal/Schweben Umschalten.

Wir beginnen mit der Schweben Registerkarte und legen Sie die fest Hover-Breite unterstreichen zu 100% damit die Unterstreichung die gesamte Breite des einnimmt KAUFEN Text. Wir werden auch die einstellen Hover Underline Draw aktivieren zu Jaum die On-Hover-Animation zu aktivieren.

Hover für Schaltflächen-Unterstreichungsstil

Das Versatz unterstreichen und Dicke unterstreichen Kontrollen gelten sowohl für die Normal und die Schweben Aussicht. Versatz versetzt die Zeile vom Text (wir setzen sie auf 6px), während Dicke diktiert seine Dicke (wir gingen mit 2px) Das Ausrichtung unterstreichen kann beliebig eingestellt werden, aber es spielt nur eine Rolle, ob die Unterstreichung breiter oder schmaler als der Schaltflächentext ist.

Schaltfläche Unterstreichungsversatz

Abschließend

Wie Sie sehen können, können Sie mit der Premium-Version des Qi-Addons-Plugins innerhalb von Minuten eine einfache und effektive – oder komplexe und auffällige – Vergleichstabelle auf Ihrer Website haben. Und mit einer praktisch unbegrenzten Auswahl an Optionen können Sie es ganz einfach so stylen, wie Sie es möchten.