Wenn Käufer zwei oder drei Optionen wiegen, beantwortet ein nebeneinander liegender Tisch ihre Fragen schneller als das Scrollen zwischen einzelnen Seiten Die Vergleichstabellen-WidgetEin Pro-Widget in Master-Addons für Elementor, baut diese Tabelle auf: eine Spalte mit Funktionen unten an der Seite, eine Spalte pro Produkt oben und jeweils eine Schaltfläche zum Preis plus Kauf. Sie füllen es aus dem Elementor-Panel aus, keine HTML-Tabellen erforderlich.
Jede Zelle kann Text, einen Haken oder ein Kreuz aufnehmen, so liest sie auf einen Blick Vier Layoutstile, eine einstellbare Anzahl von Produktspalten und eine vollständige Farbsteuerung bedeuten, dass die Tabelle mit jeder Seite übereinstimmen kann Diese Anleitung deckt jede Einstellung ab, von den Merkmalszeilen bis zum Zebrastreifen.
Schauen Sie lieber zuerst? Dieses kurze Tutorial durchläuft das Vergleichstabellen-Widget Ende an Ende:
Was das Vergleichstabellen-Widget bewirkt #
Das Widget legt ein Raster an: Feature-Namen laufen in der ersten Spalte herunter, und jedes Produkt erhält eine eigene Spalte mit Titel, Preis, Wert pro Feature, und einer Call-to-Action-Taste Ändern Sie die Produktanzahl und die Spalten passen sich an.
Man tippt alles von Hand ein, es hängt also nicht von WooCommerce ab, das macht es für den Vergleich von Plugins, Service-Stufen, oder Hardware genauso nützlich wie für Store-Produkte.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master Addons Pro Mit aktiver Lizenz installiert, da Comparison Table ein Pro Widget ist Neu im Plugin? siehe die Installationsführung.
- Die Produkte und die Feature-Liste, die Sie vergleichen möchten.
So fügen Sie das Vergleichstabellen-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Vergleichstabelle‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie es auf Ihre Seite und es erscheint eine Beispieltabelle, bereits gefüllt mit Platzhalterprodukten und Funktionen, so dass Sie aus einem funktionierenden Layout statt eines leeren Rasters bearbeiten.
Allgemeine Einstellungen: Layout und Produktanzahl #
Öffnen Sie die Inhalt Tab und die General Abschnitt enthält die beiden Einstellungen, die den gesamten Tisch formen.
- Layouts: Wählen Sie Stil 1, 2, 3 oder 4. Jeder ordnet Kopfzeile, Preis und Spalten in einem anderen Look neu.
- Produkte: Stellen Sie ein, wie viele Produktspalten die Tabelle anzeigt, von 2 auf 6. Erhöhen Sie die Zahl und ein passender Produktabschnitt erscheint unten für jede neue Spalte.
Legen Sie die Funktionszeilen fest #
Die Features-box Abschnitt definiert die linke Spalte, die Liste der Dinge, die Sie vergleichen Die Überschrift Ist das Etikett oben (wie “Features” oder “Product”), und die Merkmale Der Repeater fasst ein Element pro Reihe.
Jedes Feature-Element ist ein Zeilenetikett wie Größe, Garantie oder Verfügbarkeit. verwenden Artikel hinzufügen Zeilen hinzuzufügen, das Kopiersymbol, um eine zu duplizieren, und das X, um sie zu entfernen Es gibt auch eine Knopfüberschrift Feld für die Reihe, die die Kauftasten hält.
Füllen Sie jede Produktspalte aus #
Jedes Produkt bekommt eine eigene Rubrik (Produkt 1, Produkt 2„und so weiter). Im Inneren legen Sie den Titel, den Preis, das Bild, den Schaltflächentext und den Link der Spalte fest, dann den Wert für jede Funktionszeile.
Der praktische Teil ist der pro Reihe Inhalt Steuerung. Für jede Funktion wählen Sie einen Scheck, ein Kreuz, ein von Ihnen ausgewähltes Symbol oder Klartext aus. Ein Kreuz-und-Kreuz-Gitter liest sofort, während Textfelder Spezifikationen wie “1 Jahr” oder “Alle Größen” entsprechen. Ein Überbrückungsstil Durch den Umschalter hebt sich eine einzelne Spalte ab, was zur Hervorhebung Ihrer empfohlenen Auswahl nützlich ist.
Wählen Sie einen Layout-Stil #
Die vier Layouts verändern das Aussehen der Tabelle, ohne Ihre Inhalte zu berühren Der Wechsel zwischen ihnen ist eine Ein-Klick-Methode, um den Stil zu finden, der zur Seite passt.
Stil 4 Verwandeln Sie die Spalten in separate Karten mit gebogenen, farbigen Kopfzeilen, ein kräftigerer Look für einen vorgestellten Vergleich.
Stil 2 Schwimmt über jeder Spalte ein kreisförmiges Preisabzeichen mit einer farbigen Titelleiste darunter, hier ist die Tabelle auf vier Produkte eingestellt, die zeigen, wie die Spalten skalieren.
Den Tisch stylen #
Die Stil Tab steuert Farbe und Abstand Die General Abschnitt legt den tischweiten Look fest, der Rest ist aufgeteilt in Feature-box, Produkte, Knopf, und Muster Wenn die freie Muster Verlängerung eingeschaltet ist.
- Ungerade Zeilenfarbe und gerade Zeilenfarbe: Die Zebrastreifen, die lange Tabellen leichter lesbar machen.
- Randtyp, Breite und Farbe: Die Linien zwischen Zellen.
- Kastenradius, Spaltenabstand und Zeilenabstand: Abgerundete Ecken und die Lücken zwischen Spalten und Reihen.
- Funktionsbox, Produkte, Schaltfläche: Typografie, Farben, Ausrichtung und Polsterung für jeden Teil des Tisches.
Das Ergebnis auf der Seite #
Veröffentlichen oder Vorschau und die Tabelle rendert mit Ihren Funktionen, Produkten, Preisen und Schaltflächen an Ort und Stelle, Zebrazeilen und allem. Unten finden Sie eine Style 2-Tabelle mit drei Produkten.
Häufige Anwendungsfälle #
- Produktvergleiche Zwei oder drei Modelle nebeneinander stellen.
- Plan- oder Preisstufen Wenn Sie ein Raster statt gestapelt haben möchten Preistabellen.
- Plugin- oder Software-Feature-Matrizen Mit Tick-and-Cross-Reihen.
- Servicepakete Vergleichen Sie, was jede Stufe umfasst.
- Us-gegen-die-tabellen Hervorhebung Ihres Produkts mit dem Override Style-Toggle.
Tipps für die Arbeit mit dem Widget Vergleichstabelle #
- Verwenden Sie Zecken und Kreuze für Ja/Nein-Funktionen. Sie scannen schneller als die Wörter “Ja” und “Nein” und halten den Tisch ordentlich.
- Feature-Labels kurz halten. Ein oder zwei Wörter pro Zeile verhindern, dass die erste Spalte weit wird.
- Markieren Sie eine Spalte mit Override Style. Eine andere Farbe führt den Blick zu Ihrer empfohlenen Option.
- Zebrafarben mit genügend Kontrast einstellen. Wechselnde Zeilenfarben machen einen langen Tisch lesbar.
- Ordnen Sie die Produktanzahl dem Bildschirm zu. Drei Spalten passen zu den meisten Layouts; vier oder mehr können auf kleineren Bildschirmen eng werden. Unterhalb des Start-Tab-Formats. Von der Breite (standardmäßig 767 px) wechseln einige Layouts zu Produkt-Tabs, also überprüfen Sie die mobile Ansicht.
Häufig gestellte Fragen #
Was ist das Vergleichstabellen-Widget in Master-Addons?
Es handelt sich um ein Master Addons Pro Widget für Elementor, das ein Side-by-Side Vergleichsraster aufbaut Feature Namen laufen in der ersten Spalte runter und jedes Produkt bekommt eine eigene Spalte mit Titel, Preis, Wert pro Feature, und einem Button, man gibt alles von Hand ein, braucht also kein WooCommerce.
Wie viele Produkte kann ich in der Tabelle vergleichen?
Sie setzen die Zahl, von 2 bis 6, im Feld Produkte unter Allgemein Erhöhen Sie sie und für jede Spalte, die Sie hinzufügen, erscheint ein neuer Produktabschnitt Drei Spalten passen zu den meisten Seitenbreiten, während vier oder mehr am besten zu breiteren Layouts funktionieren.
Kann ich statt Text Zecken - und Kreuzzeichen zeigen?
Ja. In jedem Produktabschnitt verfügt jede Funktionszeile über eine Inhaltssteuerung, in der Sie einen Scheck, ein Kreuz, ein Symbol Ihrer Wahl oder Klartext auswählen. Durch Kreuz- und Quermarkierungen können Ja/Nein-Funktionen gescannt werden, während Text zu Spezifikationen wie Garantielänge passt.
Wie viele Layoutstile hat die Vergleichstabelle?
Vier. Stil 1 ist eine klassische Tabelle, Stil 2 fügt kreisförmige Preisabzeichen hinzu, und Stil 4 verwandelt die Spalten in Karten mit gebogenen Kopfzeilen. Durch das Wechseln der Layouts wird derselbe Inhalt neu angeordnet, sodass Sie jeden ausprobieren können, ohne Ihre Daten neu zu erstellen.
Kann ich eine Produktspalte hervorheben?
Ja. Jeder Produktabschnitt verfügt über einen Override Style-Toggle, mit dem Sie einer Spalte eigene Farben geben können. Verwenden Sie ihn, um Ihre empfohlene Option von den anderen in der Tabelle abzuheben.
Einwickelnd #
Das Widget Vergleichstabelle verwandelt eine Liste von Produkten und Funktionen in ein klares, nebeneinander liegendes Raster: Wählen Sie ein Layout, legen Sie die Anzahl der Spalten fest, fügen Sie Ihre Funktionszeilen hinzu und füllen Sie jede Spalte mit Werten, Preisen und Schaltflächen Da es nicht auf WooCommerce angewiesen ist, fällt es auf jede Seite. Layoutbeispiele und wann Sie stattdessen eine Preistabelle auswählen sollten, finden Sie in der Elementor-Vergleichstabellen-Widget Seite. Koppeln Sie es mit dem Preistabellen-Widget Für Planseiten, durchsuchen Sie die vollständige Master Addons Widgets und Erweiterungen, und sehen Sie sich die an Preisseite Für das, was jeder Plan beinhaltet.
