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».
Heute – zum Anlass des 500. Beitrags aus der Praxis von Dr. Code – stellen wir ein Tutorial zur Verfügung, mit welchem sich ganz einfach eine Lesefortschrittsanzeige auf der Divi-Website erstellen lässt. Sie besteht aus einem Balken, der auf 100 Prozent anwächst, je weiter in einem Beitrag gescrollt wird. Das hilft Ihren Leserinnen und Lesern abzuschätzen, wieviel Content sie schon bewältigt haben und soll sie motivieren, weiter auf der Seite zu bleiben.
Das Portfolio-Modul des Divi-Themes lässt einige Einstellungen zu; jedoch können Sie die Zahl der dargestellten Spalten nicht fix festlegen – es sei denn, Sie setzen CSS ein. Hier erklären wir Ihnen wie's geht.
Wichtige Textpassagen können Sie augenfällig unterstreichen – mit einer kleinen Grafik, die dann exakt unter den hervorzuhebenden Text platziert wird. Wie das geht, zeigen wir in diesem Trick aus der Dr.-Code-Praxis.
Das Standard-Menü des Divi-Themes zeigt – bei vorhandenem Submenü – einen kleinen Pfeil nach unten an, um anzuzeigen: Da kommt noch mehr. Dieses Symbol lässt sich auf den ersten Blick nicht anpassen – aber wirklich nur auf den ersten Blick.
Mit dem Divi-Theme können Sie einige der gängigsten SocialMedia-Symbole in die Kopf- und Fusszeile einfügen. Diese werden in einer festen Reihenfolge angezeigt. Sie haben aber die Möglichkeit, die Reihenfolge anzupassen – hier einige Möglichkeiten, die SocialMedia-Icon-Reihenfolge in der Fusszeile anzupassen.
Das Divi-Theme verfügt über ein Galeriemodul, mit dem Sie Bilder sowohl in einem Raster- als auch in einem Slider-Format anzeigen können. Im Slider-Modus zeigt das Galerie-Modul Navigationspfeile und Punkte an. Wenn Sie diese ausblenden möchten, genügt ein wenig CSS.
Die Standardkopfzeile des Divi-Themas enthält ein Suchsymbol, das beim Anklicken ein Suchfeld aufruft. Dieses Suchfeld enthält ein graues «Kreuz»-Symbol, das zum Schliessen des Suchfeldes verwendet werden kann. Wenn Sie eine andere Farbe wünschen, können Sie das Symbol selber gestalten.
Das Portfolio-Modul des Divi-Themes zeigt eine Übersicht über ihre Projektposts. Es bietet hübsche Möglichkeiten und doch ist es nicht perfekt. So lassen sich etwa keine Read-More-Buttons anzeigen und auch Auszugstexte verwehrt das Portfolio-Modul. Zeit, um nachzubessern. Ist sogar recht einfach.
Vielleicht wünschen Sie sich, das Logo Ihrer Website beim Scrollen zu verändern? Zum Beispiel nur die Bildmarke ohne Slogan abbilden? Das geht im Standard-Header des Divi-Themes ganz einfach.
Heute mal wieder ein Hack, der überall funktioniert: Die automatische Silbentrennung. Dank eines simplen CSS-Codes geht das auf allen Websites ganz einfach.
Das Portfolio, welches Sie mit dem filterbaren Portfolio-Modul des Divi-Themes erstellen können, zeigt die Kategoriefilter standardmässig als Button. Wenn Ihnen ein Dropdown-Manü besser zusagt, können Sie es auch als solches darstellen. Wie's geht, zeigt dieser Trick.
Das Divi-Blurb-Modul (oder Informationstext-Modul) kann mit einem Icon versehen werden. In der Grundausstattung stehen aber nur die Icons aus dem Divi-Portfolio zur Auswahl. Wer da nichts findet, kann sich auch bei Font Awesome gütlich tun.
Keine Inhalte gefunden.
Werbung
