24. Oktober 2023
Multilevel-CSS-only-Dropdown-Navigation
Mit folgendem Stylesheet lässt sich eine Navigation mit mehreren Unterebenen darstellen, die sehr gut an das eigene Design adaptierbar ist: Der dazugehörige HTML-Code besteht aus einer einfachen verschachtelten Liste: Hier gehts zur Demo: Multilevel CSS-Navigation Die mobile Darstellung der Navigation stelle ich meistens in einem separatem div dar. Dazu lade ich das Menü mit jQuery […]
17. Oktober 2023
4 weitere Ideen, wie du ChatGPT im Agentur-Alltag einsetzen kannst.
Es ist immer wieder beeindruckend, was ChatGPT alles kann. Produkttexte, Briefe und Songtexte formulieren, Geschichten schreiben und Hausaufgaben erledigen. Viele dieser Einsatzbereiche sind absolut beeindruckend aber in der (Agentur-)Praxis nicht gerade hilfreich. Im Folgenden habe ich 4 weitere Einsatzmöglichkeiten zusammengestellt, die in der Praxis tatsächlich hilfreich sind:
17. Oktober 2023
Farbpaletten – praktisches Hilfsmittel und Inspirationsquelle
Bei der Entwicklung eines (Screen-)Designs, müssen viele Entscheidungen getroffen werden. Layout, Raster, Schriften, Größen uvm… Wenn die Farben nicht vom Kunden oder vom Projekt vorgegeben sind, lohnt es sich, mal einen Blick auf fertige Farbpaletten zu werfen. So erhältst du auf einen Blick Farbvorschläge, dazu passende Farben und einen ersten Eindruck, wie die Farben zusammen […]
16. Oktober 2023
Eigene Farben im Gutenberg-Editor definieren / Span-Styles in WordPress
Wie man Blöcken im Gutenberg-Editor eigene Klassen zuweisen kann, hatte ich hier schon mal beschrieben. Hierbei wird die Klasse jedoch immer auf den gesamten Block angewendet. Will man eine Klasse jedoch nur auf einzelne Wörter anwenden, z.B. um sie in einer anderen Farbe darzustellen, muss man einen anderen Weg gehen. Markiere das gewünschte Wort und […]
15. Oktober 2023
Einfaches Google Maps Opt-in
Mit folgendem Snippet kannst du ein einfaches Google Maps Opt-in umsetzen. Der User muss der Nutzung von Google Maps aktiv zustimmen. Daten werden erst an Google übertragen, wenn er auf den Button geklickt hat. Zum Aktivieren der eingebetteten Karte bitte auf den Button klicken. Durch das Aktivieren werden Daten an Google übermittelt. Karte anzeigen
14. Oktober 2023
Website vorlesen lassen / Text2Speech für barrierefreie/-arme Websites
Um Barrierefreiheit oder -armut auf Websites umzusetzen, ist häufig auch eine Vorlesefunktion erforderlich. Mit Hilfe des jQuery-Plug-ins „articulate.js“ kann man das „Speech Synthesis Interface“ der Web Speech API des Browsers nutzen. Da „articulate.js“ standardmäßig kein UI bereitstellt, habe ich folgendes Script geschrieben, das einen „Vorlese-Button“ auf der Website einfügt: Der Button ist so gestaltet, dass […]
13. Oktober 2023
Reihenfolge der Spalten im Gutenberg-Editor mobil ändern.
Ein häufig verwendeter Design-Aufbau im Web ist: „Text links, Bild rechts“. Dieser Aufbau lässt sich auch im Gutenberg-Editor in WordPress sehr leicht umsetzen. Das Problem hierbei ist, dass das Bild in der mobilen Ansicht, standardmäßig unter dem Text ist. Mit folgendem CSS lässt sich die Reihenfolge der Spalten ändern: Die Klasse muss anschließend nur noch […]
13. Oktober 2023
Serverpfad einer Datei in WordPress
Wenn du, z.B. mit Hilfe von LazyBlocks, in WordPress Downloads zur Verfügung stellst, wird der Pfad zur Datei als URL ausgegeben. Um den Dateityp oder die Dateigröße mit PHP zu bestimmen, wird allerdings der absolute Serverpfad benötigt. Also z.B. statt: Mit folgendem Code kannst du den Serverpfad einer Datei in WordPress ermitteln und den Dateityp […]
11. Oktober 2023
Test-PDF
Hier ist ein Test-PDF, das als Platzhalter für PDF-Downloads auf Websites dienen kann.
9. Oktober 2023
Responsive Text
Im responsive Webdesign wird wird die Schriftgröße in der Regel durch Breakpoints und Mediaqueries angepasst. Z.B. auf kleinen Bildschirmen 14px und auf großen Bildschirmen 22px. Das funktioniert in den meisten Layouts auch sehr gut. Manchmal soll eine Headline aber auch stufenlos skaliert werden. Z.B. wenn sie, wie in diesem Beispiel, genau so breit sein soll, […]