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».
Zugegeben: Der heutige Hack ist eine Spielerei. Und gleich vorneweg: Er lässt sich mit beliebigen Elementen – also auch mit Texten u.ä. – bewerkstelligen. Aber am sinnvollsten (wenn sich denn überhaupt was drehen soll) sind schon Bilder. Wir zeigen Ihnen heute, was Sache ist.
Wichtige Textpassagen können Sie augenfällig unterstreichen – mit einer kleinen Grafik, die dann exakt unter den hervorzuhebenden Text platziert wird. Wie das geht, zeigen wir in diesem Trick aus der Dr.-Code-Praxis.
Tool-Tipps sind kleine Erklärungstexte, welche beim Hovern z.B. über einen Text angezeigt werden. Die Tool-Tipps erscheinen meist in langweiligem grau-in-grau. Doch das muss nicht sein. Richtig coole Tool-Tipps sind nämlich im Handumdrehen möglich.
Responsive-Webdesign ist fraglos wichtig. Doch bei Bildern ist das nicht ganz ohne. Dabei können Sie auch mit einfachem HTML Bildversionen anzeigen lassen, die zur Desktop- oder Mobilversion passen. Der picture-Tag hilft Ihnen dabei.
Der Mauszeiger kann auf unterschiedlichste Arten dargestellt werden. Zumeist erkennen Webbrowser die gerade benötigte Darstellung von alleine. Wenn Sie nachhelfen müssen – oder eine andere Darstellung erzwingen wollen, – bedarf es eines Eingriffs. Immerhin ist das sehr einfach.
Offen gestanden: Wir haben uns lange überlegt, ob wir diesen Hack vorstellen wollen. Der Vollständigkeit halber tun wir es. Die Deaktivierung des Kontextmenüs – bzw. des Rechtsklicks – schränkt die User allerdings ein. Wir empfehlen darum, sparsam mit diesem Trick umzugehen.
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.
Keine Inhalte gefunden.
Werbung
