Einstieg in Layouts: die Backdrop-Startseite

Ausgangspunkt dieser Beitragsreihe zum Thema »Backdrop CMS und Layouts« war eine Frage, die wir neulich in der Redaktionsrunde dieses Blogs diskutierten: »Wie erstelle ich mit Backdrop einen guten One-Pager?« Besonders naheliegend erschien uns die Nutzung des Layout-Systems. Layouts alleine würden zwar vermutlich nicht ausreichen, aber so genau konnten wir das gar nicht sagen. Versuchen wir es also!

Das Szenario: Ausgestattet mit Grundkenntnissen in Drupal oder Backdrop CMS bauen wir die Website der fiktiven Buchhandlung ABC. Das erste Ziel lautet: Setze eine aus mehreren Bereichen bestehende Startseite mit den Mitteln um, die ein frisch installiertes Backdrop mitbringt. (Wie sich die Möglichkeiten mit Zusatzmodulen erweitern lassen, sehen wir uns später an.) Die Seite soll untereinander mehrere Elemente enthalten, die häufig auf Startseiten und Landingpages vertreten sind:

1. Seitenkopf mit einer horizontalen Navigationsleiste
2. Hero image
3. Teaser
4. Projektbeispiele (automatisch angezeigt)
5. Call-To-Action-Element
6. News-Bereich
7. Fußbereich mit Links und Kontakt-Informationen

Dabei soll es zunächst nicht auf das Design ankommen; ich beschränke mich bewusst auf das Layout bzw. die Anordnung der oben genannten Elemente. (Zu den Unterschieden zwischen Layout und Design vgl. Webdesign mit Backdrop.)

Nach der Backdrop-Installation sieht die Startseite in etwa aus wie im folgenden Bildschirmfoto:

Mit horizontaler Navigationsleiste, Hero Image, einem »First post« (für den News-Bereich?) und einer Art Fußzeile sind einige der gewünschten Elemente bereits vorhanden. Andere Elemente wie den Login-Link benötigen wir nicht. Anreißertext, Projektbeispiele und Call-To-Action fehlen dagegen noch.

1. Erste Schritte / Navigationsleiste

Wie eingangs erwähnt, wollten wir in erster Linie mit dem Layout-System arbeiten. In einer frischen Backdrop-Installation sind bereits mehrere Layouts vorhanden, die jeweils für bestimmte Seiten zuständig sind, so etwa das Home-Layout für die Startseite. Eine Liste der Layouts ist auf der Seite Verwaltung > Struktur > Layouts zu finden:

Ein Klick auf Blöcke verwalten bringt mich auf eine Seite, auf der die Startseiten-Elemente schematisiert dargestellt werden. Jedes Element ist ein konfigurierbarer Block.

Den Login-Link entferne ich durch Konfiguration des Header-Block, in dem ich das Account-Menü deaktiviere. Bei der Gelegenheit entferne ich außerdem Website-Name und -Slogan, so dass im Kopfbereich nur das horizontale Menü übrig bleibt. Damit ist das erste Element, der Seitenkopf mit einer Navigationsleiste, grundsätzlich fertiggestellt.

2. Hero Image

Auch das Hero Image ist bereits in Form eines sogenannten 'Hero block' vorhanden und braucht nur geringfügig angepasst zu werden. Der Weg dahin geht wieder über Verwaltung > Struktur > Layouts – oder direkt über die Startseite, und zwar durch Nutzung eines Kontext-Links, der beim Hovern über das große Bild sichtbar wird (siehe Abbildung unten).

In der Block-Konfiguration ersetze das Hintergrund-Bild mit einem Foto, das zur fiktiven Buchhandlung passt. Den Text passe ich so an, dass der aus dem Kopfbereich entfernte Name und der Slogan im Hero Image angezeigt werden. Dabei stellt sich heraus, dass die Textfarbe nicht gut zum Foto passt. Leider lässt sich die Textfarbe hier nicht ohne Weiteres anpassen. Als Workaround ändere ich die Position des Textes, um den Rest kümmere ich mich lieber später.

3. Teaser

Für den Bereich mit Teaser nutze ich kein vorhandenes Element. Stattdessen füge ich dem Layout einen 'Custom block' hinzu, das ist ein einfacher Block mit benutzerdefiniertem Text. Dazu gehe ich zu Verwaltung > Struktur > Layouts > Home page, klicke im Content-Bereich auf Block hinzufügen > Custom block und füge Titel sowie Block-Inhalt hinzu. Aus aktuellem Anlass geht es in dem Anreißer um die Öffnungszeiten, deshalb erstelle ich einen Link auf die (zuvor erstellte) Kontaktseite. Zuguterletzt ergänze ich ein Foto, das ich über den Bild-Dialog des Text-Editors hochgeladen habe.

