Herzlich willkommen! Sie nutzen Jimdo Creator, ein tolles Werkzeug für den schnellen und unkomplizierten Aufbau einer eigenen Website. Aber vielleicht stehen Sie gerade vor einer kleinen Herausforderung: Ihrem Menü. Standardmäßig wird es bei vielen Themes vertikal angezeigt, und Sie möchten es lieber horizontal haben. Keine Sorge, das ist einfacher als Sie denken! In diesem Artikel zeige ich Ihnen Schritt für Schritt, wie Sie das Menü in Ihrem Jimdo Creator kinderleicht von vertikal auf waagerecht umstellen können – und das ganz ohne Programmierkenntnisse.
Warum ein horizontales Menü?
Bevor wir uns in die Details stürzen, werfen wir einen kurzen Blick darauf, warum ein horizontales Menü für Ihre Website von Vorteil sein kann. Im Vergleich zu einem vertikalen Menü bietet ein waagerechtes Menü oft:
- Bessere Übersichtlichkeit: Gerade bei Websites mit wenigen Hauptnavigationspunkten wirkt ein horizontales Menü oft aufgeräumter und professioneller.
- Mehr Platz im sichtbaren Bereich: Da das Menü horizontal angeordnet ist, nimmt es weniger vertikalen Platz ein, wodurch mehr Raum für den eigentlichen Inhalt der Seite bleibt.
- Verbesserte Nutzererfahrung (UX): Viele Nutzer sind an horizontale Menüs von anderen Websites gewöhnt, wodurch die Navigation intuitiver wird.
- Mobile Optimierung: Auch wenn viele Jimdo Creator Themes responsive sind, lässt sich ein horizontales Menü auf mobilen Geräten oft besser darstellen und bedienen.
Der Knackpunkt: Das verwendete Theme
Die Art und Weise, wie Sie Ihr Menü anpassen können, hängt stark vom verwendeten Jimdo Creator Theme ab. Einige Themes bieten eine einfache Option im Design-Editor, um das Menü von vertikal auf horizontal umzustellen. Andere Themes erfordern etwas mehr Kreativität und eventuell den Einsatz von benutzerdefiniertem CSS-Code.
Wichtig: Bevor Sie Änderungen vornehmen, empfehle ich Ihnen, ein Backup Ihrer Website zu erstellen. So können Sie jederzeit zum vorherigen Zustand zurückkehren, falls etwas schiefgeht. Das geht ganz einfach über die Jimdo Creator Einstellungen.
Methode 1: Die einfache Variante – Theme-Einstellungen nutzen
Die einfachste Methode ist, die Theme-Einstellungen zu nutzen. Viele Jimdo Creator Themes bieten eine integrierte Option, um die Menüausrichtung zu ändern. So gehen Sie vor:
- Loggen Sie sich in Ihr Jimdo Creator Konto ein.
- Wechseln Sie in den Bearbeitungsmodus Ihrer Website.
- Klicken Sie auf „Design”. (Dieser Button befindet sich meist in der linken Seitenleiste.)
- Suchen Sie nach einem Abschnitt, der „Navigation”, „Menü” oder „Layout” heißt. Die genaue Bezeichnung kann je nach Theme variieren.
- Innerhalb dieses Abschnitts sollten Sie eine Option finden, um das Menü von vertikal auf horizontal umzustellen. Dies kann ein Kontrollkästchen, ein Dropdown-Menü oder ein Radio-Button sein.
- Wählen Sie die Option für „horizontal” oder „waagerecht” aus.
- Speichern Sie Ihre Änderungen.
- Überprüfen Sie, ob das Menü wie gewünscht angezeigt wird.
Glückwunsch! Wenn diese Methode funktioniert hat, haben Sie Ihr Menü erfolgreich umgestellt. Sollte diese Option in Ihrem Theme nicht vorhanden sein, fahren Sie mit der nächsten Methode fort.
Methode 2: Der etwas anspruchsvollere Weg – CSS-Code nutzen
Wenn Ihr Jimdo Creator Theme keine direkte Option zur Änderung der Menüausrichtung bietet, müssen Sie etwas tiefer in die Materie eintauchen und CSS-Code verwenden. Keine Angst, auch das ist nicht so kompliziert, wie es klingt. CSS steht für Cascading Style Sheets und ist eine Sprache, mit der Sie das Aussehen Ihrer Website gestalten können.
Schritt 1: Den HTML-Code Ihres Menüs finden
Zunächst müssen Sie herausfinden, wie das Menü in Ihrem Jimdo Creator Template aufgebaut ist. Dafür benötigen Sie das „Element untersuchen” Tool Ihres Browsers. Die meisten modernen Browser (Chrome, Firefox, Safari, Edge) bieten diese Funktion. So geht’s:
- Öffnen Sie Ihre Website in Ihrem Browser.
- Klicken Sie mit der rechten Maustaste auf das Menü.
- Wählen Sie im Kontextmenü „Element untersuchen” (oder „Inspect Element”, „Untersuchen” je nach Browser) aus.
Daraufhin öffnet sich ein Fenster mit dem HTML-Code Ihrer Website. Suchen Sie nach dem Code-Abschnitt, der das Menü enthält. Dieser Abschnitt ist oft in ein <nav>-Tag oder ein <ul>-Tag eingeschlossen. Notieren Sie sich die Klasse oder ID dieses Elements. Diese Information benötigen Sie später für den CSS-Code.
Beispiel: Angenommen, das Menü ist in folgendem HTML-Code eingebettet:
<nav id="main-navigation">
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/ueber-uns">Über uns</a></li>
<li><a href="/leistungen">Leistungen</a></li>
<li><a href="/kontakt">Kontakt</a></li>
</ul>
</nav>
In diesem Beispiel ist die ID des <nav>-Tags „main-navigation” und die Klasse des <ul>-Tags „menu”.
Schritt 2: CSS-Code hinzufügen
Jetzt, wo Sie die relevanten Informationen haben, können Sie den CSS-Code hinzufügen, um das Menü horizontal anzuordnen. Gehen Sie dazu wie folgt vor:
- Wechseln Sie zurück in den Bearbeitungsmodus Ihrer Jimdo Creator Website.
- Klicken Sie auf „Design”.
- Suchen Sie nach einem Abschnitt, der „Benutzerdefinierter Code” oder „Eigener Code” heißt. Oft befindet sich dieser Abschnitt unter „Erweitert” oder „Zusätzliche Einstellungen”.
- Fügen Sie den folgenden CSS-Code in das Feld ein (passen Sie die Selektoren an Ihre Website an):
#main-navigation ul.menu {
list-style: none; /* Entfernt die Aufzählungszeichen */
padding: 0; /* Entfernt den Innenabstand */
margin: 0; /* Entfernt den Außenabstand */
display: flex; /* Aktiviert das Flexbox-Layout */
justify-content: center; /* Zentriert die Menüpunkte horizontal */
}
#main-navigation ul.menu li {
margin: 0 15px; /* Fügt Abstand zwischen den Menüpunkten hinzu */
}
#main-navigation ul.menu li a {
text-decoration: none; /* Entfernt die Unterstreichung von Links */
color: #333; /* Setzt die Textfarbe */
}
/* Optional: Hover-Effekt */
#main-navigation ul.menu li a:hover {
color: #007bff; /* Ändert die Textfarbe beim Hovern */
}
Erklärung des CSS-Codes:
list-style: none;: Entfernt die Aufzählungszeichen vor den Menüpunkten.padding: 0;undmargin: 0;: Entfernen den Standard-Innen- und Außenabstand, der von Browsern hinzugefügt wird.display: flex;: Aktiviert das Flexbox-Layout, das es uns ermöglicht, die Menüpunkte einfach horizontal anzuordnen.justify-content: center;: Zentriert die Menüpunkte horizontal innerhalb des Menüs.margin: 0 15px;: Fügt einen Abstand von 15 Pixeln zwischen den einzelnen Menüpunkten hinzu.text-decoration: none;: Entfernt die Unterstreichung von Links.color: #333;: Setzt die Textfarbe auf ein dunkles Grau.:hover: Definiert einen Effekt, der beim Überfahren des Links mit der Maus ausgelöst wird (in diesem Fall wird die Textfarbe geändert).
Wichtig: Ersetzen Sie #main-navigation ul.menu durch den korrekten Selektor, den Sie im ersten Schritt ermittelt haben. Wenn Sie beispielsweise nur die Klasse „menu” haben, verwenden Sie .menu.
- Speichern Sie Ihre Änderungen.
- Überprüfen Sie, ob das Menü wie gewünscht angezeigt wird.
Mit diesem CSS-Code sollten Sie Ihr Menü erfolgreich von vertikal auf horizontal umgestellt haben.
Problemlösung: Was tun, wenn es nicht funktioniert?
Manchmal kann es vorkommen, dass die oben genannten Methoden nicht sofort zum gewünschten Ergebnis führen. Hier sind einige häufige Probleme und ihre Lösungen:
- Der CSS-Code wird nicht angewendet: Überprüfen Sie, ob Sie den richtigen Selektor im CSS-Code verwendet haben. Stellen Sie außerdem sicher, dass der Code korrekt in den „Benutzerdefinierten Code” Bereich Ihrer Jimdo Creator Website eingefügt wurde und dass keine Tippfehler vorhanden sind.
- Das Menü wird zwar horizontal angezeigt, aber nicht richtig positioniert: Experimentieren Sie mit den CSS-Eigenschaften
justify-content,align-items,marginundpadding, um das Menü korrekt zu positionieren. - Das Menü wird auf mobilen Geräten nicht richtig angezeigt: Fügen Sie Media Queries in Ihren CSS-Code ein, um das Menü für verschiedene Bildschirmgrößen anzupassen. Hier ein Beispiel:
@media (max-width: 768px) {
#main-navigation ul.menu {
flex-direction: column; /* Stapelt die Menüpunkte untereinander */
align-items: center; /* Zentriert die Menüpunkte vertikal */
}
#main-navigation ul.menu li {
margin: 10px 0; /* Fügt vertikalen Abstand zwischen den Menüpunkten hinzu */
}
}
Dieser Code bewirkt, dass das Menü auf Bildschirmen mit einer Breite von maximal 768 Pixeln (z.B. Tablets und Smartphones) vertikal angeordnet wird.
Fazit
Das Umstellen des Menüs von vertikal auf horizontal in Jimdo Creator ist in den meisten Fällen relativ einfach. Nutzen Sie zunächst die Theme-Einstellungen, falls vorhanden. Wenn das nicht möglich ist, verwenden Sie den CSS-Code, um das gewünschte Ergebnis zu erzielen. Denken Sie daran, vor Änderungen ein Backup Ihrer Website zu erstellen und den Code sorgfältig zu überprüfen. Mit etwas Geduld und Kreativität können Sie das Menü Ihrer Jimdo Creator Website ganz nach Ihren Wünschen gestalten!