{"id":1514,"date":"2025-03-21T10:03:44","date_gmt":"2025-03-21T10:03:44","guid":{"rendered":"https:\/\/tableberg.com\/?p=1514"},"modified":"2025-03-21T10:18:43","modified_gmt":"2025-03-21T10:18:43","slug":"wie-man-eine-wordpress-preistabelle-mit-toggle-erstellt","status":"publish","type":"post","link":"https:\/\/tableberg.com\/de\/how-to-create-a-wordpress-pricing-table-with-toggle\/","title":{"rendered":"Wie man eine WordPress Preistabelle mit Toggle erstellt"},"content":{"rendered":"

Die Erstellung einer Preistabelle ist ein Muss, wenn Sie Ihre Produkte und Dienstleistungen \u00fcber Ihre Website verkaufen wollen. Um jedoch mehrere Preispl\u00e4ne anzeigen zu k\u00f6nnen, die die Kunden leicht vergleichen k\u00f6nnen, ohne die Seite zu verlassen, m\u00fcssen Sie der Tabelle die Funktion \"Umschalten\" hinzuf\u00fcgen.<\/p>\n\n\n\n

Mit der Umschaltfunktion k\u00f6nnen die Benutzer zwischen verschiedenen Preisoptionen navigieren oder wechseln und so eine interaktive Schnittstelle schaffen. So k\u00f6nnen die Nutzer beispielsweise zwischen monatlichen, j\u00e4hrlichen und lebenslangen Abonnements umschalten.<\/p>\n\n\n\n

In diesem Blogbeitrag zeigen wir Ihnen eine Schritt-f\u00fcr-Schritt-Anleitung, wie Sie mit Tableberg eine WordPress-Preistabelle mit einem Toggle erstellen. Los geht's.<\/p>\n\n\n\n

Schritt 1: Installieren und Aktivieren von Tableberg<\/h3>\n\n\n\n

Installieren und aktivieren Sie zun\u00e4chst die Tischberg<\/a><\/strong> Plugin auf Ihrer WordPress-Website. Wenn Sie es noch nicht installiert haben, holen Sie sich das Plugin hier<\/a>.<\/p>\n\n\n\n

Nach der Installation und Aktivierung k\u00f6nnen Sie mit der Erstellung Ihrer Preistabelle beginnen.<\/p>\n\n\n\n

Anmerkung: Auch wenn Tableberg eine kostenlose Version<\/a>Die Umschaltfunktion ist nur in der Pro-Version verf\u00fcgbar.<\/p>\n\n\n\n

\n\n\n\n

Schritt 2: Hinzuf\u00fcgen des Umschalters f\u00fcr den Tableberg-Block<\/h3>\n\n\n\n

Tableberg Pro wird mit einem leistungsstarken Umschaltbar f\u00fcr Tableberg<\/strong> Block, mit dem Sie Tabellen m\u00fchelos in Registerkarten organisieren k\u00f6nnen.<\/p>\n\n\n\n

Um diesen Block hinzuzuf\u00fcgen:<\/p>\n\n\n\n

    \n
  1. \u00d6ffnen Sie den WordPress-Editor und klicken Sie auf die Schaltfl\u00e4che + Taste<\/strong> um einen neuen Block hinzuzuf\u00fcgen.<\/li>\n\n\n\n
  2. Suche nach Umschaltbar f\u00fcr Tableberg<\/strong> und w\u00e4hlen Sie es aus.<\/li>\n\n\n\n
  3. Der Toggle-Block wird zu Ihrem Editor hinzugef\u00fcgt.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \n\n\n\n

    Schritt 3: Erstellen Sie eine Preistabelle in der ersten Registerkarte<\/h3>\n\n\n\n

    Im Inneren der Umschaltbar f\u00fcr Tableberg<\/strong> Block k\u00f6nnen Sie eine Tabelle von Grund auf neu erstellen oder eine vorgefertigte Tabelle w\u00e4hlen. F\u00fcr diesen Lehrgang w\u00e4hlen wir eine vorgefertigte Tabelle. <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
      \n
    1. Im Inneren der Umschaltbar f\u00fcr Tableberg<\/strong> Block, k\u00f6nnen Sie <\/li>\n\n\n\n
    2. Klicken Sie auf die + Taste<\/strong> innerhalb der Registerkarte und suchen Sie die Tischberg<\/strong> Block.<\/li>\n\n\n\n
    3. Legen Sie die Anzahl der Zeilen und Spalten f\u00fcr Ihre Preistabelle fest (z. B. 3\u00d73 f\u00fcr drei Pl\u00e4ne).<\/li>\n\n\n\n
    4. Das Tabellenlayout wird sofort erstellt.<\/li>\n<\/ol>\n\n\n\n
      \n\n\n\n

      Schritt 4: Hinzuf\u00fcgen\/Bearbeiten von Inhalten in der Tabelle<\/h3>\n\n\n\n

      Nun ist es an der Zeit, Inhalte zu Ihrer Preistabelle hinzuzuf\u00fcgen oder zu bearbeiten.<\/p>\n\n\n\n

      # Spaltentitel hinzuf\u00fcgen<\/strong><\/h4>\n\n\n\n
        \n
      • Klicken Sie auf die erste Zeile und geben Sie die Namen der Preispl\u00e4ne ein (z. B. Basic, Standard, Premium).<\/li>\n\n\n\n
      • Richten Sie sie mittig aus und vergr\u00f6\u00dfern Sie die Schriftgr\u00f6\u00dfe, damit sie besser sichtbar sind.<\/li>\n<\/ul>\n\n\n\n

        # Preispl\u00e4ne hinzuf\u00fcgen<\/strong><\/h4>\n\n\n\n
          \n
        • In der zweiten Zeile geben Sie die Preise f\u00fcr jeden Plan ein.<\/li>\n\n\n\n
        • Verwenden Sie die Option hervorheben<\/strong> um die Preisgestaltung zu differenzieren.<\/li>\n<\/ul>\n\n\n\n

          # Liste Produktmerkmale<\/strong><\/h4>\n\n\n\n
            \n
          • Jede Spalte sollte eine Liste der Merkmale des jeweiligen Plans enthalten.<\/li>\n\n\n\n
          • Tableberg erm\u00f6glicht es Ihnen, eine Block auflisten<\/strong> direkt in der Tabelle.<\/li>\n<\/ul>\n\n\n\n

            # CTA-Schaltfl\u00e4chen hinzuf\u00fcgen<\/strong><\/h4>\n\n\n\n
              \n
            • Verwenden Sie die Knopfleiste<\/strong> innerhalb von Tableberg, um Call-to-Action-Schaltfl\u00e4chen zu erstellen (z. B. \"Jetzt kaufen\" oder \"Loslegen\").<\/li>\n\n\n\n
            • Passen Sie den Text, die Farbe und den Stil der Schaltfl\u00e4che an.<\/li>\n<\/ul>\n\n\n\n
              \n\n\n\n

              Schritt 5: Eine weitere Preistabelle zu einer neuen Registerkarte hinzuf\u00fcgen<\/h3>\n\n\n\n

              Klicken Sie auf das Registerkarte 2<\/strong> im Block Umschalten f\u00fcr Tableberg, um eine neue Tabelle in einer anderen Registerkarte hinzuzuf\u00fcgen. Wiederholen Sie dann die gleichen Schritte wie oben, um eine weitere Kalkulationstabelle f\u00fcr die neue Registerkarte zu erstellen.<\/p>\n\n\n\n

              Sobald Sie diese Schritte abgeschlossen haben, ist Ihre Preistabelle mit Umschaltfunktion fertig. \u00dcberpr\u00fcfen Sie Ihre Tabelle in der Vorschau, um sicherzustellen, dass alles reibungslos funktioniert.<\/p>\n\n\n\n

              \n\n\n\n

              Schritt 6: Anpassen des Umschalters f\u00fcr den Tableberg-Block<\/h3>\n\n\n\n

              Um Ihre Preistabelle optisch ansprechender zu gestalten und auf Ihre Marke abzustimmen, k\u00f6nnen Sie die Umschaltbar f\u00fcr Tableberg<\/strong> Block:<\/p>\n\n\n\n

              Umbenennen der Toggles<\/strong>: Klicken Sie auf die einzelnen Registerkarten und \u00e4ndern Sie die Bezeichnung entsprechend Ihren Preispl\u00e4nen, z. B. monatlich, j\u00e4hrlich oder auf Lebenszeit.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Registerkartenausrichtung \u00e4ndern<\/strong>: W\u00e4hlen Sie im Blockeinstellungsfeld aus, ob Sie die Registerkarten links, mittig oder rechts ausrichten m\u00f6chten, je nachdem, was Sie bevorzugen.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Gestaltung der Registerkarten<\/strong>: Passen Sie auf der Registerkarte \"Stile\" die Hintergrundfarbe, die Textfarbe und den Rahmen der Kippschalter an, damit sie optisch mit dem Design Ihrer Website \u00fcbereinstimmen.<\/p>\n\n\n\n

              \"\"<\/figure>\n\n\n\n

              Diese einfachen Anpassungen k\u00f6nnen die Benutzerfreundlichkeit erheblich verbessern und sicherstellen, dass sich Ihre Preistabelle nahtlos in das Gesamtbild Ihrer Website einf\u00fcgt.<\/p>\n\n\n\n

              \n\n\n\n

              Schlussfolgerung<\/h3>\n\n\n\n

              Die Erstellung von Preistabellen mit einer Umschaltfunktion ist f\u00fcr eine nahtlose Benutzererfahrung unerl\u00e4sslich. Mit Tableberg Pro's Toggle f\u00fcr Tableberg<\/strong> Block k\u00f6nnen Sie jetzt interaktive Preistabellen direkt in WordPress erstellen, ohne dass Sie zus\u00e4tzliche Plugins ben\u00f6tigen.<\/p>\n\n\n\n

              Probieren Sie es aus und teilen Sie uns Ihre Meinung in den Kommentaren unten mit!<\/p>","protected":false},"excerpt":{"rendered":"

              Creating a pricing table is a must if you want to sell your products and services through your website. But to display multiple pricing plans that customers can compare easily without leaving the page, you must add the toggle feature to the table. The toggle feature allows users to navigate or switch between different sets […]<\/p>\n","protected":false},"author":1,"featured_media":8135,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[8,86],"class_list":["post-1514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-create-a-table","tag-pricing-tables"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/03\/How-to-Create-a-Pricing-Table-With-Toggle-Switch.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/de\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":8134,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/posts\/1514\/revisions\/8134"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/media\/8135"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/de\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}