Menüs und Navigationen sind wichtig auf jeder Website. Unter WordPress und im Divi-Theme gibt es zahlreiche Gestaltungsmöglichkeiten – auch versteckte. Dr. Code zeigte 2024, wo sich diese verbergen.
OK: die drei Balken, aus denen das so genannte «Hamburger-Menü» besteht, sind schon eine Weile bekannt. Dennoch haben Sie die Möglichkeit, mitzuteilen, dass das Symbol ein Menü enthält, das erweitert werden kann. Wie's geht? Ganz einfach!
Das Standard-Divi-Menu für die Anzeige auf Mobilgeräten zeigt einen farbigen Rand an. Ich mag das - aber es gefällt nicht allen. Hier ein Hack, wie Sie den Trennstrich los werden.
Manchmal kann es hilfreich sein, wenn die Navigation der Website beim Scrollen etwas geschrumpft wird. Sie «klebt dann beispielsweise ganz oben an der Seite – nimmt dort aber etwas weniger Platz ein. Das geht ganz einfach mit einem Script und etwas CSS-Code.
Neben dem «normalen» Navigationsmenü hat Divi ein sekundäres Menü spendiert, das wahlweise eingeblendet werden kann. Doch ist es im Divi-Theme von Haus aus nur möglich, dieses Manü linksbündig anzuzeigen. Mit ein wenig CSS-Code ist allerdings noch mehr möglich. Genau datum geht's im heutigen Hack.
Wenn Sie Ihr Divi-Menü zentriert einstellen, sehen Sie auf Ihrem Handy standardmässig «Select Page» vor Ihrer Menüleiste. Um die Aufforderung durch Ihren eigenen Text zu ersetzen oder ihn ganz auszuschalten, benötigen Sie bloss einen kurzen Code. Ersetzen Sie einfach den Text, den Sie anzeigen möchten.
Das Mobilmenü des Divi-Themes können Sie auf die ganze Anzeigehöhe erstrecken. Das kann der Übersicht dienen. Wir zeigen Ihnen wie das geht.
Heute ein Hack, der ist fast schon fertig, wenn Sie mit Lesen beginnen: Wir richten das Mobilmenu des Divi-Themes zentriert aus.
Vor allem bei einfarbigen Websites mit fixiertem Header kann das Scrollen der Anzeige dazu führen, dass der Inhalt plötzlich hinter der Navigation verschwindet. Mir gefällt das nicht sonderlich. Bei einigen meiner realisierten Webprojekte setze ich darum eine Trennlinie, welche den Header vom Content abtrennt – gerne auch eine Linie, welche erst beim Scrollen erscheint. Das ist gar nicht mal so schwierig umzusetzen.
Das Drop-Down-Menü des Divi-Themes wird normalerweise links ausgerichtet dargestellt. Doch die Menüpunkte lassen sich auch zentrieren. Das geht sowohl im Menümodul als auch im Divi-Standardmenü. Wir zeigen Ihnen die Lösung für beide Varianten.
Mit dem Menü-Modul des Divi-Themes können Sie auch ganz einfach einen Farbwechsel des Navigationshintergrunds auslösen. Etwa nach einer bestimmten Scrollhöhe. Wie simpel das ist, zwigen wir Ihnen hier.
Je nach Grösse Ihrer Anzeige und je nach Umfang des Menüs Ihrer Website kann es vorkommen, dass das Menü auf kleineren Monitoren zweizeilig dargestellt wird. Das ist natürlich unschön und wir versuchen es zu verhindern. Hier ein Hack, der helfen kann.
keine Beiträge gefunden.
Werbung
Mit Ankern lassen sich Benutzerinnen und Benutzer einer Website gerne zu den zentralen Inhalten lenken. Die Sprungmarken (oder eben Anker) sind darum ein beliebtes Tool auf Websites. Dr. Code hat eine kleine Beitragsreihe zum Thema geschrieben.
Die erste Mini-Serie aus dem Jahr 2024 widmete sich den Submenüs im Divi-Theme. Dr. Code veröffentlichte dazu drei Tipps und Tricks.
Leiten Sie das Auge des Betrachters/der Betrachterin. Mit ein paar Gestaltungstricks, welche als Eyecatcher dienen. Eine Dr. Code-Serie aus dem Jahr 2025 mit vier Beiträgen.
Ein paar Unarten des Webdesigns der 90er-Jahre sind glücklicherweise längst verschwunden. Aus Spass lässt sie Dr. Code hier noch einmal aufleben.
Keine Inhalte gefunden.
Werbung
