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».
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.
Weitere Informationen auf Ihren Seiten und in Ihren Beiträgen zu verlinken, ist bestimmt eine gute Idee. Richtig auffällig wird der Link aber erst dann, wenn Sie ihn als Button darstellen. Geht ganz einfach.
In unserer kleinen «Call-To-Action»-Reihe haben wir eine weitere Gestaltungsidee: Den diagonal abgeschrägten Button, der beim Hovern gerade Kanten erhält. Ist ganz einfach zu machen.
Teil 3 unseres «Call-To-Action»-Specials: Der Link, der zu einem Hover-Button mitsamt Icon wird. Augenfällig und gefällig.
Animierte Farbverläufe sind ein echter Eyecatcher - genau das soll der Handlungsaufruf ja auch sein. Wie Sie beim Hovern einen hübschen Farbeffekt hinzaubern, erfahren Sie heute.
Mit Filtern lässt sich im Webdesign so einiges anstellen. Nach der Anwendung des heutigen CSS-Effekts werden die Miniaturansichten Ihres Blogs, Portfolios oder Shops beim Hovern zu Schwarz-Weiss-Bildern.
Ein Hack, der vor allem bei hochformatigen Logos interessant sein kann und der einen Trick aus der Praxis von Dr. Code ergänzt: Das überlappende Logo, welches beim Scrollen automatisch schrumpft. Ganz einfach zu machen, mit ein wenig CSS-Code.
Das Menü-Modul des Divi-Themes lässt sich links oder zentriert ausrichten – jedoch nicht rechtsbündig darstellen. Wenigstens nicht mit den Layout-Einstellungen, welche innerhalb des Moduls möglich sind. Mit ein wenig CSS klappt's dann aber gleichwohl.
Der Mauszeiger kann auf unterschiedlichste Arten dargestellt werden. Zumeist erkennen Webbrowser die gerade benötigte Darstellung von alleine. Wenn Sie nachhelfen müssen – oder eine andere Darstellung erzwingen wollen, – bedarf es eines Eingriffs. Immerhin ist das sehr einfach.
Kennen Sie das? Sie bearbeiten einen bestehenden Beitrag im Visual-Builder des Divi-Themes. Und jedes mal, wenn Sie den Cursor an eine neue Stelle setzen, poppt ein Styling-Menu auf. Das kann nerven. Aber man kann's auch deaktivieren.
Lange Wörter – besonders in Überschriften und Titeln – können dazu führen, dass in der Mobilansicht unschöne Umbrüche entstehen. Mit ein wenig CSS-Code eliminieren Sie dies.
Heute wenden wir uns einem Fall zu, der vor allem bei hochformatigen Website-Logos auftritt: Es wird im Standard-Header des Divi-Themes entweder sehr klein dargestellt oder dann in einem riesigen Header. Es gibt aber eine Lösung, die wir Ihnen heute zeigen. Mit dieser ragt das Logo einfach ein Stück weit über den Header hinaus.
Keine Inhalte gefunden.
Werbung
