Mouseover Logo in Wix

Wie erstellt man ein Logo in Wix, dass die Farbe ändert, wenn man mit der Maus darüberfährt? Die Hover Funktion Einstellung gibt es bei Wix Logos leider nicht standardmässig.

 

Animationen auf Webseiten

Animationen können eine Webseite lebendiger erscheinen lassen und werden bewusst dazu eingesetzt Aufmerksamkeit zu erregen. Beim Einsetzen von Hover Animationen bei Logos wird die Navigation für den Besucher vereinfacht, denn durch den Effekt wird angezeigt, dass das Element anklickbar ist. Dadurch verbessert sich ebenso die User Experience deiner Webseite.

 

Mouseover Logo in Wix

Um ein Logo mit Hilfe der Mouseover Box in Wix zu erstellen, solltest Du dein Logo zweimal in der Wix Mediathek einfügen – einmal als dein normales Logo und einmal mit den Farben, die das Logo beim Mouseover anzeigen soll. Das heisst, du brauchst zwei Logos in zwei unterschiedlichen Farben.

1. Füge deiner Webseite eine Mouseover Box hinzu, indem du auf das unter + / Box / Mouseover Boxen auswählst

Um deinem Logo den Effekt hinzuzufügen, wähle die Box aus, die deinem Logo am ähnlichsten ist. Ist dein Logo rund, wähle eine runde Mouseover Box aus.

2. Lösche den Inhalt der Mouseover Box den du nicht benötigst, auch den Hintergrund.

3. Füge dein Logo der Standardansicht über  + / Bild / meine Daten hinzu. Je nach Mouseover Box, die du ausgewählt hast, kann es sein, dass du bei der Standardansicht dein Logo als Vektorgrafik (.svg) einfügen musst.

4. Klicke jetzt auf den Reiter „Mouseover“.

5. Füge das Logo ein, das beim darüberfahren erscheinen soll.

6. Achte darauf, dass das Mouseover Logo nun direkt über dem ursprünglichen Logo liegt.

7. Lösche das ursprüngliche Logo aus der Mouseover Ansicht.

8. Teste dein Mouseover Effekt über die Vorschau.

9. Passe die Grösse des Logos deinem Header an und füge es dort hinzu.

10. Texte, ob sich bei der Grössenänderung nichts verschoben hat.

 

Das Video zum Blogbeitrag:

Signature