Hast Du eine Preisliste auf Deiner Website? Diese Preise können für Dienstleistungen wie Rasenpflege oder für Softwarepakete gelten. Von der Technikwelt bis hin zu Yoga-Studios könnten die meisten Unternehmen Preistabellen verwenden, um ihre Angebote besser darzustellen. Der beste Weg, dies zu tun, besteht darin, Dir die besten WordPress Preistabellen-Plugins anzusehen und diese dann auf Deiner Website zu implementieren.

Aber das wirft die Frage auf, warum es so wichtig ist, eine Preistabelle zu haben.

Die Antwort auf diese Frage mag offensichtlich erscheinen (Du möchtest die Conversions verbessern, oder?), Aber es ist schön, das Warum hinter der Preistabelle zu verstehen. Warum ist ein Preistabellen-Plugin für den Verkauf effektiver als eine normale Aufzählungsliste, ein Absatz oder sogar ein Bild?

  • Eine Preistabelle ermöglicht eine übersichtliche Darstellung und einen Vergleich Deiner Leistungen oder Pakete.
  • Die wichtigsten Funktionen werden in einer Preistabelle angezeigt, die das Durcheinander beseitigt und für eine andere Seite übrig lässt.
  • Die Preistabelle enthält übersichtliche Handlungsanweisungs-Schaltflächen, mit denen Du den Leuten zeigen kannst, wie sie mit dem Kauf fortfahren.
  • Die meisten Preistabellen verwenden Paket-/Plan-Namen, die dem Kunden das Verständnis erheblich erleichtern.
  • Mithilfe größerer Schriftarten oder Grafiken kannst Du bestimmte Wörter, Pläne oder Funktionen hervorheben.
  • Es ist weitaus interessanter, eine grafikbasierte Preistabelle zu lesen, als eine, in der nur Text enthalten ist.
  • Du kannst Conversions mit Dringlichkeit (z. B. „die Zeit für einen guten Deal ist fast vorbei“) oder kostenlosen Testversionen verbessern.
  • Preistabellen belegen nur einen minimalen Platz auf der Webseite, sodass Du zusätzliche Informationen hinzufügen kannst, z. B. eine FAQ– oder eine Chat-Box für Deine Vertriebsmitarbeiter.

Worauf Du bei einem WordPress Preistabellen-Plugin achten solltest

Nachdem wir nun die Vorteile eines WordPress-Plugins für Preistabellen kennen, werfen wir einen Blick auf einige der Funktionen, die Du Dir wünschen solltest:

  • Kostenlose und Premium-Optionen – Meine bevorzugten Plugins für Preistabellen bieten Dir eine Standardtabelle, damit Deine Preise gut aussehen. Zudem sollte die Premium-Version mit zusätzlichen Funktionen nicht allzu teuer sein.
  • Integrationen mit den Top-Page-Buildern – Einige der Page-Builder verfügen sogar über eigene Preistabellen. Einige der beliebtesten Seitenersteller sind Divi Builder, Elementor und WPBakery.
  • Skins oder Themes zum sekundenschnellen Starten von Preistabellen. Wir möchten auch Anpassungstools für Farben, Schriftarten und Symbole sehen.
  • Eine Einstellung zum Anzeigen von Stempeln für bestimmte Pläne , z. B. für „Best Value“ – oder „Most Popular“ -Pläne.
  • Mehrere Währungsoptionen für den weltweiten Einsatz.
  • Unterstützung großer, anpassbarer Schaltflächen in jedem Preisplan.
  • Ein Drag-and-Drop-Builder wäre ebenfalls hervorragend.
  • Wir möchten auch den Zugang zu CSS und HTML sehen, da fortgeschrittenere Entwickler komplexe Optimierungsmöglichkeiten wünschen.

Wir könnten Dutzende von Funktionen durchgehen, die in Preistabellen sinnvoll sind, aber dies ist ein guter Anfang mit dem Wesentlichen.

