Onepage Webseite mit Contao

Im folgenden Tutorial soll die Umsetzung einer Onepage Webseite mit Contao erklärt werden. Onepager sind beliebt – sie eignen sich nach meinem Empfinden insbesondere für kleinere Projekte, die nur wenig Content beinhalten (es sieht dann einfach nicht nach so wenig aus), können aber auch für größere Projekte eingesetzt werden.

Damit ein Onepager aber auch gut aussieht, sind m.E. zwei Elemente erforderlich: Die Seite muss smooth scrollen und bestenfalls den Bereich, der sich gerade im Blickfeld befindet, hervorheben. Ich habe das in Contao nun folgendermaßen umgesetzt:

  1. Zunächst legen wir ein neues Modul mit eigenem html-Code an. In dieses Modul kommt unsere Navigation – Contao selbst bietet leider keine (mir bekannte) Möglichkeit, mit den Core-Modulen einen Onepager zu realisieren, sodass wir hier selbst Hand anlegen.
  2. Die Navigation ist wie folgt aufgebaut:

    Die Klassen home, leistungen, about und kontakt habe ich in vorliegendem Beispiel verwendet, um jedem Button noch eine separate Hintergrundgrafik zuzuweisen; ansonsten ist das nicht unbedingt erforderlich.
  3. Als nächstes legen wir in der Seitenstruktur 4 Unterseiten für Home, Leistungen, About und Kontakt an. Die Seiten schalten wir offline.
  4. Wir wechseln nun zur Artikelansicht und notieren uns die Artikel-IDs der Artikel in den zuvor angelegten Seiten.
  5. Wir erstellen ein neues HTML-Modul, mit dem der Content „erzeugt“ wird. Die IDs geben wir in der gewünschen Reihenfolge ein:

    WICHTIG: Die Section-ID muss dabei jeweils den Verlinkungen (#home, #leistungen, …) in der Navigation entsprechen.
  6. Nun legen wir ein neues Seitenlayout an und nennen es z.B. Onepager. In die Kopfzeile binden wir unsere Modul „Navigation“ ein, in die Hauptspalte das Modul „Content“.
  7. Wir aktivieren im Seitenlayout jquery
  8. Als nächstes fügen wir bei „eigener Javascript Code“ im Seitenlayout folgenden Code ein:

    Dieses Script fügt unserer Navigation mit der css-Klasse .navbar die smooth scroll und highlighting Funktionalitäten hinzu. Im Script können diverse Variablen noch etwas angepasst werden: In Zeile 5 können wir die Erfassung des Sichtbereichs relativ zur .navbar verschieben, z.B. wenn der #header größer ist als die .navbar. In Zeile 17 kann außerdem die Dauer der Animation eingestellt werden sowie der Animationstyp. Wer mehr Auswahl möchte, sollte einen Blick auf die jquery easings werfen. Im Standard-jquery Paket, das mit Contao eingebunden wird, sind die easings nicht vorhanden.
  9. Jetzt geht es ans .css: Zunächst empfiehlt es sich, die Navigation zu fixieren, da ansonsten der highlighting-Effekt nicht sichtbar ist. Das könnte z.B. so aussehen:
  10. Durch das Skript bekommt der Link, dessen Inhalt gerade im Sichtbereich liegt, die css-Klasse .active zugewiesen. Dementsprechend müssen wir nun noch eine entsprechende Formatierung hinzufügen:
  11. Die .css Datei muss natürlich im Seitenlayout noch eingebunden werden. 😉 Die Onepage-Webseite mit Contao ist nun in ihren Grundzügen fertig. Ich habe für das von mir erstellte Projekt noch folgendes .css für die Navigation-Bar verwendet:

     

Ich hoffe, dieses kleine Tutorial ist hilfreich.

 

 

Jonathan

Jurist, Freizeit-Nerd, Webdesigner und Inhaber von jst-media.de

14 Gedanken zu „Onepage Webseite mit Contao

  1. Hey, super tut.! Habe wohl nur einen Fehler 🙁
    Wo genau erstelle ich das neue HTML-Modul????

    Wir erstellen ein neues HTML-Modul, mit dem der Content “erzeugt” wird. Die IDs geben wir in der gewünschen Reihenfolge ein:

    {{insert_article::1}}
    {{insert_article::2}}
    {{insert_article::3}}
    {{insert_article::4}}

    WICHTIG: Die Section-ID muss dabei jeweils den Verlinkungen (#home, #leistungen, …) in der Navigation entsprechen.

    1. Hi, ich weiß nicht, ob ich die Frage korrekt verstehe – die Module findest du ja unter „Themes“ -> Module, dort legst du ein neues Modul mit „Eigener HTML-Code“ an. Dort kommen dann die insert-tags für die jeweiligen Artikel rein.

  2. Erstmal vielen vielen Dank für das OnePage-Tutorial. Kannst du mir vielleicht einen Screenshot bezüglich der Seitenstruktur bzw. Artikelstruktur einstellen.
    Dankeschön schon mal im voraus.

  3. Klasse Anleitung. Habe es ähnlich gemacht, stehe nur vor einem Problem. Bei meinem Projekt (siehe „http://kaster-miniaturen.marco-kroener.de) wird der Header inkl. der Navigation erst beim Scrollen fest angedockt und auch kleiner. Dadurch springt man von den Navipunkten nicht gleichermaßen auf die Inhalte. In nicht gescrolltem Zustand springt man zu weit. Wie würdest du das lösen?

    1. Hey, gute Frage. 😉 So wie ich das sehe, hast du

      topMenuHeight = topMenu.outerHeight()+43

      ja auf die Größe im ungescrollten Zustand angepasst? Ich würde mich hier am gescrollten Zustand orientieren. Dann hast du zwar auch ungleiche Scroll-Abstände, es ist aber erstmal nix mehr abgeschnitten. Die Ungleichheit müsstest du dann mit margin-top für die Sprungpunkte ausgleichen können – dann ist das zwar noch immer unterschiedlich positioniert, aber zumindest im sichtbaren Bereich.
      Ist jetzt nur eine erste Idee, und ich habe das auch gerade nicht testen können. Vielleicht hilft aber ja der Denkansatz.

      Falls du ne Lösung hast, lass es mich wissen. 😉

  4. Hey,
    erst einmal viele Dank für den Post. Sehr gut verfasst!

    Falls Ihr die Geschwindigkeit des Easing nicht verändern könnt dann nutzt den Code (Zeile 11 – Zeile 18) so:

    menuItems.click(function(e){
    var href = $(this).attr(„href“),
    offsetTop = href === „#“ ? 1 : $(href).offset().top-topMenuHeight+1;
    $(‚html, body‘).stop().animate({
    scrollTop: offsetTop},
    1500, ’swing‘ );
    e.preventDefault();

    Bei der Animationsdauer 1500 die “ weglassen.

  5. Danke, deine Anleitung ist spitze. Ich stehe nur vor einem Problem, dass ich nicht begreife. Ich habe nachträglich noch Content eingefügt, nachdem die Module erstellt waren.
    Dann habe ich ihn richtig referenziert eingebunden, aber die Navi weigert sich zu dem neuen Punkt zu springen. Ich habe schon alles mögliche versucht.
    Hast du da vielleicht eine Idee zu? Ich verzweifle langsam

    1. Hi,

      also die Navigation funktioniert eigentlich über die section id, in der der jeweilige Artikel eingebunden wird, und den dort hin führenden Ankerlink andererseits. Wenn also die Navigation nicht geht, würde ich das Problem zunächst dort vermuten – also entweder ist der Artikel nicht einer section, oder der Ankerlink ist nicht korekt. Das is aber natürlich jetzt ins Blaue geraten, ohne die Seite gesehen zu haben.

      1. Danke, inzwischen habe ich es zufällig herausgefunden, wo der Fehler lag. Es funktioniert alles einwandfrei, wenn man nicht mit 12Grid von Contao arbeitet. Nachdem ich das deaktiviert und entsprechend umgebaut hatte, war alles bestens.
        Vielen Dank für die super Anleitung!

  6. Hallo
    wie kann ich es anstellen für jede section einen Hintergrund anlegen kann(also für jede Seite eigentlich) nicht nur für inside sondern über die ganze Breite! hab schon alles probiert.
    Danke im voraus schon mal.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.