Panoramica dei componenti - Aiuto Webflow

Usa i componenti per gestire layout e contenuti ricorrenti in modo più efficiente sul tuo sito.

I componenti ti danno il potere di creare blocchi personalizzabili da elementi e sottoelementi per mantenere un flusso di lavoro di design coerente, efficiente e scalabile. Puoi riutilizzare questi blocchi su tutto il tuo sito e modificarli in un unico posto per evitare di rivedere individualmente ogni layout ricorrente.

Come creare un componente

Puoi creare componenti visivamente in Webflow o importare componenti esistenti da una base di codice esterna con DevLink. Questa sezione è focalizzata sullo sviluppo visivo.

Puoi creare un componente da un elemento o un gruppo di elementi e scegliere se ogni istanza è identica su tutto il sito o consente modifiche al suo contenuto, layout o stile:

• Contenuto e design identici per istanza — crea un componente per layout ricorrenti (ad es., barre di navigazione e piè di pagina) da riutilizzare su tutto il sito. Qualsiasi modifica al contenuto o al design aggiorna automaticamente ogni istanza del componente.
• Contenuto unico per istanza — crea un componente con un layout e design coerenti, ma consenti a ogni istanza di avere contenuti diversi (ad es., un layout di sezione hero che può avere testo, immagini o video unici per istanza) utilizzando le proprietà e gli slot del componente.
• Varianti di stile diverse per istanza — crea un componente con opzioni di stile e layout predefinite (ad es., pulsanti solidi e outline, o layout di carte orizzontali e verticali). Le varianti di stile del componente ti permettono di personalizzare il design di ogni istanza senza dover creare componenti separati.

Per creare un componente:

1. Seleziona l'elemento che vuoi trasformare in un componente
2. Apri il pannello Componenti, pannello Stile o pannello Impostazioni elemento
3. Clicca sull'icona “crea componente” in cima al pannello
4. Dai un nome e una descrizione opzionale al tuo componente e clicca su Crea

Puoi anche duplicare un componente esistente selezionando il componente, cliccando sui puntini “altre opzioni” e scegliendo Duplica.

Sarai all'interno del componente principale dopo aver creato un componente, il che significa che qualsiasi modifica al componente principale si aggiorna in tutte le istanze di quel componente. In qualsiasi momento, puoi entrare nel componente principale su qualsiasi istanza del componente tramite:

• Doppio clic sull'istanza del componente
• Clic destro sull'istanza e clic su Modifica componente
• Selezione dell'istanza e clic sull'icona “matita” nell'etichetta
• Selezione dell'istanza e clic sull'icona “chiave inglese” in alto a destra del pannello destro

Scopri di più sulla modifica del componente principale.

Come usare e riutilizzare un componente

Una volta creato un componente, puoi riutilizzarlo ovunque nel tuo sito:

1. Apri il pannello Componenti
2. Passa il mouse su un componente per visualizzare un'anteprima
3. Clicca e trascina il componente desiderato su qualsiasi pagina del tuo sito
4. Rilascia l'istanza del componente direttamente sulla tela o nel Navigatore

Quando selezioni un'istanza di componente, la vedrai evidenziata e contornata in verde. Apri il pannello Componenti per vedere quante volte ciascuno dei tuoi componenti è stato utilizzato nel tuo sito.

Per visualizzare la gerarchia degli elementi di un componente nel pannello Navigatore, tieni premuto Opzione + doppio clic (su Mac) o tieni premuto Alt + doppio clic (su Windows) sul componente, o clicca sull'icona “modifica componente principale”. Potrai vedere la gerarchia degli elementi del componente solo dal componente principale (non all'interno di un'istanza di componente).

Come modificare un componente

Esaminiamo i vari modi in cui puoi interagire e modificare un componente:

• Modificare il componente principale
• Proprietà del componente, slot e varianti di stile
• Creare varianti di stile del componente
• Gestire la proprietà della variante
• Cambiare la variante di un'istanza del componente
• Riordinare, rinominare, duplicare o eliminare varianti di stile del componente
• Uscire dal componente principale
• Modificare componenti nell'Editor
• Cambiare il nome o la descrizione di un componente
• Raggruppare componenti
• Eliminare un componente

Modificare il componente principale

Per apportare le stesse modifiche a tutte le istanze di un componente, è necessario modificare il componente principale. Puoi modificare il componente principale su qualsiasi istanza di componente tramite:

