fbpx
WordPress-Mitgliedschafts-Plugin
  1. Startseite
  2. Wissensdatenbank
  3. Anzeige von Preisoptionen mit Hilfe von Tabellen auf Ihrer Verkaufsseite

Anzeige von Preisoptionen mit Hilfe von Tabellen auf Ihrer Verkaufsseite

Ihre Mitglieder wollen Auswahlmöglichkeiten, nur nicht zu viele. In diesem Artikel finden Sie ein Beispiel dafür, wie Sie Ihren Mitgliedern auf einer Verkaufsseite mithilfe einer Kombination aus CSS und HTML 3 verschiedene Optionen anbieten können. Dieses Beispiel setzt voraus, dass Sie über ein grundlegendes Verständnis von HTML und CSS verfügen.

Denken Sie daran, dass dieses Beispiel nur als Ausgangspunkt dient. Sie können es kopieren und in Ihre Seiten einfügen. Dann können Sie die href-Links so ändern, dass sie Ihre Kauflink-SmartTags widerspiegeln, und die Stilattribute in den verschiedenen Abschnitten ändern, um das Aussehen anzupassen. Am Ende dieses Artikels finden Sie CSS und HTML in separaten Dateien, falls Sie und/oder Ihr Entwickler diese verschiedenen Bereiche eingehender bearbeiten möchten.

Um Preistabellen auf Ihrer Seite zu erstellen, kopieren Sie einfach den folgenden Code und fügen ihn in einen HTML-Block oder in die "Text"-Ansicht des Editors ein, wenn Sie den alten WordPress-Editor verwenden:

<Stil>
@media nur Bildschirm und (max-Breite: 600px) {
  .spalten {
    Breite: 100%;
  }
}
</Stil>
<div Klasse="Spalten" Stil="Box-Sizing: border-box; Schwimmer: links; Breite: 33.3%; Polsterung: 8px;">
	<ul Klasse="Preis" Stil="Box-Sizing: border-box; list-style-type: keine; Grenze: 1px solid #eee; Marge: 0; Polsterung: 0; -webkit-Übergang: 0.3s; Übergang: 0.3s;">
		<li Klasse="Kopfzeile" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #358E39; Farbe: weiß; Schriftgröße: 25px; text-schatten: 0 1px 1px rgba(0,0,0,0.4);">Produkt 1</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">$ 9,99 / Jahr</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">10 Videos</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Tolle Vergünstigungen</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Monatliche E-Mails</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Eingeschränkter Zugang</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">
			<a href="https://membermouse.com/de/zur-kasse/?rid=pK2qyz" Klasse="Taste" Stil="Box-Sizing: border-box; Hintergrundfarbe: #4CAF50; Grenze: keine; Farbe: weiß; Polsterung: 10px 25px; text-align: Zentrum; text-decoration: keine; Schriftgröße: 18px;">Anmeldung</a>
		</li>
	</ul>
</div>
<div Klasse="Spalten" Stil="Box-Sizing: border-box; Schwimmer: links; Breite: 33.3%; Polsterung: 8px;">
	<ul Klasse="Preis2" Stil="Box-Sizing: border-box; list-style-type: keine; Grenze: 1px solid #eee; Marge: 0; Polsterung: 0; -webkit-Übergang: 0.3s; Übergang: 0.3s; box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);">
		<li Klasse="Kopfzeile" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Farbe: weiß; Schriftgröße: 25px; text-schatten: 0 1px 1px rgba(0,0,0,0.4); Hintergrundfarbe: #4CAF50;">Produkt 2</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">$ 24,99 / Jahr</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">25 Videos</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Noch mehr Vergünstigungen</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Zweiwöchentliche Emails</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Erweiterter Zugang</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">
			<a href="https://membermouse.com/de/zur-kasse/?rid=p57LaD" Klasse="Taste" Stil="Box-Sizing: border-box; Hintergrundfarbe: #4CAF50; Grenze: keine; Farbe: weiß; Polsterung: 10px 25px; text-align: Zentrum; text-decoration: keine; Schriftgröße: 18px;">Anmeldung</a>
		</li>
	</ul>
</div>
<div Klasse="Spalten" Stil="Box-Sizing: border-box; Schwimmer: links; Breite: 33.3%; Polsterung: 8px;">
	<ul Klasse="Preis" Stil="Box-Sizing: border-box; list-style-type: keine; Grenze: 1px solid #eee; Marge: 0; Polsterung: 0; -webkit-Übergang: 0.3s; Übergang: 0.3s;">
		<li Klasse="Kopfzeile" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #358E39; Farbe: weiß; Schriftgröße: 25px; text-schatten: 0 1px 1px rgba(0,0,0,0.4);">Produkt 3</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">$ 49,99 / Jahr</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">50 Videos</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Die meisten Vergünstigungen</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Wöchentliche Emails</li>
		<li Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum;">Der meiste Zugang</li>
		<li Klasse="grau" Stil="Box-Sizing: border-box; Rand-unten: 1px solid #eee; Polsterung: 20px; text-align: Zentrum; Hintergrundfarbe: #eee; Schriftgröße: 20px;">
			<a href="https://membermouse.com/de/zur-kasse/?rid=pGpM60" Klasse="Taste" Stil="Box-Sizing: border-box; Hintergrundfarbe: #4CAF50; Grenze: keine; Farbe: weiß; Polsterung: 10px 25px; text-align: Zentrum; text-decoration: keine; Schriftgröße: 18px;">Anmeldung</a>
		</li>
	</ul>
</div>
HTML

So sieht der obige Code aus, wenn er verwendet wird:


Sie können die angehängten Dokumente verwenden, um den HTML- und CSS-Code in separaten Dateien zu sehen. So können Sie bei Bedarf schnell Bearbeitungen und Änderungen vornehmen.

Artikel Anhänge

War dieser Artikel hilfreich?
Ja Nein

Sie können die gesuchte Antwort nicht finden?

Wenden Sie sich an unser Customer Success Team
Kontaktieren Sie uns!
WP-Mitgliedschafts-Plugin
de_DE DE
de_DE DE en_US EN es_ES ES fr_FR FR pt_BR PT
Eigenschaften
Unternehmen
Ressourcen
Verbinden Sie
Aus dem Blog
10 Nischen-Mitgliedschaft Websites, die Sie inspirieren wird
Der vollständige Leitfaden zur Benennung Ihrer Mitgliedschaftsstufen
Sie wollen also ein Mitgliedschaftsgeschäft eröffnen?
16 der besten WordPress-Themes für die Mitgliedschaft im Jahr 2023

© 2025 MitgliedMaus, LLC   Datenschutzbestimmungen   |   Erstattungen   |   Bedingungen und Konditionen   |   FTC-Offenlegung