{"id":23028,"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:42","modified_gmt":"2026-07-01T10:04:42","slug":"hoe-aem-hoofdcomponenten-websiteontwikkeling-vereenvoudigen","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-hoofdcomponenten-websiteontwikkeling-vereenvoudigen\/","title":{"rendered":"Hoe AEM hoofdcomponenten websiteontwikkeling vereenvoudigen"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Wat AEM-componenten zijn<\/a><\/li><li class=\"h2-toc\"><a href=\"#benefits-of-aem-components\">Voordelen van AEM-componenten<\/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\">Website-ontwikkeling kan zowel complex als tijdrovend zijn. De <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-basiscomponenten-het-maken-van-websites-vereenvoudigen\/\">AEM Core Components<\/a> bieden u een uitgebreide set ontwikkelingstools om snel gebruikersgerichte interfaces te cre\u00ebren. Dit zijn bouwstenen voor webpagina&#8217;s die standaard responsive design ondersteunen en helpen de websiteprestaties te optimaliseren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In dit artikel onderzoeken we hoe de AEM <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-core-components-de-website-ontwikkeling-vereenvoudigen\/\">Core Components<\/a> de website-ontwikkeling vormgeven en bieden we u een overzicht van hun voordelen. Ontdek zelf hoe ze het maken 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-componenten zijn<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">De AEM Core Components zijn een set gestandaardiseerde Web Content Management (WCM)-elementen die specifiek zijn ontworpen om de website-ontwikkeling in AEM te stroomlijnen. Het grid-component biedt bijvoorbeeld een responsive systeem voor het weergeven van inhoud op webpagina&#8217;s, en afbeeldingssecties vereenvoudigen het invoegen van afbeeldingen. De volledige lijst vindt u in de <a href=\"https:\/\/www.aemcomponents.dev\/\" target=\"_blank\" rel=\"noopener\">AEM componentenbibliotheek<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5763b5ed28b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5763b5ed28b\" 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 van de AEM componentenbibliotheek<\/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 dragen bij aan het waarborgen van consistente kwaliteit, responsiviteit en naleving van toegankelijkheidsnormen.<\/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-componenten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we eens kijken welke voordelen uw bedrijf behaalt wanneer uw website is gebouwd met behulp van de 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\">De AEM Core Components zorgen voor standaardisatie, wat de ontwikkelingstijd en -inspanning vermindert. Het gebruik van vooraf gebouwde pagina-elementen versnelt de time-to-market van uw website. Met vooraf gedefinieerde lay-outs en ontwerpsjablonen kunt u ook een consistente look-and-feel behouden over meerdere online eigendommen, wat bijdraagt aan het verbeteren van zowel merkherkenning als gebruikersbetrokkenheid.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bijvoorbeeld, een multinationaal merk met een online aanwezigheid in meerdere regio&#8217;s en talen zou de AEM Core Components kunnen gebruiken om consistente header- en footersecties te defini\u00ebren. Deze omvatten logo&#8217;s, navigatiemenu&#8217;s en contactgegevens om te garanderen dat bezoekers deze elementen onmiddellijk herkennen en associ\u00ebren met het merk, ongeacht welke regionale website zij bezoeken.<\/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=\"https:\/\/axamit.com\/fr\/?page_id=16522\" data-type=\"page\" data-id=\"7486\">kosteneffectief onderhoud<\/a>. U kunt eenvoudig wijzigingen toepassen <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>, waardoor de tijd en middelen die nodig zijn voor het voortdurende beheer van de website worden verminderd. Dit vereenvoudigde onderhoudsproces resulteert in besparingen 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\">De AEM Core Components zijn ontworpen om schaalbaar en uitbreidbaar te zijn. Ze bieden een solide basis voor de ontwikkeling van websites, 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 veranderende zakelijke behoeften. Deze flexibiliteit zorgt ervoor dat websites die zijn gebouwd met Core Components kunnen groeien 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\">Aangezien de AEM Core Components zijn geoptimaliseerd voor prestaties en SEO, volgen ze de beste praktijken voor effici\u00ebnte rendering, caching en gestructureerde gegevens. Dit resulteert in snellere laadtijden van pagina&#8217;s en een verbeterde zichtbaarheid in de ranglijsten van zoekmachines. Dit leidt tot een betere gebruikerservaring en een toename van organisch verkeer voor het 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=\"types-of-aem-core-components\">Typen AEM Core Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we nu kijken naar de verschillende typen componenten in AEM. We kunnen ze onderverdelen in verschillende groepen: Structuur-, Inhouds-, Formulier- en Commerce-componenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">AEM Structuurcomponenten<\/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 essentieel onderdeel van de architectuur van uw website, Navigatie stelt uw gebruikers in staat om gemakkelijk uw inhoud te verkennen. U kunt Navigatie toevoegen aan uw paginasjablonen, headers of footers om het menu van uw site effectief 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 broodkruimel-element een hi\u00ebrarchisch spoor van links die de huidige locatie van de gebruiker binnen de websitestructuur aangeven.<\/li>\n\n\n\n<li><strong>Taalnavigatie<\/strong>\u2014biedt taal- en landnavigatie voor een site, dit element stelt bezoekers in staat om naar dezelfde pagina in een andere locale te navigeren. Het wordt meestal 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-contentcomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Van tekst en afbeeldingen tot videospelers en sociale media-widgets, deze AEM-contentcomponenten bieden veelzijdige tools om uw content op een boeiende manier te verspreiden:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong>\u2014gebruikt 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 consistent contentsecties of -blokken.<\/li>\n\n\n\n<li><strong>Knoppen<\/strong>\u2014stelt u in staat interactieve en visueel aantrekkelijke knoppen op uw website te cre\u00ebren met aanpasbare stijlen, groottes en acties.<\/li>\n\n\n\n<li><strong>Accordeon<\/strong>\u2014stelt gebruikers in staat om gerelateerde contentpanelen weer te geven\/verbergen.<\/li>\n\n\n\n<li><strong>Titel<\/strong>\u2014gebruikt om koppen te cre\u00ebren voor een pagina of paginasecties.<\/li>\n\n\n\n<li><strong>Tekst<\/strong>\u2014vergemakkelijkt de weergave van een alinea met rich text 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 &#8216;lazy loading&#8217; (uitgesteld laden), 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>\u2014combineert een afbeelding, een titel en een beschrijving om inhoudsecties van de website te promoten en te koppelen.<\/li>\n\n\n\n<li><strong>Lijst<\/strong>\u2014toont een lijst met 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\">AEM Formuliercomponenten<\/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> zijn specifiek ontworpen om de creatie en het beheer van formulieren op uw website te stroomlijnen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Formulier tekstveld<\/strong>\u2014hiermee kunt u verschillende invoervelden cre\u00ebren om informatie te verzamelen voor later gebruik \u2014 zoals enkelregelige velden, meerregelige tekstvakken of wachtwoordvelden. Kies ervoor om het uiterlijk en het gedrag van de tekstvelden aan te passen.<\/li>\n\n\n\n<li><strong>Formulieropties<\/strong>\u2014cre\u00ebert een formulier met verschillende indelingsopties, zoals selecteerbare keuzes \u2014 keuzerondjes, aankruisvakjes, vervolgkeuzemenu&#8217;s, of zelfs aangepaste optiegroepen die passen bij uw merkidentiteit.<\/li>\n\n\n\n<li><strong>Formulierknop<\/strong>\u2014maakt gebruikersinteracties mogelijk en vergemakkelijkt het indienen van gegevens door te fungeren als aanklikbare elementen \u2014 die gebruikers uitnodigen om specifieke acties uit te voeren 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 E-commerce componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Deze elementen maken een naadloze integratie met e-commerce platforms mogelijk, waardoor u aantrekkelijke productlijsten, winkelwagentjes, betaalprocessen, en meer kunt cre\u00ebren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product<\/strong>\u2014biedt een complete en visueel aantrekkelijke weergave van individuele producten \u2014 inclusief productafbeeldingen, beschrijvingen, prijzen en alle andere relevante informatie.<\/li>\n\n\n\n<li><strong>Gerelateerde producten<\/strong>\u2014hiermee vergroot u cross-sellingkansen 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 productdetailpagina.<\/li>\n\n\n\n<li><strong>Zoeken<\/strong>\u2014te configureren om een \u200b\u200bbepaald aantal producten per pagina weer te geven, of om productprijzen dynamisch te laden in een aanvullende browseraanvraag.<\/li>\n\n\n\n<li><strong>Productcarrousel<\/strong>\u2014toont een lijst met uitgelichte producten in 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 zou bijvoorbeeld een promotiebanner kunnen zijn die een tijdelijke aanbieding voor een specifieke productcategorie benadrukt. Dit fragment kan eenvoudig worden hergebruikt op meerdere pagina&#8217;s of contactpunten, waardoor consistente promotie en boodschappen over de gehele commerci\u00eble website worden gewaarborgd.<\/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 vast leren hoe u hiermee een webpagina 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 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>Mock-up<\/strong>. Cre\u00eber een visuele mock-up of een wireframe van de webpagina-indeling gebaseerd op 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 designers werken aan het visuele aspect \u2014 zoals kleuren, typografie en beeldmateriaal. Met Adobe XD en de Adobe componenten kan uw creatieve team ontwerpen cre\u00ebren op basis van kant-en-klare tools.<\/li>\n\n\n\n<li><strong>Configuratie en stijl<\/strong>. Elke sectie of elk element van de mock-up wordt ge\u00efdentificeerd en gekoppeld aan de juiste component in de componentenbibliotheek.<\/li>\n\n\n\n<li><strong>Een componentenpagina bouwen<\/strong>. Ontwikkelaars beginnen de webpagina te bouwen door de elementen in de gewenste volgorde samen te voegen, waarbij ze ervoor zorgen dat de inhoud en functionaliteiten 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 wellicht bepaalde elementen aanpassen om te voldoen aan unieke functionele of ontwerpeisen.<\/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>Gereedschappen<\/strong> &gt; <strong>Algemeen<\/strong> &gt; <strong>Componenten<\/strong>. Vanaf daar kunt u de lijst met componenten doorbladeren en de zoekfunctie gebruiken om snel een specifieke component of een groep componenten te vinden.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5763b600509&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5763b600509\" 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 om belangrijke informatie erover te bekijken, zoals de titel, beschrijving, groep en een lijst met links naar de actieve pagina&#8217;s waar de component wordt gebruikt.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5763b6014e4&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5763b6014e4\" 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 de componenten gebruiken in een drag-and-drop-editor en deze plaatsen in het gewenste gedeelte van de pagina.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a5763b6023cb&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a5763b6023cb\" 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\">Componentenverkenner in de AEM-pagina-editor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nadat u een component aan de pagina hebt toegevoegd, kunt u de eigenschappen ervan configureren via een gebruiksvriendelijk formulier \u2014 bijvoorbeeld door de inhoud, afbeeldingen, links of andere relevante parameters voor de component te specificeren.<\/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 de AEM Core Components kant-en-klare en gestandaardiseerde elementen bieden die u helpen het ontwerp- en ontwikkelingsproces van uw website te vereenvoudigen, terwijl een hoge kwaliteit behouden blijft.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het is echter belangrijk te erkennen dat het beschikken over 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 is voor het behalen van snelle en effici\u00ebnte resultaten. Deze gespecialiseerde ontwikkelaars beschikken over de nodige expertise om AEM-website-elementen effectief 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 belangrijke elementen om te voldoen aan uw specifieke bedrijfsvereisten of merkbehoeften vereist de kennis en vaardigheden van ervaren AEM-ontwikkelaars. Zij kunnen de complexiteit van maatwerk beheren met behoud van de integriteit, 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 AEM-componenten geleverd door Adobe: de hoofdcomponenten (Core Components) en de basiscomponenten (Foundation Components). De complete 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 hoofdcomponenten en ervaringsfragmenten in AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hoofdcomponenten in AEM zijn gestandaardiseerde bouwstenen voor het cre\u00ebren van webpagina&#8217;s en bieden essenti\u00eble functionaliteiten voor websiteontwikkeling. Ervaringsfragmenten zijn herbruikbare inhoudsmodules die consistent inhoudsbeheer mogelijk maken over meerdere kanalen en contactpunten 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 hoofdcomponenten en basiscomponenten?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Hoofdcomponenten in AEM zijn vooraf gebouwde elementen voor de ontwikkeling van webpagina&#8217;s. Basiscomponenten vormen het raamwerk van AEM en maken het cre\u00ebren en beheren van inhoud mogelijk. Hoofdcomponenten richten zich op webpagina-elementen, terwijl basiscomponenten het AEM-platform ondersteunen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wat AEM-componenten zijn Voordelen van AEM-componenten Typen AEM Core Components Hoe een webpagina is opgebouwd uit componenten Conclusie [&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-23028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Appelez-nous","phone":"+1 (438) 383-6878","meta-description":"Bekijk de lijst met de belangrijkste AEM-componenten die het ontwerpen en ontwikkelen van gebruiksvriendelijke websites versnellen en vereenvoudigen, en merken in staat stellen hun bezoekers uitzonderlijke ervaringen te bieden."},"_links":{"self":[{"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23028","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=23028"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23028\/revisions"}],"predecessor-version":[{"id":23030,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23028\/revisions\/23030"}],"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=23028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}