WordPress Button einfügen: So erstellen Sie einen individuellen Button

Eine der größten Stärken einer Landingpage ist der Call-to-Action-Button (CTA). Es ist das Element, auf das Besucher klicken, um eine Ressource herunterzuladen, sich für Ihre E-Mail-Liste anzumelden oder eine Beratung zu vereinbaren. Gestalten Sie ihn gut, und er treibt die Konversionen maßgeblich an – gestalten Sie ihn schlecht, scrollen Nutzer möglicherweise direkt daran vorbei, bevor sie Ihre Seite wieder verlassen.

Letztlich kann das Wissen, wie man einen WordPress Button einfügen kann – einen, der sich von den generischen Buttons auf anderen Seiten abhebt – den Unterschied zwischen einem neuen und einem verlorenen Kunden ausmachen. Doch das ist leichter gesagt als getan. Zwar bietet WordPress in seinem Gutenberg-Editor Optionen zur Button-Anpassung, doch diese sind grundlegend. Nutzer stolpern oft über die verwirrenden Farbeinstellungen und das Fehlen von Animationsoptionen. Wenn Sie Ihren CTA-Button aufwendiger gestalten möchten, bringt Sie der Gutenberg-Editor nicht sehr weit. 

Um die Einschränkungen von WordPress-Buttons zu umgehen, haben Sie zwei Möglichkeiten: Installieren Sie einen umfangreichen Drittanbieter-Block oder ein Plug-in, oder verwenden Sie ein kostenloses, leichtgewichtiges serverloses Widget, das Ihre Seitengeschwindigkeit und Ihren Theme-Code schützt. Dieser Leitfaden erklärt, wie die jeweilige Option funktioniert, damit Sie entscheiden können, welche für Ihre Website am besten geeignet ist.

Watch on youtube

How to Add a Custom Button to Wordpress

Option 1: Ein spezielles WordPress-Button-Plug-in installieren oder benutzerdefiniertes CSS verwenden

Wenn Sie lernen, wie man WordPress verwendet, greifen Sie möglicherweise auf Drittanbieter-Plug-ins oder CSS-Code zurück, um Buttons anzupassen. Verfügbare Plug-ins finden Sie über das WordPress-Administrations-Dashboard, oder Sie fügen Ihr eigenes CSS mit dem WordPress-Editor hinzu. 

Bevor Sie diese Optionen erkunden, sollten Sie sich möglicher Nachteile bewusst sein:

• Einige Plug-ins verwenden übermäßig viel JavaScript und CSS, was die Ladezeiten der Seite verlangsamen und Ihren Core-Web-Vitals-Score beeinträchtigen kann. 
• Entwickler halten Plug-ins nicht immer auf dem neuesten Stand. Dies kann zu künftigen Leistungsproblemen führen. Außerdem haben Sie damit eine weitere Sache zu überwachen.
• Falsches benutzerdefiniertes CSS kann die aktuellen globalen Button-Einstellungen Ihrer Website überschreiben, was sich auf das Erscheinungsbild anderer Buttons auf Ihrer gesamten Website auswirkt. Es kann auch die mobile Reaktionsfähigkeit Ihrer Website beeinträchtigen.

Beginnen wir mit der einfachsten Option: einem Drittanbieter-Plug-in. Um eines zu finden und auf Ihrer Website zu installieren, gehen Sie folgendermaßen vor:

1. Klicken Sie in Ihrem WordPress-Admin-Dashboard auf die Option Plugins. Geben Sie die benötigte Funktion in die Suchleiste ein. In diesem Beispiel haben wir „custom CTA button WordPress“ eingegeben.

2. Wählen Sie ein Plug-in aus der Liste und klicken Sie darauf, um mehr über seine Funktionen zu erfahren. Die besten WordPress-Plug-ins sind aktuell, mit Ihrem WordPress-Theme kompatibel und haben positive Nutzerbewertungen. Klicken Sie auf Jetzt installieren, wenn Sie eine Option gefunden haben, die Ihnen gefällt.

3. Wenn die Installation des Plug-ins abgeschlossen ist, klicken Sie auf die Schaltfläche Aktivieren. Folgen Sie den Anweisungen des Entwicklers, um Ihren benutzerdefinierten Button zu erstellen. 

Wenn Sie sich mit CSS auskennen, können Sie Ihren eigenen benutzerdefinierten CTA-Button programmieren. Gehen Sie dazu folgendermaßen vor:

