Contao 3 Grundkurs

Mobiles Seitenlayout

Testen Sie unsere 1921 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Nachteil doppelter Navigation ist unnötiges HTML. Contao bietet die Möglichkeit, unterschiedliches HTML für mobile Geräte bzw. Desktops auszuliefern. Stellen Sie einfach ein zweites Seitenlayout zur Verfügung!
04:40

Transkript

Unsere Quicknavigation ist eine funktionierende Lösung. Sie hat aber auch einen Nachteil, nämlich unnötiges HTML. Es werden ja jeweils (inaudible) Navigationen ausgeliefert, sowohl für die Desktop-Variante, als auch für die mobilen Endgeräte und das belastet unnötigerweise das Netz. Es dauert außerdem auch länger bis die Seite geladen ist. Für den Fall also, dass von Vorne herein unterschiedliches HTML für die unterschiedlichen Endgeräte ausgeliefert werden soll, hat Contao auch eine Lösung und die schauen wir uns jetzt mal an. In der Seitenstruktur kann man für jede Seite ein mobiles Seitenlayout definieren. Das geht in den Layout-Einstellungen und hier haben wir Layout für mobile Seiten. Also legen wir ein solches Seitenlayout an. Wir gehen in Seitenlayouts. Jetzt duplizieren wir unsere deutsche Version. Legen die mit hier rein und nennen die screen mobile de Hier bleibt jetzt soweit alles gleich. Man könnte natürlich auch die Seitenbereiche umdefinieren, aber ich möchte mich jetzt mal auf die Module konzentrieren. Da schmeißen wir das Navigation Main raus. Ist entfernt. Und wir speichern das. Umgekehrt, entfernen wir jetzt die Quicknavigation aus dem bisherigen Stylesheet. Die haben wir hier. Jetzt zurück in die Seitenstruktur. Zum Startpunkt der Webseite und da tragen wir jetzt ein: Für Layout Zuweisungen nutze screen mobile de. Das speichern wir ab. Und wir gehen jetzt in die Stylesheets, wo wir ein Duplikat unserer Responsive anlegen. Der Name heißt diesmal mobile. Ist ein ganz normales Stylesheet. Speichern und Schließen. Jetzt gehen wir in die Seitenlayouts und schauen uns die Verknüpfung mit den Stylesheets an. Unsere Desktop-Version benötigt kein responsive. Speichern und Schließen. Und bei der Mobile stellen wir jetzt ein, dass mobile genutzt werden soll. Um unser mobiles Seitenlayout jetzt zu testen, brauchen wir einen Umschalter, denn mit Viewports können wir nichts mehr machen. Aber auch der Benutzer sollte ein solchen Umschalter bekommen, weil wir ja seine Vorlieben auch nicht kennen und weil wir auch nicht wissen, wie rum er das Gerät nun hält. Und deshalb werden wir jetzt einen solchen Umschalter einbauen. Das geht über die Module. Neues Modul. Titel ist: Toggle View. Und der Modultyp: Eigener HTML-Code. Geben Sie als Code ein: None div wieder schließen und dann können Sie das Ganze abspeichern. Das Modul legen wir jetzt in unsere Layouts. Das machen am Besten über Mehrere bearbeiten. Alle auswählen, Bearbeiten Da lassen wir uns den Titel anzeigen und die eingebundenen Module. Klick auf Weiter Und jetzt haben wir screen de. Wir legen das Modul in den Kopfbereich, hinterm Logo. Das machen wir überall. Und hier auch. Speichern und Schließen. Jetzt können wir uns die Sache im Front-End mal anschauen. Neu laden. Da haben wir hier jetzt den Switch zur Mobile-Version. Und wenn wir hier drauf klicken, dann sehen Sie, dass sich das Design ändert und jetzt unsere mobile Version erscheint. Wie Imme, haben wir jetzt auch hier ein bisschen Arbeit diesen Umschalter zu stylen, aber wir haben jetzt mit dieser Lösung unterschiedliches HTML, das heißt, es wird immer nur die erforderliche Navigation ausgeliefert. Nachdem ich den Umschalter nun auf diese Weise, mit den beiden Regeln, gestylt habe und den Slogan noch etwas runter gesetzt habe, sieht unsere Seite nun so aus, beziehungsweise so, und ist damit bereit für den mobilen Einsatz.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!