Header mit Bild - Sparkassen Design

Die Vorlage „Header mit Bild”, ist üblicherweise das erste Element einer Startseite. Es bindet das Keyvisual mit einer kleinen Textbox ein. Dieses Template wird hauptsächlich für Seiten im Sparkassen Design verwendet.

Verwendung für Sparkassen-Plattformen

Die Vorlage kann folgendermaßen eingebunden werden:

CODE

{% include "_include/cms_helper_bfsg/<language>/_spk_header_with_pic.html" with company_name="Ihre Sparkasse" company_slogan="Ihr individueller Slogan" %}

An der Stelle <language> müssen Sie die Anrede Ihrer Plattform einfügen, also de_sie, de_du oder en (Englisch).

Beispiele

CODE

<!-- Formelles Deutsch mit individuellen Texten -->
{% include "_include/cms_helper_bfsg/de_sie/_spk_header_with_pic.html" with company_name="Sparkasse Berlin" company_slogan="Gemeinsam für unsere Stadt" text_container="Seit über 100 Jahren..." header_pic="/media/header_berlin.jpg" %}

<!-- Informelles Deutsch für jüngere Zielgruppe -->
{% include "_include/cms_helper_bfsg/de_du/_spk_header_with_pic.html" with company_name="Sparkasse Future" company_slogan="Deine Bank für morgen" default_pic="young_team" %}

<!-- Englisch für internationale Plattform -->
{% include "_include/cms_helper_bfsg/en/_spk_header_with_pic.html" with company_name="Sparkasse International" is_control_platform=True %}

<!-- Nur mit globalem company_name und company_slogan aus Platform-Settings -->
{% include "_include/cms_helper_bfsg/de_sie/_spk_header_with_pic.html" %}

Verfügbare Variablen

Variable	Typ	Beschreibung	Standardwert	Beispiel
`company_name`	String	Name des Unternehmens/der Sparkasse	Kommt aus Platformeinstellungen, ansonsten “Sparkasse”	`"Sparkasse Musterstadt"`
`company_slogan`	String	Slogan/Untertitel des Unternehmens	Kommt aus Platformeinstellungen, ansonsten `trans "Our engagement for the region"`	`"Unser Engagement für die Region"`
`text_container`	String	Beschreibungstext über das Engagement	Übersetzt je nach Sprache	`"Mit unserem vielfältigen..."`
`button_link`	String	URL für den Call-to-Action-Button	Automatisch generiert basierend auf `is_control_platform`	`"/projekte/"`
`button_text`	String	Text für den Call-to-Action-Button	Übersetzt je nach Sprache und Plattform-Typ	`"Projekte entdecken"`
`header_pic`	String	URL des Header-Hintergrundbildes	`"header_pic"	image` oder Fallback
`default_pic`	String	Name für Standard-Bild (ohne Pfad/Endung)	`"girl"`	`"team", "boy", "heart"`
`is_control_platform`	Boolean	Bestimmt Button-Text und -Link	Kommt aus Plattformeinstellungen	`True` oder `False`
stoerer_img_id	String	Die ID des Störer-Bildes. Wenn gesetzt, wird der Störer angezeigt.	keiner	“stoerer_2025“
stoerer_description	String	Alt-Text für das Störer-Bild.	keiner	“Verdopplungsaktion für Privatspenden vom 12.03.2025 bis 16.03.2025“

Das Keyvisual sollte über CSS eingebunden werden. zB:

CODE

.bg-landing{
    background-color: #f6f6f6;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('{{ "header_pic"|image }}');
}