Contao Website für Kreuzbund-Verbände und Partner
Website ab 12/2022
Die Website der Kreuzbund Bundesgeschäftstelle www.kreuzbund.de erfuhr im Dezember 2022 ein umfassendes Update. Dieses Dokument stellt vor, wie Sie Ihre Website (die bereits auf der Kreuzbund-Website-Vorlage von 2015 basiert) an diese Neuerungen anpassen können, wenn Sie möchten.
Kein Problem: Update mit Bordmitteln
Vorab schon mal diese Informationen:
- Es wird kein neues Basis-Template benötigt
- Es werden keine neuen Lizenzen benötigt
- Sie müssen keine zusätzlichen Plugins/Module/Erweiterungen installieren
Statt dessen können die wesentlichen Updates ohne weiteres mit den Bordmitteln Ihres vorhandenen Contao-Systems + Template der Kreuzbund BGS nachvollzogen werden.
Die größeren Änderungen
... habe ich hier jeweils einzeln für Sie in "Häppchen" verpackt, so dass Sie sich gezielt das Gewünschte heraussuchen und bearbeiten können:
CSS-Änderungen
Erklärung: Die CSS-Datei steuert das Aussehen des Web-Auftritts.
Seit der Neuproduktion der Website 2015 haben sich nicht nur diverse Erweiterungen der CSS-Datei „style.css“ ergeben, sie wurde auch komplett neu geschrieben, um die darin enthaltenen Anweisungen in kompakterer, ein-zeiliger Form wiederzugeben.
Sie können diese neue Version übernehmen, müssen aber nicht.
Falls Sie selbst individuelle Änderungen in Ihrer CSS-Datei vorgenommen haben, und nun die aktuellere Version nutzen möchten, müssen Sie Ihre Änderungen in die aktuelle Version übernehmen. Ich empfehle, einen inhaltlichen Vergleich Ihrer CSS-Datei mit der CSS-Datei des Auslieferungszustands durchzuführen, und die Änderungen dann in die neue Datei einzupflegen.
Alternativ können Sie Ihre eigenen CSS-Anweisungen auch unabhängig in einer eigenen Datei pflegen.
Falls Sie keine Änderungen an der CSS-Datei vorgenommen haben, können Sie einfach die neue Datei 1:1 übernehmen.
Ob Sie Änderungen vorgenommen haben oder nicht: Die neue „style.css“ muss in den Webauftritt kopiert werden um wirksam zu werden. Dazu können Sie sie per FTP oder den Contao-Dateimanager in das Verzeichnis /files/kreuzbund/css kopieren. Die vorhandene Datei wird dabei ohne Rückfrage überschrieben – ich empfehle daher, zuvor eine Sicherungskopie anzulegen.
Hier finden Sie die aktuelle Version der style.css zum Download:
Startseite: Aufmacher („Hero“)
Die augenfälligste Neuerung ist der Einsatz eines in Webdesign-Sprache sogenannten „Heros“ auf der Startseite, also eines großen Aufmacher-Bildes. Dieser Hero enthält hier neben einer zentralen Botschaft auch konkrete Handlungsaufforderungen (engl. „Call to action“ oder kurz „CTA“), so dass man schnell und direkt zu den zentralen Hilfeangeboten gelangt.
Der CSS-Code, damit der Hero wie gewünscht angezeigt wird, lautet wie folgt:
Der Code ist i. d. aktuellen Version der CSS-Datei natürlich bereits enthalten.
/*** Hero: */
.hero .centered-wrapper.-viewport-height { min-height: calc(100vh - 6.1667rem) }
.hero .centered-wrapper-inner { width:960px; max-width:100%; margin: 0 auto; transform: translateY(45%) }
.hero a.button { white-space: nowrap }
.hero h1, .hero h2, .hero p { text-shadow: 0 0 5px rgba(0,0,0,.65); line-height: 1; text-transform: none; }
.hero h1 { font-size: 4.2rem; margin-bottom: 0 }
.hero h2 { font-size: 3rem; margin-top: .45rem }
.hero p { font-size: 1.45rem; font-weight: 600; line-height: 1.5 }
@media screen and (max-height: 785px) { .hero .centered-wrapper-inner { transform: translateY(20%) }}
@media screen and (max-height: 600px) { .hero .centered-wrapper-inner { transform: translateY(0) }}
/* Hero w/ random image instead bg image: */
.hero { position: relative; overflow: hidden; }
.hero .mod_randomImage { position: absolute; inset: 0 0 0 0 }
.hero .mod_randomImage img { width: 100vw; height: auto; }
.hero .mod_randomImage figure { position: absolute; inset: 0 0 0 0; }
.hero .mod_randomImage figure img { object-fit: cover; height: 100%; width: 100%; }
/**/
@media screen and (max-width: 899px) { /* SMALL */
.hero .centered-wrapper-inner { transform: none; }
.hero .button-box.-right, .button-box.-left { text-align: center; }
}
@media screen and (max-width: 599px) {
.hero h1 { font-size: 3rem; }
.hero h2 { font-size: 1.8rem; }
.hero p { font-size: 1.2rem; }
}Tatsächlich ermöglicht dieser CSS-Code den Einsatz eines Heros auf zwei verschiedene Arten:
1. Als einfaches Hintergrundbild, welches dem Element „Zentraler Bereich“ zugeordnet wird.
2. Als Zufallsbild (Modul „random image“ in Contao), das bei jedem Seitenaufruf bzw. jeder Seitenaktualisierung per Zufall ein Bild aus einem Pool hinterlegter Bilddateien aussucht.
Im folgenden beschreibe ich Schritt für Schritt, wie Sie in Ihrer bestehenden Kreuzbund-Website ein solches „Hero-Bild“ einsetzen können.
Los geht’s:
• Legen Sie einen neuen Artikel an. Es muss der erste/oberste Artikel auf ihrer Startseite sein. Geben Sie bei diesem Artikel folgende Daten an:
- Anzeigen in: Kopfzeile
- CSS-Klasse (nicht ID!): hero
Die folgenden Schritte unterscheiden sich dann, je nachdem ob Sie ein einfaches Hintergrundbild oder ein Zufallsbild verwenden möchten
Hero als einfaches Hintergrundbild
Legen Sie im soeben erstellten Artikel das erste Inhaltselement an:
• Elementtyp: Zentr. Bereich Anfang
• Mit folgenden Einstellungen:
- Hintergrundbild (dort Ihr gewünschtes Bild auswählen)
- Hintergrundbildgröße: Beschnitten
- Hintergrund wiederholen: Nicht wiederholen
- Textfarbe invertieren: CHECK
- Horizontal zentrieren: Zentriert
- Vertikal zentrieren: CHECK
- Mindesthöhe erzwingen: Fensterhöhe
- CSS Klasse "text-center"
Hero als Zufallsbild
Hier geht die Arbeit nicht im Artikel los, sondern in den Theme-Modulen:
• Neues Modul anlegen (Themes > Frontend-Module bearbeiten > Neu)
- Modultyp: Zufallsbild
- Quelldateien: Sollten nicht zu klein sein
- Mehr gibt es nicht zu tun
• Dann erst wieder zum Artikel wechseln , und im Artikel als erstes das soeben angelegte Modul einsetzen
• Dann neues Element „Zentrierter Bereich Anfang“ mit diesen Einstellungen:
- kein Hintergrundbild
- Horizontal zentrieren: Zentriert
- Vertikal zentrieren: CHECK
- Mindesthöhe erzwingen: Fensterhöhe
- CSS Klasse "text-center"
Dann geht es für beide Varianten wieder gemeinsam im Artikel weiter:
• Neues Element: Überschrift vom Typ „h1“
• Neues Element: Überschrift vom Typ „h2“
• Neues Element: Text
• Neues Element „Spaltenumschlag“ mit den Einstellungen:
- Desktop: 3, Tablet: 1, Mobile: 1
• Neues Element „Button“:
- Ausrichtung: Rechts
- Klasse: icon -gruppensuche -border
• Neues Element „Button“:
- Ausrichtung: Zentriert
- Klasse: icon -chat -border
• Neues Element „Button“:
- Ausrichtung: Links
- Klasse: icon -questions -border
• Neues Element „Spaltenumschlag (Umschlag Ende)“
• Neues Element „Zentrierter Bereich Ende“
Das war’s.
Sobald Sie den Artikel veröffentlichen, sollten Sie Ihren neuen „Hero“ auf der Startseite bewundern können.
Hier zeige ich noch einmal, wie der Artikel inhaltlich aufgebaut ist:
Sie können diesem Musteraufbau folgen, müssen aber natürlich nicht. Sie können auch ein eigenes „Hero“ bauen, indem Sie einfach mit dem Element „Zentrierter Hintergrund“ (+Hintergrundbild) und darin enthaltenen Inhaltselementen spielen, bis Ihnen das Ergebnis gefällt.
Möchten Sie die exakt gleichen Hero-Bilder verwenden, die auch in der Website kreuzbund.de zum Einsatz kommen, so müssten Sie diese Bilder selbst bei Adobe lizensieren. Dazu rufen Sie die Website stock.adobe.com/de auf und suchen nach diesen Bild-IDs: 220813226, 265651970, 432059349 und 252902225.
Startseite: Breites Layout
Die Startseite fühlt sich in der neuen Version eher wie eine moderne, thematisch aufgeteilte Landing-Page an, und holt die Besucher durch das Anreißen verschiedener Themen ab.
Zu diesem „Look & Feel“ trägt bei, dass das Layout der Inhaltselemente breiter ist als zuvor und die Bildschirmbreite voll nutzt. Das in ihrem bestehenden Auftritt nachzuvollziehen, ist sehr leicht:
- Diese Einstellung wird im Element „Zentrierter Bereich“ vorgenommen.
- Dort, im Bereich „Höhe und Ausrichtung“ stellen Sie den Wert „Horizontal zentrieren“ auf „Fullwidth mit Abstand“
- Das war’s schon. Führen Sie diese Änderungen bei allen betreffenden Elementen / Artikeln der Seiten durch, bei denen Sie das breitere Layout haben möchten.
Navigation: Breites Layout
Die Hauptnavigation geht in der aktuellen Version der Website über die komplette Breite des Browsers (bzw. „Viewports“). Diese Einstellung wird komplett in der CSS-Datei vorgenommen (also nicht aus dem Backend heraus).
Das heißt: Falls Sie die neue CSS-Datei übernehmen, müssen Sie nichts weiter tun
In der alten CSS-Datei wurde die Breite der Navigation durch folgenden Code begrenzt:
main-navigation-wrapper {
max-width: 1200px;
margin: 0 auto;
position: static;
}In der neuen Datei wurde dieser Code auskommentiert (Sie können den auskommentierten Bereich theoretisch auch löschen):
main-navigation-wrapper { box-shadow: 0 10px 10px rgba(0,0,0,.15); /*max-width: 1200px; margin: 0 auto; position: static;*/ }Dafür wurde die komplette Navigation mit einem nach unten laufenden Schatten versehen, um sie optisch besser gegen den Inhalt abzugrenzen.
Leider gibt es nach der Verbreiterung des Navigationslayouts noch das Problem, dass das Logo nun unmittelbar am linken Rand klebt. Um das zu beheben, gibt es zwei Lösungsansätze:
Lösung 1: In der BGS-Version der Website wurde einfach wie folgt vorgegangen:
1. Klicken Sie im Contao-Backend in der Hauptnavigation links auf „RockSolid Theme Assistant“
(falls dieser Punkt bei Ihnen nicht vorhanden ist, springen Sie zur Lösung 2 dieses Problems)
2. Tragen Sie im Feld „Abstand links“ den Wert „2.6666“ ein und wählen Sie die Einheit „em“.
3. Speichern – Fertig.
Hinweis: Zur Sicherheit können Sie vor Änderungen im RockSolid Theme Assistant ein S/FTPBackup Ihres Verzeichnisses files/oneo/css* durchführen. Falls es zu unschönen Ergebnissen kommen sollten, können Sie die darin enthaltenen Dateien main.css.base und main.css wieder herstellen.
Lösung 2: Falls das Vorgehen mittels Theme Assistant für Sie keine Option ist, können Sie in Ihrer CSS-Datei auch einfach folgenden neuen Eintrag anlegen:
.logo { left: 2.6666em }Footer: Call to action
Eine Gruppe konkreter Handlungsaufforderungen gibt es nun auch am Ende jeder Inhaltsseite. So findet der Besucher nach dem Lesen einer Seite auf jeden Fall einen Vorschlag, wie es von hier aus konkret weitergehen könnte, auch wenn die Inhaltsseite selbst keine solche Aufforderung enthält.
Wenn Sie das in Ihrer Website übernehmen möchten, gehen Sie dazu wie folgt vor:
- In Artikel "Footer" gehen
- Neues Element als erstes ganz oben: „Zentrierter Bereich Anfang“
mit folgenden Einstellungen;
- Vordefinierte Hintergrundfarbe: Highlight-Farbe
- Textfarbe invertieren: CHECK
- Horizontal zentrieren: Fullwidth mit Abstand
- Klasse: "text-center padding-bottom-m" - Darunter Überschrift h2 "Was können wir für Dich tun"
- CSS-Klasse "text-white margin-bottom-s" - • Button 1:
- Ausrichtung: Inline
- CSS-Klasse "margin-right-xs margin-bottom-s" - • Button 2
- Ausrichtung: Inline
- CSS-Klasse "margin-right-xs margin-bottom-s" - • Button 3
- Ausrichtung: Inline
- CSS-Klasse "margin-bottom-s" - Zentrierter Bereich Ende
Fertig.
So würde das am Ende bei Ihnen aussehen:
FAQ: Häufig gestellte Fragen
Um auch auf Themen eingehen zu können, denen nicht eine eigene Inhaltsseite, ein eigener News-Artikel o.ä. gewidmet wird, wurde ein neuer Bereich „Häufig gestellte Fragen (FAQ)“ eröffnet.
Geplant ist hier, regelmäßig neue Inhalte bereitzustellen. Hintergrundgedanke ist neben dem Informationswert auch die Suchmaschinenoptimierung.
Möchten Sie in Ihrer Kreuzbund-Website ebenfalls einen Bereich „FAQ“ einsetzen, so gehen Sie dazu wie folgt vor:
1. Zwei neue Seiten anlegen
Wechseln Sie in die Seitenstruktur, und legen dort 2 neue Seiten an:
1. „Häufig gestellte Fragen (FAQ)“
2. Darin dann die (Unter-) Seite „Frage anzeigen“
Die Titel der Seiten können Sie natürlich frei vergeben. Bei der Seite „Frage anzeigen“ sollten Sie noch die folgenden Einstellungen vornehmen:
- In der HTML-Sitemap zeigen: „Nie anzeigen“
- Im Menü verstecken: Anhaken
2. FAQ-Archiv anlegen
Wechseln Sie jetzt in der Hauptnavigation des Backends in den Bereich „FAQ“ . Dort klicken Sie oben auf „Neu“ und wählen einen Titel für Ihren FAQ-Bereich. Geben Sie als Weiterleitungsseite die soeben angelegte Seite „Frage anzeigen“ an.
Sie können auch mehrere FAQ-Archive in Ihrer Website haben. In der Kreuzbund BGS Website gibt es z.B. die Archive „Allgemeine Fragen zu Sucht“ und „Fragen zur Gruppenarbeit“. Evtl. kommen später noch weitere dazu, je nachdem, welche thematische Unterteilung sich als sinnvoll anbieten könnte.
3. Module anlegen
Wechseln Sie jetzt in den Bereich „Themes“ und klicken dort das Zahnrad-Symbol („Frontend-Module“) an.
Dort legen Sie zwei neue Module an:
1. Modultyp „FAQ-Leser“
- Wählen Sie hier unter „FAQ-Kategorien“ Ihr soeben angelegtes FAQ- Archiv aus
- Wählen Sie unter „Übersichtsseite“ die neu angelegte Seite „Häufig gestellte Fragen (FAQ)“ aus (das ist optional).
2. Modultyp „FAQ-Liste“
- Wählen Sie hier unter „FAQ-Kategorien“ Ihr soeben angelegtes FAQ- Archiv aus
- Wählen Sie unter „FAQ-Leser“ Ihr soeben angelegtes Modul „FAQ-Leser aus (das ist optional).
4. Module in Seiten platzieren
Wechseln Sie nun in die Artikelbearbeitung.
Wählen Sie den Artikel der Seite „Häufig gestellte Fragen“ zur Bearbeitung aus. Hier soll die Übersicht unserer Fragen erscheinen. Legen Sie dazu ein neues Element vom Typ „Modul“ an und wählen Sie das Modul „FAQ-Leser“. Abspeichern – fertig.
Anschließend bearbeiten Sie den Artikel der Seite „Frage anzeigen“. Legen Sie auch hier ein neues Element vom Typ „Modul“ an und wählen Sie das Modul „FAQ-Leser“. Abspeichern – fertig.
Damit haben Sie im Prinzip alles getan, um auch in Ihrer Website FAQs mit Hilfe des entsprechenden Contao-Moduls anzuzeigen. Fehlt nur noch eins:
5. FAQ-Einträge anlegen
Wechseln Sie wieder in den Bereich „FAQ“, dort klicken das von Ihnen in Schritt 2 angelegte Archiv aus, und klicken dann anschließend auf „Neu“ um Ihr erstes Frage-Antwort-Pärchen anzulegen.
Optional: CSS für den FAQ-Bereich
Möchten Sie die neue CSS-Datei nicht übernehmen, das Aussehen der FAQ aber schon, fügen Sie die folgenden Zeile in Ihre bestehende CSS-Datei ein:
.mod_faqlist { background: #eee; padding: 1rem; margin-bottom: 1rem }
.mod_faqlist h2 { background: #bbb; color: #333; padding: 1rem; margin: -1rem -1rem 1rem; text-transform: uppercase; font-weight: 700 }
.mod_faqlist li { line-height: 2.4; }Weitere Elemente
Es wurden noch weitere Änderungen vorgenommen, z.B. an der Seitenstruktur, der Ausgestaltung mehrerer Menüpunkt in der Hauptnavigation als sog. „Mega-Menu“ (template-eigene Bezeichnung) usw. – alles Dinge, die eher die individuelle Gestaltung Ihrer eigenen Website betreffen und die auch von der ursprünglichen Fassung der Website her prinzipiell bekannt sind. Vieles ist durch schlichte Neukombination von bereits Bekanntem entstanden.
Von hier aus liegt es also an Ihnen, Ihre eigenen individuellen Inhalte zu erstellen und zu gestalten.
Ich wünsche dabei viel Erfolg!
Sie können diese Anleitung auch zum Offline-Lesen als PDF herunterladen: