Der Button-Block ermöglicht es Ihnen, klickbare Call-to-Action-Buttons zu Ihren SeedProd-Seiten hinzuzufügen. Dieser Block hilft Ihnen, Besucher zu bestimmten Aktionen zu leiten, sei es ein Kauf, die Anmeldung zu einem Newsletter, der Download einer Ressource oder die Navigation zu einer anderen Seite.

Buttons sind wesentliche Elemente für Konversionen und Benutzerengagement. Mit anpassbarem Text, Links, Stilen, Symbolen und visuellen Effekten können Sie Buttons erstellen, die hervorstechen und Besucher zum Handeln anregen. Der Button-Block unterstützt sowohl interne Links (zu anderen Seiten Ihrer Website) als auch externe Links (zu anderen Websites) sowie Ankerlinks für sanftes Scrollen zu bestimmten Abschnitten auf derselben Seite.

Voraussetzungen: Der Button-Block ist in allen unseren Lizenzplä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 Button-Block per Drag & Drop in den gewünschten Bereich Ihrer Seite.

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

Schritt 2: Inhaltseinstellungen konfigurieren

Nach dem Hinzufügen klicken Sie auf den Button-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie den Text, das Linkziel und das Erscheinungsbild des Buttons anpassen.

Schaltfläche:

• Button-Text: Geben Sie den Haupttext ein, der auf Ihrem Button angezeigt wird (z. B. „Loslegen“, „Jetzt kaufen“, „Mehr erfahren“). Halten Sie ihn handlungsorientiert und prägnant.
• Button-Untertext: Fügen Sie optional kleineren Text hinzu, der unter dem Haupt-Button-Text angezeigt wird. Dies ist nützlich, um ergänzende Informationen wie Preise, zeitlich begrenzte Angebote oder zusätzlichen Kontext hinzuzufügen.
• Link: Geben Sie die URL ein, zu der der Button Besucher beim Klicken weiterleiten soll. Dies kann eine vollständige URL (https://example.com), ein relativer Pfad (/about) oder ein Ankerlink (#section-name) für die Navigation auf derselben Seite sein.
• Ausrichtung: Legen Sie die horizontale Ausrichtung des Buttons innerhalb seines Containers fest (links, mitte oder rechts)
• Größe: Wählen Sie die Button-Größe aus Klein, Mittel, Groß, X-Groß oder 2X-Groß. Größere Buttons sind auffälliger und eignen sich gut für primäre Handlungsaufforderungen.

Symbole:

• Symbol vor dem Text: Fügen Sie ein Symbol hinzu, das links neben Ihrem Button-Text angezeigt wird. Klicken Sie auf Symbol auswählen, um Hunderte verfügbarer Symbole zu durchsuchen und auszuwählen.
• Symbol nach dem Text: Fügen Sie ein Symbol hinzu, das rechts neben Ihrem Button-Text angezeigt wird. Dies wird häufig für Richtungsangaben wie Pfeile oder externe Link-Indikatoren verwendet.

Der Inhalts-Tab ermöglicht es Ihnen, Button-Text, Links, Ausrichtung, Größe anzupassen und dekorative Symbole hinzuzufügen.

Schritt 2a: Wählen Sie einen Vorlagenstil

Im Tab Vorlagen können Sie aus vordefinierten Button-Stilen auswählen, um das Gesamterscheinungsbild Ihres Buttons schnell zu ändern.

• Pill Button, Flat Button, Blue Button, Light Green Button, Green Button, Orange Button, Red Button, Yellow Button, White Button, Grey Button, Black Button: Wählen Sie aus elf verschiedenen Designvorlagen, jede mit einzigartigen Farben und Stilen. Vorschau jedes Stils, um denjenigen zu finden, der am besten zu Ihrem Seitendesign und Ihren Markenfarben passt.

Der Tab Vorlagen bietet elf vordefinierte Stile, um das Erscheinungsbild Ihrer Schaltfläche schnell anzupassen.

Schritt 3: Design anpassen

Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Button-Blocks anpassen:

Stile:

• Typografie: Steuern Sie die Schriftarteigenschaften für Ihren Schaltflächentext, einschließlich Schriftfamilie, Größe, Stärke und Stil
• Button-Stil: Wählen Sie die visuelle Gestaltung für Ihren Button. Optionen sind Flat (modernes Flat-Design), 2D (subtile Tiefe), Vintage (klassischer Look), Ghost (transparent mit Rahmen), Link (einfacher Textlink) oder Benutzerdefiniert (vollständige manuelle Steuerung)
• Hintergrundfarbe: Legen Sie die Hintergrundfarbe für Ihren Button fest, um ihn an Ihre Marke anzupassen oder Kontraste zu schaffen
• Vertikaler Abstand: Steuern Sie den oberen und unteren Abstand innerhalb der Schaltfläche, was ihre Höhe beeinflusst
• Horizontaler Abstand: Steuern Sie den linken und rechten Abstand innerhalb der Schaltfläche, was ihre Breite beeinflusst
• Radius des Rahmens: Passen Sie die Rundung der Schaltflächenecken an. Höhere Werte erzeugen rundere Schaltflächen, während Null scharfe Ecken erzeugt
• Button-Rahmenbreite: Legen Sie die Dicke der Umrandung des Buttons fest
• Button-Rahmenfarbe: Wählen Sie die Farbe für den Rahmen des Buttons
• Textschatten: Fügen Sie Schatteneffekte zum Schaltflächentext hinzu, um Tiefe und Lesbarkeit zu verbessern. Wählen Sie aus Keine, Haarlinien, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Benutzerdefiniert
• Schatten: Wenden Sie Schatteneffekte auf die gesamte Schaltfläche an, um Tiefe zu erzeugen. Wählen Sie aus Keine, Haarlinien, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Benutzerdefiniert

Abstand:

• Abstand: Steuern Sie den äußeren Abstand um Ihren Schaltflächenblock (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen der Schaltfläche und den umgebenden Elementen erscheint
• Abstand: Passen Sie den Innenabstand innerhalb des Containers Ihres Button-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum um den Button selbst.

Attribute:

• CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Button-Block an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
• Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
• Benutzerdefinierte Attribute: Fügen Sie dem Button-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-action|signup)

Gerätesichtbarkeit:

• Auf Desktop ausblenden: Blenden Sie den Button-Block auf Desktop-Bildschirmen aus.
• Auf Tablet ausblenden: Blenden Sie den Button-Block auf Tablet-Geräten aus.
• Auf Mobilgeräten ausblenden: Blenden Sie den Button-Block auf Mobilgeräten aus.

Animationseffekte:

• Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Button ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies lenkt sofort die Aufmerksamkeit auf Ihren Call-to-Action

Der Tab Erweitert bietet umfangreiche Styling-Optionen, einschließlich Typografie, Farben, Abstände, Rahmen, Schatten und Animationseffekte.

Schritt 4: Speichern Sie Ihre Änderungen

Sobald Sie die Konfiguration des Button-Blocks abgeschlossen und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.

---

Sie haben erfolgreich einen Button-Block zu Ihrer Seite hinzugefügt! Dieser essentielle Block hilft Ihnen, klare Handlungsaufforderungen zu erstellen, die Besucher zu Ihren Konversionszielen führen. Experimentieren Sie mit verschiedenen Button-Stilen, Farben, Größen und Animationen, um Buttons zu erstellen, die hervorstechen und die Aktionen auslösen, die Sie von Ihren Besuchern wünschen.