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».
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.
Der Standard-Header des Divi-Themes lässt sich mit einem Hintergrundbild versehen. So wie im Kopf dieses Beitrags. Das geht mit ein wenig CSS-Code ganz einfach.
Vor allem im Responsive-Webdesign stellt uns der CSS-Code ein hilfreiches Utensil zur Seite: Die calc()-Eigenschaft. Werte müssen dabei nicht mehr in Pixel, em oder anderen Einheiten angegeben werden – stattdessen können wir den Code ganz einfach rechnen lassen. Wie's geht, zeigen wir hier.
Haben Sie auch schon neidisch auf Websites geschielt, die ihren Firmenstandort mit Google Maps online anzeigen? Dafür benötigen Sie eigentlich einen bezahlten Code – das so genannte API. Es gibt aber einen Plan B zum Einbinden von Google Maps in die eigene Divi-Website. Und der ist völlig gratis.
Keine Inhalte gefunden.
Werbung
