Anleitungen für das Wetter Widget

Mit unseren Wetter-Widget können Sie sich die aktuellen Wetterinformationen direkt auf Ihrer Website anzeigen lassen. Hier erfahren Sie, wie das geht

Sie können zwischen dem Widget mit der 3-Tages-Vorhersage oder dem Widget mit der Kartenansicht des aktuellen Tages wählen.

3-Tages-Vorhersage im Hoch- und Querformat

für Südtirol,
für eine der 116 Gemeinden,
für eine der 7 Gebirgsgruppen.

Kartenansicht

mit dem Südtirolwetter für den aktuellen Tag,
mit der Übersicht über das Bergwetter für den aktuellen Tag.

Wählen Sie die gewünschten Parameter wie Standort, Sprache und Format. Kopieren Sie dann den angezeigten HTML-Code an die gewünschte Stelle im Code Ihrer Homepage. Anpassungen der Farben ist durch Änderungen am CSS-Stylesheet möglich.

CSS-Anpassung (Design & Layout)

Unser Wetter-Widget lässt sich einfach über CSS-Variablen an das Design deiner Website anpassen.
Du kannst Farben, Abstände, Größen und das responsive Verhalten steuern – ohne eigenes CSS schreiben zu müssen.

Die Variablen können direkt am Widget gesetzt werden oder vom übergeordneten Container übernommen werden.

Layout & Responsivität

Diese Variablen steuern, wie die Wetterkarten angeordnet sind und sich an unterschiedliche Bildschirmgrößen anpassen:

Variable	Bedeutung	Standard
`--weather-gap`	Abstand zwischen den einzelnen Wetterkarten	`1rem`
`--weather-switcher-breakpoint`	Container-Breite, unter der die Karten automatisch untereinander (eine Spalte) angezeigt werden. 0px bedeutet: kein erzwungener Wechsel, normales Umbruch-Verhalten.	`0px`
`--weather-card-min-width`	Minimale Breite einer Wetterkarte. Bestimmt, wann ein Zeilenumbruch oder vertikales Layout erfolgt.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-card-max-width`	Maximale Breite einer Wetterkarte. Sinnvoll für mobile Geräte, damit Karten nicht zu groß werden.	`120px` (Simple) `160px` (Detailed / Sun)
`--weather-padding`	Innenabstand der Karten	`0.75rem`
`--weather-border-radius`	Abrundung der Karten-Ecken	`0.5rem`

Farben & Design

Mit diesen Variablen passt du die Farben und Lesbarkeit an dein Website-Design an:

Variable	Bedeutung	Standard
`--weather-min-temp-color`	Hintergrundfarbe für niedrige Temperaturen	`#345d8e`
`--weather-max-temp-color`	Hintergrundfarbe für hohe Temperaturen	`#d11525`
`--weather-badge-text-color`	Textfarbe der Temperatur-Badges	`white`
`--weather-bg`	Hintergrundfarbe der Wetterkarten	`#fff`
`--weather-text-primary`	Haupttextfarbe	`#000`
`--weather-text-secondary`	Sekundäre Textfarbe (Labels, Copyright, Ladezustand)	`#666`
`--weather-shadow`	Schatten der Karten	`0 0.125rem ...`

Beispiel: Widget anpassen

<weather-app-st style=" --weather-gap: 2rem; --weather-switcher-breakpoint: 500px; --weather-bg: #f5f5f5; --weather-text-secondary: #888; --weather-badge-text-color: #000; " ></weather-app-st>

Ergebnis bei --weather-switcher-breakpoint: 500px:

Container breiter als 500px → Karten nebeneinander
Container schmaler als 500px → Karten untereinander (eine Spalte)

Ideal für mobile Layouts

Wetter