Eine Preistabelle erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Preistabelle: drei Tarife nebeneinander, jeder ein Panel mit einem Preis, einer Funktionsliste und einem Button in voller Breite, und der mittlere Tarif hervorgehoben. Nutzen Sie sie auf einer Preisseite oder in einer Produktseite. Für die vollständige Produktseite darum folgen Sie Eine Produktseite erstellen.

Das Video baut drei Tarife für ein Reporting-Tool.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page) und klicken Sie auf Save.
  • Neue Elemente landen oben in ihrem Container, sodass in jedem Panel der Button vor dem Preis hineinkommt.

Schritt 1: Abschnitt und Spalten hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Wählen Sie unter HTML classes Align text center. Öffnen Sie das Panel Style, wählen Sie ein hellgraues Background und klicken Sie auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten.
  4. Klicken Sie auf das Grid-Icon der Zeile (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.

Schritt 2: Den ersten Tarif bauen

  1. Klicken Sie in der ersten Spalte auf + und wählen Sie Panel aus dem Tab Content.
  2. Fahren Sie über das Panel und öffnen Sie More > Settings. Setzen Sie den Title auf „Starter“, lassen Sie den Type auf DXPR und klicken Sie auf Save.
  3. Klicken Sie auf + auf dem Panel und wählen Sie Button. Setzen Sie Title auf „Tarif wählen“, Link auf /signup und Type auf Primary. Schalten Sie Block button ein, sodass er die Spalte füllt, und klicken Sie dann auf Save.
  4. Klicken Sie erneut auf + auf dem Panel und wählen Sie Text; er landet über dem Button. Geben Sie den Preis als Heading 2 ein, fügen Sie die Funktionen je eine pro Zeile hinzu und klicken Sie auf Save.

Schritt 3: Die anderen Tarife bauen

  1. Wiederholen Sie Schritt 2 in der zweiten Spalte für „Professional“. Wählen Sie im Panel Style des Panels das violette Background und setzen Sie den Type des Buttons auf Success, sodass der Tarif hervorsticht.
  2. Wiederholen Sie Schritt 2 in der dritten Spalte für „Enterprise“, mit „Individuelle Preise“ als Preis.

Tipp

Die mittlere Spalte zieht den Blick an. Setzen Sie den Tarif dorthin, den Sie am liebsten verkaufen.

Schritt 4: Die Überschrift hinzufügen

  1. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text; er landet über der Zeile.
  2. Geben Sie „Wählen Sie Ihren Tarif“ als Heading 2 ein, fügen Sie eine Zeile wie „Einfache monatliche Preise. Jederzeit kündbar.“ hinzu und klicken Sie auf Save.

Schritt 5: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.

Weiter gehen

Nicht im Video gezeigt:

  • Vier Tarife: Wählen Sie stattdessen das Preset 1/4 + 1/4 + 1/4 + 1/4 und bauen Sie eine vierte Spalte.
  • „Am beliebtesten“-Badge: Fügen Sie oben im hervorgehobenen Panel ein Text-Element mit „Am beliebtesten“ in Fettschrift hinzu.
  • Jährlich und monatlich: Fügen Sie über der Zeile eine Text-Zeile wie „Monatlich | Jährlich (20 % sparen)“ hinzu. Die Zeile ist statisch; ein echter Schalter braucht das HTML-Element mit Ihrem eigenen Skript.
  • Häkchen bei Funktionen: Fügen Sie vor jede Funktionszeile ein Häkchen ein oder fügen Sie ein Icon-Element über der Liste hinzu.

Was Sie sehen

„Wählen Sie Ihren Tarif“ sitzt zentriert über drei Tarifen auf einem grauen Band. Jedes Panel zeigt seinen Namen in der Titelleiste, den Preis, drei Funktionen und einen Button Tarif wählen in voller Breite. Der mittlere Tarif sticht in Violett mit einem grünen Button hervor.

Wenn Sie die Tarife nicht wie gezeigt sehen

  • Ein Panel öffnet sich ohne Einstellungsdialog. Panels öffnen sich leer, ohne Dialog. Fahren Sie über das Panel und öffnen Sie More > Settings, um seinen Title zu setzen.
  • Ein Panel-Type wie Primary zeigt keine Farbe. Ihr Theme stylt diesen Paneltyp nicht. Lassen Sie den Type auf DXPR und wählen Sie ein Background im Panel Style des Panels, wie in Schritt 3.
  • Die Buttons sind nur so breit wie ihr Text. Block button ist aus. Öffnen Sie die Einstellungen jedes Buttons und schalten Sie ihn ein.
  • Ihre Änderungen sind nach einem Neuladen weg. Sie haben die Seite verlassen, bevor Sie auf Save in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe Änderungen werden nicht gespeichert.

Wie geht es weiter?