Webflow: Wie erstelle ich einen CTA-Button außerhalb des Menüs?

Veröffentlicht: 2024-11-27

Das Erstellen eines effektiven Call-to-Action-Buttons (CTA) ist eines der wichtigsten Elemente im Webdesign. Eine CTA-Schaltfläche fordert Besucher dazu auf, bestimmte Aktionen auszuführen, z. B. sich für einen Newsletter anzumelden, einen Kauf zu tätigen oder Kontakt mit Ihrem Unternehmen aufzunehmen. Während viele Websites über CTA-Schaltflächen im Navigationsmenü verfügen, kann die Platzierung einer CTA-Schaltfläche außerhalb des Menüs dazu beitragen, dass diese besser hervorsticht und mehr Conversions erzielt. In diesem Artikel führen wir Sie durch die Schritte zum Entwerfen und Positionieren einer CTA-Schaltfläche außerhalb des Menüs in Webflow.

Warum einen CTA-Button außerhalb des Menüs platzieren?

SEO

Wenn Sie eine CTA-Schaltfläche außerhalb des Hauptnavigationsmenüs platzieren, kann sie für Ihre Besucher besser sichtbar sein. Wenn diese Schaltfläche strategisch in stark frequentierten Bereichen wie der Kopfzeile oder oben auf einer Seite platziert wird, kann sie die Aufmerksamkeit der Benutzer schnell auf sich ziehen. Ziel ist es, den CTA zugänglicher zu machen und sicherzustellen, dass er sofort wahrgenommen wird, ohne dass Benutzer durch die Website navigieren müssen.

Zu den Vorteilen der Platzierung einer CTA-Schaltfläche außerhalb des Menüs gehören:

  • Erhöhte Sichtbarkeit : Durch die Positionierung an einer prominenten Stelle, z. B. in der Kopfzeile oder an der Seite, können Benutzer es leicht erkennen.
  • Erhöhte Conversion-Raten : Ein CTA, der auffällt, wird eher angeklickt und steigert die Conversions.
  • Verbesserte Benutzererfahrung : Es bietet Benutzern eine intuitive Möglichkeit, schnell Maßnahmen zu ergreifen, ohne durch verschiedene Abschnitte navigieren zu müssen.

Schritte zum Erstellen einer CTA-Schaltfläche außerhalb des Menüs in Webflow

Webflow bietet eine benutzerfreundliche Oberfläche zum Erstellen von Websites, ohne dass Code geschrieben werden muss. Befolgen Sie diese Schritte, um eine CTA-Schaltfläche außerhalb des Menüs in Ihrem Webflow-Projekt hinzuzufügen:

1. Richten Sie Ihr Webflow-Projekt ein

Bevor Sie beginnen, stellen Sie sicher, dass Sie ein Webflow-Projekt eingerichtet haben und sich in der Designer-Ansicht befinden.

  • Schritt 1.1 : Öffnen Sie Ihr Webflow-Projekt und gehen Sie zu der Seite, auf der Sie die CTA-Schaltfläche hinzufügen möchten.
  • Schritt 1.2 : Stellen Sie im Designer-Modus sicher, dass Ihr Seitenlayout bereit ist und Ihr Navigationsmenü vorhanden ist (oder wo auch immer Sie die Schaltfläche hinzufügen möchten).

2. Erstellen Sie eine neue CTA-Schaltfläche

Um einen neuen CTA-Button außerhalb des Menüs zu erstellen, müssen Sie ihn strategisch auf der Seite positionieren.

  • Schritt 2.1 : Ziehen Sie im linken Bereich ein Button Element aus dem Bereich „Hinzufügen“ per Drag & Drop auf die Leinwand.
  • Schritt 2.2 : Passen Sie den Schaltflächentext an die Aktion an, die der Benutzer ausführen soll (z. B. „Erste Schritte“, „Anmelden“, „Mehr erfahren“).
  • Schritt 2.3 : Gestalten Sie die Schaltfläche entsprechend Ihren Designvorlieben. Sie können Schriftart, Größe, Farbe, Hintergrund und Rahmenradius anpassen, um sie an die Ästhetik Ihrer Marke anzupassen.

3. Platzieren Sie den CTA-Button außerhalb des Menüs

Nachdem Sie nun Ihre Schaltfläche haben, ist es an der Zeit, sie außerhalb des Menüs zu positionieren. Es gibt verschiedene Möglichkeiten, dies zu tun, je nachdem, wo die Schaltfläche angezeigt werden soll.

Option 1: Schwebender CTA-Button

Eine schwebende CTA-Schaltfläche ist eine beliebte Wahl für die Sichtbarkeit. Es bleibt am Rand oder am unteren Rand der Seite hängen, auch wenn der Benutzer scrollt.

  • Schritt 3.1 : Wählen Sie die von Ihnen erstellte Schaltfläche aus und gehen Sie zu den Position im rechten Bedienfeld „Stil“.
  • Schritt 3.2 : Stellen Sie die Position auf Fixed ein. Dadurch wird sichergestellt, dass die Schaltfläche beim Scrollen des Benutzers auf dem Bildschirm bleibt.
  • Schritt 3.3 : Passen Sie die Position an, indem Sie die Werte Top , Right , Bottom oder „ Left festlegen, um die Schaltfläche an der gewünschten Stelle auf dem Bildschirm zu platzieren (z. B. unten rechts oder oben links).
  • Schritt 3.4 : Fügen Sie einen Z-Indexwert hinzu, um sicherzustellen, dass die Schaltfläche über anderen Elementen wie dem Menü angezeigt wird. Sie können den Z-Index auf einen höheren Wert festlegen, z. B. 10 oder 100 , um sicherzustellen, dass er ganz oben liegt.

