Wie ein Logo mit Mouseover Effekt in Wix erstellt wird

Wie ein Logo mit Mouseover Effekt in Wix erstellt wird

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

How to add a vertical menu to your WIX website?

How to add a vertical menu to your WIX website?

vertical-menu-to-wix-website

For the photographer template, I wanted to add a kind of creative twist to the website. Instead of sticking to the most common horizontal menu, I was looking for a vertical menu.

Because it makes a difference what kind of photographer the client is, the vertical menu allows adding as many menu items as needed. A portrait photographer may only need a portfolio and contact page, while a travel photographer may need to add the different countries travelled to as sub-items.

How can I add a vertical menu to WIX?

1. Click on Add + from the left side of the Editor.

2. Click on Menu.

3. Click on Vertical Menus.

4. Click or drag your selected menu to add it to your website.

 

How to add a vertical menu

Customizing the Menu Design

Drag the menu to the desired position.

Click on the Layout Menu to adjust the text of each menu item. Should text be displayed on the left, in the middle or on the right side?

The Design Icon allows you to adjust the colours, shadows, opacity and borders.

An alternative to the vertical menu is to add a lightbox or a pop-up.

How do I add a Lightbox as a menu

You can skip the read and watch the video from WIX:
To create a vertical menu with a lightbox, delete your existing menu from your website.

Click + Add in the editor on the left, then Interactive. S

Select a Lightbox template from Welcome or Subscribe.

How to add a popup menu to your Wix website

Customizing the Pop-up Menu Design

Click on Settings: Automatically display lightbox on pages set on „no“. 

To be able to close the Lightbox keep the „X“ and don’t delete it.

Add a Vertical Menu to your Lightbox and adjust the design.

The Lightbox Layout allows you to position the Lightbox on the left or right side.

Customize the background with the Design Icon.

Lightbox settings
I hope you found this article helpful. Leave a comment below if you have further questions.

 

Signature

How do I find my website history in WiX Editor?

How do I find my website history in WiX Editor?

website-history-in-wix-editor

Do you want to go back to a previous version of your website because you made accidentally changes on your site? WiX has created the site history feature, which automatically creates site revisions every time you save or publish.

How to manage your site history?

If you want to access your site history from the Editor, follow the 7 steps:

1. Click Site from the top bar of the Editor.

Wix Site

2. Click Site History.

 

WiX Site History

3. Click See your Site History.

 

WiX go to dashboard

4. Click the Arrow icon next to the relevant revision.

5. Make sure that you are going to restore the version you wanted.

6. Click Restore.

7. Start editing the restored site again.

Signature