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 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.
Das filterbare Portfolio-Modul des Divi-Themes beitet – neben allen anderen Filterbuttons – zusätzlich einen Button mit der Aufschrift «Alle», unter welchem sämtliche Posts angezeigt werden. Dieser «Alle»-Button lässt sich mit ein wenig CSS auch ausblenden.
Die Beitragsbilder, welche im Blog-Modul des Divi-Themes gezeigt werden, sind normalerweise mit dem Beitrag verlinkt. Ein Klick – und der Beitrag wird geöffnet. Falls Sie dies stört, können Sie den Link ganz einfach deaktivieren. Sie benötigen lediglich ein kurzes Stück CSS-Code.
Die Standard-Fusszeile des Divi-Themes bietet die Möglichkeit, SocialMedia-Icons zu platzieren. Schön und gut; doch die Gestaltungsmöglichkeiten dieser Icons sind eher dürftig. Mit ein wenig CSS-Code lassen sich die einschlägigen Symbole aber einfach aufpeppen – etwa aus der Footerzeile herausragen.
Tool-Tipps sind kleine Erklärungstexte, welche beim Hovern z.B. über einen Text angezeigt werden. Die Tool-Tipps erscheinen meist in langweiligem grau-in-grau. Doch das muss nicht sein. Richtig coole Tool-Tipps sind nämlich im Handumdrehen möglich.
Keine Inhalte gefunden.
Werbung
