CSS-Stylesheet
Hier finden Sie zahlreiche Tricks, um Ihr Webprojekt mit CSS-Code auf Vordermann zu bringen.
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden. Wie Sie ein Child-Theme erstellen, erfahren Sie im Beitrag «Ein Child-Theme anlegen – ein Must im Webdesign».
Der Visual-Builder des Divi-Themas bietet am unteren Rand des Monitors eine Reihe von Schaltflächen, mit denen Sie verschiedene Aktionen durchführen können – etwa das Speichern der Seite etc. Einige dieser Schaltflächen befinden sich unten rechts auf der Seite. An dieser Stelle werden jedoch auch häufig Benachrichtigungs- und Chat-Komponenten angezeigt. Wenn Sie vermeiden möchten, dass die Schaltflächen diese Komponenten verdecken, können Sie die Steuerelemente des Visual Builders auf die linke Seite verschieben.
Häufig verwenden Plugins oder Hacks den Standardbutton, wie er ihn HTML üblich ist. Doch das können Sie ändern und stattdessen den hübschen Divi-Button anzeigen lassen.
Im Button-Modul des Divi-Themes lässt sich standardmässig bloss eine einzige Textzeile platzieren. Wem das nicht genügt und wer gerne eine zweite Textzeile hätte, muss ein wenig nachhelfen. Wir zeigen Ihnen wie.
Hinweise, welche auf die Website «gestempelt» werden, sind beliebt und ein auffälliges Element dazu. Oft werden dafür Grafiken verwendet. Das ist aber gar nicht nötig - mit dem Text-Modul des Divi-Themes und etwas CSS-Code geht das ganz praktisch.
Das Divi-Theme kommt mit einem ansprechenden Galeriemodul daher. Wird es mit Bildern befüllt, wird ein Klick das jeweilige Bild als Popup in der Lightbox anzeigen. Das behagt nicht in jedem Fall – manchmal wäre eine reine Bildershow ausreichend. Darum zeigen wir heute, wie Sie das Bilder-Popup deaktivieren.
Die Portfolio-Übersichten werden out of the box elegant in den Inhaltsbereich «eingeschoben». Das mag einigen der Spielerei zu viel sein. Wer die Liste lieber ohne Slide-In-Bewegung angezeigt erhalten möchte, kann die Animation ganz einfach deaktivieren.
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.
Keine Inhalte gefunden.
Werbung
