Overzicht van componenten - Webflow help

Gebruik componenten om herhalende layouts en inhoud efficiënter te beheren op je site.

Componenten geven je de mogelijkheid om aanpasbare blokken te maken van elementen en subelementen om een consistente, efficiënte en schaalbare ontwerpworkflow te behouden. Je kunt deze blokken hergebruiken op je site en ze op één plek aanpassen om te voorkomen dat je elke herhalende layout individueel moet herzien.

Hoe maak je een component

Je kunt componenten visueel maken in Webflow, of bestaande componenten importeren vanuit een externe codebase met DevLink. Dit gedeelte richt zich op visuele ontwikkeling.

Je kunt een component maken van een element of groep elementen, en kiezen of elke instantie identiek is op je site of wijzigingen toestaat in de inhoud, layout of stijl:

• Identieke inhoud en ontwerp per instantie — maak een component voor herhalende layouts (bijv. navigatiebalken en voetteksten) om te hergebruiken op je site. Wijzigingen in de inhoud of het ontwerp worden automatisch bijgewerkt in elke instantie van de component.
• Unieke inhoud per instantie — maak een component met een consistente layout en ontwerp, maar laat elke instantie verschillende inhoud hebben, (bijv. een hero-sectie layout die unieke tekst, afbeeldingen of video's per instantie kan hebben) met behulp van componentprops en slots.
• Verschillende stijlvarianten per instantie — maak een component met vooraf gedefinieerde stijl- en layoutopties, (bijv. solide en omtrekknoppen, of horizontale en verticale kaartlayouts). Componentstijlvarianten laten je het ontwerp van elke instantie aanpassen zonder aparte componenten te hoeven maken.

Om een component te maken:

1. Selecteer het element dat je in een component wilt omzetten
2. Open het Componentenpaneel, Stijlpaneel of Elementinstellingenpaneel
3. Klik op het pictogram “component maken” bovenaan het paneel
4. Geef je component een naam en optionele beschrijving en klik op Maken

Je kunt ook een bestaand component dupliceren door het component te selecteren, op de "meer opties" stippen te klikken en Dupliceren te kiezen.

Je bevindt je in het hoofdcomponent nadat je een component hebt gemaakt — wat betekent dat alle wijzigingen in het hoofdcomponent worden bijgewerkt in alle instanties van dat component. Op elk moment kun je het hoofdcomponent in een componentinstantie openen door:

• Dubbel te klikken op de componentinstantie
• Rechts te klikken op de instantie en Component bewerken te klikken
• De instantie te selecteren en op het "potlood" icoon in het label te klikken
• De instantie te selecteren en op het "moersleutel" icoon in de rechterbovenhoek van het rechterpaneel te klikken

Meer informatie over het bewerken van het hoofdcomponent.

Hoe een component te gebruiken en hergebruiken

Zodra je een component hebt gemaakt, kun je het overal op je site hergebruiken:

1. Open het Componentenpaneel
2. Beweeg over een component om een voorbeeld te bekijken
3. Klik en sleep het gewenste component naar een willekeurige pagina op je site
4. Plaats de componentinstantie direct op het canvas of in de Navigator

Wanneer je een componentinstantie selecteert, zie je deze gemarkeerd en omlijnd in groen. Open het Componentenpaneel om te zien hoe vaak elk van je componenten op je site is gebruikt.

Om de elementenhiërarchie van een component in het Navigator-paneel te bekijken, houd Option + dubbelklik (op Mac) of houd Alt + dubbelklik (op Windows) op het component, of klik op het "hoofdcomponent bewerken" icoon. Je kunt de elementenhiërarchie van het component alleen vanuit het hoofdcomponent zien (niet binnen een componentinstantie).

Hoe een component te bewerken

Laten we de verschillende manieren doorlopen waarop je met een component kunt omgaan en deze kunt bewerken:

• Bewerk het hoofdcomponent
• Component eigenschappen, slots en stijlvarianten
• Maak component stijlvarianten
• Beheer de variant eigenschap
• Wijzig de variant van een componentinstantie
• Herorden, hernoem, dupliceer of verwijder component stijlvarianten
• Verlaat het hoofdcomponent
• Bewerk componenten in de Editor
• Wijzig een componentnaam of beschrijving
• Groepeer componenten
• Verwijder een component

Bewerk het hoofdcomponent

Om dezelfde wijzigingen in alle instanties van een component aan te brengen, moet je het hoofdcomponent bewerken. Je kunt het hoofdcomponent op elke componentinstantie bewerken door:

• Dubbelklikken op de componentinstantie op het canvas
• Optie ingedrukt houden + dubbelklikken (Mac) of Alt + dubbelklikken (Windows) op de instantie in de Navigator
• Rechtsklikken op de instantie en klikken op Component bewerken
• De instantie selecteren en op het "component bewerken" pictogram in het label klikken
• De instantie selecteren en op het "component bewerken" pictogram bovenaan het rechterpaneel klikken

Wijzigingen aan het hoofdcomponent zullen elke componentinstantie beïnvloeden (tenzij die componentinstantie componenteigenschappen heeft toegepast op specifieke elementen binnen het component). Bij het bewerken van het hoofdcomponent kun je de structuur en elementvolgorde wijzigen om tegelijkertijd alle componentinstanties op je site te beïnvloeden.

Component eigenschappen, slots en stijlvarianten

Component eigenschappen (props), slots en stijlvarianten laten je unieke configuraties maken op elke instantie van een component:

• Eigenschappen — verbind individuele elementinstellingen in het hoofdcomponent (bijv. tekst, links, afbeeldingen of video's) met eigenschappen. Dit stelt je in staat om deze instellingen op elke instantie aan te passen zonder de algehele structuur of het ontwerp van het component te wijzigen. Eigenschappen kunnen ook worden verbonden met CMS-velden om dynamisch inhoud uit je CMS-collecties te halen.
• Slots — slots zijn elementen die je in bestaande componenten kunt plaatsen en die fungeren als placeholders voor andere componenten. Dit stelt je in staat om componenten modulair te bouwen, waarbij elke instantie verschillende componenten in de slot kan bevatten.
• Stijlvarianten — definieer meerdere ontwerpopties voor een enkel component, zodat je het uiterlijk kunt aanpassen voor verschillende gebruikssituaties. Bijvoorbeeld, je kunt stijlvarianten aanbieden zoals solide of omtrekknoppen, of horizontale en verticale kaartlay-outs.

Maak componentstijlvarianten

Je kunt varianten van een component maken met verschillende lay-outs, kleuren, letterstijlen, enz. (bijv. solide of omtrekknoppen, of horizontale en verticale kaartlay-outs) en kiezen welke variant je wilt gebruiken voor elke instantie van je component op je site.

Om een componentstijlvariant te maken:

1. Bewerk het hoofdcomponent
2. Ga naar het Stijl paneel
3. Klik op het pictogram "componentvarianten" in de Stijl kiezer
4. Klik op het "plus" pictogram
5. Geef de variant een unieke naam
6. Druk op Enter/Return om te bevestigen

Beheer de variant-eigenschap

Wanneer je een componentstijlvariant maakt, wordt er automatisch een variant-eigenschap voor dat component aangemaakt. Je kunt de naam van de variant-eigenschap wijzigen, deze toevoegen aan een eigenschapsgroep en een standaardvariant instellen voor het component in het Eigenschappen paneel.

Om de naam van de variant-eigenschap te wijzigen:

1. Bewerk het hoofdcomponent
2. Ga naar het Eigenschappen paneel
3. Klik op de Variant-eigenschap
4. Voer een unieke eigenschapsnaam in
5. Druk op Enter/Return om te bevestigen

Om de variant-eigenschap aan een eigenschapsgroep toe te voegen:

1. Bewerk het hoofdcomponent
2. Ga naar het Eigenschappen paneel
3. Klik op de Variant-eigenschap
4. Selecteer een groep of voer een unieke naam in om een nieuwe groep te maken
5. Klik op Maken of druk op Enter/Return om te bevestigen

Stel een standaardvariant voor een component in:

1. Bewerk het hoofdcomponent
2. Ga naar het Eigenschappen paneel
3. Klik op de Variant-eigenschap
4. Kies een variant uit de Standaarden dropdown

Wijzig de variant van een componentinstantie

Net als andere componenteigenschappen kun je de stijlvariant voor elke instantie van een component kiezen. Om de variant van een componentinstantie te wijzigen:

1. Klik eenmaal op het component om het Eigenschappen paneel te openen
2. Kies de variant voor deze instantie uit de Varianten dropdown

Herschik, hernoem, dupliceer of verwijder componentstijlvarianten

In de ontwerpmode kun je componentstijlvarianten beheren (herschikken, hernoemen, dupliceren of verwijderen).

Om de varianten van een component te herschikken:

1. Bewerk het hoofdcomponent
2. Ga naar het Stijl paneel
3. Klik op het pictogram "componentvarianten" in de Stijl kiezer
4. Klik en sleep een variant om deze naar een nieuwe positie te verplaatsen

Om een variant te hernoemen:

1. Bewerk het hoofdcomponent
2. Ga naar het Stijl paneel
3. Klik op het pictogram "componentvarianten" in de Stijl kiezer
4. Beweeg over de variant en klik op het pictogram "meer opties"
5. Klik op Hernoemen
6. Voer een nieuwe, unieke variantnaam in
7. Druk op Enter/Return om te bevestigen

Om een variant te dupliceren:

1. Bewerk het hoofdcomponent
2. Ga naar het Stijl paneel
3. Klik op het pictogram "componentvarianten" in de Stijl kiezer
4. Beweeg over de variant en klik op het pictogram "meer opties"
5. Klik op Dupliceren
6. Voer een nieuwe, unieke variantnaam in
7. Druk op Enter/Return om te bevestigen

Om een variant te verwijderen:

1. Bewerk het hoofdcomponent
2. Ga naar het Stijl paneel
3. Klik op het pictogram "componentvarianten" in de Stijl kiezer
4. Beweeg over de variant en klik op het pictogram "meer opties"
5. Klik op Verwijderen
6. Klik op Verwijderen in de pop-up om te bevestigen

Verlaat het hoofdcomponent

Als je klaar bent met het bewerken van het hoofdcomponent, kun je het hoofdcomponent verlaten door:

• Te klikken op de "terug" pijl in de linkerbovenhoek van de Designer
• Buiten het component op het canvas te klikken
• Escape op je toetsenbord in te drukken

Bewerk componenten in de Editor

Als je content editors hebt uitgenodigd om de inhoud van je site in de Editor bij te werken, zullen alle wijzigingen die zij aanbrengen aan componentelementen die niet met een componenteigenschap zijn aangepast en consistent zijn over alle instanties, van toepassing zijn op alle andere instanties.

Als de content editor daarentegen wijzigingen aanbrengt aan componentelementen die via een componenteigenschap zijn aangepast, zullen die wijzigingen alleen van toepassing zijn op de componentinstantie die ze aan het bewerken zijn.

Wijzig een componentnaam of beschrijving

Om een componentnaam of beschrijving te wijzigen:

1. Open het Componentenpaneel
2. Beweeg de muis over een componentnaam en klik op de "meer opties" stippen die verschijnen
3. Klik op Instellingen bewerken
4. Breng je wijzigingen aan en sla op

Hernoem een componentinstantie

Je kunt individuele componentinstanties hernoemen om ze gemakkelijker te identificeren — dit is vooral handig bij het hergebruiken van hetzelfde component meerdere keren op een pagina.

Om een componentinstantie te hernoemen:

• In de Navigator of bovenaan het rechterpaneel:

1. Dubbelklik op de componentnaam
2. Typ de nieuwe naam
3. Druk op Enter of klik weg om je aangepaste naam op te slaan

• Op het canvas:

1. Klik met de rechtermuisknop op de componentinstantie
2. Klik op Hernoemen
3. Typ de nieuwe naam
4. Druk op Enter of klik weg om je aangepaste naam op te slaan

Om de naam terug te zetten naar de oorspronkelijke componentnaam, verwijder je de aangepaste naam tijdens het hernoemen of klik je met de rechtermuisknop op de instantie in de Navigator of op het canvas en klik je op Naam resetten.

Groepeer componenten

Om je componenten in groepen te organiseren:

1. Open het Componentenpaneel
2. Beweeg de muis over een componentnaam en klik op de "meer opties" stippen die verschijnen
3. Kies Instellingen bewerken
4. Kies een bestaande groep uit de Groep dropdown, of typ om een nieuwe groep te maken

Om een componentgroep te hernoemen of te ontgroeperen, beweeg de muis over de groepstitel en klik op de "meer opties" stippen.

Een component verwijderen

Om een component volledig te verwijderen:

1. Verwijder of ontkoppel alle instanties van het component van je site
2. Open het Componentenpaneel
3. Beweeg de muis over een componentnaam en klik op de "meer opties" stippen die verschijnen
4. Kies Instellingen bewerken
5. Klik op Verwijderen en bevestig

Hoe een componentinstantie los te koppelen van het hoofdcomponent

Om een componentinstantie los te koppelen en er onafhankelijk van het hoofdcomponent wijzigingen in aan te brengen:

1. Klik met de rechtermuisknop op een componentelement in de instantie die je wilt ontkoppelen
2. Klik op Instantie ontkoppelen

Zodra ontkoppeld, als je een andere gekoppelde instantie van dat component in je ontwerp bewerkt, zal het de ontkoppelde instantie niet veranderen.

Componenten delen over sites met Bibliotheken

Je kunt native en codecomponenten delen over sites in een Werkruimte met Bibliotheken. Dit kan je workflow versnellen en je ontwerpsysteem verbeteren door een enkele plek te bieden om componenten bij te werken die worden gebruikt op meerdere sites in je Werkruimte.

Terug naar webflow help