Victoria Weber | Alles zu Squarespace & Online-Branding

View Original

Hover-Effekte bei Squarespace einrichten

Website dynamischer und persönlicher machen? Ja, bitte!

In diesem Artikel zeige ich dir, was ein Hover-Effekt ist und wie du ihn bei Squarespace einbaust. 

Der Grund dafür ist wie gesagt: Das Ganze sieht dynamischer aus. Außerdem ist es auch ein nettes Branding-Detail, wenn sich Sachen in deinen Branding-Farben färben.

Also gucken wir uns das an!

See this content in the original post

👉 Ständig frische Tipps für deine Squarespace-Website? Abonniere jetzt meinen Youtube-Kanal mit laufen neuen Tutorials! ðŸŽ¥



Was ist überhaupt ein Hover-Effekt?

Hover-Effekt bedeutet, dass etwas beim Darüberfahren (nicht: klicken!) mit der Maus seinen Look ändert. Meist ist das die Farbe.

Klassischerweise verfärben sich Buttons, wenn man über die drüber fährt - das macht die Website dann dynamisch und lädt zum Klicken ein. Aber auch 


👉 Du startest gerade erst? Teste Squarespace hier 14 Tage lang gratis & hol dir mit dem Code VICTORIA10 10% Rabatt auf dein erstes Jahr! (Das ist natürlich Werbung für meinen Liebling Squarespace)

Tipp: Ganz neu richten wir für dich als Blogleser alternativ sogar einen special 20%-Rabatt ein. → Bekommst du hier.


So setzt du einen Hover-Effekt auf Links bei deiner Squarespace-Website

Um das einzurichten, brauchst du ein klitzekleines bisschen CSS.

(Wenn du keine Ahnung hast, was das ist, guck dir ruhig meinen Guide zu CSS für Anfänger mit den 10 besten CSS-Tipps für Squarespace an.)

Dazu gehst du bei Squarespace links im Hauptmenü auf Design > Benutzerdefiniertes CSS und gibst das Folgende ganz unten im Kästchen ein: 

p a:hover {
color:#FF7281 !important }


Der Farbcode #FF7281 ist ein Hex-Farbcode und steht für Pink. Das kannst du ganz einfach durch deine eigene Farbe für den Hover-Effekt auswählen. 

Falls du nicht nur Fließtextlinks, sondern auch Überschriftenlinks im Hover-Look möchtest, nimmst du folgenden CSS-Schnipsel:

h2 a:hover {
color:#FF7281 !important }

H2 steht hierbei für Überschrift 2. Das kannst du auch zu h3 etc. ändern. 



Buttons mit Hover-Effekten versehen

Ja, natürlich kannst du auch ganze Button-Flächen ändern lassen. 

Mehr dazu findest du im Artikel: Buttons stylen bei Squarespace


Frohes Squarespacen,
Victoria



Diese Artikel könnten ebenfalls interessant für dich sein:

See this content in the original post

Speichere dir diesen Artikel bei Pinterest: