Use responsive comparison chart

In this post we show you how to create a responsive comparison table and adapt it to your wishes.

1. Import template

So you do not have to start from 0, download our template from the documentation. You can find the template here.

 

The downloaded ZIP archive you must now unzip and then import as a template.

2. Adjust template

After you have imported our template, you can adapt it to your needs.

Each line represents a comparison value (see figure).

1. Designation

The name is the name of the comparison value. This is displayed in the header, if activated.

2. Description

The description underlines the designation of the comparison value and shows a tooltip with the description.

3. View

With this option (desktop and mobile / desktop / mobile), you can control where the comparison value should be displayed.

4. CSS class

With the CSS class, you can add your own classes to the table cell.

5. Detail

Detail is the normal placeholder input. Here you can use any product holder as you like it from the normal templates.

6. Alignment

The alignment controls only the value within the cell.

7. Remove

Removes the comparison value.

8.-9. To the top and to the bottom

Use the buttons to move the comparison values up or down.

10. Add a comparison value

Adds a new comparison value at the end.

11. Type of display

With the view type you can control whether the comparison table should switch from desktop to mobile, only mobile or only the desktop variant should be displayed.

12. Maximal products

The maximum number of products in the desktop view.

13. Maximals products (Mobile)

The maximum number of products in the mobile view.

14. Horizontal scrollbars

With the horizontal scrollbar, you can also display more than 3 or 4 products on one page. Here, the content is then simply scrolled.

If the price comparison drop-down causes problems with this option, you should push it up.

15. Hide headspace

With the hiding of the headspace, additional space can be created, but this only counts for the “desktop” version.

16. Mobile template

This template is used when the Desktop and Mobile or Mobile view type is selected. The placeholders can be used as in the detail area of the product template. In addition, there is the placeholder% mobiletable% for the mobile variant of the comparison table.

17. Header

The header area for the comparison table.

18. Footer

The foot area for the comparison table.

19. Deactivate disclaimer

If you do not want to display your disclaimer, you can disable it here.

 

3. Insert shortcode

The templates are output as usual via the shortcode generator. Just select your comparison table.

4. View result

Some styles may be overwritten by your theme. As a result you should then get such an output:

Desktop version

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 Price not available
Price incl. VAT., Excl. Shipping
Price not available
Price incl. VAT., Excl. Shipping
Price not available
Price incl. VAT., Excl. Shipping
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...

Price not available
Price incl. VAT., Excl. Shipping
Price not available
Price incl. VAT., Excl. Shipping
Price not available
Price incl. VAT., Excl. Shipping
zum AnbieterJetzt bei ansehen*Jetzt bei ansehen*Jetzt bei ansehen*
weitere Angebote
Zuletzt aktualisiert am 25. August 2019 um 18:30 . Wir weisen darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.

Mobile version

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...

Price not available
Price incl. VAT., Excl. Shipping
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...

Price not available
Price incl. VAT., Excl. Shipping
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...

Price not available
Price incl. VAT., Excl. Shipping
Zuletzt aktualisiert am 25. August 2019 um 18:30 . Wir weisen darauf hin, dass sich hier angezeigte Preise inzwischen geändert haben können. Alle Angaben ohne Gewähr.

 

The tables were tested with the usual WordPress standard themes and with GeneratePress. If there are problems with your theme, please write us a short e-mail.

Do you still have questions? No problem :-)
We are happy to answer your questions in our forum.