Die besten WordPress Preistabellen-Plugins im Vergleich (und wie Du Deine eigenen codierst)

  1. Responsive Pricing Table by WP Darko
  2. Go Pricing
  3. Pricing Tables WordPress Plugin – Easy Pricing Tables
  4. Pricing Table by Supsystic
  5. CSS3 Responsive WordPress Compare Pricing Tables
  6. ARPrice – Responsive WordPress Pricing Table Plugin
  7. Pricing Table – Price list, Price Table, Easy Pricing Table
  8. WRC Pricing Tables
  9. Erstellen einer Preistabelle in WordPress von Grund auf neu

Es gibt keinen Mangel an verfügbaren Optionen, wenn es um Preistabellen-Plugins und WordPress-Seiten geht. Einige der besten können kostenlos genutzt werden, während andere Premium und ohne kostenlose Optionen sind. Davon abgesehen verdienen alle unten aufgeführten Plugins einen Platz in dieser Liste, und einige von ihnen haben einzigartige Funktionen, die sich besonders für bestimmte Branchen oder Unternehmen eignen.

1. Responsive Pricing Table by WP Darko

Responsive Pricing Table ist eines der benutzerfreundlicheren Plugins mit zahlreichen Funktionen zum Erstellen von Preistabellen. Es bietet eine hervorragende kostenlose Version ohne Einschränkungen hinsichtlich der Anzahl der Pläne oder Tabellen, die Du für Deine Websites erstellen kannst. Du kannst jedoch auf die Premium-Version upgraden, um auf bessere Funktionen wie Skins und einen „Equalizer“ zuzugreifen, mit dem alle Spaltenhöhen exakt gleich sind.

Responsive Pricing Table WordPress Plugin
Responsive Pricing Table WordPress Plugin

Die von Dir erstellten Preistabellen werden mit einfachen Feldern und Backend-Schaltflächen vervollständigt. Zu den integrierten Feldern, die Du verwenden kannst, gehören beispielsweise Preise, Beschreibungen, Plantitel und Symbolfelder. Einige der benutzerdefinierten Schaltflächen ermöglichen Links zu Seiten wie Stripe und PayPal, während die benutzerdefinierten CSS-Klassen fortgeschrittenen Entwicklern sicherlich weiterhelfen.

Kosten

Ein kostenloser Plan ist verfügbar.

Du kannst das Premium-Plugin für 19 US-Dollar auf einer Website oder 49 US-Dollar für unbegrenzte Websites erwerben .

Die Darko-Entwickler verkaufen andere Plugins, sodass Du sie alle zum Preis von 79 US-Dollar erhalten kannst. Dies kann für einige Unternehmen nützlich sein.

Funktionen, die Responsive Pricing Table zu einer guten Wahl machen

  • Der kostenlose Plan bietet die erforderlichen Tools für eine Vielzahl kleiner Unternehmen, da Du unbegrenzt viele Tabellen und Pläne erhältst.
  • Auch der Premiumpreis ist eher niedrig.
  • Die Skins sehen aus der Box heraus modern und in hohem Maße anpassbar aus, mit vielen Schaltflächen und Schriften, die angepasst werden können.
  • Symbole und andere visuelle Elemente sind verfügbar.
  • Du kannst beliebig viele Funktionen in Deine Preispläne aufnehmen.
  • Die Handlungsaufforderungs-Buttons können mit Zahlungssystemen von Drittanbietern wie PayPal verknüpft werden.
  • Eine breite Palette von Währungssymbolen steht zur Verfügung, um verschiedene Länder zu erreichen.
  • Du kannst ein Abzeichen für empfohlene Pläne anzeigen.
  • Wiederkehrende Pläne (pro Monat oder Jahr) können mit speziellen Einstellungen angezeigt werden.

2. Go Pricing

Die Go Pricing-App hat keine kostenlose Version, bietet jedoch Tausende von Verkäufen und einige großartige Rezensionen auf dem CodeCanyon-Marktplatz. Ganz zu schweigen davon, dass es nur 27 US-Dollar kostet, um eines der besten Plugins für Preistabellen auf dem Markt zu erhalten.

Go Pricing - WordPress Responsive Pricing-Tabellen
Go Pricing – WordPress Responsive Pricing-Tabellen

