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
PHP 7 und MySQL: Von den Grundlagen bis zur prof. Programmierung
Erfolgreiche Websites: SEO, SEM, Online-Marketing, Kundenbindung, Usability
Demoempfehlung 2
HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen.
LinkPHP 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
EigenschaftenVon 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 AnbieterJetzt bei ansehen*Jetzt bei ansehen*Jetzt bei ansehen*
weitere Angebote
Zuletzt aktualisiert am 17. Dezember 2017 um 8:45 . 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
EigenschaftenVon 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
Erfolgreiche Websites: SEO, SEM, Online-Marketing, Kundenbindung, Usability
Hersteller
Verfügbarkeit
EigenschaftenSEO, 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
Demoempfehlung 2
HTML5 und CSS3: Das umfassende Handbuch zum Lernen und Nachschlagen.
Hersteller
Verfügbarkeit
EigenschaftenDas 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
Zuletzt aktualisiert am 17. Dezember 2017 um 8:45 . Wir weisen darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.

 

Getestet wurden die Tabellen mit den gängigen WordPress-Standard-Themes und mit GeneratePress. Falls es zu Problemen mit deinem Theme kommt, schreib uns bitte eine kurze E-Mail.
Hat mir nicht geholfen (0)

1 Gedanke zu “Responsive Vergleichstabellen nutzen

Schreibe einen Kommentar