Mit dem Button-Block können Sie klickbare Call-to-Action-Buttons zu Ihren SeedProd-Seiten hinzufügen. Dieser Block hilft Ihnen dabei, Besucher zu bestimmten Aktionen zu leiten, sei es zum Kauf, zur Anmeldung für einen Newsletter, zum Herunterladen einer Ressource oder zum Aufrufen einer anderen Seite.

Schaltflächen sind wichtige Elemente für Conversions und Nutzerinteraktion. Mit anpassbaren Texten, Links, Stilen, Symbolen und visuellen Effekten können Sie auffällige Schaltflächen erstellen, die Besucher zum Handeln animieren. Der Schaltflächenblock unterstützt sowohl interne Links (zu anderen Seiten Ihrer Website) als auch externe Links (zu anderen Websites) sowie Ankerlinks für das reibungslose Scrollen zu bestimmten Abschnitten auf derselben Seite.

Anforderungen:Der Button-Block ist in allen unserenLizenzplänen verfügbar.

---

Hinzufügen des Button-Blocks zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Button-Block zu Ihrer SeedProd-Seite hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter „Design“ > „Blöcke“ den Block „Schaltfläche“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.

Der Button-Block wird im Block-Panel angezeigt und kann in jeden Abschnitt oder jede Spalte Ihrer Seite gezogen werden.

Schritt 2: Inhaltseinstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Button-Block, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie den Text, das Linkziel und das Erscheinungsbild des Buttons anpassen.

Schaltfläche:

