EN IT
Home Chi sono Learn Blog

Stile della hero in Webflow: tag HTML e tipografia fluida

Base 27:16 webflowtipografiaclamphtml-tagscombo-class

Dai stile a una hero in Webflow nel modo intelligente: tag HTML per i default di tutto il sito, combo class e font-size fluido con clamp() che scala con il viewport.

Guarda su YouTube

Punti chiave

  • I tag HTML (Body, All H1 Headings, All Paragraphs…) ti fanno impostare i default una volta sola e applicarli a ogni elemento di quel tipo su tutto il sito — la più grande accelerazione del tuo workflow.
  • La funzione clamp() dà una tipografia fluida: un minimo, un massimo e un valore preferito che scala dolcemente tra due larghezze di viewport, così progetti una volta invece che per ogni breakpoint.
  • Ci deve essere esattamente un H1 per pagina — è il titolo principale che dice a utenti e motori di ricerca di cosa parla la pagina.
  • Una combo class stratifica una variazione sopra una classe base invece di copiarla, così gli stili condivisi restano collegati e li mantieni in un solo posto.
  • Le unità relative portano l'idea fluida nello spacing: ch limita la lunghezza della riga per la leggibilità, ed em scala gap e padding con la font-size dell'elemento.

Capitoli del video

  1. 00:00 Il tag Body (All Pages): intro ai tag HTML
  2. 03:32 Come caricare un Google Font
  3. 05:40 Font-size fluido con clamp()
  4. 10:38 Gerarchia dei titoli e il tag All H1 Headings
  5. 14:19 Il tag All Paragraphs e le unità ch
  6. 16:32 Le combo class e altro sull'ereditarietà
  7. 23:24 Gap del flex e unità em
  8. 25:03 Stile dell'image wrapper + modalità preview
  9. 26:24 Stile del social proof wrapper
  10. 26:59 Outro

Alla fine di questa lezione la tua hero passa da scheletro spoglio a blocco rifinito e con stile completo — e lo farai nel modo professionale, impostando stili che si propagano su tutto il sito invece che elemento per elemento. Le star dello show sono i tag HTML, la tipografia fluida con clamp() e le combo class.

Il tema che attraversa tutto è fare il lavoro una volta sola. Imposta il font del body una volta e ogni elemento lo eredita. Definisci la dimensione di un titolo una volta sul suo tag e ogni titolo di quel livello segue. Costruisci uno stile per il pulsante una volta e riusalo con piccole variazioni. Quella disciplina è la differenza tra un sito che puoi mantenere e uno che hai paura di toccare.

Puntiamo forte anche sul design fluido — testo e spacing che scalano con continuità insieme allo schermo invece di saltare tra dimensioni fisse. Sembra un argomento avanzato, ma una volta visto lo schema lo userai ovunque.

Come funziona

I tag HTML sono le fondamenta. Seleziona il body e puoi aprire il suo tag “Body (All Pages)”; lì imposti il colore di sfondo, il font, il colore del testo e la font-size di base, e ogni pagina li eredita perché ogni elemento è figlio del body. La stessa idea vale per “All H1 Headings”, “All Paragraphs” e così via — dai stile al tag una volta e ogni elemento di quel tipo si aggiorna. È il singolo acceleratore più grande in un workflow Webflow.

Per un testo che sembra vivo usiamo clamp(). Prende tre valori — un minimo, un valore preferito e un massimo — e il valore preferito scala dolcemente mentre il viewport si muove tra due larghezze (qui da 375px fino a 1920px). Il valore preferito riutilizzabile è così: 14px + 4px * ((100vw - 375px) / (1920px - 375px)): vale 0 alla larghezza piccola e 1 a quella grande, così la dimensione scivola tra il tuo minimo e massimo. Per riusarlo su un altro elemento cambi solo il minimo, il massimo e la differenza tra i due. Una formula, fluida ovunque.

