So fügen Sie eine Schaltfläche in WordPress hinzu und gestalten sie (4 einfache Wege)

Möchten Sie lernen, wie Sie Schaltflächen für Ihre WordPress-Website erstellen und gestalten?

Schaltflächen sind wirkungsvoll und können verwendet werden, um Benutzer zum Handeln aufzufordern, sich für Ihre E-Mail-Liste anzumelden, Ihnen in sozialen Medien zu folgen und Ihr Produkt zu kaufen.

Um benutzerdefinierte Schaltflächen zu erstellen, können Sie einen Code-Schnipsel verwenden oder einfach ein Plugin herunterladen, das alles für Sie erledigt.

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Schaltfläche auf Ihrer Webseite hinzufügen und gestalten und sogar Animationseffekte hinzufügen. Lassen Sie uns beginnen.

Hier ist ein Inhaltsverzeichnis, das Sie verwenden können, um zu der Methode zu springen, die Sie am meisten interessiert:

• Schaltfläche im Block-Editor hinzufügen
• Schaltfläche mit SeedProd hinzufügen
• Schaltfläche mit Thrive Themes hinzufügen
• Schaltfläche mit Code hinzufügen

Bevor Sie beginnen, möchten Sie vielleicht dieses detaillierte Cheat Sheet zum Erstellen einer perfekten Schaltfläche für Ihre Website ansehen.

Das Hinzufügen von Schaltflächen zu Ihren Beiträgen und Seiten ermutigt Ihre Benutzer, das zu tun, was Sie von ihnen wollen. Ohne eine Schaltfläche oder CTA fehlt Ihrer Website eine optimierte Strategie und überlässt Ihre Konversionsraten dem Zufall.

Wie Marketingexperte Neil Patel sagt, ist eine Schaltfläche oder CTA die "Brücke zwischen Marketing und Vertrieb". Sie können Schaltflächen in WordPress verwenden, um Ihren Benutzern Ihre endgültige CTA wie "Jetzt kaufen", "Kontaktieren Sie uns", "Herunterladen" oder andere zu geben.

Es ist jedoch wichtig, dass Sie wissen, wie Sie diese Schaltflächen verwenden, um Ihre Konversionen zu maximieren. Es gibt mehrere Faktoren, die einige Schaltflächen besser als andere machen.

Dazu gehören:

• Ihr Konversionsziel kennen
• Ihr Schaltflächentext kurz und prägnant halten
• Aktionswörter verwenden
• Einen Anreiz bieten

Nun wollen wir uns ansehen, wie Sie leistungsstarke WordPress-Schaltflächen für Ihre Website ohne jeglichen Code erstellen.

Schaltfläche in WordPress mit dem Block-Editor hinzufügen

Standardmäßig können Sie mit dem WordPress-Block-Editor eine einfache Schaltfläche zu Ihrer Website hinzufügen. Dies ist kostenlos und jeder kann es nutzen.

Erstellen oder bearbeiten Sie zuerst eine beliebige Seite oder einen Beitrag in WordPress. Dann können Sie die Schaltfläche '+' verwenden, um einen neuen Block hinzuzufügen. Suchen Sie nach 'Schaltfläche' und fügen Sie das Widget zu Ihrer Seite hinzu.

Nun sollten Sie eine Schaltfläche zu Ihrem Beitrag hinzugefügt sehen. Passen wir sie an. Klicken Sie auf die Schaltfläche, um die Einstellungen für die Schaltflächen zu öffnen.

Sie sehen ein Menü direkt über der Schaltfläche. Sie können diese Einstellungen erkunden, um die Ausrichtung zu ändern, einen Link hinzuzufügen, den Text und die Schriftart zu bearbeiten und mehr.

Im rechten Bereich können Sie die Breite ändern, einen Link und einen HTML-Anker hinzufügen. Wenn Sie zum Tab Styles wechseln, erhalten Sie weitere Optionen zur Anpassung der Schaltfläche.

Sie können die Schaltfläche von einer Volltonfarbe zu einer Umrandung ändern. Es gibt Optionen zur Änderung der Größe, des Abstands und des Rahmens.

Diese Methode ist zwar einfach, aber in den Anpassungsoptionen begrenzt. Wenn Sie die Schaltfläche gestalten und Animationseffekte hinzufügen möchten, benötigen Sie einen WordPress Page Builder. Als Nächstes zeigen wir Ihnen, wie Sie 2 sehr beliebte Builder verwenden – SeedProd und Thrive.

Schaltfläche in WordPress mit SeedProd hinzufügen

Es gibt viele Page-Builder-Plugins, mit denen Sie Ihre Seite anpassen und ganz einfach Schaltflächen hinzufügen können. Unsere Top-Wahl ist SeedProd.

SeedProd ist ein Website- und Landing-Page-Builder für WordPress. Es wird mit vorgefertigten Themes geliefert, die bereits strategisch platzierte Schaltflächen für Sie enthalten. Sie müssen lediglich ein Theme auswählen und es an Ihre Bedürfnisse anpassen.

Mit SeedProd können Sie alle Arten von leistungsstarken Elementen hinzufügen, wie zum Beispiel:

