{"id":22467,"date":"2023-05-27T19:51:00","date_gmt":"2023-05-27T19:51:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=480"},"modified":"2026-06-22T05:00:20","modified_gmt":"2026-06-22T05:00:20","slug":"hoe-aem-kerncomponenten-website-ontwikkeling-vereenvoudigen","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-kerncomponenten-website-ontwikkeling-vereenvoudigen\/","title":{"rendered":"Hoe AEM Kerncomponenten 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 webpagina wordt 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\">Website-ontwikkeling kan zowel complex als tijdrovend zijn. <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-core-components-de-website-ontwikkeling-vereenvoudigen\/\">AEM Core Components<\/a> bieden u een uitgebreide set ontwikkelaarstools om snel gebruikersgerichte interfaces te bouwen. Dit zijn bouwstenen voor webpagina&#8217;s die standaard responsief ontwerp ondersteunen en de websiteprestaties helpen optimaliseren.<\/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-kerncomponenten-websiteontwikkeling-vereenvoudigen\/\">Core Components<\/a> de website-ontwikkeling vormgeven en bieden we u inzichten in hun voordelen. Ontdek zelf hoe ze de creatie van sites kunnen stroomlijnen.<\/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 die specifiek zijn ontworpen om website-ontwikkeling in AEM te stroomlijnen. De rastercomponent biedt bijvoorbeeld een responsief systeem voor het weergeven van inhoud op webpagina&#8217;s, en afbeeldingssecties vereenvoudigen het invoegen van afbeeldingen. Vind de complete lijst in de\u00a0<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;6ac549b822304&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac549b822304\" 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=\"http:\/\/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\">Startpagina AEM Component Library<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Deze vooraf gebouwde componenten in AEM zijn ontworpen met best practices in gedachten. Ontwikkelaars kunnen ze gebruiken om snel pagina&#8217;s samen te stellen. Ze helpen zorgen voor consistente kwaliteit, responsiviteit en 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 krijgt wanneer uw website wordt gebouwd met behulp van 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 ontwikkeltijd en -inspanning vermindert. Het gebruik van de vooraf gebouwde paginastukken versnelt de time-to-market van uw website. Met vooraf gedefinieerde lay-outs en ontwerppatronen kunt u ook een samenhangende uitstraling behouden over verschillende online eigendommen, wat helpt om zowel merkherkenning als gebruikersbetrokkenheid te verbeteren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Een multinationaal merk met een online aanwezigheid in meerdere regio&#8217;s en talen kan bijvoorbeeld AEM Core Components gebruiken om consistente header- en footersecties te defini\u00ebren. Deze omvatten logo&#8217;s, navigatiemenu&#8217;s en contactgegevens om ervoor te zorgen dat bezoekers deze elementen direct herkennen en associ\u00ebren met het merk, ongeacht welke regionale website ze bekijken.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cost-effective-maintenance\">Kosteneffectief onderhoud<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Een gestandaardiseerde aanpak betekent <a href=\"http:\/\/axamit.com\/nl\/?page_id=19756\" data-type=\"page\" data-id=\"7486\">kosteneffectief onderhoud<\/a>. U kunt eenvoudig wijzigingen <a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">op meerdere pagina&#8217;s<\/a> toepassen, waardoor de tijd en middelen die nodig zijn voor voortdurend websitebeheer worden verminderd. Dit gestroomlijnde onderhoudsproces vertaalt zich in 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 om schaalbaar en uitbreidbaar te zijn. Ze bieden een solide basis voor websiteontwikkeling, waardoor u eenvoudig nieuwe <a href=\"http:\/\/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 veranderende bedrijfsbehoeften. Deze flexibiliteit zorgt ervoor dat websites die zijn gebouwd met Core Components kunnen meegroeien en evolueren met uw bedrijf.<\/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 betere zichtbaarheid in zoekmachineresultaten. Een gevolg hiervan is een betere gebruikerservaring en een toename van organisch verkeer voor bedrijven.<\/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 kijken naar de verschillende soorten componenten in AEM. We kunnen ze indelen in verschillende groepen: Structuur-, Content-, 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 boeiende en interactieve webpagina&#8217;s cre\u00ebren die uw publiek aanspreken:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigatie<\/strong>\u2014een belangrijk element in de architectuur van uw website, stelt Navigatie uw gebruikers in staat om uw inhoud gemakkelijk te verkennen. U kunt Navigatie toevoegen aan uw paginasjablonen, kop- of voetteksten om het menu van uw site effici\u00ebnt te structureren en consistente navigatie op alle pagina&#8217;s te garanderen.<\/li>\n\n\n\n<li><strong>Broodkruimel<\/strong>\u2014verbetert de gebruikerservaring door duidelijke en contextuele navigatiepaden te bieden. Vaak bovenaan een webpagina geplaatst, toont het broodkruimelelement een hi\u00ebrarchisch spoor van links dat de huidige locatie van de gebruiker binnen de websitestructuur weergeeft.<\/li>\n\n\n\n<li><strong>Taalnavigatie<\/strong>\u2014biedt een taal- en landnavigatie voor een site, en stelt bezoekers in staat om naar dezelfde pagina in een andere locale te navigeren. Het wordt vaak toegevoegd aan een paginasjabloon, in de kop- of voettekst.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">AEM Contentcomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Van tekst en afbeeldingen tot videospelers en widgets voor sociale media, deze AEM Contentcomponenten bieden veelzijdige tools om uw inhoud op boeiende manieren te leveren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong>\u2014wordt 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 eenvoudig en samenhangend secties of blokken inhoud.<\/li>\n\n\n\n<li><strong>Knoppen<\/strong>\u2014stelt u in staat om interactieve en visueel aantrekkelijke knoppen op uw website te maken met aanpasbare stijlen, formaten en acties.<\/li>\n\n\n\n<li><strong>Accordeon<\/strong>\u2014stelt gebruikers in staat om panelen met gerelateerde inhoud in en uit te klappen.<\/li>\n\n\n\n<li><strong>Titel<\/strong>\u2014wordt gebruikt om koppen te maken voor een pagina of paginasecties.<\/li>\n\n\n\n<li><strong>Tekst<\/strong>\u2014faciliteert de weergave van een rijke tekstparagraaf op de pagina, met diverse opmaakopties.<\/li>\n\n\n\n<li><strong>Afbeelding<\/strong>\u2014maakt de weergave van \u00e9\u00e9n afbeeldingsbron op een webpagina mogelijk. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Het ondersteunt ook &#8216;lazy loading&#8217;, wat de paginaprestaties optimaliseert door afbeeldingen alleen te laden wanneer ze bijna zichtbaar worden voor de gebruiker.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014groepeert een afbeelding, titel en beschrijving voor het promoten en linken naar secties van site-inhoud.<\/li>\n\n\n\n<li><strong>Lijst<\/strong>\u2014geeft een lijst met pagina&#8217;s weer op basis van zoekopdracht, tags of vanaf een bovenliggende pagina.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-aem-components\">AEM Formuliercomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem-forms\/\" data-type=\"post\" data-id=\"562\">AEM Forms<\/a>\u00a0zijn specifiek 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>Formulier Tekst<\/strong>\u2014stelt u in staat om verschillende invoervelden te cre\u00ebren om informatie te verzamelen voor later gebruik\u2014zoals eenregelige velden, meerregelige tekstvakken of wachtwoordvelden. Kies ervoor om het uiterlijk en gedrag van tekstvelden aan te passen.<\/li>\n\n\n\n<li><strong>Formulier Opties<\/strong>\u2014cre\u00eber een formulier met verschillende optielay-outs, zoals selecteerbare keuzes\u2014keuzerondjes, aankruisvakjes, vervolgkeuzemenu&#8217;s, of zelfs op maat ontworpen optiegroepen die aansluiten 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 aanklikbare elementen\u2014die gebruikers aanzetten tot het uitvoeren van specifieke acties, zoals het indienen van een formulier, het resetten van formuliervelden of het activeren van aangepaste functies.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commerce-aem-components\">AEM Commerce Componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Deze elementen maken naadloze integratie met e-commerce platforms mogelijk, waardoor u aantrekkelijke productvermeldingen, winkelwagentjes, afrekenprocessen en 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. Genereer automatisch aanbevelingen op basis van vooraf gedefinieerde regels, productcategorie\u00ebn of gebruikersgedrag.<\/li>\n\n\n\n<li><strong>Product Teaser<\/strong>\u2014toont productteasers op elke AEM-pagina die linken naar de productdetailpagina.<\/li>\n\n\n\n<li><strong>Zoeken<\/strong>\u2014configureer om een bepaald aantal producten per pagina te tonen, of om productprijzen dynamisch te laden in een aanvullende browserquery.<\/li>\n\n\n\n<li><strong>Productcarrousel<\/strong>\u2014toont een lijst met uitgelichte producten in een carrouselstijl.<\/li>\n\n\n\n<li><strong>Commerce Ervaringsfragment<\/strong>\u2014omvat handelsspecifieke elementen zoals productlijsten, prijsinformatie, promotiebanners en andere handelsgerelateerde contentelementen.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Een commerce Ervaringsfragment kan bijvoorbeeld een promotiebanner zijn die een tijdelijke aanbieding in een specifieke productcategorie benadrukt. Dit fragment kan eenvoudig worden hergebruikt op meerdere pagina&#8217;s of contactmomenten, wat zorgt voor consistente promotie en berichtgeving op de gehele commerci\u00eble website.<\/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 webpagina wordt 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=\"http:\/\/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\">Nu we de componenten hebben behandeld, wilt u waarschijnlijk leren hoe u er een webpagina mee bouwt.<\/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 bouwen van een webpagina met behulp van componenten omvat verschillende belangrijke stappen die ontwerp- 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>. Cre\u00eber een visuele mockup of wireframe van de webpaginalay-out 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 werken aan het visuele aspect\u2014zoals kleuren, typografie en afbeeldingen. Met Adobe XD en Adobe Components kan uw creatieve team ontwerpen maken op basis van kant-en-klare tools.<\/li>\n\n\n\n<li><strong>Configuratie en stijl<\/strong>. Elke sectie of elk element van het ontwerp wordt ge\u00efdentificeerd en gekoppeld aan het juiste component in de componentenbibliotheek.<\/li>\n\n\n\n<li><strong>Een pagina opbouwen met componenten<\/strong>. Ontwikkelaars beginnen de webpagina op te bouwen door de onderdelen in de gewenste volgorde samen te stellen, waarbij ze ervoor zorgen dat de inhoud en functionaliteit correct worden ge\u00efmplementeerd. Het AEM-stijlsysteem biedt een reeks vooraf gedefinieerde stijlen en maakt maatwerk mogelijk om 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 projectvereisten wilt u mogelijk bepaalde elementen aanpassen om te voldoen aan unieke functionaliteits- of ontwerpwensen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"components-in-the-aem-interface\">Componenten in de AEM-interface<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Open de\u00a0<a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">Componentenconsole<\/a>\u00a0via\u00a0<strong>Gereedschappen<\/strong>\u00a0&gt;\u00a0<strong>Algemeen<\/strong>\u00a0&gt;\u00a0<strong>Componenten<\/strong>. Vanaf daar kunt u door de lijst met componenten bladeren en de zoekfunctie gebruiken om snel een specifieke component of een groep ervan te vinden.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac549b8232ac&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac549b8232ac\" 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=\"http:\/\/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 erop om belangrijke informatie te bekijken, zoals de 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;6ac549b823693&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac549b823693\" 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=\"http:\/\/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-interface<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">U kunt componenten gebruiken in een drag-and-drop-editor door ze naar de gewenste sectie van de pagina te slepen.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac549b823a2a&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac549b823a2a\" 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=\"http:\/\/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\">Componentbrowser 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 specificeren 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 dit artikel te hebben gelezen, zult u waardering hebben voor hoe AEM Core Components gebruiksklare en gestandaardiseerde elementen leveren die u zullen helpen om uw website-ontwerp- en ontwikkelingsproces te vereenvoudigen met behoud van hoge kwaliteit.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Echter, het is belangrijk te erkennen dat het beschikken over ervaren AEM-ontwikkelaars en toegang tot\u00a0<a href=\"http:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">AEM implementatiediensten<\/a>\u00a0essentieel is voor het behalen van deze snelle en effectieve resultaten. Deze gespecialiseerde ontwikkelaars beschikken over de nodige expertise om AEM-website-elementen effici\u00ebnt te benutten, best practices te volgen en een correcte integratie met de algehele website-architectuur te waarborgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het aanpassen van kernelementen om aan uw specifieke bedrijfsvereisten of merkbehoeften te voldoen, vereist de kennis en vaardigheden van ervaren AEM-ontwikkelaars. Zij kunnen de complexiteit van maatwerk doorgronden en tegelijkertijd de integriteit ervan bewaren, wat resulteert in een website die niet alleen snel is, maar ook afgestemd op de unieke behoeften 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 functionaliteit 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 contentmodules die consistent contentbeheer over meerdere kanalen en touchpoints mogelijk maken.<\/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 vooraf gebouwde elementen voor webpagina-ontwikkeling. Foundation Components vormen het raamwerk 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 webpagina wordt opgebouwd uit [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":5015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[158],"tags":[],"class_list":["post-22467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Give Us a Call","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 te leveren aan bezoekers."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/22467","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=22467"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/22467\/revisions"}],"predecessor-version":[{"id":22469,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/22467\/revisions\/22469"}],"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=22467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=22467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=22467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}