Komponentöversikt - Webflow hjälp

Använd komponenter för att hantera återkommande layouter och innehåll mer effektivt över hela din webbplats.

Komponenter ger dig möjligheten att skapa anpassningsbara block från element och underordnade element för att upprätthålla ett konsekvent, effektivt och skalbart designarbetsflöde. Du kan återanvända dessa block över hela din webbplats och ändra dem på en enda plats för att undvika att behöva revidera varje återkommande layout individuellt.

Hur man skapar en komponent

Du kan skapa komponenter visuellt i Webflow, eller importera befintliga komponenter från en extern kodbas med DevLink. Denna sektion fokuserar på visuell utveckling.

Du kan skapa en komponent från ett element eller en grupp av element och välja om varje instans är identisk över hela din webbplats eller tillåter ändringar i dess innehåll, layout eller stil:

• Identiskt innehåll och design per instans — skapa en komponent för återkommande layouter (t.ex. navigationsfält och sidfötter) för att återanvända över hela din webbplats. Alla ändringar i innehåll eller design uppdaterar automatiskt varje instans av komponenten.
• Unikt innehåll per instans — skapa en komponent med en konsekvent layout och design, men tillåt varje instans att ha olika innehåll, (t.ex. en hjältesektionslayout som kan ha unik text, bilder eller videor per instans) med hjälp av komponentegenskaper och platser.
• Olika stilvarianter per instans — skapa en komponent med fördefinierade stil- och layoutalternativ, (t.ex. solida och konturknappar, eller horisontella och vertikala kortlayouter). Komponentstilvarianter låter dig anpassa designen av varje instans utan att behöva skapa separata komponenter.

För att skapa en komponent:

1. Välj det element du vill omvandla till en komponent
2. Öppna Komponentpanelen, Stilpanelen eller Elementinställningspanelen
3. Klicka på ikonen “skapa komponent” högst upp i panelen
4. Ge din komponent ett namn och en valfri beskrivning och klicka på Skapa

Du kan också duplicera en befintlig komponent genom att välja komponenten, klicka på "fler alternativ"-prickarna och välja Duplicera.

Du kommer att vara inne i huvudkomponenten efter att du har skapat en komponent — vilket innebär att alla ändringar i huvudkomponenten uppdateras över alla instanser av den komponenten. När som helst kan du gå in i huvudkomponenten på vilken komponentinstans som helst genom att:

• Dubbelklicka på komponentinstansen
• Högerklicka på instansen och klicka på Redigera komponent
• Välja instansen och klicka på "penna"-ikonen i etiketten
• Välja instansen och klicka på "skiftnyckel"-ikonen i det övre högra hörnet av den högra panelen

Läs mer om att redigera huvudkomponenten.

Hur man använder och återanvänder en komponent

När du har skapat en komponent kan du återanvända den var som helst på din webbplats:

1. Öppna Komponentpanelen
2. Hovra över en komponent för att se en förhandsvisning
3. Klicka och dra den önskade komponenten till vilken sida som helst på din webbplats
4. Släpp komponentinstansen direkt på duken eller i Navigatören

När du väljer en komponentinstans kommer den att markeras och omges av en grön linje. Öppna Komponentpanelen för att se hur många gånger var och en av dina komponenter har använts på din webbplats.

För att se en komponents elementhierarki i Navigatörpanelen, håll ned Option + dubbelklicka (på Mac) eller håll ned Alt + dubbelklicka (på Windows) på komponenten, eller klicka på "redigera huvudkomponent"-ikonen. Du kommer endast att kunna se komponentens elementhierarki från huvudkomponenten (inte inom en komponentinstans).

Hur man redigerar en komponent

Låt oss gå igenom de olika sätten du kan interagera med och redigera en komponent:

• Redigera huvudkomponenten
• Komponentegenskaper, platshållare och stilvarianter
• Skapa komponentstilvarianter
• Hantera variant-egenskapen
• Ändra en komponentinstans variant
• Omordna, byta namn, duplicera eller ta bort komponentstilvarianter
• Avsluta huvudkomponenten
• Redigera komponenter i redigeraren
• Ändra en komponentnamn eller beskrivning
• Gruppera komponenter
• Ta bort en komponent

Redigera huvudkomponenten

För att göra samma ändringar i alla instanser av en komponent måste du redigera huvudkomponenten. Du kan redigera huvudkomponenten på vilken komponentinstans som helst genom att:

