Make it scroll 🔽 So erstellst du einen HubSpot Call to Action mit Scroll-Effekt.

Was ist der Scroll-Effekt?

Wer eine Webseite, eine Landingpage oder auch einen Blog hostet, der hat eventuell schon einmal vom Scroll-Effekt gehört. Im Englisch spricht man auch von Smooth Scrolling.

Smooth Scrolling bezeichnet eine Einstellung, die das Scrollen der User weicher macht. Wer normalerweise aufhört zu scrollen, bleibt unmittelbar stehen. Beim Smooth Scrolling gleitet der Screen ein klitzekleines bisschen weiter und kreeiert so ein gleichmäßiges, fließendes Scrolling Erlebnis. Dieser Effekt des weichen Scrollens ist dann der Scroll-Effekt.

Ein weiterer Aspekt vom Smooth Scrolling ist die Möglichkeit mit Hilfe von CTAs (Call-to-Action) eine Möglichkeit zu schaffen, mit deren Hilfe User beispielsweise vom Seitenende zum Seitenanfang zurück kommt. Damit die Seite dafür aber nicht neu lädt, sondern von alleine zurück zum Anfang scrollt, gibt es Smooth Scrolling.

Ein ganz simples Beispiel für Smooth Scrooling kannst du dir auf dem kulturbanause Blog anschauen.

Wenn du auf deiner Webseite den Scroll-Effekt mit Hilfe eines CTAs implementierst, könnte das Ganze zum Beispiel so aussehen:

Die einfachste Method, um so einen Effekt durch einen CTA zu erreichen, ist es einen "unique identifier" oder auch "id" in die Seite mit einzubauen. Später kannst du dann dem CTA Link eine sogenannte href property zu ordnen. Das sieht zum Beispiel dann so aus:  

<a href= “#id-of-the-element ”>CTA Text</a>

Smooth Scrolling in HubSpot

Was in der Theorie recht simpel wirkt, kann bei einem Blog, einer Webseite oder einer Landingpage, die über HubSpot gehostet wird, etwas komplizierter werden. Grund dafür ist, dass HubSpot seine Call-to-Actions vordefiniert. Zusätzlich verwendet das Tool sein eigenes Stylesheet und JavaScript. Dadurch kann man nicht mehr so einfach eine href property dem CTA zuordnen. Copy Paste ist bei HubSpot nicht der direkte Weg.

Gut, wenn wir technisch korrekt sein wollen, müssen wir zugeben: Es geht sehr wohl. Allerdings lädt die Seite jedes Mal neu, wenn jemand auf den CTA klickt. Und das dann kein Scroll-Effekt und somit nicht Teil der Übung.

Damit du in HubSpot trotzdem einen Scroll-Effekt generieren kannst, haben wir jetzt die Lösung für dich. Am Beispiel einer Landingpage zeigen wir dir, was du beachten musst. Das Prinzip funktioniert aber natürlich auch für eine normale Webseite oder einen Blog.

Folge einfach den folgenden Schritten:

1. Log dich in deinem HubSpot Account ein und finde deine Landingpage-Auswahlseite (Marketing > Webseite > Landingpage).
2. Suche die gewünschte Landingpage heraus und klicke auf "Bearbeiten" (Kannst du diese Funktion nicht sehen, fehlen dir die entsprechenden Berechtigungen. Dein Admin kann dir diese jedoch zuteilen.)
3. Anstelle eines klassischen CTAs erstellen wir nun ein Bild, dass genauso aussieht, wie der gewünschte CTA. Du erstellst also ein Abbild.
4. Diesem Abbild fügst du nun den JavaScript Code von hier hinzu. Die href property wird in deinem unabhängigen js file integriert.
5. Dieses js file, das Abbild deines CTAs, musst du nun auf deiner Landingpage einbauen.

Mit diesem kleinen Trick hast du nun den Scroll-Effekt auf deiner Landingpage integriert und somit das Scroll-Erlebnis deiner User ordentlich aufpoliert. 🎉

P.s. Diesen Blogartikel gibt es auch auf Englisch. Und zwar hier.

Falls du mit HubSpot richtig durchstarten möchtest sind wir als HubSpot Agentur in Köln dein Partner! Wir betreuen Projekte in ganz Deutschland in den Bereichen HubSpot Marketing, Sales und Service.