Was macht das Go Pricing Plugin so besonders? Zu Beginn hat es unglaublich schlanke Preispläne mit modernen Farben und vielen Leerzeichen, damit es nicht überladen aussieht. Du kannst auch aus einer großen Sammlung von Themes auswählen, von denen einige nur für bestimmte Branchen bestimmt sind. Wir lieben es auch, dass das Plugin in mehrere Page Builder integriert ist und über Shortcodes verfügt, die sicherstellen, dass niemand ein Programmierer sein muss, um Preistabellen zu erstellen.

Kosten

Eine einmalige Gebühr von 27 Dollar mit der Option, den Support für 8,25 USD auf ein Jahr zu verlängern.

Funktionen, die Go Pricing zu einer guten Wahl machen

  • Jeder Teil Deiner Preistabelle ist in einem visuellen Editor in einen eigenen Abschnitt unterteilt. Dies umfasst die Kopfzeile, den Hauptteil und den Schaltflächen-Bereich.
  • Über 250 Demo-Tabellen erhältst Du nach dem Kauf des Plugins. Auf diese Weise können die meisten Unternehmen innerhalb weniger Minuten eine Vorlage abrufen und eine Preisseite launchen.
  • Drag & Drop-Elemente sind mit den Page Builder-Integrationen möglich. Go Pricing funktioniert gut mit Beaver Builder, Elementor und WPBakery.
  • Der Aufbau der Preistabelle ist für alle Erfahrungsstufen einfach. Das Plugin verfügt über eine großartige Backend-Oberfläche mit Optionen für Shortcodes, Import und Einstellungen.
  • Füge Animationen hinzu, um Deine Preistabellen ansprechender zu gestalten.
  • Verwende über 2000 Schriftsymbole, um Deine Tabellen noch visueller zu gestalten.
  • Ein benutzerdefiniertes CSS-Modul wird für diejenigen bereitgestellt, die über die Basisfunktionen hinausgehen möchtest.
  • Füge einzigartige Funktionen wie Medienelemente, PayPal-Schaltflächen und Google Maps hinzu.

3. Pricing Tables WordPress Plugin – Easy Pricing Tables

Wenn Du an sauberen Vergleichs- und Preistabellen ohne Schnickschnack interessiert bist, ist das Pricing Tables WordPress Plugin eine gute Wahl. Es ist sowohl als kostenlose als auch als Premium-Version erhältlich und kostet für eine Website 29 USD pro Jahr und für unbegrenzte Websites bis zu 99 USD pro Jahr. Einige der Premium-Funktionen, darunter das WooCommerce-Add-On und die Google Analytics-Integration, werden langsam richtig begehrt.

Pricing Tables WordPress Plugin - Easy Pricing Tables
Pricing Tables WordPress Plugin – Easy Pricing Tables

Einige der anderen Integrationen für die Premium-Versionen umfassen Easy Digital Downloads, Stripe und ein Pricing Toggle-Add-On. Darüber hinaus kannst Du damit rechnen, den Entwurfsprozess mit 10 voreingestellten Entwürfen zu starten. Wie bereits erwähnt, ist dies eines der einfacheren Plugins für Preistabellen. Wir empfehlen es daher für diejenigen, die keine Elemente wie Animationen und Grafiken möchten.

Kosten

Das Core Plugin ist kostenlos.

Das Premium-Plugin kostet 29 US-Dollar pro Jahr für eine Site, 59 US-Dollar pro Jahr für fünf Sites und 99 US-Dollar pro Jahr für unbegrenzte Sites.

Funktionen, die Easy Pricing Tables zu einer guten Wahl machen

  • Das Design der Preistabelle ist klar und einfach und sorgt für ein modernes Erscheinungsbild ohne unnötige Effekte.
  • Du kannst die Farben und andere Elemente von nahezu jedem Artikel in der Preistabelle anpassen. Dies umfasst Spalten, Schaltflächen und Schriftarten.
  • Alle Preistabellen werden mit einer einfachen Liste von Sichtfeldern im Backend erstellt. Das Setup ist so formatiert, wie die Preistabelle im Frontend aussehen wird.
  • Du kannst festlegen, dass ein oder mehrere Pläne den anderen übergeordnet sind.
  • Du kannst die Spalten durch Ziehen und Ablegen neu anordnen.
  • Für erweiterte Anpassungen Deiner Preistabellen steht ein benutzerdefiniertes CSS-Modul zur Verfügung.
  • Auch die kostenlose Version unterstützt eine unbegrenzte Anzahl von Preistabellenzeilen.
  • Einige der Premium-Versionen bieten hervorragende Integrationsmöglichkeiten für WooCommerce, Google Analytics und Stripe.

