Se stai creando un sito web con Webflow, è essenziale comprendere come funzionano i selettori di stile, le classi e i tag HTML all'interno del Designer. Questi strumenti ti permettono di gestire l'aspetto visivo del tuo sito in modo efficiente e coerente. In questa guida esploreremo il funzionamento dei selettori di stile in Webflow e come utilizzarli correttamente.

Cosa sono i selettori di stile in Webflow?

I selettori di stile in Webflow ti permettono di applicare modifiche estetiche agli elementi HTML della tua pagina. I principali tipi di selettori sono:

• Tag HTML: influenzano tutti gli elementi dello stesso tipo presenti nella pagina (es. tutti gli <h1>, <p>, <div>, ecc.).
• Classi CSS: permettono di applicare stili specifici a elementi particolari e possono essere riutilizzate su più elementi della pagina.
• Combo Class: combinano più classi per creare variazioni di stile senza modificare la classe principale.

Come funzionano i selettori di stile in Webflow?

Creare e modificare un Tag HTML

1. Aggiungere un elemento HTML

• Apri il Designer di Webflow.
• Inserisci un elemento, ad esempio un titolo (<h1>).
• Per vedere la struttura della pagina, premi Z per attivare il Navigatore.

2. Applicare uno stile ai tag HTML

• Seleziona un titolo <h1>.
• Vai nella scheda Selector in alto a destra.
• Scegli il tag HTML All H1 Headings.
• Modifica lo stile (es. cambia il colore in rosso).

Cosa succede?
Tutti gli <h1> della pagina ereditano automaticamente lo stile assegnato, poiché il tag HTML si applica globalmente a tutti gli elementi dello stesso tipo.

3. Verificare l'eredità degli stili

• Seleziona un titolo <h1> e guarda il pannello Stili sulla destra.
• Se accanto al colore appare la scritta "comes from All H1 Headings", significa che lo stile proviene dal tag HTML.
• Se applichi una classe personalizzata a un singolo <h1>, questa sovrascrive lo stile del tag HTML.

Come usare le Classi in Webflow

Creare e applicare una Classe

Le classi permettono di personalizzare l'aspetto di elementi specifici.

1. Creare una classe

• Seleziona un elemento (es. <h1>).
• Nel pannello Selector, assegna un nome alla classe (es. "Titolo-Principale").
• Modifica lo stile: cambia colore, font, margini, ecc.

2. Differenza tra Tag HTML e Classi

Caratteristica

Tag HTML

Classi

Influenza

Tutti gli elementi dello stesso tipo

Solo gli elementi a cui è applicata

Modifica

Globale su tutta la pagina

Personalizzabile per singoli elementi

Riutilizzo

Si applica automaticamente

Deve essere assegnata manualmente

3. Ereditare e sovrascrivere gli Stili

Se un elemento ha sia uno stile definito nel tag HTML che una classe personalizzata:

• La classe sovrascrive il tag HTML per l'elemento selezionato.
• Se si rimuove la classe, l’elemento torna a seguire lo stile del tag HTML.

Combo Class: cosa sono e come Utilizzarle

Le combo class permettono di aggiungere ulteriori modifiche a una classe esistente, senza alterarla.

Creare una Combo Class

1. Seleziona un elemento con una classe già applicata.
2. Nel pannello Selector, clicca e aggiungi un nuovo nome accanto alla classe esistente.
3. Modifica lo stile della nuova combo class senza alterare la classe originale.

Esempio Pratico: pulsanti primari e secondari

• Crea un pulsante con la classe "Bottone".
• Assegna un colore di sfondo e un bordo arrotondato.
• Aggiungi una combo class chiamata "Primario" e modifica il colore per differenziarlo.
• Aggiungi un’altra combo class "Secondario" con uno stile leggermente diverso.

Così, tutti i pulsanti con la classe "Bottone" manterranno uno stile di base, mentre i pulsanti Primario e Secondario avranno variazioni di stile senza influenzare il resto del sito.

Gestire e pulire le classi in Webflow

1. Style Selector: dove trovare tutti i selettori

Il Style Selector (pannello Stili) ti permette di visualizzare:

• Tutte le classi utilizzate nella pagina.
• Quali elementi ereditano uno stile da un tag HTML.
• Dove una classe è applicata in tutto il sito.

2. Pulire le Classi non utilizzate

Nel tempo, potresti accumulare molte classi non più necessarie.
Per eliminarle:

• Apri lo Style Selector.
• Cerca l'opzione "Clean up unused styles".
• Webflow ti mostrerà tutte le classi inutilizzate e potrai rimuoverle con un clic.

Questa operazione aiuta a mantenere il sito pulito e ottimizzato.

Conclusione: Quando Usare Tag HTML, Classi e Combo Class?

Scenario

Uso Consigliato

Applicare uno stile a tutti gli elementi di un tipo (es. tutti gli <h1>)

Tag HTML

Personalizzare singoli elementi e riutilizzare stili

Classi

Creare variazioni di stile su una classe esistente

Combo Class

Grazie ai selettori di stile in Webflow, puoi gestire facilmente il design del tuo sito web in modo scalabile ed efficiente. Se vuoi creare un sito professionale e ben organizzato, è fondamentale imparare a usare correttamente questi strumenti.

‍