• Dubbelklicka på komponentinstansen på duken
• Hålla nere Option + dubbelklicka (Mac) eller Alt + dubbelklicka (Windows) på instansen i Navigatorn
• Högerklicka på instansen och klicka på Redigera komponent
• Välja instansen och klicka på ikonen "redigera komponent" i etiketten
• Välja instansen och klicka på ikonen "redigera komponent" högst upp i den högra panelen

Ändringar i huvudkomponenten påverkar varje komponentinstans (om inte den komponentinstansen har komponentegenskaper tillämpade på specifika element inom komponenten). När du redigerar huvudkomponenten kan du ändra strukturen och elementordningen för att samtidigt påverka alla komponentinstanser på din webbplats.

Komponentegenskaper, platshållare och stilvarianter

Komponentegenskaper (props), platshållare och stilvarianter låter dig skapa unika konfigurationer på varje instans av en komponent:

• Egenskaper — koppla individuella elementinställningar i huvudkomponenten (t.ex. text, länkar, bilder eller videor) till egenskaper. Detta låter dig anpassa dessa inställningar på varje instans utan att ändra komponentens övergripande struktur eller design. Egenskaper kan också kopplas till CMS-fält för att dynamiskt hämta innehåll från dina CMS-samlingar.
• Platshållare — platshållare är element du kan placera i befintliga komponenter som fungerar som platshållare för andra komponenter. Detta låter dig bygga komponenter modulärt, där varje instans kan inkludera olika komponenter i platshållaren.
• Stilvarianter — definiera flera designalternativ för en enda komponent, vilket gör att du kan anpassa dess utseende för olika användningsområden. Till exempel kan du erbjuda stilvarianter som solida eller konturknappar, eller horisontella och vertikala kortlayouter.

Skapa komponentstilvarianter

Du kan skapa varianter av en komponent med olika layouter, färger, typsnittsstilar etc. (t.ex. solida eller konturknappar, eller horisontella och vertikala kortlayouter) och välja vilken variant som ska användas för varje instans av din komponent på din webbplats.

För att skapa en komponentstilvariant:

1. Redigera huvudkomponenten
2. Gå till Stilpanelen
3. Klicka på ikonen för "komponentvarianter" i Stilväljaren
4. Klicka på "plus"-ikonen
5. Ge varianten ett unikt namn
6. Tryck på Enter/Return för att bekräfta

Hantera variant-egenskapen

När du skapar en komponentstilvariant skapas automatiskt en variant-egenskap för den komponenten. Du kan ändra variant-egenskapens namn, lägga till den i en egenskapsgrupp och ställa in en standardvariant för komponenten i Egenskapspanelen.

För att ändra namnet på variant-egenskapen:

1. Redigera huvudkomponenten
2. Gå till Egenskapspanelen
3. Klicka på Variant-egenskapen
4. Ange ett unikt egenskapsnamn
5. Tryck på Enter/Return för att bekräfta

För att lägga till variant-egenskapen i en egenskapsgrupp:

1. Redigera huvudkomponenten
2. Gå till Egenskapspanelen
3. Klicka på Variant-egenskapen
4. Välj en grupp eller ange ett unikt namn för att skapa en ny grupp
5. Klicka på Skapa eller tryck på Enter/Return för att bekräfta

Ställ in en standardvariant för en komponent:

1. Redigera huvudkomponenten
2. Gå till Egenskapspanelen
3. Klicka på Variant-egenskapen
4. Välj en variant från rullgardinsmenyn Standard

Ändra en komponentinstans variant

Precis som andra komponenteegenskaper kan du välja stilvarianten för varje instans av en komponent. För att ändra en komponentinstans variant:

1. Enkelklicka på komponenten för att öppna Egenskapspanelen
2. Välj varianten för denna instans från rullgardinsmenyn Varianter

Ordna om, byt namn, duplicera eller ta bort komponentstilvarianter

I designläge kan du hantera komponentstilvarianter (ordna om, byt namn, duplicera eller ta bort varianter).

För att ordna om en komponents varianter:

1. Redigera huvudkomponenten
2. Gå till Stilpanelen
3. Klicka på ikonen för “komponentvarianter” i Stilväljaren
4. Klicka och dra en variant för att flytta den till en ny position

För att byta namn på en variant:

1. Redigera huvudkomponenten
2. Gå till Stilpanelen
3. Klicka på ikonen för “komponentvarianter” i Stilväljaren
4. Hovra över varianten och klicka på ikonen för “fler alternativ”
5. Klicka på Byt namn
6. Ange ett nytt, unikt variantnamn
7. Tryck på Enter/Return för att bekräfta