4. Pricing Table by Supsystic

Das Supsystic-Entwicklungsteam ist dafür bekannt, dass es alle möglichen Plugins für Fotogalerien, Popups, Datentabellen und mehr erstellt. Wir werfen jedoch einen Blick auf das Pricing Table Plugin, das als kostenlose Lösung mit einer Reihe von Funktionen angeboten wird, mit denen Du herumspielen kannst. Die kostenlose Version des Plugins bietet Funktionen für voreingestellte Vorlagen, Hover-Animationen und Schaltflächenanpassungen. Du kannst sogar Deine Tabelleninformationen problemlos importieren und exportieren.

Pricing Table by Supsystic
Pricing Table by Supsystic

Das Premium-Plugin gefällt uns auch, da es für eine Website ab 39 US-Dollar erhältlich ist und Du eine große Menge an Premium-Vorlagen und Rollenrestriktionen erhältst. Insgesamt würde ich argumentieren, dass dies eines der besten Preistabellen-Plugins für die Verwendung des kostenlosen Core-Plugins und das Auslassen der kostenpflichtigen Version ist. Die Premium-Vorlagen sind jedoch auch ziemlich cool und kosten Dich nicht so viel.

Kosten

Ein kostenloser Plan wird angeboten.

Upgrade auf Premium für 39 US-Dollar an einem Standort. Oder 69 US-Dollar für Support auf fünf Websites. Oder 149 US-Dollar auf unbegrenzten Websites.

Funktionen, die Pricing Table zu einer guten Wahl machen

  • Das Pricing Table-Plugin von Supsystic ist der vollständigsten Preistabellen-Lösung in der kostenlosen Version am nächsten. Das einzige Upgrade, das Du im Premium-Plugin erhältst, sind einige bessere Vorlagen.
  • Alle Preistabellen sehen wunderschön aus, mit ansprechenden Elementen und leuchtenden Farben.
  • Die Vorlagen in der kostenlosen Version sind großartig und die Premium-Vorlagen sind fantastisch.
  • Wähle einen Schalter mit Sonderangeboten, z. B. für Vorauszahlungen für ein Jahr oder für den Kauf von heute.
  • Kennzeichne einige Deiner Pläne mit visuellen Symbolen.
  • Verwende Tools wie Shortcodes, Farbregler und visuelles Building, um sicherzustellen, dass Du während des Erstellungsprozesses keine Codezeile berührst.
  • Das Plugin verfügt über Hover-Animationen, um Deine Pläne für die Besucher ansprechender zu gestalten.
  • Es werden auch Bilder und Videos unterstützt, damit Du bestimmte Funktionen oder Teile Deines Unternehmens präsentieren kannst.
  • Ein Drag-and-Drop-Generator befindet sich im Backend Deines WordPress-Dashboards.

5. CSS3 Responsive WordPress Compare Pricing Tables

Bei einem Preis von 20 US-Dollar ist das CSS3 Responsive Pricing Table-Plugin ein unglaubliches Schnäppchen. Es wird nur auf dem CodeCanyon-Marktplatz verkauft. Beachte jedoch, dass keine kostenlose Version verfügbar ist. Davon abgesehen werden sich die wenigsten Menschen darüber ärgern, 20 US-Dollar für ein hoch bewertetes und geprüftes Pricing-Plugin zu zahlen. Insgesamt hat das Plugin einige schöne Vorlagen, mit denen Du beginnen kannst. Du kannst Farben und Schriftarten ändern und gleichzeitig einige der besten Pläne hervorheben, die Du anbietest.

CSS3 Responsive WordPress Compare Pricing Tables
CSS3 Responsive WordPress Compare Pricing Tables

