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».
Ein Bild können Sie auf Ihrer Divi-Website auch mit einem Button oder mit einem Textabschnitt überlagern. Das geht ganz einfach mit ein wenig CSS-Code.
Hin und wieder stellen Websites Prozesse dar. Schritt 1, Schritt 2, Schritt 3 usw. Solcherlei lässt sich mit dem Divi-Theme gut bewerkstelligen. Die Schritte lassen sich mit einem Pfeilsymbol verdeutlichen. Wir zeigen Ihnen wie das geht.
Mal eben mit dem Textmarker was markieren – das sollte man natürlich am Monitor nicht tun. Trotzdem zeigen wir Ihnen, wie Sie Text-Highlights hinzufügen können. Gleich fünf Varianten haben wir am Start.
Titeldarstellungen im Divi-Theme lassen sich hübsch gestalten. Heute zeigen wir Ihnen zwei Beispiele, wie Sie die Titelzeile mit einem Rahmen «auffüllen» können. Das ist ein echter Eyecatcher. Und ganz einfach zu machen.
Mit dem Testimonial-Modul des Divi-Themes lassen sich Zitate und KundInnen-Meinungen adrett darstellen. Allerdings gibt es einen kleinen - aber nicht unerheblichen - Bug: Rundet man die Ecken des Moduls ab, wird das Icon des Moduls abgeschnitten. Unser CSS-Code schafft Abhilfe.
Der Navigation Ihrer WordPress-Website lässt sich eine zweite Zeile mit zusätzlichem Text hinzufügen - Sie benötigen nur das Menümodul des Divi-Themes und ein paar Zeilen CSS-Code. Die zusätzliche Infozeile kann eine unterhaltsame und hilfreiche Methode sein, um Ihren Menülinks mehr Kontext zu geben. Sie können einen Aufruf hinzufügen, den Link erklären oder den Menüpunkt um eine clevere Phrase ergänzen. Ach ja: Einfach umzusetzen ist das ganze auch noch.
Heute zeigen wir Ihnen, wie Sie jede beliebige Section auf Ihrer Divi-Website in ein verstecktes Popup verwandeln können. Dieses wird wahlweise beim Laden der entsprechenden Seite direkt angezeigt - oder nach einem Klick auf eine Schaltfläche aktiviert. Dazu benötigen Sie keine Plugins - nur ein paar Zeilen CSS und etwas jQuery.
CSS-Variablen sind ein hervorragender Weg, um dereinst Anpassungen an Ihrer Website vorzunehmen. In einer Bibliothek definieren Sie Farbwerte, Fontgrössen, Abstände und vieles mehr. Bei den CSS-Klassen werden dann nicht mehr die Werte eingesetzt, sondern deren Name in der Library. Das zahlt sich vor allem dann aus, wenn sich dereinst irgend ein Wert ändern sollte.
Hin und wieder möchte man dass das Website-Logo das Navigationsmenü überragt. Weder mit dem Standardmenü des Divi-Themes noch mit dem Divi-Menümodul ist das über die Einstellungen möglich. Trotzdem funktioniert es: Für beide Navigationsarten benötigen Sie unterschiedlichen, aber einfachen CSS-Code.
Das Divi-Theme bietet von Haus aus eine stattliche Zahl Spaltendarstellungen an. Damit lässt sich schon ganz gut arbeiten – in einzelnen Fällen bräuchte man aber eine andere Aufteilung. Wie Sie dies schaffen, zeigen wir Ihnen in diesem Tipp.
Mit einem Button lassen sich Texte expandieren und wieder verstecken. Damit lassen sich Infos bereitstellen, ohne, dass die Website zur Bleiwüste wird. Try it.
Das Submenü im Divi-Theme lässt sich in den Design-Optionen des Menü-Moduls zwar stylen - so richtig anpassen können Sie die Submenüs aber bloss mit CSS. Die dafür nötigen Klassen haben wir in einem Bausatz zusammengestellt. Möge er Ihnen das Leben beim Webdesign erleichtern.
Keine Inhalte gefunden.
Werbung