1. Klicken Sie in Ihrem WordPress-Admin-Dashboard auf Design > Editor. Wenn Sie ein klassisches oder Drittanbieter-Theme verwenden, klicken Sie auf Design > Anpassen. 

2. Klicken Sie auf Stile > ⋮ > Zusätzliches CSS. Bei klassischen und Drittanbieter-Themes klicken Sie auf Zusätzliches CSS.

3. Geben Sie den benutzerdefinierten CSS-Code Ihres Buttons in das Textfeld ein.

Anstatt Ihren eigenen Button zu programmieren, können Sie eine Alternative zu benutzerdefiniertem CSS für WordPress ausprobieren: das Jotform Button-Widget. Diese Option behandeln wir im nächsten Abschnitt.

Option 2: Ein kostenloses, anpassbares Button-Widget hinzufügen (empfohlen)

Mit dem Jotform Button-Widget können Sie einen CTA-Button mit einzigartigen Farbverläufen, Symbolen und Hover-Effekten erstellen. Diese Option beeinträchtigt weder das CSS Ihrer Website noch verringert sie deren Ladegeschwindigkeit, da sie über eine zuverlässige gehostete Einbettung läuft.

Um es zu verwenden, konfigurieren Sie Ihren Button in Jotform und betten den benutzerdefinierten Button mit einem benutzerdefinierten HTML-Block in WordPress ein. Er wird sofort mit einem einwandfreien, responsiven und eigenständigen Button aktualisiert, der Ihren Anforderungen entspricht. Gehen Sie folgendermaßen vor, um es auszuprobieren:

1. Rufen Sie das Jotform Button-Widget auf und geben Sie grundlegende Informationen zu Ihrem Button ein. Klicken Sie auf Weiter.

2. Fügen Sie Farben, Symbole und weitere Stiloptionen hinzu. Sie können die Eckengestaltung, den Innenabstand, die Textgröße und die Schriftarten anpassen oder einen Schlagschatten für zusätzliche Betonung hinzufügen. Wenn Sie fertig sind, klicken Sie auf Weiter.

3. Überprüfen und wählen Sie Ihre Layout-Optionen und klicken Sie dann auf Kostenlos auf Ihrer Website ausprobieren.

4. Folgen Sie den Anweisungen, um ein kostenloses Konto bei Jotform zu erstellen, kopieren Sie dann den Einbettungscode und fügen Sie ihn in einen benutzerdefinierten HTML-Block auf Ihrer WordPress-Website ein. Achten Sie darauf, die Seite und den Abschnitt auszuwählen, an dem der Button erscheinen soll.

Jotforms kostenlose, codefreie WordPress-Call-to-Action-Alternative gibt Ihnen vollständige Kontrolle über das Erscheinungsbild und die Funktionalität Ihres Buttons. Ob Sie Text, Farben und Eckenradius anpassen oder eine Hover-Animation hinzufügen möchten – Jotform ist der Aufgabe gewachsen. 

Verleihen Sie Ihrer WordPress-Website mit intelligenten, serverlosen Widgets mehr Power

Jotform bietet weit mehr als nur benutzerdefiniertes Button-Design. Durchsuchen Sie unser Verzeichnis kostenloser Website-Widgets, um weitere Tools zu finden, die Konversionen maximieren, Seitenüberfrachtung vermeiden und die Datenbank Ihrer Website schlank halten, für blitzschnelle Ladegeschwindigkeiten. Zu unseren beliebtesten Widgets gehören:

• Google-Rezensionen-Widget: Zeigt die Google-Rezensionen Ihrer Marke gemäß Ihren Vorgaben an
• Countdown-Timer-Widget: Zeigt Besuchern, wie viel Zeit ihnen noch bleibt, um eine bestimmte Aktion auszuführen, etwa die Anmeldung zu einer Veranstaltung
• FAQ-Widget: Bietet ein durchsuchbares FAQ-Tool mit medienreichen Antworten und individueller Gestaltung
• WordPress-Formulare: Ermöglicht es Ihnen, benutzerdefinierte Formulare zu erstellen und in Ihre Website einzubetten

Als Creator, Blogger oder Marketer liegt Ihr Fokus auf der Erstellung außergewöhnlicher Inhalte und der Optimierung von Funnels – nicht darauf, sich mit CSS oder Plug-ins herumzuschlagen. Mit Jotforms kostenlosen, serverunabhängigen Tools können Sie hochwertige, konversionsstarke Funktionen in wenigen Minuten einsetzen, sodass Sie sich wieder dem widmen können, was Sie am besten können. Starten Sie noch heute mit Jotform.