Die meisten Preistabellen in dieser Liste sind responsiv, aber diese sieht besonders gut aus, nachdem ich sie auf meinem Telefon und Tablet getestet habe. Es sieht auch so aus, als ob der Entwickler reagiert und bereit ist, neue Funktionen zu erstellen und diese als Updates freizugeben. Zum Zeitpunkt dieses Artikels sehe ich zum Beispiel derzeit drei wichtige Feature-Releases – das der verschiebbaren Spalten, den responsiven Modus und das Importieren und Exportieren von Daten.

Kosten

20 $ für alle Funktionen.

Du kannst 5,63 US-Dollar bezahlen, um Deinen Kundensupport auf ein Jahr zu verlängern. Es wird kein kostenloses Plugin angeboten.

Funktionen, die CSS3 Responsive WordPress Compare Pricing Tables zu einer guten Wahl machen

  • Die Preise sind zweifellos die besten, die wir für die Funktionen des Preis-Plugins gesehen hast.
  • Die große Auswahl an Anpassungstools ermöglicht Tausende von einzigartigen Preistabellen. Dies umfasst 20 Farbversionen, 60 Ribbons, 42 Kreuz-Icons und zwei Tabellenstile.
  • Erstelle eine unbegrenzte Anzahl von Zeilen und Spalten.
  • Tippe auf die CSS- und HTML-Module, um weitere Anpassungen vorzunehmen.
  • Du erhältst Optionen zum Anpassen der Breite und Höhe aller Spalten und Zeilen.
  • Multisite-Kompatibilität.
  • Shortcodes, mit denen Du Deine Preistabellen überall auf Deinen Websites implementieren kannst.
  • Tools zum Importieren und Exportieren von Daten, mit denen Du Deine Daten in eine andere Tabelle verschieben oder aus einer Tabelle importieren kannst.
  • Symbol-Unterstützung für das Einbeziehen von Grafiken wie Häkchen und Xs.
  • Animationen und Medien-Unterstützung zum Hinzufügen weiterer Grafiken und zum Hervorheben Deiner Pläne.

6. ARPrice – Responsive WordPress Pricing Table Plugin

Das ARPrice-Plugin wird auch auf der CodeCanyon-Website zum Preis von 23 US-Dollar verkauft. Wir beginnen zu bemerken, dass viele Unternehmen und Einzelpersonen besser dran sind, diese supergünstigen Preise zu zahlen, um alle Funktionen zu erhalten, die sie benötigen, als mit einem kostenlosen Plugin zu arbeiten, dem einige Funktionen fehlen. Unabhängig davon bietet dieses Preistabellen-Plugin einige der besten Grafiken in dieser Liste, da es verschiedene Arten von Medienelementen unterstützt, wie z. B. Hintergrundbilder und Symbole.

ARPrice – WordPress Pricing Table Plugin
ARPrice – WordPress Pricing Table Plugin

Der Backend-Designer ist ein visueller Editor, der genau anzeigt, wie Deine Preistabelle online aussehen wird. Du kannst dann auswählen, ob Deine Preispläne auf jährlichen, monatlichen oder den vielen anderen verfügbaren Zeitangeboten basieren. Du startest den Vorgang, indem Du eine Vorlage auswählst. Anschließend kannst Du Daten importieren, Effekte ändern und Deine Schriftarten auswählen. Insgesamt bietet das ARPrice-Plugin eine schöne Benutzeroberfläche mit noch besseren Frontend-Ergebnissen.

Kosten

Eine einmalige Gebühr von 23 USD mit einer Gebühr von 6,75 USD für die Verlängerung Deines Supports um bis zu ein Jahr.