4. Projektbeispiele: Buchtipps

Als nächste Anforderung war im Szenario eine kleine Liste automatisch angezeigter Projektbeispiele genannt. Für eine Buchhandlung passen an diese Stelle gut aktuelle Buchtipps. Dazu könnte ich einfach drei 'Posts' schreiben, doch selbst erstellte Inhaltstypen bieten mehr Flexibilität. Deshalb entscheide ich mich dafür, einen eigenen Inhaltstyp namens »Buchtipp« anzulegen, der u.a. die spezifischen Felder »Cover« und »Bestell-Link« enthält. Gesagt, getan. Ich schreibe drei aktuelle Buchtipps, definiere die Ausgabe der Beiträge mit Hilfe einer Views-Datenbankabfrage im Format »Raster« und füge diese Ansicht als Block zum Layout hinzu. Sehr schön ist das Ergebnis nicht, doch das Layout stimmt:

Wie oben in der Abbildung zu sehen ist, werden die Buchbeiträge ein zweites Mal unterhalb des eigentlichen Buchtipp-Bereichs angezeigt. Das liegt am mitgelieferten Block »Promoted Content«, der einfach alle Inhalte angezeigt, bei denen die Option »Auf der Startseite« aktiviert ist. Daher entferne ich den Promoted-Content-Block aus dem Layout; damit verschwindet auch der nicht benötigte Beitrag »Your first post« von der Startseite.

5. Call-to-Action: Newsletter

Mit Hilfe eines Call-to-Action-Elements (CTA) möchte ich die Website-BesucherInnen dazu animieren, die Buchtipps als Newsletter zu abonnieren. Dazu eignen sich sowohl ein 'Custom block' (siehe oben Abschnitt 3) als auch ein 'Hero block' (Abschnitt 2). Ich entscheide mich für letzteres. Da der 'Hero' diesmal im Content-Bereich positioniert ist, wird er nicht über die gesamte Seitenbreite angezeigt. Die Breite passt an dieser Stelle gut. Weniger gut passt der fehlende Abstand zu den Buchtipps darüber, doch dieses Problem lässt sich erst einmal nicht ohne Weiteres beheben.

6. News

Auch für den News-Bereich gilt: selbst erstellte Inhaltstypen bieten die benötigte Flexibilität. Im Unterschied zu den Buchtipps (Abschnitt 4) brauche ich hier kein Bild, dafür sollen vier statt drei Beiträge gezeigt werden. Ich lege wieder einen eigenen Inhaltstyp an, schreibe ein paar aktuelle Beiträge, definiere die Ausgabe mit Hilfe einer Views-Abfrage und füge die Ansicht als Block zum Layout hinzu.

7. Fußbereich

Im 'Footer' sollen Links und Kontaktdaten angezeigt werden. Dazu platziere ich in diesem Layout-Bereich einen Block mit dem Hauptmenü (Primary navigation) und einen 'Custom block' mit Kontaktdaten. Bei Betrachtung der Kontaktdaten fällt negativ auf, dass im Basis-Theme die Zeilenhöhe innerhalb des Fußbereichs sehr hoch eingestellt ist. Um dennoch – zumindest andeutungsweise – eine Footer-typische Darstellung zu erreichen, werfe ich einen Blick in die Einstellungen des Themes. Dort kann ich immerhin eine dunklere Hintergrundfarbe für den Fußbereich festlegen. Bei der Gelegenheit wähle ich die gleiche Farbe für den Kopfbereich, und dabei belasse ich es für heute.

Das vorläufige Ergebnis

Zwischenfazit

Das Layout für eine mehr oder weniger typische Startseite zu erstellen und mit Inhalten zu füllen, war recht einfach. Das Ergebnis ist ein guter Anfang und bietet natürlich Spielraum für Verbesserungen. So konnte (und wollte) ich im ersten Anlauf kein ausgefeiltes Design verwirklichen. Auch kleinere Darstellungsprobleme lassen sich in einer frischen Backdrop-Installation nicht ganz vermeiden. Zur Behebung gibt es aber Zusatzmodule oder eigene Themes – mehr dazu bald im nächsten Beitrag dieser Reihe. Später werden wir auch auf die Frage eingehen, ob die Datenarchitektur sich noch verbessern lässt, zum Beispiel zur Erleichterung der redaktionellen Handhabung.

Weitere Beiträge in dieser Reihe

• Teil II: Theme-Auswahl und Custom-CSS
• Teil III: Finetuning mit Inhaltsblöcken