Schaltflächen mögen wie eine Kleinigkeit erscheinen, aber sie können auf Ihrer Website eine Menge bewirken. Schaltflächen sind eine der einfachsten Möglichkeiten, Besucher zu der Aktion zu führen, die sie ausführen sollen.
Eine gut aussehende Schaltfläche kann den Unterschied ausmachen: Sie führt die Besucher auf Ihre Produktseite und fordert sie auf, mehr zu lesen oder sich anzumelden. Die gute Nachricht ist, dass Sie keine Programmierkenntnisse brauchen, um sie zu gestalten.
WordPress verfügt über integrierte Optionen, und mit ein wenig Hilfe eines Block-Plugins können Sie sogar noch mehr Kontrolle über das Aussehen Ihrer Schaltflächen erhalten.
In diesem Beitrag zeige ich Ihnen drei einfache Methoden, um stilvolle Schaltflächen in WordPress zu erstellen.
Wir beginnen mit dem Standard-Editor, gehen weiter zu einem Plugin, das mehr Flexibilität bietet, und schließen mit einer Bonus-Methode für das Hinzufügen von Schaltflächen in Tabellen. Los geht's.
Schöne Tische erstellen
Mit Block-Editor
✅Methode 1: Verwendung des Standard-Schaltflächenblocks
WordPress hat einen eingebauten Schaltflächen-Block, der in den meisten Fällen gut funktioniert. Sie finden ihn im Block-Editor, wenn Sie auf das kleine (+) Symbol klicken und nach "Buttons" suchen.
Wenn der Schaltflächenblock eingefügt wird, werden Sie aufgefordert, Text in die Schaltfläche einzufügen.
Sobald Sie den Block eingefügt haben, können Sie eine oder mehrere Schaltflächen nebeneinander hinzufügen. Jede Schaltfläche kann direkt in der rechten Seitenleiste angepasst werden. Sie finden Optionen für:
- Tastenbreite (voll oder automatisch)
- Text- und Hintergrundfarbe
- Polsterung und Ausrichtung
- Radius der Umrandung (für abgerundete Ecken)
Es ist ein guter Ausgangspunkt, vor allem, wenn Sie sich an ein minimalistisches Design halten. ⚠️Aber Sie stoßen schnell an eine Grenze, wenn Sie weitere Gestaltungsoptionen wie Hover-Effekte, Farbverläufe oder reaktionsfähige Abstände benötigen.
🛠️ Profi-Tipp: Sie möchten eine perfekt abgerundete Schaltfläche? Stellen Sie den Rahmenradius auf 100 für einen pillenförmigen Knopf.
✅Methode 2: Verwendung des Buttons Block von Ultimate Blocks
Wenn Sie mehr Kontrolle wollen, ohne CSS zu schreiben, Ultimative Blöcke ist ein fantastisches Gutenberg-Plugin, das Sie ausprobieren sollten. Es fügt eine erweiterte Buttons Block die mit Blick auf die individuelle Anpassung entwickelt wurde.
Die Installation von Ultimate Blocks ist eine einfache Aufgabe.
-
Navigieren Sie zu Plugins
-
Klicken Sie auf Plugins hinzufügen
-
Suche nach "Tableberg"
-
Klicken Sie auf Installieren Siedann Aktivieren Sie
Nach die Installation und Aktivierung von Ultimate Blocks, fügen Sie den Block "Schaltflächen (Ultimate Blocks)" hinzu.
Um die Buttons of Ultimate Blocks einzufügen, klicken Sie auf das kleine (+) Symbol und suchen Sie nach "Button (Improved)".
Sie werden den Unterschied sofort bemerken, wenn Sie die Schaltfläche "Ultimative Blöcke" hinzufügen. Hier sehen Sie, was Sie in den Blockeinstellungen ändern können:
-
Tastenbegründung und -ausrichtung
-
Schaltfläche Größe
-
Taste Breite
-
Icon-Unterstützung (vor oder nach dem Text) mit verschiedenen anderen Optionen
-
Animation Unterstützung
Im Abschnitt Schaltflächenstile können Sie die folgenden Anpassungen vornehmen:
-
Farboption für Normal- und Hover-Status
-
Knopfleiste
-
Schaltfläche Styling
-
Anpassbare Auffüllungen, Blockabstände und Ränder in den Maßeinstellungen
-
Benutzerdefinierte CSS-Option
Alle Standardfunktionen des Schaltflächenblocks sind im Schaltflächenblock von Ultimate Blocks enthalten. Unten sehen Sie eine benutzerdefinierte Schaltfläche, die von Ultimate Blocks entworfen wurde, obwohl sie funktional ist.
Dieser Block ist ideal für Vermarkter, Blogger und alle, die ihre Call-to-Action-Schaltflächen hervorheben möchten. Sie erhalten Flexibilität auf Design-Ebene, ohne eine einzige Zeile Code schreiben zu müssen.
🎯 Profi-Tipp: Verwenden Sie kontrastierende Hover-Farben, um eine zufriedenstellende visuelle Reaktion zu erzeugen, wenn Benutzer mit Ihren Schaltflächen interagieren.
🧩 Bonus: Hinzufügen von Schaltflächen innerhalb einer Tabelle
Manchmal braucht man Knöpfe innerhalb eines Layoutswie eine Preistabelle oder ein Funktionsvergleich. Das ist der Punkt, an dem ein blockbasiertes Tabellen-Plugin wie Tischberg glänzt.
Bester Deal |
||
 |
 |
 |
Apple AirPods Pro 2. Generation |
SAMSUNG Galaxy Buds 2 Pro |
Google Pixel Buds Pro |
|
|
|
Mit Tableberg funktioniert jede Tabellenzelle wie eine Mini-Leinwand. Das bedeutet, dass Sie den speziellen Button-Block weglassen können direkt in einer Zelle. Sie müssen sich nicht mehr mit einfachem Text begnügen, sondern können CTA-Schaltflächen wie "Jetzt kaufen", "Details anzeigen" oder "Kostenlos testen" direkt in Ihre Preiszeilen einfügen.
Die Tastenfunktionen des Tableberg sind die gleichen wie die Tasten der Ultimate Blocks.
Sie möchten das Aussehen der Schaltfläche innerhalb der Tabelle anpassen? Das ist kein Problem. Sie können den Radius des Rahmens und die Auffüllung ändern und sogar Symbole hinzufügen - alles im Blockeditor.
🛠️ Profi-Tipp: Kombinieren Sie Ihre Schaltfläche mit einer Sternchenbewertung oder einer Schleife in derselben Zeile, um die visuelle Wirkung zu verstärken und die Konversionsrate zu erhöhen.
Schlussgedanken!
Für die Gestaltung schöner Schaltflächen in WordPress ist kein benutzerdefiniertes CSS oder die Hilfe eines Entwicklers erforderlich. Mit dem nativen Buttons-Block, der erweiterten Version von Ultimate Blocks und der Flexibilität von Tools wie Tableberg können Sie vollständig interaktive Layouts erstellen, die großartig aussehen und auf allen Geräten funktionieren.
Keine einfachen Links oder veralteten Shortcodes mehr. Jetzt haben Sie die volle Kontrolle, direkt im Editor.
Mehr lesen!