Funktionen, die ARPrice zu einer guten Wahl machen

  • Es ist ziemlich erschwinglich für ein Premium-Plugin.
  • Über 300 Preistabellen-Vorlagen stehen Dir mit dem Plugin zum Download zur Verfügung.
  • Die Anpassungstools sind hervorragend, mit unbegrenzten Farboptionen, vollständig ansprechenden Vorlagen, einer Schaltfläche zum Umschalten der Preise und über 3.000 Symbolen.
  • Die Animationseffekte werden dazu beitragen, dass Deine Preistabellen ansprechender werden.
  • Es gibt ein CSS-Modul und ein CSS-Leitsystem für erweiterte Anpassungen.
  • Du erhältst einige einzigartige Integrationen mit anderen Programmen von Drittanbietern wie Google Maps.
  • Der Echtzeit-Vorlageneditor bietet eine schöne visuelle Oberfläche zum Anpassen von Elementen wie Spalten, Überschriften und Hintergründen.
  • Es gibt eine zusätzliche „Team-Präsentationsfunktion“, die im Wesentlichen dasselbe Spaltenformat verwendet und es Dir ermöglicht, Informationen über Deine Mitarbeiter auf der Website zu teilen.
  • Das WordPress-Preistabellen-Plugin ist mit den beliebtesten Page Buildern wie Elementor, Gutenberg und WPBakery kompatibel.

 

7. Pricing Table – Price list, Price Table, Easy Pricing Table

Das Pricing Table – Price List Plugin stammt von A WP Life. Es ist eine etwas neuere, aber angesehene Lösung. Die kostenlose Version bietet schöne Optionen für Anpassungen, einschließlich einiger Vorlagen, die mit dem Plugin geliefert werden. Es werden Animationen bereitgestellt, und Du kannst Elemente wie Symbole und Funktionslisten einfügen. Platziere die Schaltflächen „Jetzt kaufen“ in den Listen und füge Tags für Elemente wie „Heiß“ oder „Beliebt“ hinzu.

Pricing Table – Price list, Price Table, Easy Pricing Table
Pricing Table – Price list, Price Table, Easy Pricing Table

Die Premium-Version dieses Plugins bietet dieselben Funktionen sowie 19 zusätzliche Vorlagen. Es kostet nur 9,99 US-Dollar. Wenn Du also eine Vorlage findest, die zu Deiner Marke passt, greife zu.

Kosten

Kostenlos und 9,99 USD für die Premium-Version.

Funktionen, die Pricing Table zu einer guten Wahl machen

  • Du erhältst alle guten Funktionen in der kostenlosen Version. Der einzige Grund für ein Upgrade ist, wenn Du eine bestimmte Vorlage wünschst, die nicht im kostenlosen Plugin enthalten ist.
  • Eine Handvoll ansprechender Preistabellen-Vorlagen sind in der kostenlosen Version enthalten. Du kannst auch, für etwa 20 weitere, upgraden.
  • Alle Tabellen, die mit den Plugins geliefert werden, sind vollständig responsiv.
  • Mithilfe von Symbolen kannst Du visuell ansprechendere Tabellen erstellen.
  • Mithilfe der Shortcodes kannst Du Deine Tabellen an einer beliebigen Stelle auf Deiner Website platzieren.
  • Preistabellen können mit einem Klick auf eine Schaltfläche zu Deiner Site hinzugefügt und daraus entfernt werden.
  • Die Anpassungsoptionen umfassen unbegrenzte Farben, Schaltflächenfarben, Kopfzeilenfarben und mehr.
  • Benutzerdefiniertes CSS-Styling kann im Dashboard vorgenommen werden.
  • Der Entwurfsbereich ist kein vollständig visueller Builder, sondern besteht aus mehreren Spalten, um im Vorhinein zu simulieren, wie die Tabellen aussehen werden.

8. WRC Pricing Tables

Das Plugin WRC Pricing Tables wird als kostenloses Plugin zur Verfügung gestellt. Du hast jedoch die Wahl, ein Upgrade für 10 US-Dollar durchzuführen. Die Premium-Version ist etwas weiter fortgeschritten, mit über 500 zusätzlichen Vorlagen, einer PayPal-Integration und Preisoptionen für den Wechsel zwischen Monats- und Jahresplänen. Eine Handvoll anderer Funktionen sind im Premium-Paket enthalten, daher ist es auf jeden Fall eine Überlegung wert, da der Preis so niedrig ist.

WRC Pricing Tables
WRC Pricing Tables