Le combo class risolvono il problema del “uguale ma leggermente diverso”. I nostri due pulsanti condividono border radius, padding e font — cambiano solo i colori. Invece di duplicare la classe button (che crea una copia indipendente da tenere allineata), aggiungiamo una combo class come cc-dark sopra. Eredita tutto da button e sovrascrive solo i colori, così una modifica futura alla base continua a propagarsi. È anche qui che quell’etichetta arancione finalmente ha senso: cliccala e Webflow ti dice esattamente da dove è ereditato un valore — una classe base o un tag HTML.

La mentalità fluida entra anche nello spacing. L’unità ch limita un paragrafo a una lunghezza di riga leggibile (max-width: 56ch), e l’unità em scala gap e padding con la font-size dell’elemento (un gap di 1.2em cresce e si riduce insieme al testo). Poiché le font-size sono già fluide, lo spacing resta proporzionato in automatico.

Come si usa

  1. Imposta i default del body. Seleziona il body, apri il tag Body (All Pages) e imposta il colore di sfondo, il colore del testo (qui bianco), il tuo Google font (caricalo da Site Settings → Fonts, solo i pesi che ti servono), una font-size di base con la formula clamp() qui sopra e line-height: 1.5.
  2. Dai stile a etichetta e titolo. Dai all’etichetta la sua classe e il suo colore. Sul tag All H1 Headings imposta font-weight: 500, line-height: 1, una font-size clamp() (min 32px, max 72px, differenza 40) e margini sopra/sotto a zero.
  3. Dai stile ai paragrafi una volta. Sul tag All Paragraphs imposta il colore del testo e togli il margin inferiore. Dai al sottotitolo della hero un max-width: 56ch così la lunghezza della riga resta leggibile.
  4. Costruisci il pulsante riutilizzabile. Dai al pulsante primario la classe generica button con padding (12px / 16px), border-radius: 14px, un colore di sfondo e un bordo di 1px dello stesso colore (così entrambi i pulsanti finiscono identici in dimensione).
  5. Varialo con una combo class. Seleziona il secondo pulsante, aggiungi la combo class cc-dark e sovrascrivi solo i colori di sfondo e bordo. Tutto il resto resta collegato a button.
  6. Spazia con em. Imposta il gap flex dell’heading wrapper su 1.2em così lo spacing scala con la font-size fluida. Fai lo stesso per il social-proof wrapper.
  7. Rifinisci l’immagine e controlla. Limita il max-width dell’image wrapper (attorno a 1200px) e imposta i suoi margini sinistro/destro su auto per centrarlo. Apri la modalità Preview (l’icona play) per confermare che il risultato si comporti come il sito pubblicato.

La tua hero ora ha stile ed è fluida. Prossima tappa: riusiamo tutto quello che abbiamo costruito per creare la sezione features — e conosciamo i componenti Webflow.

Risorse

Domande frequenti

Cosa sono i tag HTML in Webflow e quando usarli?
I tag HTML ti fanno impostare stili di default per un intero tipo di elemento — il body, ogni H1, ogni paragrafo — in un solo posto. Usali per tutto ciò che deve essere coerente su tutto il sito, come il font di base, i colori e le dimensioni dei titoli.
Come crea la tipografia fluida la funzione clamp()?
clamp() prende un minimo, un valore preferito e un massimo. Il valore preferito scala dolcemente con il viewport, mentre minimo e massimo impediscono al testo di diventare troppo piccolo o troppo grande — così la tipografia si adatta con continuità invece di saltare ai breakpoint.
Che differenza c’è tra duplicare una classe e aggiungere una combo class?
Duplicare crea una classe nuova e indipendente, quindi le modifiche future all'originale non si riflettono. Una combo class impila una variazione sopra la classe base e continua a ereditare da lei, così gli stili condivisi restano allineati e li mantieni una volta sola.
Cosa fa l’unità ch in Webflow?
Un ch è circa la larghezza del carattere 0 nel font dell'elemento. Impostare un max-width come 56ch limita un paragrafo a una lunghezza di riga comoda da leggere, a prescindere dalla dimensione dello schermo.

← Torna al corso