Layout Builder Basics

Layout Builder einrichten

Layoutbuilder ist seit Drupal 8.7 im Core und ist nach der Installation von Drupal bereits aktiviert.

• Prüfen, ob das Modul aktiviert ist: 
  Extend > Layout Discovery (Grundmodul) + Layout Builder (UI)
• Falls noch nicht vorhanden, Inhaltstyp auf den wir den Layout Builder anwenden wollen definieren. Für modestia erstellen wir «Standard Page»
  • Einstellungen bis auf die folgenden Punkte default lassen.
    • Author: Aus
    • Menu: Main navigation

Template einrichten

Template Builder Inhaltstyp zuweisen

• Structure > Content types > [Content type auswählen] > Manage display > Full content > Enable
  Danach können wir «Manage» Button anklicken
• Layout options
  • Use Layout Builder: Ein
  • Allow each content item to have its layout customized: Ein
  • Safe
    Danach können wir direkt über Manage Layout weiterarbeiten

Template für Inhatlstyp in Builder Layout erstellen

• Über den folgenden Pfad rufen wir die Template Bearbeitung für den Manage Builder auf
  Structure > Content types > [Content type wählen] > Manage display > [View type wählen] > Manage > Manage layout

Blöcke definieren

Innerhalb einer Section lassen sich Blöcke zusammenklicken. Diese Blöcke müssen wir als erstes definieren. Für Modestia brauchen wir Blöcke für folgende Elemente:

Modestia content blocks / elements

• per -- Lead (per_lead)
  One-column lead text, larger typography.
• per -- 2 columns flow (per_2_columns_flow)
  One continuous rich-text field; CSS flows the text into two columns on desktop.
• per -- 2 columns equal (per_2_colums_equal)
  Two independent equal-width content areas.
• per -- 2 columns aside (per_2_colums_aside)
  Two independent regions: narrow aside left, main content right.
• per -- Fullwidth image (per_fullwidth_image)
  Full-width image separator.

Seiteninhalte erstellen

Der Inhaltstyp Standard Page hat keine Felder, nur den aktivierten Layout Builder. Um Inhalte zu erfassen/bearbeiten die Seite aufrufen > oben rechts, neben EDIT über die 3 Punkte > Layout aufrufen.

Nun können wir Sections zufügen und darin Blöcke platzieren.