För att duplicera en variant:

1. Redigera huvudkomponenten
2. Gå till Stilpanelen
3. Klicka på ikonen för “komponentvarianter” i Stilväljaren
4. Hovra över varianten och klicka på ikonen för “fler alternativ”
5. Klicka på Duplicera
6. Ange ett nytt, unikt variantnamn
7. Tryck på Enter/Return för att bekräfta

För att ta bort en variant:

1. Redigera huvudkomponenten
2. Gå till Stilpanelen
3. Klicka på ikonen för “komponentvarianter” i Stilväljaren
4. Hovra över varianten och klicka på ikonen för “fler alternativ”
5. Klicka på Ta bort
6. Klicka på Ta bort i popup-fönstret för att bekräfta

Avsluta huvudkomponenten

När du är klar med att redigera huvudkomponenten kan du avsluta huvudkomponenten genom att:

• Klicka på “tillbaka”-pilen i det övre vänstra hörnet av Designern
• Klicka utanför komponenten på duken
• Trycka på Escape på ditt tangentbord

Redigera komponenter i redigeraren

Om du har bjudit in innehållsredigerare att uppdatera din webbplats innehåll i redigeraren, kommer alla ändringar de gör på komponentelement som inte modifieras med en komponentegenskap och är konsekventa över alla instanser, att gälla för alla andra instanser.

Alternativt, om innehållsredigeraren gör ändringar på komponentelement som modifieras via en komponentegenskap, kommer dessa ändringar endast att gälla för den komponentinstans de redigerar.

Ändra ett komponentnamn eller beskrivning

För att ändra ett komponentnamn eller beskrivning:

1. Öppna Komponentpanelen
2. Hovra över ett komponentnamn och klicka på de "fler alternativ"-prickar som visas
3. Klicka på Redigera inställningar
4. Gör dina ändringar och Spara

Byt namn på en komponentinstans

Du kan byta namn på enskilda komponentinstanser för att göra dem lättare att identifiera — detta är särskilt användbart när du återanvänder samma komponent flera gånger på en sida.

För att byta namn på en komponentinstans:

• I Navigatören eller högst upp i den högra panelen:

1. Dubbelklicka på komponentnamnet
2. Skriv det nya namnet
3. Tryck på Enter eller klicka bort för att spara ditt anpassade namn

• På duken:

1. Högerklicka på komponentinstansen
2. Klicka på Byt namn
3. Skriv det nya namnet
4. Tryck på Enter eller klicka bort för att spara ditt anpassade namn

För att återställa namnet till det ursprungliga komponentnamnet, ta bort det anpassade namnet under namnbytet eller högerklicka på instansen i Navigatören eller på duken och klicka på Återställ namn.

Gruppera komponenter

För att organisera dina komponenter i grupper:

1. Öppna Komponentpanelen
2. Hovra över ett komponentnamn och klicka på de "fler alternativ"-prickar som visas
3. Välj Redigera inställningar
4. Välj en befintlig grupp från Grupp-rullgardinsmenyn, eller skriv för att skapa en ny grupp

För att byta namn på eller avgruppera en komponentgrupp, håll muspekaren över gruppens titel och klicka på "fler alternativ"-prickarna.

Ta bort en komponent

För att ta bort en komponent helt:

1. Ta bort eller avlänka alla instanser av komponenten från din webbplats
2. Öppna Komponentpanelen
3. Håll muspekaren över ett komponentnamn och klicka på "fler alternativ"-prickarna som visas
4. Välj Redigera inställningar
5. Klicka på Ta bort och bekräfta

Hur man avlänkar en komponentinstans från dess huvudkomponent

För att avlänka en komponentinstans och göra ändringar i den oberoende av huvudkomponenten:

1. Högerklicka på valfritt komponentelement i den instans du vill avlänka
2. Klicka på Avlänka instans

När den är avlänkad, om du redigerar någon annan länkad instans av den komponenten i din design, kommer det inte att ändra den avlänkade instansen.

Dela komponenter över webbplatser med Bibliotek

Du kan dela inbyggda och kodkomponenter över webbplatser i ett Arbetsutrymme med Bibliotek. Detta kan påskynda ditt arbetsflöde och förbättra ditt designsystem genom att tillhandahålla en enda plats för att uppdatera komponenter som används över flera webbplatser i ditt Arbetsutrymme.

Tillbaka till webflow hjälp