Responsive Vergleichstabellen nutzen

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 Gebundenes Buch Das Buch für ambitionierte Einsteiger und fortgeschrittene Entwickler , d...	SEO, SEM, Online-Marketing, Kundenbindung, Usability Gebundenes Buch Haben Sie sich auch schon einmal gefragt, weshalb manche Websites erfolgreich s...	Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. Gebundenes Buch Moderne Webtechnolog...
	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

Zuletzt aktualisiert am 14. Juli 2020 um 14:00 . Wir weisen darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.

Mobil-Variante

Demoempfehlung 1

PHP 7 und MySQL: Von den Grundlagen bis zur prof. Programmierung*

Hersteller
Verfügbarkeit
Eigenschaften	Von den Grundlagen bis zur professionellen Programmierung Gebundenes Buch Das Buch für ambitionierte Einsteiger und fortgeschrittene Entwickler , d...

Preis nicht verfügbar

Preis inkl. MwSt., zzgl. Versandkosten

Jetzt bei ansehen*

Erfolgreiche Websites: SEO, SEM, Online-Marketing, Kundenbindung, Usability*

Hersteller
Verfügbarkeit
Eigenschaften	SEO, SEM, Online-Marketing, Kundenbindung, Usability Gebundenes Buch Haben Sie sich auch schon einmal gefragt, weshalb manche Websites erfolgreich s...

Preis nicht verfügbar

Preis inkl. MwSt., zzgl. Versandkosten

Jetzt bei ansehen*

Demoempfehlung 2

HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen.*

Hersteller
Verfügbarkeit
Eigenschaften	Das umfassende Handbuch zum Lernen und Nachschlagen. Inkl. JavaScript, Bootstrap, Responsive Webdesign u. v. m. Gebundenes Buch Moderne Webtechnolog...

Preis nicht verfügbar

Preis inkl. MwSt., zzgl. Versandkosten

Jetzt bei ansehen*

Zuletzt aktualisiert am 14. Juli 2020 um 14:00 . Wir weisen darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.