← Tutte le funzionalità · Funzionalità PRO

Card che si adattano a ogni schermo.

Progetta la tua card una volta, poi personalizzala per desktop, tablet e mobile con sovrascritture di stile per breakpoint. Passa tra container responsive direttamente dalla barra header del builder per vedere ogni layout in tempo reale.

Passa a Pro Vedi tutte le funzionalità

Barra header builder con selettore container responsive che mostra opzioni desktop, tablet e mobile

3: Breakpoint integrati
Visuale: Modalità anteprima container
Sovrascrivi: Qualsiasi stile per breakpoint
Live: Anteprima responsive in tempo reale

Cosa sono i container responsive?

Una card, layout multipli

Un container responsive è un blocco speciale che racchiude il tuo layout e applica diverse configurazioni di stile a seconda della dimensione corrente dello schermo. Nessuna sintassi media query — solo configurazione visuale.

Diagramma che mostra la stessa card renderizzata su container desktop, tablet e mobile

Container basati su breakpoint

Definisci set di stile separati per Desktop (≥1024px), Tablet (768–1023px) e Mobile (<768px). Ogni container eredita gli stili base e sovrascrive solo quello che differisce.

Sistema di sovrascrittura additivo

I breakpoint più piccoli ereditano da quelli più grandi. Specifica solo le proprietà che cambiano — tutto il resto rimane uguale al breakpoint parent.

Anteprima nel builder

Usa il selettore container nella barra header per passare il canvas a qualsiasi breakpoint. L'anteprima live si aggiorna immediatamente per mostrare come appare la card a quella dimensione.

Funziona con tutti i tipi di blocco

Ogni tipo di blocco — testo, immagine, layout, entità, controlli — supporta sovrascritture responsive. Cambia dimensione font, direzione layout, visibilità, spaziatura e altro.

Breakpoint

Tre dimensioni schermo integrate

CardBuilder Pro include tre breakpoint standard che corrispondono alle dimensioni più comuni dei pannelli dashboard di Home Assistant.

Desktop

≥ 1024px

Il layout base. Tutti gli stili definiti qui vengono ereditati dai breakpoint più piccoli a meno che non vengano sovrascritti. Progetta prima il tuo layout desktop.

Tablet

768px – 1023px

Sovrascritture di stile per pannelli di larghezza media. Adatta il numero di colonne, le dimensioni font e la spaziatura per layout dashboard più stretti.

Mobile

< 768px

Ottimizza per pannelli piccoli e viste compatte. Impila i layout verticalmente, riduci le dimensioni font e semplifica la grafica per la visualizzazione mobile.

Sovrascritture di stile

Cambia solo quello che deve cambiare

Passa a un breakpoint nel canvas e modifica qualsiasi proprietà di stile. Le tue modifiche vengono memorizzate come sovrascrittura solo per quel breakpoint — il layout base rimane intatto.

Cambia direzione flex

Passa un layout a riga orizzontale a una colonna verticale alla larghezza mobile così il contenuto si impila naturalmente in un pannello stretto.

Adatta le dimensioni font

Riduci le dimensioni di intestazioni e testo corpo ai breakpoint tablet e mobile per mantenere la leggibilità in pannelli più piccoli.

Nascondi blocchi non essenziali

Imposta alcuni blocchi decorativi o secondari su display:none su mobile per mantenere la card pulita e focalizzata a dimensioni più piccole.

Modifica la spaziatura

Stringi i valori di padding e gap ai breakpoint più piccoli per sfruttare meglio lo spazio orizzontale limitato.

Pannello Stili con sovrascritture specifiche del breakpoint evidenziate in blu su un container tablet

Progetta una volta, ottimo aspetto ovunque.

I container responsive sono disponibili con i piani CardBuilder Pro.

Vedi i piani Leggi la documentazione