In diesem Beitrag zeigen wir dir wie du eine responsive Vergleichstabelle anlegen kannst und diese an deine Wünsche anpasst.
1. Vorlage importieren
Damit du nicht von 0 beginnen musst, lade dir unsere Vorlage aus der Dokumentation herunter. Du findest die Vorlage hier.
Das heruntergeladene ZIP-Archiv musst du nun entpacken und anschließend als Vorlage importieren.
2. Vorlage anpassen
Nachdem du unsere Vorlage importiert hast, kannst du diese an deine Wünsche anpassen.
Jede Zeile stellt einen Vergleichswert dar (siehe Bild).
1. Bezeichnung
Die Bezeichnung ist der Name des Vergleichswertes. Dieser wird, falls aktiviert, im Kopf angezeigt.
2. Beschreibung
Die Beschreibung unterstreicht die Bezeichnung des Vergleichswertes und zeigt einen Tooltip mit der Beschreibung an.
3. Ansicht
Mit dieser Option (Desktop und Mobil/Desktop/Mobil) kannst du steuern wo der Vergleichswert angezeigt werden soll.
4. CSS-Klasse
Mit der CSS-Klasse kannst du eigene Klassen der Tabellenzelle mitgeben.
5. Detail
Detail stellt die normale Platzhalter-Eingabe dar. Hier kannst du alle Produktplatzhalter beliebig verwenden, wie du es bereits von den normalen Vorlagen gewohnt bist.
6. Ausrichtung
Die Ausrichtung steuert nur den Wert innerhalb der Zelle.
7. Entfernen
Entfernt den Vergleichswert.
8.-9. Nach oben und Nach unten
Mit den Buttons kannst du die Vergleichswerte beliebig nach oben bzw. nach unten verschieben.
10. Vergleichswert hinzufügen
Fügt einen neuen Vergleichswert am Ende hinzu.
11. Ansichtsart
Mit der Ansichtsart kannst du steuern, ob die Vergleichstabelle von Desktop auf Mobil umschalten, nur Mobil oder nur die Desktop-Variante angezeigt werden soll.
12. Maximale Produkte
Die maximale Anzahl der Produkte in der Desktop-Ansicht.
13. Maximale Produkte (Mobil)
Die maximale Anzahl der Produkte in der mobilen Ansicht.
14. Horizontale Scrollbars
Mit der horizontalen Scrollbar kannst du auch mehr als 3 bzw. 4 Produkte auf einer Seite darstellen. Hier wird der Inhalt dann einfach gescrollt.
Falls der Preisvergleichs-Dropdown durch diese Option Probleme verursacht, solltest du diesen nach weiter oben schieben.
15. Kopfspalte ausblenden
Mit dem Ausblenden der Kopfspalte kann zusätzlich Platz geschaffen werden, jedoch zählt das nur für die “Desktop”-Variante.
16. Mobile Vorlage
Diese Vorlage wird verwendet, wenn die Ansichtsart Desktop und Mobil oder Mobil ausgewählt wurde. Die Platzhalter können wie im Detail-Bereich der Produktvorlage genutzt werden. Zusätzlich gibt es den Platzhalter %mobiletable% für die mobile Variante der Vergleichstabelle.
17. Kopf
Der Kopfbereich für die Vergleichstabelle.
18. Fuß
Der Fußbereich für die Vergleichstabelle.
19. Haftungsausschluss deaktivieren
Falls du bei deiner Vorlage keinen Haftungsausschluss anzeigen möchtest, kannst du diesen hier deaktivieren.
3. Shortcode einfügen
Die Ausgabe der Vorlagen erfolgt wie gewohnt über den Shortcode-Generator. Wähle unter Vorlagen einfach deine Vergleichstabelle aus.
4. Ergebnis ansehen
Es kann vorkommen, dass manche Styles von deinem Theme überschrieben werden. Als Ergebnis solltest du dann eine solche Ausgabe bekommen:
Desktop-Variante
Demoempfehlung 1  |  | Demoempfehlung 2  | |
| Link | PHP 7 und MySQL: Von den Grundlagen bis zur prof. Programmierung* | Erfolgreiche Websites: SEO, SEM, Online-Marketing, Kundenbindung, Usability* | HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen.* |
| Testergebnis | Demo-Bewertung1,1GutJuni 2017 | Demo-Bewertung1,2Sehr gutMai 2017 | |
| Kundenbewertung | |||
| Preis | Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten | Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten | Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten |
| Hersteller | |||
| Verfügbarkeit | |||
| Eigenschaften | Von den Grundlagen bis zur professionellen Programmierung | SEO, SEM, Online-Marketing, Kundenbindung, Usability | Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. |
| Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten | Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten | Preis nicht verfügbar Preis inkl. MwSt., zzgl. Versandkosten | |
| zum Anbieter | Jetzt bei ansehen* | Jetzt bei ansehen* | Jetzt bei ansehen* |
| weitere Angebote |
Mobil-Variante
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | Von den Grundlagen bis zur professionellen Programmierung |
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | SEO, SEM, Online-Marketing, Kundenbindung, Usability |
| Hersteller | |
| Verfügbarkeit | |
| Eigenschaften | Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. |