{"id":23127,"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:04:00","modified_gmt":"2026-07-01T10:04:00","slug":"hoe-aem-kerncomponenten-websiteontwikkeling-vereenvoudigen","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-kerncomponenten-websiteontwikkeling-vereenvoudigen\/","title":{"rendered":"Hoe AEM kerncomponenten websiteontwikkeling 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\">Typen AEM Core Components<\/a><\/li><li class=\"h2-toc\"><a href=\"#how-a-web-page-is-built-from-components\">Hoe een webpagina 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\">Websiteontwikkeling 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 helpen de websiteprestaties te 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-hoofdcomponenten-websiteontwikkeling-vereenvoudigen\/\">Core Components<\/a> de websiteontwikkeling vormgeven en bieden we u inzichten in hun voordelen. Ontdek zelf hoe ze het cre\\u00ebren van websites 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 de websiteontwikkeling in AEM te stroomlijnen. Zo biedt de grid-component een responsief systeem voor het weergeven van content over webpagina&#8217;s, en vereenvoudigen afbeeldingssecties 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;6a5758b68f2c5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758b68f2c5\" 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\">Startpagina AEM Component Bibliotheek<\/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 ontwikkelingstijd 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 en gebruikservaring behouden over verschillende online eigenschappen heen, 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=\"\/nl\/?page_id=15566\" data-type=\"page\" data-id=\"7486\">kosteneffectief onderhoud<\/a>. U kunt eenvoudig wijzigingen toepassen\u00a0<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>, wat de benodigde tijd en middelen voor doorlopend websitebeheer vermindert. 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\u00a0<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 veranderende zakelijke behoeften. Deze flexibiliteit zorgt ervoor dat websites die met Core Components zijn gebouwd, 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 de best practices voor effici\u00ebnte rendering, caching en gestructureerde gegevens. Dit resulteert in snellere laadtijden van pagina&#8217;s en een verbeterde zichtbaarheid in zoekmachine rankings. Het resultaat hiervan is een betere gebruikerservaring en een toename van 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\">Typen AEM Core Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we nu eens kijken naar de verschillende typen componenten in AEM. We kunnen ze in verschillende groepen verdelen: 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 onderdeel van de architectuur van uw website. Navigatie stelt uw gebruikers in staat om uw content gemakkelijk te verkennen. U kunt Navigatie toevoegen aan uw paginasjablonen, headers of footers om het menu van uw site effici\u00ebnt te structureren en consistente navigatie over 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 die de huidige locatie van de gebruiker binnen de websitestructuur weergeven.<\/li>\n\n\n\n<li><strong>Taalnavigatie<\/strong>\u2014biedt een taal- en landnavigatie voor een site. Dit onderdeel stelt bezoekers in staat om naar dezelfde pagina in een andere taalversie te navigeren. Het wordt vaak 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\">Content-AEM-componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Van tekst en afbeeldingen tot videospelers en socialemedia-widgets, deze Content-AEM-componenten bieden veelzijdige tools om uw content op boeiende wijze te presenteren:<\/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 samenhangende secties of blokken content.<\/li>\n\n\n\n<li><strong>Knoppen<\/strong>\u2014hiermee kunt u interactieve en visueel aantrekkelijke knoppen op uw website maken met aanpasbare stijlen, formaten en acties.<\/li>\n\n\n\n<li><strong>Accordeon<\/strong>\u2014stelt gebruikers in staat om panelen met gerelateerde content 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>\u2014vergemakkelijkt 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 afbeeldingsasset op een webpagina mogelijk. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Het ondersteunt ook lazy loading, 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 de site-inhoud.<\/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 Formulieren<\/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>Formuliertekst<\/strong>\u2014hiermee kunt u verschillende invoervelden maken om informatie te verzamelen voor later gebruik\u2014zoals enkelregelige velden, tekstvakken met meerdere regels of wachtwoordvelden. U kunt de weergave en het gedrag van tekstvelden aanpassen.<\/li>\n\n\n\n<li><strong>Formulieropties<\/strong>\u2014cre\u00eber een formulier met verschillende indelingsopties, zoals selecteerbare keuzes\u2014keuzerondjes, aankruisvakjes, vervolgkeuzemenu&#8217;s, of zelfs op maat ontworpen optiegroepen die passen bij uw huisstijl.<\/li>\n\n\n\n<li><strong>Formulierknop<\/strong>\u2014maakt gebruikersinteracties mogelijk en vergemakkelijkt het indienen van gegevens door te dienen als aanklikbare elementen\u2014gebruikers aan te zetten 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\">Commerce AEM 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>Productteaser<\/strong>\u2014toont productteasers op elke AEM-pagina die linken naar de productdetails-pagina.<\/li>\n\n\n\n<li><strong>Zoeken<\/strong>\u2014configureer om een gegeven aantal producten per pagina weer te geven, of om productprijzen dynamisch te laden via 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 commerce-specifieke elementen zoals productlijsten, prijsinformatie, promotiebanners en andere commerce-gerelateerde 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 op een specifieke productcategorie uitlicht. Dit fragment kan eenvoudig worden hergebruikt\u00a0op meerdere pagina&#8217;s\u00a0of contactpunten, 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 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\">Nu we de componenten hebben besproken, 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>. Maak een visuele mockup of wireframe van de webpagina-indeling op basis van de Core Components. Dit helpt bij het vaststellen van de algehele structuur, het ontwerp en de plaatsing van de onderdelen.<\/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 standaardtools.<\/li>\n\n\n\n<li><strong>Configuratie en stijl<\/strong>. Elke sectie of elk element van de mockup wordt ge\u00efdentificeerd en gekoppeld aan het juiste component in de componentenbibliotheek.<\/li>\n\n\n\n<li><strong>Bouw een pagina van componenten<\/strong>. Ontwikkelaars beginnen met het bouwen van de webpagina door de onderdelen in de gewenste volgorde samen te voegen, zodat 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 waarborgen.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Afhankelijk van de specifieke projectvereisten, wilt u wellicht bepaalde elementen aanpassen om aan unieke functionaliteits- of ontwerpbehoeften te voldoen.<\/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\">Ga naar 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>Tools<\/strong> &gt; <strong>Algemeen<\/strong> &gt; <strong>Componenten<\/strong>. Vanaf daar kunt u door de lijst met componenten bladeren en de zoekfunctie gebruiken om snel een specifiek component of een groep ervan te vinden.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758b691bf6&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758b691bf6\" 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 erop om belangrijke informatie te bekijken, zoals de titel, beschrijving, groep en een lijst met links naar de livepagina&#8217;s waar de component wordt gebruikt.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5758b69228c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758b69228c\" 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-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;6a5758b69298f&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5758b69298f\" 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 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 het verkennen van dit artikel zult u waardering hebben voor hoe AEM Core Components kant-en-klare en gestandaardiseerde elementen leveren die u zullen helpen uw websiteontwerp- en ontwikkelingsproces te vergemakkelijken, terwijl de hoge kwaliteit behouden blijft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het is echter belangrijk te erkennen dat het hebben van ervaren AEM-ontwikkelaars en toegang tot\u00a0<a href=\"https:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">AEM-implementatiediensten<\/a>\u00a0cruciaal 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 met behoud van de integriteit, wat resulteert in een website die niet alleen snel is, maar ook is 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: 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 maken 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 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 vooraf gebouwde elementen voor de ontwikkeling van webpagina&#8217;s. 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 Typen AEM Core Components Hoe een webpagina 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-23127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Bel ons","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\/23127","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=23127"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23127\/revisions"}],"predecessor-version":[{"id":23129,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23127\/revisions\/23129"}],"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=23127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}