• Social-Media-Profile
• Social-Sharing-Buttons (Gefällt mir, Tweet, Folgen)
• Preistabelle & Zahlungsschaltfläche
• Countdown-Timer
• Navigationsmenü
• Bewertungen & Testimonials
• Bildergalerie
• Google Maps

...und vieles mehr.

Es gibt einen Drag-and-Drop-Builder mit einer visuellen Oberfläche. Das bedeutet, Sie bearbeiten das Frontend Ihrer Website. Klicken und bearbeiten Sie einfach alles, was Sie brauchen, und ziehen Sie neue Elemente per Drag & Drop dorthin, wo Sie sie haben möchten.

Es ist niemals notwendig zu codieren. Sehen Sie hier, wie wir den Text in unserem Beispiel-Design geändert haben:

Wenn es um erweiterte Anpassungsoptionen für Schaltflächen geht, bietet SeedProd:

• Vorgefertigte Schaltflächenstile
• Anpassbare Größe, Form und Farbe
• Benutzerdefinierte Schriftarten und Typografie
• Symbole zur Schaltfläche
• Animationseffekte
• Duplizierungsfunktion, um den Schaltflächenstil auf andere Blöcke zu übertragen
• Speichern Sie das Layout als benutzerdefinierte Vorlage
• Anzeigen/Ausblenden auf Geräten
• Vorschau auf Mobilgeräten und Tablets
• SEO-freundliche Elemente wie No-Follow- & Neu-in-neuer-Tab-Tags

Mit SeedProd haben Sie alles, was Sie brauchen, um eine beeindruckende Schaltfläche zu gestalten, die Benutzer zum Klicken und Handeln auf Ihrer Website anregt.

Das Erste, was Sie tun müssen, ist SeedProd herunterladen und auf Ihrer Website installieren.

Nachdem Sie das Plugin aktiviert haben, gehen Sie zum WordPress-Admin-Dashboard und öffnen Sie SeedProd. Wenn Sie eine neue Website erstellen, können Sie ein fertiges Theme-Kit auswählen und es anpassen. Dies erstellt alle Seiten und Beiträge, die Ihre Website möglicherweise benötigt.

In diesem Tutorial zeigen wir Ihnen, wie Sie einer Landingpage eine Schaltfläche hinzufügen. Navigieren Sie zum Tab SeedProd » Landing Pages. Hier können Sie eine neue Landingpage hinzufügen.

Wählen Sie eine Vorlage und geben Sie Ihrer Seite einen Namen, dann öffnet sich der Builder. Sie sehen eine Live-Vorschau Ihres Designs mit einem Bearbeitungsbereich auf der linken Seite.

Ziehen Sie aus den verfügbaren Standardblöcken einfach den Schaltflächenblock per Drag & Drop in Ihr Design. Wenn Sie dies tun, werden auf der linken Seite weitere Optionen zum Bearbeiten der Schaltfläche angezeigt. Sie können einfach auf den Schaltflächentext klicken und Ihre eigene Handlungsaufforderung hinzufügen. Sehen Sie, wie wir einfach eine Schaltfläche auf unserer Seite hinzugefügt und bearbeitet haben:

Wenn Sie die Schaltfläche auswählen, können Sie im linken Bereich unter dem Tab Inhalt Text, Größe, Ausrichtung bearbeiten, einen Link hinzufügen und mehr. Dies sind die Standardoptionen, die auch im WordPress-Blockeditor verfügbar sind.

Wenn Sie einen Link hinzufügen, erhalten Sie Optionen zum Hinzufügen von SEO-Elementen wie „No Follow“ und „In neuem Fenster öffnen“.

Jetzt gibt es mehr. Sie müssen die Schaltfläche nicht selbst gestalten. Wenn Sie zum Tab Vorlagen wechseln, sehen Sie vorgefertigte Schaltflächen-Designs zur Auswahl. Sie können ein flaches oder pillenförmiges Schaltflächen-Design wählen.

Es gibt auch unzählige Farben zur Auswahl. Wenn Sie mehr Kontrolle über den Stil Ihrer Schaltfläche wünschen, wechseln Sie zur Registerkarte Erweitert. Hier können Sie den Abstand, Radius, die Breite, die Farbe und mehr festlegen.

Scrollen Sie auf der Registerkarte „Erweitert“ nach unten und Sie sehen Animationseffekte. Sie können Ihre Schaltfläche hüpfen, pulsieren, wackeln lassen und vieles mehr. Dies wird Ihnen helfen, die Aufmerksamkeit Ihres Lesers zu erregen.

Unten im Seiten-Builder gibt es eine Option zur Vorschau auf Mobilgeräten und Tablets, um sicherzustellen, dass Ihr Schaltflächen-Design auf allen Geräten gut aussieht.

Auf diese Weise können Sie Ihre gesamte Landingpage mit SeedProd anpassen. Wenn Sie fertig sind, können Sie Ihre Seite speichern und veröffentlichen.

Fügen Sie eine Schaltfläche in WordPress mit Thrive hinzu

