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 Divi-Menu wächst seitwärts, je mehr Inhalte angezeigt werden. Bisweilen kann das Menu dabei «überlaufen» – bzw. zweistöckig dargestellt werden. Dies lässt sich ändern, wenn auf einer Website das Menu von allem Anfang an auf der ganzen Seitenbreite dargestellt wird - und dies auch bei weniger Menupunkten.
Kennen Sie das? Da nennen Sie auf Ihrer Website eine harmlose Telefonnummer - und schwups, wird diese in zahlreichen Browsern übel verunstaltet. Einige Browser - ganz besonders solche von Mobilgeräten - erkennen nämlich Telefonnummern auf Websiten und markieren sie als anklickbaren Link, um einen Anruf zu erleichtern. Damit der eigentlich praktische Link aber nicht völlig am sonstigen Webdesign vorbeischiesst, empfiehlt es sich, den Telefonlink auf dem Radar zu haben. Ein Mini-Workshop von Dr. Code.
Vor einer Weile hat sich Dr. Code nach einem neuen Formularplugin umgesehen. «Back to the roots» war am Schluss die Devise. Denn zurückgekehrt sind wir zum Formular-Plugin, das wir ganz am Anfang unserer WordPress-Zeit genutzt haben: Zu Contact Form 7. Damit das auch anständig ausschaut, haben wir einen CSS-Bausatz angefertigt, der vielleicht auch Ihnen hilft.
Besonders wenn Sie ab und an selber an ihren Theme-Dateien oder am CSS-Stylesheet Hand anlegen, kann es nach einiger Zeit unübersichtlich werden: Was genau tut der Code in der functions.php? Welches Styling wird von Zeile 987 in meinem CSS-Stylesheet definiert? Es lohnt sich, eigene Programmierungen und Anweisungen laufend mit Kommentaren zu versehen. Für die spätere Übersicht (allenfalls sogar für die Fehlersuche durch Dritte) kann dieser Zusatzaufwand hilfreich sein.
Im Divi-Theme lassen sich die dargestellten Posts schön und einfach designen. Auch deren Titel, Meta-Tags und das Beitragsbild lassen sich vorzüglich gestalten und platzieren. Ungeachtet dessen will WordPress jedoch diese Infos standardmässig in jedem Beitrag noch einmal ganz oben hinstellen. Mit äusserst mageren Möglichkeiten, darauf Einfluss zu nehmen. Sie können das in jedem Einzelfall unterbinden - oder (mit ein wenig CSS-Code) ein für alle Mal auf der gesamten Website festlegen.
Das Internet ist bunt. Farben in allen Schattierungen - mal grell, mal pastell. Schwarz-weiss ist out. Falls die Website aber (aus welchem Grund auch immer) dauerhaft oder temporär in dezenten Grautönen dargestellt werden soll, hilft ein einfacher Code-Schnipsel.
Beiträge werden im Divi-Theme standardmässig mit einer Seitenleiste dargestellt. Ausserdem werden die Ränder eingerückt, was Platz verschwendet und überdies einer einheitlichen Darstellung nicht eben zuträglich ist. Zwar lässt sich dies in jedem Einzelfall händisch beheben - viel einfacher geht es aber mit einer Standardeinstellung, welche auf ein paar Zeilen CSS-Code basiert.
Ob jetzt die berühmt-berüchtigten Inline-Frames (iframes) sinnvoll oder eine Plage sind, darüber lässt sich freilich streiten. Zu Zeiten des Responsive Webdesigns stehen sie etwas quer in der Landschaft. Ab und an mögen Sie aber praktisch sein. Im Divi-Theme müssen Sie jedoch mit einem kleinen Code nachhelfen, damit das Inline-Frame auch Tablet- und Phone-tauglich wird.
Der Inhalt von Websites, welche mit dem Divi-Theme erstellt werden wird auf mobilen Geräten mit einer maximalen Breite von 80 Prozent der Anzeigenbreite dargestellt. Mit CSS-Code können Sie diesen Wert jedoch verändern.
Die weitest verbreitete Shoplösung auf WordPress-Websites ist WooCommerce. Dieser Webshop schmiegt sich hervorragend ins Divi-Theme ein - Divi seinerseits bietet seit einer Weile eigene Module, um WooCommerce besser darzustellen. Eine Knacknuss bleibt der Einkaufswagen. Dieser lässt sich hartnäckig nicht ausblenden - auch wenn noch nix drin ist. Oder doch??? Wir zeigen Ihnen wie.
Im Divi-Theme werden Module ohne Zutun vertikal am oberen Rand der Spalte dargestellt. Das passt meistens - doch bei mehrspaltigen Zeilen kann man sich dies auch mal anders wünschen. Mittiges Ausrichten oder Module, welche vertikal unten platziert werden, sind mit ein paar Zeilen CSS-Code ganz einfach möglich.
Im Divi-Theme wechselt die Navigation standardmässig bei 980px Bildschirmbreite auf das Hamburger-Menu. Das ist meist sinnvoll - aber nicht in jedem Fall. Sie können den so genannten «Breakpoint» darum ganz einfach selbst festlegen. Sie übersteuern damit den Divi-Standardwert und bestimmen, wann der Wechsel in der Navigation geschehen soll.
Keine Inhalte gefunden.
Werbung