• Doppio clic sull'istanza del componente sulla tela
• Tenendo premuto Opzione + doppio clic (Mac) o Alt + doppio clic (Windows) sull'istanza nel Navigatore
• Clic destro sull'istanza e clic su Modifica componente
• Selezionando l'istanza e cliccando sull'icona “modifica componente” nell'etichetta
• Selezionando l'istanza e cliccando sull'icona “modifica componente” in cima al pannello destro

Le modifiche al componente principale influenzeranno ogni istanza del componente (a meno che quell'istanza del componente non abbia proprietà applicate a elementi specifici all'interno del componente). Quando modifichi il componente principale, puoi cambiare la struttura e l'ordine degli elementi per influenzare simultaneamente tutte le istanze del componente sul tuo sito.

Proprietà del componente, slot e varianti di stile

Le proprietà del componente (props), gli slot e le varianti di stile ti permettono di creare configurazioni uniche su ogni istanza di un componente:

• Props — collegano le impostazioni degli elementi individuali nel componente principale (ad es., testo, link, immagini o video) ai props. Questo ti permette di personalizzare queste impostazioni su ogni istanza senza cambiare la struttura o il design complessivo del componente. I props possono anche essere collegati ai campi CMS per estrarre dinamicamente contenuti dalle tue Collezioni CMS.
• Slot — gli slot sono elementi che puoi inserire nei componenti esistenti che fungono da segnaposto per altri componenti. Questo ti permette di costruire componenti in modo modulare, dove ogni istanza può includere diversi componenti nello slot.
• Varianti di stile — definiscono opzioni di design multiple per un singolo componente, permettendoti di adattarne l'aspetto per diversi casi d'uso. Ad esempio, puoi offrire varianti di stile come pulsanti solidi o con contorno, o layout di carte orizzontali e verticali.

Crea varianti di stile del componente

Puoi creare varianti di un componente con layout, colori, stili di carattere diversi ecc. (ad esempio, pulsanti solidi o outline, o layout di schede orizzontali e verticali) e scegliere quale variante utilizzare in ogni istanza del tuo componente sul tuo sito.

Per creare una variante di stile del componente:

1. Modifica il componente principale
2. Vai al pannello Stile
3. Clicca sull'icona “varianti del componente” nel selettore Stile
4. Clicca sull'icona “più”
5. Dai un nome univoco alla variante
6. Premi Invio/Return per confermare

Gestisci la proprietà variante

Quando crei una variante di stile del componente, una proprietà variante viene automaticamente creata per quel componente. Puoi cambiare il nome della proprietà variante, aggiungerla a un gruppo di proprietà e impostare una variante predefinita per il componente nel pannello Props.

Per cambiare il nome della proprietà variante:

1. Modifica il componente principale
2. Vai al pannello Props
3. Clicca sulla proprietà Variante
4. Inserisci un nome univoco per la proprietà
5. Premi Invio/Return per confermare

Per aggiungere la proprietà variante a un gruppo di proprietà:

1. Modifica il componente principale
2. Vai al pannello Props
3. Clicca sulla proprietà Variante
4. Seleziona un gruppo o inserisci un nome univoco per creare un nuovo gruppo
5. Clicca su Crea o premi Invio/Return per confermare

Imposta una variante predefinita per un componente:

1. Modifica il componente principale
2. Vai al pannello Props
3. Clicca sulla proprietà Variante
4. Scegli una variante dal menu a tendina Predefiniti

Cambia la variante di un'istanza del componente

Come per le altre proprietà del componente, puoi scegliere la variante di stile per ogni istanza di un componente. Per cambiare la variante di un'istanza del componente:

1. Clicca una volta sul componente per aprire il pannello Props
2. Scegli la variante per questa istanza dal menu a tendina Varianti

Riordinare, rinominare, duplicare o eliminare varianti di stile del componente

In modalità design, puoi gestire le varianti di stile del componente (riordinare, rinominare, duplicare o eliminare varianti).

Per riordinare le varianti di un componente:

1. Modifica il componente principale
2. Vai al pannello Stile
3. Clicca sull'icona “varianti del componente” nel selettore Stile
4. Clicca e trascina una variante per spostarla in una nuova posizione

Per rinominare una variante:

1. Modifica il componente principale
2. Vai al pannello Stile
3. Clicca sull'icona “varianti del componente” nel selettore Stile
4. Passa il mouse sulla variante e clicca sull'icona “altre opzioni”
5. Clicca Rinomina
6. Inserisci un nuovo nome univoco per la variante
7. Premi Invio/Return per confermare