• Schaltflächentext: Geben Sie den Haupttext ein, der auf Ihrer Schaltfläche angezeigt wird (z. B. „Loslegen“, „Jetzt kaufen“, „Weitere Informationen“). Formulieren Sie ihn handlungsorientiert und prägnant.
• Schaltflächen-Untertext: Fügen Sie optional einen kleineren Text hinzu, der unterhalb des Haupttextes der Schaltfläche angezeigt wird. Dies ist nützlich, um zusätzliche Informationen wie Preise, zeitlich begrenzte Angebote oder weiteren Kontext hinzuzufügen.
• Link: Geben Sie die URL ein, zu der Besucher nach dem Klicken auf die Schaltfläche weitergeleitet werden sollen. Dies kann eine vollständige URL (https://example.com), ein relativer Pfad (/about) oder ein Anker-Link (#section-name) für die Navigation innerhalb derselben Seite sein.
• Ausrichten: Legen Sie die horizontale Ausrichtung der Schaltfläche innerhalb ihres Containers fest (links, mittig oder rechts).
• Größe: Wählen Sie die Schaltflächengröße aus den Optionen „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“. Größere Schaltflächen sind auffälliger und eignen sich gut für primäre Handlungsaufforderungen.

Symbole:

• Vor dem Text-Symbol: Fügen Sie ein Symbol hinzu, das links neben Ihrem Schaltflächentext angezeigt wird. Klicken Sie auf „Symbol auswählen“, um aus Hunderten von verfügbaren Symbolen auszuwählen.
• Nach Text-Symbol: Fügen Sie ein Symbol hinzu, das rechts neben Ihrem Schaltflächentext angezeigt wird. Dies wird häufig für Richtungshinweise wie Pfeile oder externe Link-Anzeigen verwendet.

Auf der Registerkarte „Inhalt“ können Sie den Text der Schaltflächen, Links, Ausrichtung und Größe anpassen und dekorative Symbole hinzufügen.

Schritt 2a: Wählen Sie einen Vorlagenstil aus.

Auf der Registerkarte „Vorlagen“ können Sie aus vorgefertigten Schaltflächenstilen auswählen, um das allgemeine Erscheinungsbild Ihrer Schaltfläche schnell zu ändern.

• Pill-Button, flacher Button, blauer Button, hellgrüner Button, grüner Button, orangefarbener Button, roter Button, gelber Button, weißer Button, grauer Button, schwarzer Button: Wählen Sie aus elf verschiedenen Vorlagendesigns mit jeweils einzigartigen Farben und Stilen. Sehen Sie sich eine Vorschau jedes Stils an, um denjenigen zu finden, der am besten zu Ihrem Seitendesign und Ihren Markenfarben passt.

Die Registerkarte „Vorlagen“ enthält elf vorgefertigte Stile, mit denen Sie das Aussehen Ihrer Schaltfläche schnell anpassen können.

Schritt 3: Design anpassen

Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Schaltflächenblocks anpassen:

Stile:

• Typografie: Steuern Sie die Schriftarteneigenschaften für Ihren Schaltflächentext, einschließlich Schriftfamilie, Größe, Stärke und Stil.
• Button-Stil: Wählen Sie das Aussehen Ihres Buttons. Zur Auswahl stehen „Flach“ (modernes flaches Design), „2D“ (dezenter Tiefeneffekt), „Vintage“ (klassischer Look), „Ghost“ (transparent mit Rand), „Link“ (einfacher Textlink) oder „Benutzerdefiniert“ (vollständige manuelle Steuerung).
• Hintergrundfarbe: Legen Sie die Hintergrundfarbe für Ihre Schaltfläche passend zu Ihrer Marke fest oder schaffen Sie einen Kontrast.
• Vertikale Polsterung: Steuert den Abstand oben und unten innerhalb der Schaltfläche und beeinflusst deren Höhe.
• Horizontale Abstände: Steuert den Abstand links und rechts innerhalb der Schaltfläche und beeinflusst deren Breite.
• Border Radius: Passen Sie die Rundung der Schaltflächenecken an. Höhere Werte erzeugen rundere Schaltflächen, während der Wert Null scharfe Ecken erzeugt.
• Button-Rahmenbreite: Legt die Dicke des Rahmenumrisses des Buttons fest.
• Farbe der Schaltflächenumrandung: Wählen Sie die Farbe für die Umrandung der Schaltfläche aus.
• Textschatten: Fügen Sie Schatteneffekte zum Button-Text hinzu, um Tiefe und Lesbarkeit zu erzielen. Wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“, „2X Groß“ oder „Benutzerdefiniert“.
• Schatten: Wenden Sie Schatteneffekte auf die gesamte Schaltfläche an, um Tiefe zu erzielen. Wählen Sie zwischen „Keine“, „Haarlinie“, „Klein“, „Mittel“, „Groß“, „X Groß“, „2X Groß“ oder „Benutzerdefiniert“.

Abstand:

• Rand: Steuert den äußeren Abstand um Ihren Schaltflächenblock herum (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen der Schaltfläche und den umgebenden Elementen angezeigt wird.
• Abstand: Passen Sie den inneren Abstand innerhalb Ihres Button-Block-Containers an (oben, rechts, unten, links). Dadurch entsteht um den Button herum etwas Freiraum.

Attribute:

• CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Button-Block an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
• Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
• Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Button-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-action|signup)

Geräte-Sichtbarkeit:

• Auf dem Desktop ausblenden: Den Schaltflächenblock auf Desktop-Bildschirmen ausblenden
• Auf Tablet ausblenden: Blendet den Schaltflächenblock auf Tablet-Geräten aus.
• Auf Mobilgeräten ausblenden: Den Schaltflächenblock auf Mobilgeräten ausblenden

Animationseffekte:

• Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn die Schaltfläche in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Drehen“ und viele mehr. Dadurch wird die Aufmerksamkeit sofort auf Ihre Handlungsaufforderung gelenkt.

Die Registerkarte „Erweitert“ bietet umfangreiche Gestaltungsoptionen, darunter Typografie, Farben, Abstände, Rahmen, Schatten und Animationseffekte.

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie die Konfiguration des Button-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.

---

Sie haben erfolgreich einen Button-Block zu Ihrer Seite hinzugefügt! Dieser wichtige Block hilft Ihnen dabei, klare Handlungsaufforderungen zu erstellen, die Besucher zu Ihren Conversion-Zielen führen. Experimentieren Sie mit verschiedenen Button-Stilen, Farben, Größen und Animationen, um Buttons zu erstellen, die auffallen und die von Ihnen gewünschten Aktionen der Besucher fördern.