Weebly bietet eine einfache Site-Builder-Plattform, die für die meisten Benutzer möglicherweise nicht nützlich ist. Zum Beispiel ist das Anordnen von Seiten in der erforderlichen Reihenfolge in Weebly mühsam, und es ist standardmäßig nicht möglich, das Navigationsmenü der obersten Ebene nicht anklickbar zu machen. Solange Weebly es erlaubt, das Quell-CSS zu ändern, können wir solche Dinge ermöglichen, indem wir einfachen CSS-Code zur Haupt-CSS-Datei „main_style.css” hinzufügen .
Bevor Sie fortfahren, müssen Sie die Grundstruktur des Weebly-Navigationsmenüs verstehen. Klicken Sie mit der rechten Maustaste auf das Menü auf Ihrer veröffentlichten Site und wählen Sie die Option "Inspect" oder "Inspect Element", um die Entwicklerkonsole in Ihrem Browser zu öffnen. Wenn Sie Ihre Maus über jedes Navigationsmenü der obersten Ebene bewegen, können Sie die entsprechenden CSS-Klassen sehen. Jedes Navigationsmenü der obersten Ebene wird mit einer CSS-Klasse wie „.wsite-nav-1″, „.wsite-nav-2″, „.wsite-nav-3″ usw. identifiziert, wobei 1 im Allgemeinen die „Hoe”-Seite ist .
CSS-Klasse für das Weebly Top-Navigationsmenü finden
Die Zahlen können sich je nach Thema ändern und notieren Sie die CSS-Klasse des Navigationsmenüs, die nicht anklickbar sein soll. Angenommen, Sie möchten das zweite Navigationsmenü nicht anklickbar machen und die entsprechende CSS-Klasse ist „.wsite-nav-2″.
Navigieren Sie nun zum Weebly-Code-Editor unter „Theme > HTML/CSS bearbeiten > Assets > main_style.css” und fügen Sie den folgenden CSS-Code hinzu.
.wsite-nav-2 {
pointer-events: none;
}
Speichern Sie die Änderungen und veröffentlichen Sie Ihre Site, um zu sehen, dass das zweite obere Navigationsmenü nicht anklickbar ist und der Cursor sich beim Schweben nicht in eine Hand ändert. Wenn Sie den Cursor zur Hand machen möchten, aber das Menü immer noch nicht anklickbar sein sollte, ändern Sie den obigen Code wie folgt:
.wsite-nav-2 a:active {
pointer-events: none;
}
Ebenso können Sie alle Navigationsmenüs der obersten Ebene nicht anklickbar machen, indem Sie die entsprechenden CSS-Klassen hinzufügen.
Weebly hat eine andere Navigationsstruktur auf mobilen Websites und ein Klick auf das obere Menü zeigt erneut die Liste der Menüelemente einschließlich des oberen Menüs an. Dies ermöglicht es, den oberen Menülink zu öffnen, wenn er einen Inhalt hat, aber in unserem Fall sollten wir diesen Link aus der Liste entfernen. Fügen Sie daher das folgende CSS zu Ihrer "main.less"-Datei hinzu:
.wsite-menu-master-item {
display: none !important;
}
Nachdem Sie alle CSS-Codes hinzugefügt haben, kann es wie folgt aussehen:
CSS in Weebly ändern
Speichern Sie die Änderungen und veröffentlichen Sie Ihre Site.
- Verbergen Sie die oberen Navigationsseiten vor Suchmaschinen, die verhindern, dass Suchmaschinen die leeren Seiten crawlen. Sie können dies tun, indem Sie die Option „Diese Seite vor Suchmaschinen ausblenden” unter den „Erweitert”-Einstellungen jeder Top-Level-Seite aktivieren.
- Denken Sie daran, dass Benutzer weiterhin auf die Seiten zugreifen können, indem sie die URL direkt in die Adressleiste des Browsers eingeben. Idealerweise sollte das Setzen von 301-Weiterleitungen dieses Problem lösen, leider lässt Weebly keine Weiterleitungen für die Live-Seiten zu. Daher können Sie die Benutzer nicht daran hindern, über die Adressleiste auf die Seiten zuzugreifen.