{"id":23139,"date":"2023-05-27T19:51:00","date_gmt":"2023-05-27T19:51:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=480"},"modified":"2026-07-01T10:03:59","modified_gmt":"2026-07-01T10:03:59","slug":"hoe-aem-core-components-de-website-ontwikkeling-vereenvoudigen","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-core-components-de-website-ontwikkeling-vereenvoudigen\/","title":{"rendered":"Hoe AEM Core Components de website-ontwikkeling vereenvoudigen"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Wat AEM Components zijn<\/a><\/li><li class=\"h2-toc\"><a href=\"#benefits-of-aem-components\">Voordelen van AEM Components<\/a><\/li><li class=\"h2-toc\"><a href=\"#types-of-aem-core-components\">Soorten AEM Core Components<\/a><\/li><li class=\"h2-toc\"><a href=\"#how-a-web-page-is-built-from-components\">Hoe een website is opgebouwd uit componenten<\/a><\/li><li class=\"h2-toc\"><a href=\"#conclusion\">Conclusie<\/a><\/li><li class=\"h2-toc\"><a href=\"#faq\">Veelgestelde vragen<\/a><\/li><\/ul><\/div>\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Websites ontwikkelen kan complex en tijdrovend zijn. <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-kerncomponenten-websiteontwikkeling-vereenvoudigen\/\">AEM Core Components<\/a> bieden u een uitgebreide set ontwikkelaarstools om snel gebruikersgerichte interfaces te cre\u00ebren. Dit zijn bouwstenen voor websites die standaard responsive design ondersteunen en bijdragen aan de optimalisatie van de websiteprestaties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In dit artikel onderzoeken we hoe AEM <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-hoofdcomponenten-websiteontwikkeling-vereenvoudigen\/\">Core Components<\/a> de ontwikkeling van websites vormgeven en krijgt u inzicht in hun voordelen. Ontdek zelf hoe ze het cre\u00ebren van websites kunnen optimaliseren.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"what-aem-components-are\">Wat AEM Components zijn<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zijn een set gestandaardiseerde Web Content Management (WCM)-elementen, speciaal ontwikkeld om de websiteontwikkeling in AEM te optimaliseren. Zo biedt de Grid-component een responsief systeem voor de weergave van content op webpagina&#8217;s, en vereenvoudigen afbeeldingsgebieden het invoegen van afbeeldingen. Een volledige lijst vindt u in de <a href=\"https:\/\/www.aemcomponents.dev\/\" target=\"_blank\" rel=\"noopener\">AEM Component Library<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758bd23542&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758bd23542\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"578\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/AEM-Component-Library-Home-Page.webp\" alt=\"\" class=\"wp-image-6533\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/AEM-Component-Library-Home-Page.webp 850w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/AEM-Component-Library-Home-Page-300x204.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/AEM-Component-Library-Home-Page-768x522.webp 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Homepage van de AEM Component Library<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Deze vooraf gebouwde componenten in AEM zijn ontwikkeld met het oog op best practices. Ontwikkelaars kunnen ze gebruiken om snel pagina&#8217;s samen te stellen. Ze dragen bij aan het waarborgen van consistente kwaliteit, responsiviteit en de naleving van toegankelijkheidsstandaarden.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"benefits-of-aem-components\">Voordelen van AEM Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we eens kijken welke voordelen uw bedrijf behaalt wanneer uw website wordt gebouwd met AEM Core Components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistent-experience\">Consistente ervaring<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zorgen voor standaardisatie, wat de ontwikkelingsinspanning en -tijd vermindert. Het gebruik van vooraf gebouwde paginabouwstenen versnelt de time-to-market van uw website. Met vooraf gedefinieerde lay-outs en ontwerppatronen kunt u bovendien een samenhangende uitstraling over meerdere online eigendommen behouden, wat zowel de merkbekendheid als de gebruikersbinding bevordert.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bijvoorbeeld, een multinationaal merk met een online aanwezigheid die zich uitstrekt over meerdere regio&#8217;s en talen, kan AEM Core Components gebruiken om consistente header- en footergebieden te defini\u00ebren. Deze omvatten logo&#8217;s, navigatiemenu&#8217;s en contactinformatie, om ervoor te zorgen dat bezoekers deze elementen onmiddellijk herkennen en verbinden met het merk, ongeacht welke regionale website ze bekijken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cost-effective-maintenance\">Kosteneffici\u00ebnt onderhoud<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Een gestandaardiseerde aanpak betekent <a href=\"https:\/\/axamit.com\/de\/?page_id=15569\" data-type=\"page\" data-id=\"7486\">kosteneffici\u00ebnt onderhoud<\/a>. U kunt wijzigingen eenvoudig <a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">op meerdere pagina&#8217;s<\/a> toepassen, wat de tijd en middelen die nodig zijn voor het doorlopende websitebeheer vermindert. Dit geoptimaliseerde onderhoudsproces leidt tot kostenbesparingen voor het bedrijf.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scalability-and-flexibility\">Schaalbaarheid en flexibiliteit<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zijn ontworpen voor schaalbaarheid en uitbreidbaarheid. Ze vormen een solide basis voor websiteontwikkeling, waardoor u eenvoudig nieuwe <a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-features\/\" data-type=\"post\" data-id=\"458\">AEM-functionaliteiten<\/a> kunt toevoegen, tools van derden kunt integreren en u kunt aanpassen aan uw evoluerende bedrijfsbehoeften. Deze flexibiliteit zorgt ervoor dat websites die met Core Components zijn gebouwd, met uw bedrijf kunnen meegroeien en zich kunnen ontwikkelen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimized-performance\">Geoptimaliseerde prestaties<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Omdat AEM Core Components zijn geoptimaliseerd voor prestaties en SEO, volgen ze best practices voor effici\u00ebnte rendering, caching en gestructureerde gegevens. Dit resulteert in snellere laadtijden van pagina&#8217;s en een verbeterde zichtbaarheid in de zoekmachinerankings. Het resultaat is een betere gebruikerservaring en een verhoogd organisch zakelijk verkeer.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"types-of-aem-core-components\">Soorten AEM Core Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we nu de verschillende soorten componenten in AEM bespreken. We kunnen ze indelen in verschillende groepen: structuur-, inhouds-, formulier- en commerce-componenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">Structuur AEM componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Met deze gestructureerde AEM-elementen kunt u aantrekkelijke en interactieve webpagina&#8217;s cre\u00ebren die uw publiek boeien:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigatie<\/strong> \u2013 Als een essentieel element in de architectuur van uw website stelt navigatie uw gebruikers in staat om moeiteloos uw content te verkennen. U kunt de navigatie toevoegen aan uw paginasjablonen, headers of footers om het menu van uw website effici\u00ebnt te structureren en consistente navigatie op alle pagina&#8217;s te garanderen.<\/li>\n\n\n\n<li><strong>Breadcrumb<\/strong> \u2013 Verbetert de gebruikerservaring door het bieden van duidelijke en contextuele navigatiepaden. Vaak bovenaan een webpagina geplaatst, toont het breadcrumb-element een hi\u00ebrarchische reeks links die de huidige locatie van de gebruiker binnen de websitestructuur weergeeft.<\/li>\n\n\n\n<li><strong>Taalnavigatie<\/strong> \u2013 Dit element biedt taal- en landnavigatie voor een website en stelt bezoekers in staat om naar dezelfde pagina in een andere locale te navigeren. Het wordt doorgaans toegevoegd aan een paginasjabloon, in de header of footer.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">AEM-inhoudscomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Van tekst en afbeeldingen tot videospelers en socialemedia-widgets, deze AEM-inhoudscomponenten bieden veelzijdige tools om uw content op een overtuigende manier te presenteren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong> \u2013 Wordt gebruikt om andere elementen te groeperen en een gemeenschappelijke lay-out of stijl toe te passen. Kies ervoor om een aangepaste achtergrondafbeelding en kleur toe te voegen, en cre\u00eber moeiteloos coherente secties of contentblokken.<\/li>\n\n\n\n<li><strong>Knoppen<\/strong> \u2013 Hiermee kunt u interactieve en visueel aantrekkelijke knoppen op uw website cre\u00ebren met aanpasbare stijlen, groottes en acties.<\/li>\n\n\n\n<li><strong>Accordeon<\/strong> \u2013 Hiermee kunnen gebruikers secties met gerelateerde inhoud in- en uitklappen.<\/li>\n\n\n\n<li><strong>Titel<\/strong> \u2013 Wordt gebruikt om koppen voor een pagina of paginasecties te maken.<\/li>\n\n\n\n<li><strong>Tekst<\/strong> \u2013 Maakt het eenvoudig om een rich-text paragraaf op de pagina weer te geven met diverse opmaakopties.<\/li>\n\n\n\n<li><strong>Afbeelding<\/strong>\u2014maakt het mogelijk om \u00e9\u00e9n afbeelding op een webpagina weer te geven. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Het ondersteunt ook lazy loading, wat de paginaprestaties optimaliseert door afbeeldingen pas te laden wanneer ze bijna zichtbaar worden voor de gebruiker.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014groepeert een afbeelding, een titel en een beschrijving om contentgebieden van de website te promoten en te linken.<\/li>\n\n\n\n<li><strong>Lijst<\/strong>\u2014toont een lijst van pagina&#8217;s op basis van een zoekopdracht, tags of vanuit een bovenliggende pagina.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-aem-components\">Formulier AEM Componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem-forms\/\" data-type=\"post\" data-id=\"562\">AEM Forms<\/a>\u00a0zijn speciaal ontworpen om het maken en beheren van formulieren op uw website te stroomlijnen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Formuliertekst<\/strong>\u2014maakt het mogelijk om verschillende invoervelden te cre\u00ebren voor latere gegevensverzameling\u2014zoals eenregelige velden, meerregelige tekstvakken of wachtwoordvelden. Pas het uiterlijk en gedrag van de tekstvelden aan.<\/li>\n\n\n\n<li><strong>Formulieropties<\/strong>\u2014cre\u00eber een formulier met verschillende optielay-outs, zoals selecteerbare opties\u2014keuzerondjes, aankruisvakjes, vervolgkeuzemenu&#8217;s of zelfs individueel ontworpen optiegroepen, passend bij uw branding.<\/li>\n\n\n\n<li><strong>Formulierknop<\/strong>\u2014maakt gebruikersinteracties mogelijk en vergemakkelijkt het indienen van gegevens door te dienen als interactieve elementen\u2014die gebruikers aanzetten tot het uitvoeren van specifieke acties, zoals het verzenden van een formulier, het opnieuw instellen van formuliervelden of het activeren van aangepaste functies.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commerce-aem-components\">Commerce AEM Componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Deze elementen maken een naadloze integratie met e-commerceplatforms mogelijk, zodat u boeiende productlijsten, winkelwagentjes, afrekenprocessen en nog veel meer kunt cre\u00ebren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product<\/strong>\u2014biedt een uitgebreide en visueel aantrekkelijke weergave van individuele producten\u2014inclusief productafbeeldingen, beschrijvingen, prijzen en alle andere relevante details.<\/li>\n\n\n\n<li><strong>Gerelateerde Producten<\/strong>\u2014stelt u in staat om cross-selling mogelijkheden te vergroten door complementaire of vergelijkbare producten naast het hoofdproduct weer te geven. Aanbevelingen worden automatisch gegenereerd op basis van vooraf gedefinieerde regels, productcategorie\u00ebn of gebruikersgedrag.<\/li>\n\n\n\n<li><strong>Productteaser<\/strong>\u2014toont productteasers op elke AEM-pagina die linken naar de productdetailpagina.<\/li>\n\n\n\n<li><strong>Zoeken<\/strong>\u2014configureerbaar om een specifiek aantal producten per pagina weer te geven of productprijzen dynamisch te laden in een aanvullende browseraanvraag.<\/li>\n\n\n\n<li><strong>Productcarrousel<\/strong>\u2014toont een lijst met geselecteerde producten in een carrouselstijl.<\/li>\n\n\n\n<li><strong>Commerce Experience Fragment<\/strong>\u2014omvat commerce-gerelateerde elementen zoals productlijsten, prijsinformatie, promotiebanners en andere commerci\u00eble inhoudselementen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Een Commerce Experience Fragment kan bijvoorbeeld een promotiebanner zijn die een tijdelijke aanbieding in een specifieke productcategorie uitlicht. Dit fragment kan eenvoudig op meerdere pagina&#8217;s of contactpunten worden hergebruikt om consistente promotie en boodschappen op de gehele commerce-website te waarborgen.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"how-a-web-page-is-built-from-components\">Hoe een website is opgebouwd uit componenten<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"541\" src=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/The-hierarchy-of-AEM-components.webp\" alt=\"\" class=\"wp-image-6534\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/The-hierarchy-of-AEM-components.webp 850w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/The-hierarchy-of-AEM-components-300x191.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/The-hierarchy-of-AEM-components-768x489.webp 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><figcaption class=\"wp-element-caption\">De hi\u00ebrarchie van AEM-componenten<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nadat we de componenten hebben behandeld, wilt u nu vast leren hoe u hieruit een website opbouwt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"design-with-components\">Ontwerpen met componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Het proces van het opbouwen van een website met behulp van componenten omvat verschillende belangrijke stappen die design- en ontwikkelingselementen combineren. Hier is een eenvoudig overzicht van het proces:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Mockup<\/strong>. Maak een visuele mockup of wireframe van de website-indeling op basis van de Core Components. Dit helpt bij het bepalen van de algehele structuur, het ontwerp en de plaatsing van de elementen.<\/li>\n\n\n\n<li><strong>Ontwerp<\/strong>. Met behulp van een ontwerptool zoals Adobe XD kunnen ontwerpers het visuele aspect bewerken \u2013 zoals kleuren, typografie en afbeeldingen. Met Adobe XD en Adobe Components kan uw creatieve team ontwerpen maken op basis van out-of-the-box tools.<\/li>\n\n\n\n<li><strong>Configuratie en stijl<\/strong>. Elk gedeelte of element van de mockup wordt ge\u00efdentificeerd en toegewezen aan de corresponderende component in de componentenbibliotheek.<\/li>\n\n\n\n<li><strong>Een pagina opbouwen uit componenten<\/strong>. Ontwikkelaars beginnen met het opbouwen van de website door de elementen in de gewenste volgorde samen te voegen en ervoor te zorgen dat inhoud en functionaliteit correct zijn ge\u00efmplementeerd. Het AEM-stijlsysteem biedt een reeks vooraf gedefinieerde stijlen en maakt aanpassingen mogelijk om de visuele consistentie met de rest van de website te garanderen.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Afhankelijk van de specifieke vereisten van het project, wilt u wellicht bepaalde elementen aanpassen om aan unieke functionaliteits- of ontwerpvereisten te voldoen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"components-in-the-aem-interface\">Componenten in de AEM-gebruikersinterface<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">U krijgt toegang tot de <a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">componentenconsole<\/a> via <strong>Gereedschappen<\/strong> &gt; <strong>Algemeen<\/strong> &gt; <strong>Componenten<\/strong>. Van daaruit kunt u door de lijst met componenten bladeren en de zoekfunctie gebruiken om snel een specifieke component of een groep daarvan te vinden.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758bd25960&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758bd25960\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"417\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Core-Components-Console-in-AEM.webp\" alt=\"\" class=\"wp-image-6536\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Core-Components-Console-in-AEM.webp 850w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Core-Components-Console-in-AEM-300x147.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Core-Components-Console-in-AEM-768x377.webp 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Core Components-console in AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Selecteer een component uit de lijst en klik erdoorheen om belangrijke informatie weer te geven, zoals titel, beschrijving, groep en een lijst met links naar de livepagina&#8217;s waarop de component wordt gebruikt.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758bd26055&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758bd26055\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"366\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-details-in-AEM-interface.webp\" alt=\"\" class=\"wp-image-6537\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-details-in-AEM-interface.webp 850w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-details-in-AEM-interface-300x129.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-details-in-AEM-interface-768x331.webp 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Componentdetails in de AEM-gebruikersinterface<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">U kunt componenten gebruiken in een drag-and-drop-editor door ze naar het gewenste gedeelte van de pagina te slepen.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758bd267ee&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758bd267ee\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"429\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-Browser-in-the-AEM-page-editor.webp\" alt=\"\" class=\"wp-image-6538\" srcset=\"https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-Browser-in-the-AEM-page-editor.webp 850w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-Browser-in-the-AEM-page-editor-300x151.webp 300w, https:\/\/axamit.com\/wp-content\/uploads\/2023\/05\/Component-Browser-in-the-AEM-page-editor-768x388.webp 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Componentenbrowser in de AEM-pagina-editor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Zodra u een component aan de pagina hebt toegevoegd, kunt u de eigenschappen ervan configureren via een gebruiksvriendelijk formulier\u2014zoals het opgeven van inhoud, afbeeldingen, links of andere componentgerelateerde instellingen.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"conclusion\">Conclusie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na het lezen van dit artikel zult u begrijpen hoe AEM Core Components kant-en-klare en gestandaardiseerde elementen bieden die u helpen uw website-ontwerp- en ontwikkelingsproces te vereenvoudigen en tegelijkertijd een hoge kwaliteit te garanderen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het is echter belangrijk te erkennen dat ervaren AEM-ontwikkelaars en toegang tot <a href=\"https:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">AEM-implementatiediensten<\/a> cruciaal zijn om deze snelle en effectieve resultaten te bereiken. Deze gespecialiseerde ontwikkelaars beschikken over de nodige expertise om AEM-website-elementen effici\u00ebnt te benutten, best practices te volgen en een correcte integratie in de gehele website-architectuur te waarborgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het aanpassen van kernelementen aan uw specifieke zakelijke eisen of brandingbehoeften vereist de kennis en vaardigheden van ervaren AEM-ontwikkelaars. Zij kunnen de complexiteit van de aanpassing beheren met behoud van de integriteit, wat resulteert in een website die niet alleen snel, maar ook afgestemd is op de unieke eisen van uw bedrijf.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"faq\">Veelgestelde vragen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-latest-version-of-core-components-aem-\">Wat is de nieuwste versie van de AEM Core Components?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De nieuwste versie van de AEM Core Components is 2.22.12. Deze versie is compatibel met AEM as a Cloud Service en on-premise AEM-installaties.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-many-components-are-there-in-aem-\">Hoeveel componenten zijn er in AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Er zijn twee sets door Adobe geleverde AEM-componenten \u2013 Core Components en Foundation Components. De uitgebreide bibliotheek bevat meer dan 50 componenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-experience-fragments-in-aem-\">Wat is het verschil tussen Core Components en Experience Fragments in AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-basiscomponenten-het-maken-van-websites-vereenvoudigen\/\">Core Components in AEM<\/a> zijn gestandaardiseerde bouwstenen voor het cre\u00ebren van webpagina&#8217;s en bieden essenti\u00eble functionaliteiten voor website-ontwikkeling. <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/wanneer-en-hoe-content-fragmenten-en-aem-experience-fragmenten-te-gebruiken\/\">Experience Fragments<\/a> zijn herbruikbare inhoudsmodules die consistent contentmanagement mogelijk maken over meerdere kanalen en touchpoints heen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-foundation-components-\">Wat is het verschil tussen Core Components en Foundation Components?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Core Components in AEM zijn kant-en-klare elementen voor webpagina-ontwikkeling. Foundation Components vormen het framework van AEM en maken contentcreatie en -beheer mogelijk. Core Components richten zich op webpagina-elementen, terwijl Foundation Components het AEM-platform ondersteunen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wat AEM Components zijn Voordelen van AEM Components Soorten AEM Core Components Hoe een website is opgebouwd uit [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":5015,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[158],"tags":[],"class_list":["post-23139","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Rufen Sie uns an","phone":"+1 (438) 383-6878","meta-description":"Bekijk de lijst met primaire AEM-componenten die het ontwerp en de ontwikkeling van gebruiksvriendelijke websites versnellen en vereenvoudigen, en merken in staat stellen uitzonderlijke ervaringen voor bezoekers te leveren."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/comments?post=23139"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23139\/revisions"}],"predecessor-version":[{"id":23141,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23139\/revisions\/23141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/media?parent=23139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}