HTML
Hier finden Sie eine Reihe von HTML-Tricks, welche auch ausserhalb von WordPress hervorragend funktionieren.
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».
Kennen Sie den progress-Tag in HTML? Oder den meter-Tag? Die beiden haben es in sich, werden aber irgendwo zwischen selten und kaum genutzt. Zeit, die beiden Tags einmal genauer anzusehen. Mit ihnen lassen sich nämlich höchst einfach Fortschrittsbalken und/oder Balkendiagramme erstellen.
Der Browser kann Webseiten als Vollbild-Variante darstellen. Bei dieser wird eine Webseite auf die ganze Bildschirmgrösse ausgedehnt. Dabei verschwinden Bedienelemente wie Titelleiste, Menüs und ebenfalls die Windows-Taskleiste unten. Normalerweise startet man diese Full-Screen-Anzeige mit der «F11»-Taste (auf Macs: Shift+Cmd+F) und kehrt mit derselben Taste (oder Kombination) wieder zurück. Doch das geht auch per Mausklick.
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.
Im Slider-Modul des Divi-Themes lässt sich ein Button – etwa für zusätzliche Information o.ä. – anzeigen. Ab und an bräuchte man aber womöglich einen zweiten oder dritten Button. Ein solcher lässt sich ganz einfach erstellen.
Wenn Sie das WPML-Plugin für Ihre übersetzten Websites benutzen, werden Sie ab und an Grenzen finden - vor allem, wenn Sie sprachangepasste Inhalte (Texte, Bilder usw.) in Ihren Templates verwenden. Um solche Templates ebenfalls mehrsprachig zu machen, bietet WPML einen praktischen String an, den Sie nutzen können. Wir stellen Ihnen diesen hier vor.
Wenn Sie eine neue Website aufbauen werden Sie zweifelsohne oft im CSS-Stylesheet unterwegs sein und Anpassungen vornehmen. Praktisch wäre es, wenn Sie da eine Übersichtsseite mit den gängigsten Darstellungen hätten. So sehen Sie am besten, wie die Stylings zusammenpassen. Ein solches Styling-Showcase ist mit unserem Baukasten-Code schnell erstellt.
Das Divi-Theme kommt mit einem eigenen Icon-Font daher. Meist wird der sauber angezeigt - es gibt aber ab und an Pannen. Wenn Sie sicherstellen möchten, dass der Divi-Icon-Font in jedem Fall angezeigt wird, sollten Sie den Font in Ihre Website einbinden. Es ist ganz einfach.
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.
Den Mobilversionen der Browser lässt sich - vornehmlich unter Android - Farbe geben. Statt in eintönigem Hellgrau erscheint der Mobilbrowser beim Seitenaufruf in Farbe. Ist ganz einfach zu machen und wir zeigen Ihnen wie.
Font Awesome hat einige Icons im Portfolio, welche sich perfekt für eine simple Animation eignen und sich hernach um die eigene Achse drehen oder pulsieren. Das ist denkbar einfach umzusetzen - wir zeigen Ihnen wie.
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.
Wie lange dauert es eigentlich noch bis zum Jahreswechsel? Mit einem Countdown, bestehend aus ein klein wenig JavaScript-Code, verpassen Sie den Jahreswechsel ganz bestimmt nimmer. Wir zeigen Ihnen, wie's geht.
Keine Inhalte gefunden.
Werbung