Das kostenlose Plugin eignet sich hervorragend zum Erstellen einfacher Preistabellen, und Du kannst eine unbegrenzte Anzahl von Zeilen und Spalten erstellen. Das gesamte Design wird mit Hilfe eines Drag-and-Drop-Editors erstellt. Eines der Dinge, die uns am WRC Pricing Tables-Plugin am besten gefallen, ist, dass Du einen Farbwähler verwenden kannst, der im Wesentlichen Deine Farbe aufnimmt und ein zufälliges Tabellendesign für Dich generiert.

Kosten

Kostenlos. 10 USD für Premium.

Funktionen, die WRC Pricing Table zu einer guten Wahl machen

  • Das Plugin WRC Pricing Tables bietet in der kostenlosen Version hervorragende Funktionen und eine Premium-Komplettlösung für nur 10 US-Dollar (einmalige Gebühr).
  • Das Plugin bietet Shortcodes, mit denen Du Deine Preistabellen an einer beliebigen Stelle auf Deiner WordPress-Website platzieren kannst. Zum Beispiel könnte ein Shortcode technisch auf jeder Seite, jedem Beitrag oder potenziell sogar einem Widget angezeigt werden.
  • Die Font Awesome-Symbole verleihen Deinem Design eine besondere visuelle Note.
  • Das Plugin unterstützt auch Google Fonts.
  • Die PayPal-Button-Integration stellt sicher, dass Du Geld von Deinen Kunden einholen kannst.
  • Mit dem Plugin werden einige Vorlagen mitgeliefert.
  • Du kannst eine unbegrenzte Anzahl von Zeilen und Spalten hinzufügen und gleichzeitig die Preistabellen duplizieren und für eine spätere Verwendung speichern.
  • Fortgeschrittene Entwickler haben die Möglichkeit, ihre Tabellen mit benutzerdefiniertem CSS zu verbessern.

Welches ist das beste WordPress Preistabellen-Plugin für Dich?

The plugins listed above are all ready for you to test. However, I can also make it a bit easier for you with some additional recommendations.

Alle anderen Preistabellen-Plugins in dieser Liste haben ebenfalls ihre Vorteile. Dies sind jedoch die, die mir am meisten Spaß machen.

Aber was ist, wenn Du kein Plugin verwenden möchtest und Deine eigene Preistabelle erstellen möchtest?

So geht’s!

Erstellen einer Preistabelle in WordPress von Grund auf neu

Das Erstellen einer Preistabelle von Grund auf erfolgt mit HTML-Code, der uns die Struktur für unsere Tabelle gibt, und dann wird sie mit CSS formatiert.

Melde Dich zunächst auf Deiner WordPress-Website an, navigiere zum Dashboard und klicke auf Pages → Add New. Du kannst den Code auch zu einer bereits vorhandenen Seite hinzufügen, auf der Deine Preistabellen angezeigt werden sollen.

Wechsle nach dem Laden des WordPress-Editors in den Textmodus und füge den folgenden Code ein:

<div class="pricing-table">
<div class="one-third first">
<ul>
       <li class="header">Basic</li>
       <li class="grey-blue">$ 9.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
              <li>List Item #4</li>
              <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a>
</div>
<div class="middle one-third">
<ul> 
       <li class="header-blue">Pro</li>
       <li class="light-blue">$ 99.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
<div class="one-third">
<ul>
       <li class="header">Business</li>
       <li class="grey-blue">$ 199.99 / year</li>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
               <li>List Item #4</li>
               <li>List Item #5</li>
</ul>
<a class="pricing-button" href="#">Sign Me Up!</a> 
</div>
</div>

Der Code ist ziemlich einfach: Zuerst erstellen wir ein div, um unseren Preistabellen-Code zu speichern und es einfach zu machen, ihn mit CSS zu gestalten. Da wir dann drei Tabellen erstellen, wird jede von ihnen in eine Drittel-Spalte eingeschlossen. Der letzte Teil ist die Tabelle selbst, mit zusätzlichen Klassen für einen Header und einen Preis, die sie vom Rest der Tabelle abheben.

Ersetze vor dem Klicken auf Publish oder Update den Text zwischen den Tags [pre] <li> und </ li> [/ pre] durch Deinen eigenen und füge den Link nach dem href-Teil des Links zu Deinem Zahlungsformular hinzu.

