Problem

Um eine neue Seite zu erzeugen, kann man im Administrationsbereich auf den Button «Hinzufügen» klicken. Im Fenster, das anschliessend erscheint, steht bei der Wahl des Seiten-Templates die Option «Modular» zur Verfügung.

Das Konzept und der Nutzen modularer Seiten erschliesst sich einem nicht sofort. Durchschaut man nach kurzer Einarbeitungszeit das Prinzip jedoch, ist es sehr einfach, damit zu arbeiten. Auf den Mehrwert, den man gegenüber «normalen» Seiten erreicht, will man bald nicht mehr verzichten.

Oft wird das Konzept der modularen Seiten zur Herstellung sogenannter «Onepager» oder «Single-Page-Websites» angewendet, Websites, auf der die Inhalte auf einer einzigen langen Seite angezeigt werden (GRAV-Quark-One-Pager). In diesem Artikel gehen wir aber darauf ein, wie modulare Seiten zum Aufbau einer «klassischen» Website eingesetzt werden können, die über ein Menü und mehrere Unterseiten verfügt (klassische GRAV-Quark-Seite).

Lösung

Schritt für Schritt zur modularen Webseite

1. In der Administrationsumgebung auf «Seiten» (Pages) wechseln
2. «Hinzufügen» (Add) klicken
   
3. Seite benennen: Oberbegriff -> ergibt gleichzeitig Menüpunkt, z.B. «Projekte», «Angebot», «Team», «Geschichte», «Über uns» usw.
4. Seiten-Template (Page Template) «Modular» wählen
5. Auf «Weiter» (Continue) klicken
   
6. Speichern (Save)
   
   
   Beobachtungshalt 1
   • Das Zwischenergebnis bzw. die Webseite im Ansichts-Modus betrachten:
     -> Zur neu hinzugefügten Seite erscheint ein neuer Menüpunkt
     
   • Auf den neuen Menüpunkt klicken:
     -> Eine leere Seite ohne bereits vorhandene Menüpunkte wird angezeigt
     
     
     Im nächsten Schritt soll bewirkt werden, dass beim Klick auf den «neuen» Menüpunkt das vollständige Menü angezeigt wird
7. Zurück in die Administrationsumgebung wechseln und die neue hinzugefügte (leere) Seite im Eingabemodus öffnen – übrigens: diese Seite bleibt leer!
8. In die «Expertenansicht» (Expert) wechseln
   
9. Im «Frontmatter» gleich unterhalb von title: Seitenname onpage_menu: false eingeben
   
   
10. Speichern (Save)
    
    Beobachtungshalt 2
    • Das Zwischenergebnis bzw. die Webseite im Ansichts-Modus betrachten:
      -> Wie gehabt erscheint zur neu hinzugefügten Seite ein neuer Menüpunkt
    • Auf den neuen Menüpunkt klicken:
      -> Eine leere Seite und das vollständige Menü werden angezeigt
      
      
      In den nächsten Schritten werden Unterseiten und damit Inhalt hinzugefügt
11. Zurück in die Administrationsumgebung wechseln und die neue hinzugefügte (leere) Seite im Eingabemodus öffnen
12. Von der «Expertenansicht» wieder in die normale Ansicht wechseln
13. Auf den Pfeil neben dem Button «Hinzufügen» (Add) klicken
14. «Modul hinzufügen» (Add Module) auswählen
    
15. Unterseite benennen: z.B. Text 1 (Die vorher hinzugefügte modulare Seite sollte automatisch als Parent-(«Eltern»-)Seite angegeben werden)
16. Module Template «Text» auswählen
17. Auf «Weiter» (Continue) klicken
    
18. Eine neue Seite wird im Eingabemodus geöffnet
19. Auf «Speichern» (Save) klicken
20. Die Seite mit Mustertext befüllen:
    Kopiervorlage
    ### Grosse Überschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
21. Speichern
    
    
    Beobachtungshalt 3
    • Das Zwischenergebnis bzw. die Webseite im Ansichts-Modus betrachten:
      -> Wie gehabt erscheint zur früher hinzugefügten Seite ein Menüpunkt
    • Auf den neuen Menüpunkt klicken:
      -> Die Seite mit dem einspaltigen Mustertext wird angezeigt
      
      
      
22. Zurück in die Administrationsumgebung wechseln und die Unterseite «Text 1» im Eingabemodus öffnen
23. Auf die Registerkarte «Erweitert» klicken
24. «Numerischer Ordnerprefix» auf «Aktiviert» stellen -> Speichern
    
25. Die Schritte von Punkt 10 bis und mit 20 wiederholen -> Seitenname: Text mit Bild rechts
26. Diesmal in das Feld unterhalb von «Page Media (first one will be displayed next to your content)» ein Bild einfügen
    
    
27. Speichern
28. «Image Position» auf «Right» stellen
    
29. Speichern
30. Auf die Registerkarte «Erweitert» klicken
31. «Numerischer Ordnerprefix» auf «Aktiviert» stellen -> Speichern
32. Auf die Registerkarte «Inhalt» klicken
    
    Beobachtungshalt 4
    • Das Zwischenergebnis bzw. die Webseite im Ansichts-Modus betrachten:
      -> Wie gehabt erscheint zur früher hinzugefügten Seite ein Menüpunkt
    • Auf den neuen Menüpunkt klicken:
      -> Die Seite mit dem einspaltigen Mustertext wird angezeigt, darunter werden der Mustertext und das Bild zweispaltig abgebildet
      
      
      
33. Weitere Unterseiten können hinzugefügt werden, weitere modulare Seiten mit Unterseiten können erzeugt werden.

Fazit/Schlussbetrachtungen

• Eine modulare Seite besteht aus einer Oberseite (Parent-Seite), die mit dem Template «Modular» gebildet wird und die die eigentliche Unterlage für die Module bildet, und den Unterseiten, Modulen (Child), die auf der Parent-Seite aneinandergereiht werden.
• Die Module können nummeriert. Damit lässt sich ihre Reihenfolge anpassen.
• Eigenschaften des modularen Seiten-Templates «Text»:
  
  • Wird ausschliesslich Text eingegeben, nimmt dieser die ganze Seitenbreite ein.
  • Werden zum Text zusätzlich Bilder hochgeladen, wird die Darstellung automatisch zweispaltig und «responsiv» (auf kleinen Displays einspaltig). Was links und rechts zu stehen kommt, kann eingestellt werden.
    Angezeigt wird jenes Bild, das in der Liste der Seitenmedien an erster Stelle steht.
  • Zum Layout: Der grosse Abstand zwischen den einzelnen Modul-Blöcken fällt auf und stört. Dieser Abstand lässt sich selbstverständlich anpassen bzw. verkleinern. Die nötigen Anpassungen können an zwei Orten vorgenommen werden:
    
    a) am CSS ( custom.css)
    b) am modularen Template «Text» bzw. an einer Kopie davon -> Zur Schritt-für-Schritt-Anleitung
    
    Beide Varianten setzen voraus, dass auf den Webserver zugegriffen wird.