Thrive Themes verfügt über einen leistungsstarken Theme-Builder und Landingpage-Builder, mit denen Sie Ihre WordPress-Website anpassen können.

In diesem Tutorial zeigen wir Ihnen, wie Sie Thrive Architect – den Landingpage-Builder – verwenden. Die Schritte für den Theme-Builder folgen ähnlichen Schritten.

Thrive Architect ist anfängerfreundlich und für jeden einfach zu bedienen. Dieses Plugin ist ein Premium-Tool, daher müssen Sie sich zuerst für ein Thrive-Konto anmelden.

Dann können Sie dieses Plugin auf Ihrer Website installieren. Erfahren Sie, wie das geht, in unserem Thrive Architect Testbericht.

Sobald es auf Ihrer Website installiert ist, beginnen Sie mit der Erstellung oder Bearbeitung einer beliebigen Seite mit dem Thrive Architect Builder.

Wenn sich der Thrive Landingpage-Builder öffnet, sehen Sie eine Vorschau Ihrer Seite zusammen mit Bearbeitungsoptionen rechts und links vom Builder.

Klicken Sie im linken Bereich auf das „+“-Symbol und ein Blockmenü wird geöffnet. Hier können Sie den „Schaltflächen“-Block auswählen und ihn per Drag & Drop in Ihr Design ziehen.

Wenn Sie das tun, sehen Sie die Schaltfläche in der Vorschau zusammen mit Bearbeitungsoptionen auf der rechten Seite. Sie können Farbe, Größe, Ausrichtung und mehr ändern. Sie können auch einen Link hinzufügen und „no follow“- oder „in neuem Tab öffnen“-Tags hinzufügen.

Im linken Menü gibt es eine Registerkarte „Vorlagenschaltfläche“. Wenn Sie sie öffnen, sehen Sie verschiedene Schaltflächenstile zur Auswahl. Es gibt hier so viele Optionen, dass Sie nie wieder selbst eine Schaltfläche gestalten müssen.

Zurück zur Registerkarte Hauptoptionen scrollen Sie nach unten, um weitere Optionen zu finden.

Diese Optionen umfassen:

• Typografie
• Hintergrundstil
• Layout und Position
• Animation und Aktion
• Responsiv
• HTML-Attribute

...und mehr.

Damit Ihre Schaltfläche lebendig wird, öffnen Sie die Registerkarte Animation & Aktion. Sie sehen Animationseffekte, mit denen Ihre Schaltfläche gleiten, zoomen, wachsen, schrumpfen, verblassen und mehr kann.

Wenn Sie Ihre gesamte Seite angepasst haben und bereit sind zu veröffentlichen, öffnen Sie das Einstellungen-Symbol oben im Builder. Hier können Sie Ihre Seite veröffentlichen, damit sie auf Ihrer Website live geht.

Das ist alles! Sie haben gelernt, wie Sie mit dem Block-Editor und Drittanbieter-Page-Buildern eine Schaltfläche erstellen. Als Nächstes zeigen wir Ihnen auch, wie Sie mit benutzerdefiniertem Code eine Schaltfläche hinzufügen.

Fügen Sie eine Schaltfläche mit Code hinzu

Wenn Sie sich mit Code auskennen und eine Schaltfläche selbst hinzufügen/gestalten möchten, dann sollten Sie sich WPCode ansehen.

WPCode bietet Ihnen vorgefertigte Code-Snippets, die Sie auf Ihrer Website verwenden können. Es gibt eine kostenlose und eine Pro-Snippet-Bibliothek, auf die Sie auf deren Website zugreifen können.

Sie können das Snippet in der Vorschau anzeigen und es herunterladen, um es auf Ihrer Website zu verwenden.

Sie können auch das Plugin installieren auf Ihrer Website, und Sie erhalten vorgefertigte Snippets zusammen mit einer Option, sie automatisch in Ihre Seite einzufügen. Es gibt auch eine Shortcode-Option, mit der Sie den Button einfach überall auf Ihrer Website hinzufügen können.

Mit WPCode müssen Sie nie Stunden damit verbringen, herauszufinden, wie Sie neue Elemente erstellen/hinzufügen. Sie können schnell die benötigten Code-Snippets finden und sie zu Ihrer Website hinzufügen.

Das ist alles für Sie. Wir hoffen, dieses Tutorial hat Ihnen geholfen, einen Button zu Ihrer Website hinzuzufügen. Wenn Sie einen benutzerdefinierten Button zu einem Popup auf Ihrer Website hinzufügen möchten, dann ist OptinMonster das richtige Tool für Sie. Sehen Sie sich unseren OptinMonster Testbericht für weitere Informationen an.

Als Nächstes möchten Sie vielleicht auch unsere anderen hilfreichen Anleitungen sehen:

• So erstellen Sie ein benutzerdefiniertes WordPress-Layout
• So passen Sie eine WordPress-Website an
• Wie man Link- und Button-Klicks in WordPress verfolgt

Diese Tutorials helfen Ihnen, Ihre WordPress-Website anzupassen. Das letzte hilft Ihnen, die Leistung Ihrer Buttons zu verfolgen.