Vorlage:Bannerbox: Unterschied zwischen den Versionen

Versionsgeschichte interaktiv durchsuchen

Aktuelle Version vom 9. Februar 2026, 09:09 Uhr

Diese Vorlage erstellt ein Intro-Banner auf einer Seite. Das Banner sollte einen Titel, 2-3 Zeilen Text und optional ein Bild enthalten.

Vorlagenparameter[Vorlagendaten bearbeiten]
Parameter		Beschreibung	Typ	Status
Bannergrafik	`banner-image`	Dateinamen des Banner-Bildes eingeben Beispiel Banner_meinbild.png	Unbekannt	vorgeschlagen
Bild-Alternativtext (barrierefrei)	`banner-image-alt`	keine Beschreibung	Unbekannt	vorgeschlagen
Bildbreite	`image-width`	Breite in Pixel. Standard ist 150x150px Standard 150 Beispiel z.B. 150 oder 300	Unbekannt	vorgeschlagen
Bildposition	`imagealign`	Bild links oder rechts im Banner Standard left Beispiel left, right	Unbekannt	vorgeschlagen
Überschrift	`banner-title`	Geben Sie hier die Banner-Überschrift ein. Beispiel Herzlich Willkommen!!	Mehrzeiliger Text	vorgeschlagen
Ebene der Banner-Überschrift	`title-h1`	Beim Wert 1 wird die Banner-Überschrift als semantische Hauptüberschrift verwendet Standard 1 Beispiel 1=h1; 0=h0	Wahrheitswert	vorgeschlagen
Größe der Überschrift	`titlesize`	Geben Sie hier die gewünschte Textgröße ein Standard 2rem Beispiel z.B. 2em, 2rem, 15px	Unbekannt	vorgeschlagen
Farbe der Überschrift	`titlecolor`	Geben Sie hier einen HEX für die gewünschte Überschriftfarbe ein Standard #0B2D6A Beispiel z.B. #ffffff	Unbekannt	vorgeschlagen
Erklärtext	`banner-text`	Geben Sie hier 1-3 Zeilen Text ein, die kurz beschreiben, was den Besucher auf der Seite erwartet Beispiel Informationen rund um A und B, sowie Anleitungen zu C	Wikitext	vorgeschlagen
Größe der Erklärtextes	`textsize`	Geben Sie hier die gewünschte Textgröße ein Standard 0.9rem Beispiel z.B. 12px, 1em, 1.2rem	Unbekannt	vorgeschlagen
Farbe des Erklärtextes	`textcolor`	Geben Sie hier einen HEX für die gewünschte Erklärtextfarbe ein Standard #656363 Beispiel z.B. #000000	Unbekannt	vorgeschlagen
Abstand des Textes zur Oberkante der Box und zum Bild	`contentpadding`	Geben Sie hie den gewünschten Abstand ein Standard 10px Beispiel z.B. 20px	Zahlenwert	vorgeschlagen
Innerer Abstand des Inhalts zur Box	`boxpadding`	Geben Sie hier ein, welchen Abstand die Box zum Inhalt haben soll (wie viel größer die Box sein soll) Standard 5px Beispiel z.B. 15px Autowert	Unbekannt	vorgeschlagen
Hintergrundfarbe der Box	`boxbgcolor`	Geben Sie hier einen HEX für die gewünschte Boxfarbe ein Standard #f1f3f9 Beispiel #ffffff	Mehrzeiliger Text	vorgeschlagen
Hintergrundicon (optional)	`boxbgicon`	Wählen Sie die angegebenen Icons aus Beispiel bgicon1, bgicon2, bgicon3, swoosh	Unbekannt	vorgeschlagen