Option 2: Im Header-Bereich positioniert

Wenn Sie die CTA-Schaltfläche lieber an einer traditionelleren, festen Stelle außerhalb des Menüs platzieren möchten, können Sie sie im Kopfbereich platzieren.

  • Schritt 3.1 : Gehen Sie zum Navigator -Panel und suchen Sie Ihren Kopfzeilenbereich.
  • Schritt 3.2 : Erstellen Sie einen neuen Div Block , der als Container für Ihre CTA-Schaltfläche dient. Dies hilft bei der Positionierung der Schaltfläche relativ zu anderen Elementen.
  • Schritt 3.3 : Ziehen Sie die Schaltfläche in den Div Block -Container.
  • Schritt 3.4 : Verwenden Sie die Einstellungen Margin oder Padding im Bedienfeld „Stil“, um die Schaltfläche an die gewünschte Stelle innerhalb der Kopfzeile zu verschieben (z. B. außerhalb des Hauptmenüs, aber dennoch an der Kopfzeile ausgerichtet).

Option 3: CTA-Button auf einer Sticky Navbar

Eine weitere Möglichkeit besteht darin, die CTA-Schaltfläche in einer Sticky-Navigationsleiste zu platzieren. Das bedeutet, dass die Schaltfläche dem Benutzer folgt, während er auf der Seite nach unten scrollt, aber außerhalb des Hauptmenüs bleibt.

  • Schritt 3.1 : Wählen Sie das Navigationsleistenelement aus und stellen Sie seine Position im Stilbedienfeld auf Sticky ein.
  • Schritt 3.2 : Fügen Sie einen neuen Div Block neben den Menüelementen hinzu, bei denen die Schaltfläche angezeigt werden soll.
  • Schritt 3.3 : Platzieren Sie die Schaltfläche in diesem Div Block und passen Sie ihre Position mithilfe von Rand oder Polsterung an.

4. Machen Sie die Schaltfläche interaktiv

Webseite

Sobald die Schaltfläche positioniert ist, können Sie Interaktion hinzufügen, um sie ansprechender zu gestalten.

  • Schritt 4.1 : Wählen Sie die Schaltfläche aus und gehen Sie zum Bedienfeld Interactions in Webflow.
  • Schritt 4.2 : Fügen Sie eine Hover-Interaktion hinzu, z. B. das Ändern der Hintergrundfarbe oder das leichte Skalieren der Schaltfläche, wenn der Benutzer mit der Maus darüber fährt.
  • Schritt 4.3 : Richten Sie einen Link für die Schaltfläche ein. Sie können es mit einer anderen Seite oder einer externen URL verknüpfen oder eine Aktion wie das Öffnen eines Modals oder eines Formulars einrichten.

5. Vorschau und Veröffentlichung

Nachdem Sie Ihre CTA-Schaltfläche eingerichtet haben, ist es wichtig, eine Vorschau zu sehen, wie sie sich auf der Seite verhält.

  • Schritt 5.1 : Klicken Sie oben rechts auf die Schaltfläche Preview , um zu sehen, wie die Schaltfläche auf der Seite aussieht und sich verhält.
  • Schritt 5.2 : Testen Sie die Reaktionsfähigkeit auf verschiedenen Bildschirmgrößen, um sicherzustellen, dass es richtig positioniert ist.
  • Schritt 5.3 : Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf Publish um die Schaltfläche auf Ihrer Website zu veröffentlichen.

Best Practices für CTA-Buttons außerhalb des Menüs

Obwohl die Platzierung einer CTA-Schaltfläche außerhalb des Menüs sehr effektiv sein kann, ist es wichtig, einige Best Practices zu befolgen, um sicherzustellen, dass sie gut funktioniert:

  1. Halten Sie es einfach : Überfüllen Sie die Seite nicht mit zu vielen CTA-Buttons. Konzentrieren Sie sich auf eine Hauptaktion, um die besten Ergebnisse zu erzielen.
  2. Sorgen Sie für gute Sichtbarkeit : Stellen Sie sicher, dass sich die Schaltfläche gut vom Hintergrund abhebt, um die Aufmerksamkeit des Benutzers auf sich zu ziehen.
  3. Positionieren Sie es strategisch : Platzieren Sie die Schaltfläche an einem Ort, an dem Benutzer sie wahrscheinlich bemerken, z. B. in der oberen rechten Ecke oder an der Seite schwebend.
  4. Testen Sie auf verschiedenen Geräten : Stellen Sie sicher, dass Ihre CTA-Schaltfläche auf Mobilgeräten, Tablets und Desktop-Geräten gut aussieht.

Abschluss

Das Hinzufügen einer CTA-Schaltfläche außerhalb des Menüs in Webflow kann eine wirksame Strategie zur Verbesserung der Sichtbarkeit und Steigerung der Conversions sein. Indem Sie die oben beschriebenen Schritte befolgen, können Sie ganz einfach einen CTA-Button erstellen und positionieren, der sich vom Rest Ihres Seiteninhalts abhebt. Unabhängig davon, ob Sie sich für eine schwebende Schaltfläche, eine Sticky-Navigationsleiste oder eine herkömmliche Kopfzeilenposition entscheiden, liegt der Schlüssel darin, sicherzustellen, dass Ihr CTA dort platziert wird, wo Benutzer ihn bemerken und zum Handeln ermutigt werden. Mit den intuitiven Designtools von Webflow ist dies einfacher denn je!