{"id":148591,"date":"2025-05-19T15:53:36","date_gmt":"2025-05-19T12:53:36","guid":{"rendered":"https:\/\/elementor.com\/help\/klassen-in-elementor-2\/"},"modified":"2025-05-19T15:53:36","modified_gmt":"2025-05-19T12:53:36","slug":"klassen-in-elementor-2","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/","title":{"rendered":"Klassen in elementor"},"content":{"rendered":"\n<p>De Elementor Editor is ontworpen om webcreators te helpen snel en effici\u00ebnt te werken. Als onderdeel van die missie hanteert de Editor de principes van Atomic Design. Dit systeem is gebaseerd op het idee van het cre\u00ebren van kleine, herbruikbare elementen. In Elementor worden deze elementen klassen genoemd. Dit sluit aan bij de terminologie die door CSS wordt gebruikt.    <\/p>\n\n\n\n<p>Als extra voordeel kan het juiste gebruik van klassen ook de prestaties van je website verbeteren.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Een klasse aanmaken<\/h2>\n\n\n\n<p>Klassen maken gebeurt automatisch. Je doet dit elke keer dat je een <a href=\"https:\/\/elementor.com\/help\/add-elements-to-a-page\/\">element aan het canvas<\/a> toevoegt. Wanneer je een element aan het canvas toevoegt, verschijnen de elementopties in het linkerpaneel. Bovenaan het <strong>Stijl<\/strong>-tabblad zie je het <strong>Klasse<\/strong>-veld met de klasse <strong>lokaal<\/strong> al ingevuld. Je kunt nu nieuwe klassen aan het element toevoegen door dit proces te volgen:    <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Voer een klassenaam in het tekstvak in.<br>Er verschijnt een dropdownmenu.<br><img fetchpriority=\"high\" decoding=\"async\" width=\"580\" height=\"296\" class=\"wp-image-57382\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png 1468w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-300x153.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-1024x522.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1-768x391.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Selecteer de klassenaam onder <strong>Nieuwe Globale Klasse Toevoegen<\/strong>.&nbsp;<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Een klasse bewerken<\/h2>\n\n\n\n<p>Nadat je een klasse hebt aangemaakt, moet je deze bewerken om de eigenschappen vast te stellen.<\/p>\n\n\n\n<p><strong>Om een klasse te bewerken<\/strong>:&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Maak de klasse aan.<br><img decoding=\"async\" width=\"680\" height=\"350\" class=\"wp-image-57383\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image.png 1600w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-300x155.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1024x527.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-768x396.png 768w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/image-1536x791.png 1536w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Controleer het CSS klassenveld. De klasse die je bewerkt is roze als het een lokale klasse is. Anders is deze groen. Wanneer de klasse roze of groen is, bewerk je die klasse.   <\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Wat is een klasse?<\/h2>\n\n\n\n<p>Een klasse is in principe een verzameling van gedeelde stijlkenmerken. Als je bijvoorbeeld een website bouwt en je wilt dat de standaardtekst op de site Arial 12 punts lettertype gebruikt, kun je een klasse genaamd <strong>Hoofdtekst<\/strong> maken met deze kenmerken. Op die manier zou elk element met de klasse <strong>Hoofdtekst<\/strong> Arial 12 punts als lettertype gebruiken.  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">De lokale klasse<\/h3>\n\n\n\n<p>In Elementor heeft elk element ten minste \u00e9\u00e9n klasse &#8211; de <strong>lokale<\/strong> klasse. Deze klasse definieert het specifieke element waarmee je werkt. Het is belangrijk om te weten dat hoewel alle elementen een lokale klasse hebben, de <strong>lokale<\/strong> klasse voor elk element anders kan zijn. Je kunt bijvoorbeeld \u00e9\u00e9n Tekst widget hebben die Arial lettertype gebruikt in zijn <strong>lokale<\/strong> klasse en een andere Tekst widget die Calibri gebruikt in zijn <strong>lokale<\/strong> klasse.   &nbsp;<br><img decoding=\"async\" width=\"280\" height=\"188\" class=\"wp-image-57385\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-the-local-class.png\" alt=\"\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Klassenhi\u00ebrarchie<\/h3>\n\n\n\n<p>Het andere belangrijke punt over klassen is dat ze werken volgens hi\u00ebrarchie\u00ebn. Als klassen elkaar tegenspreken, weet de Editor welke kenmerken prioriteit hebben. Als een element bijvoorbeeld twee klassen bevat, \u00e9\u00e9n die het lettertype op Arial instelt en een andere die de klasse op Calibri instelt, moet de editor bepalen welke prioriteit krijgt. Deze prioriteit wordt ingesteld in de klassenbeheerder. De lokale klasse heeft echter altijd de hoogste prioriteit. Dus in het bovenstaande geval, als de <strong>lokale<\/strong> klasse het lettertype op New Times Roman zou instellen, zou het element New Times Roman lettertype gebruiken.     <\/p>\n\n\n\n<p>[callout type=&#8221;tip&#8221;]Het is het beste om je klassen zo te bouwen dat er zo min mogelijk van deze conflicten zijn. Deze conflicten kunnen niet alleen je tijd verspillen, ze kunnen ook je site vertragen. &nbsp;[\/callout]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Voorbeeld van het bouwen van klassen<\/h2>\n\n\n\n<p>In dit voorbeeld kijken we naar het bouwen van een website die verschillende knoppen zal bevatten. Om tijd te besparen en de prestaties te verbeteren, maken we twee klassen &#8211; een om belangrijke knoppen te defini\u00ebren en een andere om secundaire knoppen te defini\u00ebren. &nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Maak een pagina in de Elementor Editor.<\/li>\n\n\n\n<li>Sleep een <strong>Knop widget<\/strong> naar het canvas.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57386\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/3-The-options-appear-in-the-panel-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><br>De opties verschijnen in het paneel.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"166\" class=\"wp-image-57387\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-300x73.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-1024x250.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/Click-the-Style-tab-2-768x188.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Klik in het paneel op het <strong>Stijl<\/strong>-tabblad.<br><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"175\" class=\"wp-image-57389\" style=\"width: 150px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class.png 270w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/5-creatht-emain-button-class-257x300.png 257w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/li>\n\n\n\n<li>Voer in het tekstvak <strong>Klassen<\/strong>, naast <strong>lokaal<\/strong>, <strong>Main_button<\/strong> in.<\/li>\n\n\n\n<li>Selecteer in het dropdown-menu <strong>Nieuwe \u201cMain_button\u201d maken<\/strong>.<br><strong>Hoofdknop<\/strong> verschijnt in het<strong> Klassen<\/strong>-tekstvak.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"239\" class=\"wp-image-57390\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/6-Main-button-is-in-green.png\" alt=\"\"><br>Merk op dat de tekst <strong>Main_button<\/strong> groen is. Dat betekent dat je die klasse aan het bewerken bent. <br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"383\" class=\"wp-image-57391\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/7-open-the-size-field-219x300.png 219w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Open het veld <strong>Afmeting<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"289\" class=\"wp-image-57393\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size.png 1342w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-300x127.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-1024x435.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/8-Set-the-size-768x326.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Geef de knop een breedte van 200 PX en een hoogte van 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"523\" class=\"wp-image-57394\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background.png 268w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/9-open-background-160x300.png 160w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Open het veld <strong>Achtergrond<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"468\" class=\"wp-image-57395\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color.png 693w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/10-Choose-a-background-color-244x300.png 244w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Selecteer een kleur voor de knop. Voor details, zie <a href=\"https:\/\/elementor.com\/help\/nl\/stijl-tabblad-achtergrond\/\">Stijl-tabblad &#8211; Achtergrond<\/a>. <br>Laten we nu een klasse maken voor secundaire knoppen. <br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"142\" class=\"wp-image-57396\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class.png 1344w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-300x63.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-1024x213.png 1024w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/11-delete-main-button-class-768x160.png 768w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/li>\n\n\n\n<li>Verwijder in het<strong> Klassen<\/strong>-tekstvak <strong>Main_button<\/strong>.<br>Merk op dat de knop terugkeert naar de standaardinstellingen.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"314\" class=\"wp-image-57397\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/12-create-secondary-button.png\" alt=\"\"><\/li>\n\n\n\n<li>Voer in het tekstvak <strong>Klassen<\/strong> <strong>Secundaire_knop<\/strong> in.<\/li>\n\n\n\n<li>Selecteer in het dropdown-menu <strong>Nieuwe \u201cSecondary_button\u201d maken<\/strong>.<br>Merk op dat de tekst groen is, wat betekent dat je de klasse aan het bewerken bent.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"385\" class=\"wp-image-57398\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/13-Open-the-size-field-for-secondary-218x300.png 218w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Open het veld <strong>Afmeting<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"409\" class=\"wp-image-57402\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1.png 869w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-300x212.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/14-Set-the-secondary-size-1-768x542.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Geef de knop een breedte van 100 PX en een hoogte van 50 PX.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"618\" class=\"wp-image-57400\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography.png 266w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/15-open-typography-136x300.png 136w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>&nbsp;Open het veld <strong>Typografie<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"483\" class=\"wp-image-57403\" style=\"width: 580px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography.png 942w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-300x250.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/16-change-the-typography-768x639.png 768w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/li>\n\n\n\n<li>Stel de <strong>lettergrootte<\/strong> in op 12.&nbsp;<\/li>\n\n\n\n<li>Open het veld <strong>Achtergrond<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"385\" class=\"wp-image-57404\" style=\"width: 380px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary.png 844w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-296x300.png 296w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/18-change-background-secondary-768x777.png 768w\" sizes=\"(max-width: 380px) 100vw, 380px\" \/><\/li>\n\n\n\n<li>Selecteer een kleur voor de achtergrond. Zorg ervoor dat deze anders is dan de <strong>Main_button<\/strong>-achtergrond.<br>Test nu de resultaten. <\/li>\n\n\n\n<li>Voeg een nieuw Knop element toe aan het canvas.<\/li>\n\n\n\n<li>Open het tabblad <strong>Stijl<\/strong>.<br><img decoding=\"async\" class=\"wp-image-57409\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/22-select-Main-button-2-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Klik op het <strong>Klassen<\/strong>-tekstvak en selecteer <strong>Main_button <\/strong>uit het dropdown-menu.<br><img decoding=\"async\" class=\"wp-image-57413\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/23-Main-button-entered-2-scaled.png\" alt=\"\"><br>De knop zou de kenmerken van de Main_button-klasse moeten aannemen.<br><img decoding=\"async\" class=\"wp-image-57416\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/24-Main-and-secondary-1-scaled.png\" alt=\"\"><\/li>\n\n\n\n<li>Klik op het <strong>Klassen<\/strong>-vak en selecteer <strong>Secundaire knop <\/strong>uit het dropdown-menu.<br>De knop zal de meeste kenmerken van de <strong>Hoofdknop<\/strong>-klasse hebben. Dat komt omdat de Hoofdknop-klasse hoger staat in de klassenhi\u00ebrarchie. Het lettertype op de knop neemt echter de stijl van de Secundaire knop-klasse aan. Dat komt omdat we nooit de typografie van de <strong>Hoofdknop<\/strong> hebben gedefinieerd, dus de <strong>Secundaire knop<\/strong>-klasse bepaalt de letterstijl.   &nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"505\" class=\"wp-image-57417\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1.png 608w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-166x300.png 166w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/25-select-remove-1-568x1024.png 568w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Klik in het <strong>Klassen<\/strong>-vak op de drie puntjes naast <strong>Secondary_button<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Selecteer <strong>Verwijderen<\/strong> uit het dropdown-menu.<br>Het CSS Klassen-vak zou nu alleen de <strong>lokaal<\/strong> en <strong>Main_button<\/strong>-klassen moeten bevatten. Merk op dat de lettergrootte terugkeert naar de standaardgrootte omdat de Secondary_button-klasse er niet meer is.<br>Laten we nu zeggen dat we deze ene knop willen aanpassen zodat het eruitziet als een hoofdknop maar \u00e9\u00e9n extra functie heeft &#8211; het verandert van kleur wanneer bezoekers er overheen zweven.&nbsp;<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"583\" class=\"wp-image-57423\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1.png 295w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/26-Select-hover-1-144x300.png 144w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Klik op de drie puntjes naast de <strong>lokaal<\/strong>-klasse en selecteer Hover uit het dropdown-menu.<br>Door de <strong>lokaal<\/strong>-klasse te bewerken, kunnen we de stijl van deze knop veranderen zonder andere knoppen met de <strong>Hoofdknop<\/strong>-klasse te veranderen.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"246\" class=\"wp-image-57424\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/27-The-hover-state.png\" alt=\"\"><br>Hover is wat een status wordt genoemd. Wanneer je het selecteert, bepaal je hoe de knop eruit zal zien wanneer bezoekers er met de muis overheen gaan. Voor details, zie <a href=\"https:\/\/elementor.com\/help\/element-states\/\">Elementstatussen<\/a>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"591\" class=\"wp-image-57426\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background.png 299w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/28-Open-Background-142x300.png 142w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Open het veld <strong>Achtergrond<\/strong>.<br><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"671\" class=\"wp-image-57427\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background.png 305w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/29-change-tge-background-125x300.png 125w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li>\n\n\n\n<li>Selecteer een andere achtergrondkleur.<br><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"274\" class=\"wp-image-57428\" style=\"width: 680px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/30-see-the-hover-effect.gif\" alt=\"\"><br>Merk op dat wanneer je de cursor over de knop beweegt, deze van kleur verandert.&nbsp;<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>De Elementor Editor is ontworpen om webcreators te helpen snel en effici\u00ebnt te werken. Als onderdeel van die missie hanteert de Editor de principes van Atomic Design. Dit systeem is gebaseerd op het idee van het cre\u00ebren van kleine, herbruikbare elementen. In Elementor worden deze elementen klassen genoemd. Dit sluit aan bij de terminologie die [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":[],"footnotes":""},"categories":[1603],"tags":[1695],"class_list":["post-148591","post","type-post","status-publish","format-standard","hentry","category-features-nl","tag-v4-nl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Klassen in elementor | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Klassen in elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Klassen in elementor | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Klassen in elementor in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T12:53:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1468\" \/>\n\t<meta property=\"og:image:height\" content=\"748\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cliff Churgin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cliff Churgin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\"},\"author\":{\"name\":\"Cliff Churgin\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\"},\"headline\":\"Klassen in elementor\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\"},\"wordCount\":1034,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"keywords\":[\"V4\"],\"articleSection\":[\"Features\"],\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\",\"url\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\",\"name\":\"Klassen in elementor | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"datePublished\":\"2025-05-19T12:53:36+00:00\",\"description\":\"Learn everything about Klassen in elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ongecategoriseerd\",\"item\":\"https:\/\/elementor.com\/help\/nl\/ongecategoriseerd\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Klassen in elementor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#website\",\"url\":\"https:\/\/elementor.com\/help\/nl\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/nl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3\",\"name\":\"Cliff Churgin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g\",\"caption\":\"Cliff Churgin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Klassen in elementor | Elementor","description":"Learn everything about Klassen in elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/","og_locale":"nl_NL","og_type":"article","og_title":"Klassen in elementor | Elementor","og_description":"Learn everything about Klassen in elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/","og_site_name":"Help","article_published_time":"2025-05-19T12:53:36+00:00","og_image":[{"width":1468,"height":748,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","type":"image\/png"}],"author":"Cliff Churgin","twitter_card":"summary_large_image","twitter_misc":{"Geschreven door":"Cliff Churgin","Geschatte leestijd":"5 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/"},"author":{"name":"Cliff Churgin","@id":"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3"},"headline":"Klassen in elementor","datePublished":"2025-05-19T12:53:36+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/"},"wordCount":1034,"publisher":{"@id":"https:\/\/elementor.com\/help\/nl\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","keywords":["V4"],"articleSection":["Features"],"inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/","url":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/","name":"Klassen in elementor | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","datePublished":"2025-05-19T12:53:36+00:00","description":"Learn everything about Klassen in elementor in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/05\/1-create-a-new-class-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/nl\/klassen-in-elementor-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/nl\/"},{"@type":"ListItem","position":2,"name":"Ongecategoriseerd","item":"https:\/\/elementor.com\/help\/nl\/ongecategoriseerd\/"},{"@type":"ListItem","position":3,"name":"Klassen in elementor"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/nl\/#website","url":"https:\/\/elementor.com\/help\/nl\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/nl\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/help\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/nl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/c45726ca48a077e09198d78da3bc94d3","name":"Cliff Churgin","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/elementor.com\/help\/nl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2957ab51166ce1ab4527af621d95bed3b7002ffaed172a69d8d0fb052d28c700?s=96&d=mm&r=g","caption":"Cliff Churgin"}}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/posts\/148591","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/comments?post=148591"}],"version-history":[{"count":0,"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/posts\/148591\/revisions"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/media?parent=148591"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/categories?post=148591"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/nl\/wp-json\/wp\/v2\/tags?post=148591"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}