Per duplicare una variante:

1. Modifica il componente principale
2. Vai al pannello Stile
3. Clicca sull'icona “varianti del componente” nel selettore Stile
4. Passa il mouse sulla variante e clicca sull'icona “altre opzioni”
5. Clicca Duplica
6. Inserisci un nuovo nome univoco per la variante
7. Premi Invio/Return per confermare

Per eliminare una variante:

1. Modifica il componente principale
2. Vai al pannello Stile
3. Clicca sull'icona “varianti del componente” nel selettore Stile
4. Passa il mouse sulla variante e clicca sull'icona “altre opzioni”
5. Clicca Elimina
6. Clicca Elimina nel pop-up per confermare

Uscire dal componente principale

Una volta terminata la modifica del componente principale, puoi uscire dal componente principale:

• Cliccando la freccia “indietro” nell'angolo in alto a sinistra del Designer
• Cliccando fuori dal componente sulla tela
• Premendo Esc sulla tastiera

Modifica i componenti nell'Editor

Se hai invitato editor di contenuti a aggiornare il contenuto del tuo sito nell'Editor, qualsiasi modifica apportata agli elementi del componente che non sono modificati con una proprietà del componente e sono coerenti in tutte le istanze, si applicherà a tutte le altre istanze.

In alternativa, se l'editor di contenuti apporta modifiche agli elementi del componente che sono modificati tramite una proprietà del componente, tali modifiche si applicheranno solo all'istanza del componente che stanno modificando.

Modifica il nome o la descrizione di un componente

Per modificare il nome o la descrizione di un componente:

1. Apri il pannello Componenti
2. Passa il mouse su un nome di componente e fai clic sui puntini "altre opzioni" che appaiono
3. Fai clic su Modifica impostazioni
4. Apporta le modifiche e Salva

Rinomina un'istanza di componente

Puoi rinominare singole istanze di componenti per renderle più facili da identificare — questo è particolarmente utile quando riutilizzi lo stesso componente più volte su una pagina.

Per rinominare un'istanza di componente:

• Nel Navigatore o nella parte superiore del pannello destro:

1. Fai doppio clic sul nome del componente
2. Digita il nuovo nome
3. Premi Invio o fai clic fuori per salvare il tuo nome personalizzato

• Sulla tela:

1. Fai clic destro sull'istanza del componente
2. Fai clic su Rinomina
3. Digita il nuovo nome
4. Premi Invio o fai clic fuori per salvare il tuo nome personalizzato

Per ripristinare il nome al nome originale del componente, elimina il nome personalizzato durante la rinomina o fai clic destro sull'istanza nel Navigatore o sulla tela e fai clic su Ripristina nome.

Raggruppa i componenti

Per organizzare i tuoi componenti in gruppi:

1. Apri il pannello Componenti
2. Passa il mouse su un nome di componente e fai clic sui puntini "altre opzioni" che appaiono
3. Scegli Modifica impostazioni
4. Scegli un gruppo esistente dal menu a discesa Gruppo, o digita per creare un nuovo gruppo

Per rinominare o separare un gruppo di componenti, passa il mouse sul titolo del gruppo e fai clic sui puntini "altre opzioni".

Eliminare un componente

Per eliminare completamente un componente:

1. Rimuovi o scollega tutte le istanze del componente dal tuo sito
2. Apri il pannello Componenti
3. Passa il mouse sul nome di un componente e fai clic sui puntini "altre opzioni" che appaiono
4. Scegli Modifica impostazioni
5. Fai clic su Elimina e conferma

Come scollegare un'istanza di componente dal suo componente principale

Per scollegare un'istanza di componente e apportare modifiche indipendenti dal componente principale:

1. Fai clic con il tasto destro su qualsiasi elemento del componente nell'istanza che desideri scollegare
2. Fai clic su Scollega istanza

Una volta scollegata, se modifichi qualsiasi altra istanza collegata di quel componente nel tuo design, non cambierà l'istanza scollegata.

Condivisione di componenti tra siti con Librerie

Puoi condividere componenti nativi e di codice tra siti in un Workspace con Librerie. Questo può accelerare il tuo flusso di lavoro e migliorare il tuo sistema di design fornendo un unico luogo per aggiornare i componenti utilizzati su più siti nel tuo Workspace.

Torna all'aiuto di webflow