April 10, 2024
Wenn du eine Website in Showit gestaltest, solltest du sicherstellen, dass du nicht nur die Desktop-, sondern auch die mobile Version designst, damit deine Website auf verschiedenen Bildschirmen perfekt angezeigt wird. Die Gestaltung einer Navigationsleiste für deine mobile Website Version ist nicht schwierig, aber du musst einige Aspekte beachten, damit sie richtig funktioniert.
Möchtest du es dir lieber als Tutorial ansehen?
1. Einen Header mit einem Hamburger-Menü designen
Wenn du die mobile (die Handy-) Version deiner Website designst, wird der Header meist ganz simpel, in etwa so, aussehen:
Da ist normalerweise das Logo und dann ein Hamburger-Menü (die 3 horizontalen Linien, die wie die Lagen eines Hamburgers aussehen. In meinem Fall sind da auch noch die beiden Flaggen, weil meine Website in mehreren Sprachen ist, zwischen denen man wechseln kann. Aber normalerweise hat dein Header wahrscheinlich nur das Logo und das Hamburger Menü. Also ist der erste Schritt, einen solchen Header zu designen.
2. Canvas für die Mobile Navigation
Wenn man einen solchen Header mit Hamburger Menü hat und auf den Hamburger klickt, dann öffnet sich im Normallfall ein solches Dropdown Menü, das einen zwischen den einzelnen Seiten der Website navigieren lässt:
Um diesen Effekt zu erhalten, musst du einen Canvas für die mobile Navigation erstellen (also quasi das Dropdown das dann da nach unten droppt). Dazu gehst du rechts auf die “Home” Seite deiner Website und klickst dann ganz oben auf PAGE. Dann solltest du die Home-Seite sehen, die du schon designt hast. Bei mir siehst du, dann meine mobile Navigation ganz unten ist und ein “Site Canvas”:
Wie du das erstellst zeige ich dir in den nächsten Schritten.
3. Einen neuen Canvas erstellen
Zuallererst musst du einen neuen Canvas erstellen. Das machst du, indem du rechts neben dem Namen der Seite auf die 3 Punkte klickst und “Add Blank Canvas” auswählst. Benenne deinen neuen Canvas mit “Mobile Navigation”:
Ziehe den neu erstellten Canvas links im Menü ganz nach unten (blau) und klicke dann auf die 3 Punkte und stelle ein “Visible On Mobile” und “Converte To Site Canvas”. Dadurch ist dieses Menü nicht auf der Desktop-Version deiner Website sichtbar (ist ja klar, es ist ja nur die mobile Navigation für auf dem Handy), und wenn es ein Site Canvas ist, kannst du diesen Canvas sozusagen recyceln und auf jeder Seite deiner Website per Klick hinzufügen:
Dann passt du folgende Einstellungen im Menü rechts unter CANVAS an:
- Setze die “Stacking Order” auf 2. Das stellt sicher, dass das Menü ÜBER allem anderen sichtbar ist (weil das Dropdown Menü ja von oben über den Rest runterdropt).
- Bei “Initial Hight” stellst du die Größe des Canvases so hoch ein, wie du dein Dropdown Menü haben möchtest. Das ist bei mir 540px.
- Bei “Sticky” stellst du “Top” ein, weil du ja möchtest, das das Dropdown Menü ganz oben am Bildschirmrand bleibt.
- Und zuletzt klicks du noch das Kästchen “Hidden to start” an, weil du ja willst, dass das Dropdown Menü am Anfang versteckt ist und sich nur öffnet, wenn jemand auf das Hamburger-Menü klickt:
4. Designe den Canvas für die Mobile Navigation
Nachdem du nun die grundlegenden Einstellungen vorgenommen hast, ist es an der Zeit, dein mobile Navigation so zu gestalten, wie es dir gefällt. Wenn du keine Hintergrundfarbe möchtest, kannst du die Einstellungen für die Hintergrundfarbe bei CANVAS BACKGROUND auf 0 % setzen und einfach einen Kasten wie den beigen in meinem Beispiel hier hinzufügen. Das hat den Effekt, dass man später die Website unter dem Dropdown-Menü durch sehen kann, weil es durchschimmernd ist:
5. Klick-Actions zum Menü hinzufügen
In deinem neu erstellten Menü hast du all die verschiedenen Menüpunkte, die deine Website-BesucherInnen zu den verschiedenen Seiten innerhalb deiner Website führen (z.B. Home, Über mich, Portfolio und Kontakt). Diese müssen auf eine bestimmte Art und Weise verknüpft werden, damit die BesucherInnen auf die richtige Seite geleitet werden.
Klicke dazu z.B. “Home” an und dann rechts bei TYPE auf “Page” und bei PAGE auf “Home” (oberer roter Kasten). Das macht, dass deine BesucherInnen, wenn sie auf “Home” im Dropdown klicken, auf die Home-Seite deiner Website geleitet werden.
Aber du möchtest natürlich auch, dass sich das Dropdown schließt, wenn jemand “Home” angeklickt hat und auf die Home-Seite geleitet wurde. Das schaffst du, indem du unten bei ACTIONS “Hide Site Canvas” und “This Site Canvas” anklickst (unterer roter Kasten):
Nun machst du das gleiche mit allein Seiten im Dropdown. Achte hier aber darauf, bei den CLICK ACTIONS bei PAGE nicht “Home” anzugeben, sondern bei der About me-Seite natürlich “About me” und bei der Portfolio-Seite “Portfolio” und bei der Kontakt-Seite “Kontakt”!
Achte beim Designen der mobilen Navigation ungedingt darauf, ein solches “X” einzufügen, und zwar an der genau gleichen Stelle, an der bei deinem Header das Hamburger-Menü ist! Um das Dropdown-Menü zu öffnen klickt man ja auf das Hamburger-Menü, und um das Dropdown zu schließen, dann auf das “X”. Damit es sich aber wirklich schließt, musst du auf das “X” klicken und rechts bei ACTIONS die rot eingerahmten Einstellungen vornehmen:
6. Den Header verlinken
Du hast es fast geschafft! Das Einzige was nun noch zu tun bleibt, ist, das Hamburger-Menü zu verlinken, damit sich das Dropdown öffnet, wenn man auf den Hamburger klickt. Dazu klickst du den Hamburger an und setzt rechts bei ACTIONS den TYPE auf “Show Site Canvas”, und bei SITE CANVAS “Mobile Navigation”:
Und das wars! Du bist fertig mit deiner mobilen Navigation 🙂 Jetzt musst du nur noch den Header zu jeder Seite deiner Website ganz oben hinzufügen und den Site Canvas mit der mobilen Navigation ganz unten auf jede Seite deiner Website.