Wenn Du alle Informationen ersetzt hast, klicke auf Publish, wenn Du eine neue Seite erstellt hast, oder auf Update, wenn Du die Tabelle zu einer vorhandenen Seite hinzugefügt hast.

Wenn Du Dir Deine Seite jetzt ansiehst, wirst Du feststellen, dass die Preistabelle sehr einfach aussieht. Lass uns etwas Styling hinzufügen.

Wenn Du ein untergeordnetes Theme verwendest, solltest Du dem Stylesheet Deines untergeordneten Themes oder dem benutzerdefinierten CSS-Editor den folgenden Code hinzufügen.

Der erste Teil des Codes stellt sicher, dass unsere Preistabelle in Spalten angezeigt wird. Wenn Du mehr als drei Tabellen anzeigen möchtest oder musst, kannst Du diese dank dieser Klassen problemlos ersetzen:

/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}

.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}

.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;

}
.first {
clear: both;
margin-left: 0;
}

Der zweite Teil des Codes gibt den Tabellen das eigentliche Styling.

/* ## Pricing Table
 --------------------------------------------- */

.pricing-table {
 line-height: 1;
 }
 li.header {
 background-color: #2f79a9;
 color: #fff !important;
 font-size: 25px;
 border-bottom: 1px solid #2f79a9 !important;
 margin-bottom: 0 !important;
 }
 li.grey-blue {
 background-color: #569dcc;
 color: #fff !important;
 font-size: 20px;
 }

li.header-blue {
 background-color: #00b9eb;
 color: #fff !important;
 border-bottom: 1px solid #00b9eb !important;
 font-size: 25px;
 margin-bottom: 0 !important;
 }
 li.light-blue {
 background-color: #72dffd;
 color: #fff !important;
 font-size: 20px;
 }

.middle {
 box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
 }
 .pricing-table .one-third {
 background-color: #fff;
 margin: 20px 5px;
 padding: 40px;
 width: 32.33%;
 }

.pricing-table .one-third:nth-child(3n+1),
 .pricing-table .one-third:nth-child(3n+2),
 .pricing-table .one-third:nth-child(3n) {
 border: 1px solid #ddd;
 }

.pricing-table .one-third ul {
 margin: 0;
 }

.pricing-table ul li {
 border-bottom: 1px solid #ddd;
 color: #333;
 margin-bottom: 10px;
 padding: 10px;
 text-align: center;
 list-style-type: none;
 }

.pricing-table a.pricing-button {
 background-color: #00b9eb;
 border: 3px solid #00b9eb;
 color: #fff;
 display: block;
 text-align: center;
 padding: 16px 24px;
 }

.pricing-table a.pricing-button:hover {
 background-color: #000;
 border: 3px solid #000;
 color: #fff;
 }

/* Pricing Table - Media Queries for Mobile Devices
 --------------------------------------------- */

@media only screen and (max-width: 1140px) {
 .pricing-table .one-third {
 width: 32%;
 }
 }

@media only screen and (max-width: 800px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 568px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 480px) {
 .pricing-table .one-third {
 width: 100%;
 }
 }

@media only screen and (max-width: 420px) {
 .pricing-table .one-third {
 width: 100%;
 margin: 20px 0;
 }
 }

Wir haben den Preistabellen ein einfaches, grundlegendes Design hinzugefügt und die Überschrift und den Preis unterschiedlich gestaltet, um sie hervorzuheben. Wir haben auch einen Box-Schatten um die mittlere Tabelle hinzugefügt, um dieses spezielle Paket hervorzuheben. Schließlich haben wir einige Medienabfragen hinzugefügt, um sicherzustellen, dass die Tabellen reagieren.

Wie Deine Preistabelle aussehen sollte, wenn alles gesagt und getan ist.
Wie Deine Preistabelle aussehen sollte, wenn alles gesagt und getan ist.

Nachdem Du beide CSS-Snippets eingefügt hast, klicke auf Update File. Schau Dir jetzt Deine Seite an und stelle sicher, dass alles so angezeigt wird, wie Du es möchtest.

Wenn Du Fragen zu Preistabellen oder Vorschläge für andere Personen hast, lass es uns in den Kommentaren wissen!

Matteo Duò Kinsta

Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.