Scripts
Hier sind Scripts (PHP, JavaScripts, jQuery usw.) erklärt. Viele der vorgestellten Snippets funktionieren auch ausserhalb von WordPress.
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».
Der heutige Tipp ist gleichsam ein kleines Weihnachtsgeschenk an die Besucherinnen und Besucher der Dr. Code-Praxis: Wir bauen eine Divi-Seite, auf welcher Sie mit dem Mausrad punktgenau von Sektion zu Sektion scrollen können.
Das Button-Modul des Divi-Themes bietet die Möglichkeit, neben der Tastenbeschriftung ein Icon anzuzeigen. Dabei kommt jeweils ein Symbolbild aus dem Portfolio der Divi-Icons zum Zug. Doch dieses lässt sich auch mit einem Font-Awesome-Icon ersetzen. Heute zeigen wir Ihnen, ie das geht.
Heute wagen wir uns an einen der cooleren Tricks aus der Praxis von Dr. Code: Wir bauen einen Schalter, mit dem sich zwischen zwei Modulen (oder Zeilen) hin und her schalten lässt. Egal ob ein Bild-, Formular- oder Textmodul (oder ganz was anderes) und jede beliebige Mischung daraus.
Das Blurb-Modul des Divi-Themes – zu deutsch mit dem sperrigen Titel «Informationstext-Modul» – ist eine gute Möglichkeit, einen Inhalt mit einem kurzen Text und einem passenden Bild anzuteasen. Die Gestaltungsmöglichkeiten sind zwar etwas beschränkt, sie lassen sich aber leicht erweitern. Beispielsweise lässt sich der Blurb-Titel oberhalb des verwendeten Bildes anzeigen.
Internetbrowser aller Couleur erlauben seit etlichen Jahren, mehrere Tabs, auf welchen Websites zeitweilig im Hintergrund aktiv gehalten werden können. Deren Tab lässt sich auf einfache Weise animieren. Damit gewinnt Ihr Webcontent Aufmerksamkeit in der ansonsten statischen Umgebung.
Das Kontaktformular-Modul des Divi-Themes zeigt die Namen der einzelnen Felder innerhalb des jeweiliegn Eingabefelds an. Nachteil: Beim ersten eingegebenen Zeichen verschwindet der Feldname. Das muss nicht sein - der Feldname lässt sich nämlich elegant verschieben. Ist gar nicht schwierig.
Häufig verwenden Plugins oder Hacks den Standardbutton, wie er ihn HTML üblich ist. Doch das können Sie ändern und stattdessen den hübschen Divi-Button anzeigen lassen.
Das Divi-Theme enthält ein Kontaktformular-Modul, welches für einfache Formulare ganz praktisch ist. Es fehlt ihm aber beispielsweise bereits die übliche Option, Pflichtfelder des Formulars mit einem Asterisk oder Stern * anzuzeigen – so wie dies in anderen Formulartools völlig normal ist. Dies können Sie mit einem einfachen Script nachrüsten.
Vor allem bei einfarbigen Websites mit fixiertem Header kann das Scrollen der Anzeige dazu führen, dass der Inhalt plötzlich hinter der Navigation verschwindet. Mir gefällt das nicht sonderlich. Bei einigen meiner realisierten Webprojekte setze ich darum eine Trennlinie, welche den Header vom Content abtrennt – gerne auch eine Linie, welche erst beim Scrollen erscheint. Das ist gar nicht mal so schwierig umzusetzen.
Mit dem Menü-Modul des Divi-Themes können Sie auch ganz einfach einen Farbwechsel des Navigationshintergrunds auslösen. Etwa nach einer bestimmten Scrollhöhe. Wie simpel das ist, zwigen wir Ihnen hier.
Wenn Sie den Standard-Header verwenden, der mit dem Divi-Theme installiert wird, kann es Ihnen ein Bedürfnis sein, diesen nicht von Beginn weg anzuzeigen. Den Seitenkopf zunächst (und bis zum Scrollen) zu verbergen, geht mit ein wenig Code.
Das Blog-Modul des Divi-Themes kommt standardmässig im Masonry-Look daher. Das bedeutet, dass die Höhe des Blog-Gitters je nach Teaserlänge stark variieren kann. Diese Höhenunterschiede lassen sich jedoch mit JavaScript und ein wenig CSS-Code ausgleichen.
Werbung
