Content-Module

So geht’s:

  • Template: „Full Width“ auswählen (entfernt Standard-Abstände der Seite)
  • Editor: umstellen auf „Page Builder“
  • Aufbau des Inhalts in Reihen, in denen sich Widgets befinden

Reihen im Raster

Einstellungen im Page Builder
Steuerung des Verhaltens über Klassen

So geht's:

  • Zeile mit gewünschter Anzahl von Spalten einfügen
  • volle Breite mit einer einzigen Spalte:
    • Klasse der Zeile = row
    • Klassen der Zellen = small-12 large-10 xxlarge-8 centered column
  • Hintergrund: alwitra nutzt das Frontend-Framework Foundation (Version 6). Umfangreiche Hintergründe zum Raster gibt es in der Foundation-Dokumentation.
    • Raster-Stufen sind, bezogen auf die Breite des Viewports: small (ab 0), medium: (ab 640px), large (ab 1024px), xlarge (ab 1200px), xxlarge (ab 1440px), max (bis 1600px)
    • alwitra hat 12 Rasterspalten in einer Reihe
    • die Zahlen hinter den Klassennamen geben an, wie viele dieser Rasterspalten bei welcher Stufe ein Element haben soll
      • ein Element mit Klasse small-12 ist 12 Spalten breit
      • ein Element mit Klasse small-6 ist 6 Spalten breit = es passt also noch ein weiteres mit small-6 daneben, oder zwei mit small-3, oder sechs mit small-1
      • innerhalb einer Reihe sollten immer maximal 12 Spalten ausgelastet werden
      • ein Element mit Klasse large-10 ändert sein Verhalten ab einer Breite von 1024px = jetzt ist es nur noch zehn Spalten breit (bis zu dieser Viewport-Breite gilt die Einstellung von small)
      • Zeilen können mit der Klasse centered auch zentriert werden, wenn nicht alle Spalten gefüllt werden sollen
      • weitere Klassen lassen sich nach Bedarf analog aufbauen. Ein paar Beispiele wären: small-7, medium-9, xxlarge-11 = immer die Bezeichnung der Viewports-Stufe, dann ein Bindestrich, dann die Zahl der gewünschten Spalten
    • Klasse column oder columns muss angegeben werden
    • bei Auflösungen jenseits von 1600px wird das Layout im Browser zentriert
    • alwitra und Foundation sind mobile first = erst Einstellungen für die kleinen Viewports vornehmen, dann weitere Anpassungen für die größeren = man muss nicht alle Stufen angeben (außer small), sondern nur solche, wo sich etwas ändern soll
  • auf Wunsch sind unter „Layout“ weitere Einstellungen möglich (z.B. Entfernen des Abstands nach unten)

hellgraue Box

So geht's:

  • Klassen der Zeile = row box

mittelgraue Box

So geht's:

  • Klassen der Zeile = row middle-grey-box

Box mit Rahmen oben und unten

So geht's:

  • Klassen der Zeile = row borderbox

dunkelblaue Box

So geht's:

  • Klassen der Zeile = row bluebox

Tabs

So geht's:

  • Widget „Inked Tabs“ in eine Reihe einfügen
  • Theme auf „Underlined“ stellen, auf Wunsch weitere Layout-Optionen einstellen
  • gewünschte Zahl von Tabs über Schaltfläche „Add“ hinzufügen
  • Tab-Einträge lassen sich mit den Buttons rechts öffnen, kopieren oder löschen
  • ansonsten entspricht die Texteingabe dem gewohnten Verhalten
Screenshot des Interfaces
Tabs mit Inked Tabs anlegen

beliebiger Content hier

noch mehr beliebiger Content hier

Accordions

So geht's:

  • Widget „Inked Accordion“ in eine Reihe einfügen
  • unter „Styling“ die richtigen Icons für „Closed Toggle Icon“ und „Open Toggle Icon“ einstellen
    • closed: Ionicons-Set, einfacher Pfeil nach unten
    • open: Ionicons-Set, einfacher Pfeil nach oben
Icons alwitra Accordions
Auswahl der richtigen Icons bei den alwitra Accordions
  • unter „Styling“ die gewünschten Farbwerte einstellen
    • Title Background Color: #444444
    • Title Background Hover Color: #e3001a
    • Content Background Color: #e6e7e8
    • sonstige Farben: weiß, #ffffff
Styling der alwitra Accordions
Einstellungen für die Farben bei den alwitra Accordions
  • einzelne Accordion-Einträge können analog zum Vorgehen bei den Tabs (siehe oben) angelegt werden
Toggle 1

beliebiger Inhalt

Toggle 2

noch mehr beliebiger Inhalt

nach oben