@@ Zeile 1: / Zeile 1: @@
-<includeonly><templatestyles src="Bannerbox/styles.css" /><div class="bannerbox {{{boxbgicon|}}}" style="align-items:start;{{#ifeq:{{{imagealign|}}}|right|flex-direction:row-reverse;|flex-dirction:row;}}{{#if:{{{boxbgcolor|}}}|background:{{{boxbgcolor}}};|}}{{#if:{{{boxpadding|}}}|padding:{{{boxpadding|0px}}};}}">
+<includeonly><templatestyles src="Bannerbox/styles.css" />
-{{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|200x200px}}|alt={{{banner-image-alt|banner image}}}|{{!}}link=]]</div>|}}<div class="banner-content" style="padding:{{#if:{{{contentpadding|}}}|{{{contentpadding}}}"|10px}}>{{#if:{{{banner-title|}}}|{{#ifeq:{{{title-h1|1}}}|1|<h1 class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</h1>|<div class="banner-title"><div class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:1.6rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</div></div>}}|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude>
+<div class="bannerbox {{{boxbgicon|}}}" style="align-items:start;{{#ifeq:{{{imagealign|}}}|right|flex-direction:row-reverse;|flex-direction:row;}}{{#if:{{{boxbgcolor|}}}|background:{{{boxbgcolor}}};|background:#f1f3f9;}}
+{{#if:{{{boxpadding|}}}|padding:{{{boxpadding}}};|padding:5px;}}">{{#if:{{{banner-image|}}}|<div class="banner-image">[[File:{{{banner-image}}}{{!}}{{#if:{{{image-width|}}}|{{{image-width}}}x{{{image-width}}}px|150x150px}}|alt={{{banner-image-alt|banner image}}}|{{!}}link=]]</div>|}}<div class="banner-content" style="padding:{{#if:{{{contentpadding|}}}|{{{contentpadding}}}|10px"}}>{{#if:{{{banner-title|}}}|{{#ifeq:{{{title-h1|1}}}|1|<h1 class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:2rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|color:#0B2D6A;}}">{{{banner-title}}}</h1>|<div class="banner-title"><div class="bannerhd" style="margin-top:0; {{#if:{{{titlesize|}}}|font-size:{{{titlesize}}};|font-size:2rem;}}{{#if:{{{titlecolor|}}}|color:{{{titlecolor}}};|}}">{{{banner-title}}}</div></div>}}|}}{{#if:{{{banner-text|}}}|<div class="banner-text" style="{{#if:{{{textcolor|}}}|color:{{{textcolor}}};|color:#656363;}}{{#if:{{{textsize|}}}|font-size:{{{textsize}}};|font-size:0.9rem;}}">{{{banner-text}}}</div>|}}</div></div></includeonly><noinclude>
 <templatedata>
 {
@@ Zeile 7: / Zeile 8: @@
 			"label": {
 				"en": "Background color (optional)",
-				"de": "Hintergrundfarbe der Box (optional)"
+				"de": "Hintergrundfarbe der Box"
 			},
 			"description": {
 				"en": "Default is grey (#f1f3f9). Replace with any hex value, (e.g. #ffffe6)",
-				"de": "Standard ist grau (#f1f3f9). Kann mit beliebigem Hex-Wert ersetzt werden (z.B. #ffffe6)"
+				"de": "Geben Sie hier einen HEX für die gewünschte Boxfarbe ein"
 			},
 			"type": "string",
@@ Zeile 17: / Zeile 18: @@
 			"default": {
 				"en": "#efefef",
-				"de": "#efefef"
+				"de": "#f1f3f9"
-			}
+			},
+			"example": "#ffffff"
 		},
 		"boxpadding": {
 			"label": {
 				"en": "Padding of the container box (optional)",
-				"de": "Abstand des Inhalts zur Box"
+				"de": "Innerer Abstand des Inhalts zur Box"
 			},
 			"description": {
 				"en": "Sets the padding for the box. Default is 0.",
-				"de": "Setzt den Abstand in Pixeln, Standard ist 0"
+				"de": "Geben Sie hier ein,  welchen Abstand die Box zum Inhalt haben soll (wie viel größer die Box sein soll)"
 			},
 			"example": {
 				"en": "10px (default is 0)",
-				"de": "10px (Standard ist 0)"
+				"de": "z.B. 15px"
 			},
 			"suggested": true,
-			"autovalue": ""
+			"autovalue": "",
+			"default": "5px"
 		},
 		"contentpadding": {
 			"label": {
 				"en": "Content padding (optional)",
-				"de": "Textabstand"
+				"de": "Abstand des Textes zur Oberkante der Box und zum Bild"
 			},
 			"description": {
 				"en": "Padding around text. Default is 10px.",
-				"de": "Abstand um den Text. Standard ist 10px."
+				"de": "Geben Sie hie den gewünschten Abstand ein"
 			},
 			"type": "number",
 			"example": {
 				"en": "20px",
-				"de": "20px"
+				"de": "z.B. 20px"
 			},
-			"suggested": true
+			"suggested": true,
+			"default": "10px"
 		},
 		"banner-image": {
 			"description": {
 				"en": "Image name, without the File: prefix, but with namespace prefix (if it exists)",
-				"de": "Bildname, ohne das Datei-Präfix, aber mit Namensraum-Präfix (falls es existiert)"
+				"de": "Dateinamen des Banner-Bildes eingeben"
 			},
 			"label": {
 				"en": "Banner image (optional)",
-				"de": "Bannergrafik (optional)"
+				"de": "Bannergrafik"
 			},
 			"example": {
 				"en": "myimage.png",
-				"de": "meinbild.png"
+				"de": "Banner_meinbild.png"
 			},
 			"suggested": true
@@ Zeile 74: / Zeile 78: @@
 			"description": {
 				"en": "Width in pixels. Default setting is 200",
-				"de": "Breite in Pixel. Standard ist 200"
+				"de": "Breite in Pixel. Standard ist 150x150px"
 			},
 			"suggested": true,
 			"default": {
-				"de-formal": "200"
+				"de-formal": "200",
+				"de": "150"
 			},
 			"example": {
-				"de": "z.B. 300 (Standard ist 200)",
+				"de": "z.B. 150 oder 300",
 				"en": "e.g., 300 (default is 200)"
 			}
@@ Zeile 101: / Zeile 106: @@
 			"description": {
 				"en": "Links oder rechts in der Box",
-				"de": "Left or right in the box"
+				"de": "Bild links oder rechts im Banner"
 			}
 		},
@@ Zeile 111: / Zeile 116: @@
 				"de": "Überschrift"
 			},
-			"description": "Box heading"
+			"description": "Geben Sie hier die Banner-Überschrift ein.",
+			"example": "Herzlich Willkommen!!"
 		},
 		"titlesize": {
@@ Zeile 120: / Zeile 126: @@
 			"example": {
 				"en": "2em, 2rem, 15px",
-				"de": "2em, 2rem, 15px"
+				"de": "z.B. 2em, 2rem, 15px"
 			},
 			"default": {
 				"en": "1.6rem",
-				"de": "1.6rem"
+				"de": "2rem"
 			},
-			"suggested": true
+			"suggested": true,
+			"description": "Geben Sie hier die gewünschte Textgröße ein"
 		},
 		"titlecolor": {
@@ Zeile 133: / Zeile 140: @@
 				"de": "Farbe der Überschrift"
 			},
-			"description": "Color of the heading. ",
+			"description": "Geben Sie hier einen HEX für die gewünschte Überschriftfarbe ein",
 			"example": {
 				"en": "#ffffff",
-				"de": "#ffffff"
+				"de": "z.B. #ffffff"
 			},
-			"suggested": true
+			"suggested": true,
+			"default": "#0B2D6A"
 		},
 		"banner-text": {
 			"label": {
 				"en": "Text",
-				"de": "Text"
+				"de": "Erklärtext"
 			},
 			"description": {
 				"en": "1-3 lines of text",
-				"de": "1-3 Zeilen Text"
+				"de": "Geben Sie hier 1-3 Zeilen Text ein, die kurz beschreiben, was den Besucher auf der Seite erwartet"
 			},
 			"type": "content",
-			"suggested": true
+			"suggested": true,
+			"example": "Informationen rund um A und B, sowie Anleitungen zu C"
 		},
 		"textcolor": {
 			"label": {
 				"en": "Text color",
-				"de": "Textfarbe"
+				"de": "Farbe des Erklärtextes"
 			},
 			"example": {
 				"en": "#000000",
-				"de": "#000000"
+				"de": "z.B. #000000"
 			},
-			"suggested": true
+			"suggested": true,
+			"default": "#656363",
+			"description": "Geben Sie hier einen HEX für die gewünschte Erklärtextfarbe ein"
 		},
 		"textsize": {
 			"label": {
 				"en": "Text size",
-				"de": "Textgröße"
+				"de": "Größe der Erklärtextes"
 			},
 			"example": {
 				"en": "12px, 1em",
-				"de": "12px, 1em"
+				"de": "z.B. 12px, 1em, 1.2rem"
 			},
 			"default": {
 				"en": "1.3rem",
-				"de": "1.3rem"
+				"de": "0.9rem"
 			},
-			"suggested": true
+			"suggested": true,
+			"description": "Geben Sie hier die gewünschte Textgröße ein"
 		},
 		"boxbgicon": {
 			"label": {
 				"en": "Background icon",
-				"de": "Hintergrundicon"
+				"de": "Hintergrundicon (optional)"
 			},
 			"suggested": true,
-			"example": "bgicon1, bgicon2, bgicon3, swoosh"
+			"example": "bgicon1, bgicon2, bgicon3, swoosh",
+			"description": "Wählen Sie die angegebenen Icons aus"
 		},
 		"banner-image-alt": {
@@ Zeile 196: / Zeile 209: @@
 			"label": {
 				"en": "Mark title as h1 page heading",
-				"de": "Als  h1-Überschrift markieren (bei verstecktem Titelbereich)"
+				"de": "Ebene der Banner-Überschrift"
 			},
 			"description": {
 				"en": "Mark this as h1, if your page hides the title area",
-				"de": "1=h1"
+				"de": "Beim Wert 1 wird die Banner-Überschrift als semantische Hauptüberschrift verwendet"
 			},
 			"type": "boolean",
 			"default": {
-				"en": "1",
+				"en": "0",
 				"de": "1"
 			},
 			"suggested": true,
-			"example": "1=h1"
+			"example": "1=h1; 0=h0"
 		}
 	},