{"id":23151,"date":"2023-05-27T19:51:00","date_gmt":"2023-05-27T19:51:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=480"},"modified":"2026-07-01T10:03:58","modified_gmt":"2026-07-01T10:03:58","slug":"hoe-aem-basiscomponenten-het-maken-van-websites-vereenvoudigen","status":"publish","type":"post","link":"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-basiscomponenten-het-maken-van-websites-vereenvoudigen\/","title":{"rendered":"Hoe AEM-basiscomponenten het maken van websites vereenvoudigen"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Wat zijn AEM-componenten<\/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 website wordt gebouwd met componenten<\/a><\/li><li class=\"h2-toc\"><a href=\"#conclusion\">Samenvatting<\/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\">Het bouwen van websites 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 een uitgebreide set ontwikkelaarstools voor het snel bouwen van gebruikersgerichte interfaces. Dit zijn de bouwstenen van websites 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 AEM <a href=\"https:\/\/axamit.com\/nl\/blog\/adobe-experience-manager\/hoe-aem-kerncomponenten-websiteontwikkeling-vereenvoudigen\/\">Core Components<\/a> de ontwikkeling van websites be\u00efnvloeden en presenteren we de voordelen van het gebruik ervan. Ontdek hoe ze het bouwen 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 zijn AEM-componenten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zijn een reeks gestandaardiseerde Web Content Management (WCM)-elementen, speciaal ontworpen om de websiteontwikkeling in AEM te stroomlijnen. Het rastercomponent biedt bijvoorbeeld een responsief systeem voor het weergeven van inhoud op webpagina&#8217;s, terwijl afbeeldingssecties het invoegen van afbeeldingen vereenvoudigen. Een volledige lijst is te vinden in de <a href=\"https:\/\/www.aemcomponents.dev\/\" target=\"_blank\" rel=\"noopener\">AEM Component Library<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a574c0ddc79e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a574c0ddc79e\" 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 Component Library<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Deze kant-en-klare componenten in AEM zijn ontworpen met het oog op best practices. 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-componenten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we eens kijken welke voordelen uw bedrijf zal ervaren wanneer uw website wordt gebouwd met AEM Core Components.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistent-experience\">Consistente ervaring<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zorgen voor standaardisatie, wat de benodigde tijd en moeite voor ontwikkeling verkort. Het gebruik van kant-en-klare pagina-elementen versnelt de marktintroductie van uw website. Dankzij vooraf gedefinieerde lay-outs en ontwerppatronen kunt u ook een consistente look en feel behouden over al uw online eigendommen, wat helpt om zowel de merkherkenning als de gebruikersbetrokkenheid te vergroten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bijvoorbeeld, een internationaal merk met een online aanwezigheid die meerdere regio&#8217;s en talen omvat, zou AEM Core Components kunnen gebruiken om consistente header- en footersecties te defini\u00ebren. Deze omvatten logo&#8217;s, navigatiemenu&#8217;s en contactinformatie, om ervoor te zorgen dat bezoekers deze elementen onmiddellijk herkennen en associ\u00ebren met het merk, ongeacht welke regionale site 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=\"https:\/\/axamit.com\/pl\/?page_id=15563\" data-type=\"page\" data-id=\"7486\">kosteneffectief onderhoud<\/a>. U kunt eenvoudig wijzigingen aanbrengen <a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">op meerdere sites<\/a>, waardoor de tijd en middelen die nodig zijn voor het lopende websitebeheer worden verminderd. Dit gestroomlijnde onderhoudsproces leidt tot kostenbesparingen voor uw 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 vormen een solide basis voor websiteontwikkeling, waardoor u eenvoudig nieuwe <a href=\"https:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-features\/\" data-type=\"post\" data-id=\"458\">AEM-functies<\/a> kunt toevoegen, tools van derden kunt integreren en u kunt aanpassen aan veranderende bedrijfsbehoeften. Deze flexibiliteit zorgt ervoor dat websites die met Core Components zijn gebouwd, 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\">Omdat AEM Core Components zijn geoptimaliseerd voor prestaties en SEO, passen ze best practices toe voor effici\u00ebnte rendering, caching en gestructureerde gegevens. Dit resulteert in kortere laadtijden van pagina&#8217;s en een betere zichtbaarheid in de zoekmachinerankings. Het gevolg hiervan is een verbeterde gebruikerservaring en verhoogd organisch zakelijk verkeer.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\" id=\"types-of-aem-core-components\">Typen AEM Core Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Laten we nu de verschillende typen componenten in AEM bekijken. We kunnen ze in verschillende groepen verdelen: structurele componenten, inhoudscomponenten, formuliercomponenten en e-commercecomponenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">AEM structurele componenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Met deze gestructureerde AEM-elementen kunt u boeiende en interactieve websites cre\u00ebren die uw publiek zullen verrassen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigatie<\/strong>\u2014als een belangrijk element in de architectuur van uw website stelt Navigatie gebruikers in staat om eenvoudig door de inhoud te bladeren. U kunt Navigatie toevoegen aan paginasjablonen, headers of footers om het sitenavigatiemenu effici\u00ebnt te structureren en consistente navigatie op alle pagina&#8217;s te garanderen.<\/li>\n\n\n\n<li><strong>Broodkruimelnavigatie<\/strong>\u2014verbetert de gebruikerservaring door duidelijke en contextuele navigatiepaden te bieden. Vaak bovenaan een webpagina geplaatst, toont het broodkruimelnavigatie-element een hi\u00ebrarchische reeks links die de huidige locatie van de gebruiker binnen de sitestructuur weergeven.<\/li>\n\n\n\n<li><strong>Taalkeuze<\/strong>\u2014door taal- en landnavigatie voor de website te bieden, stelt dit element bezoekers in staat om naar dezelfde pagina in een andere regio over te schakelen. Het wordt vaak toegevoegd aan het paginasjabloon, in de header of footer.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">AEM inhoudscomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Van tekst en afbeeldingen tot videospelers en widgets voor sociale media, deze AEM-inhoudscomponenten bieden veelzijdige hulpmiddelen om content op een overtuigende manier 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. U kunt een aangepaste achtergrondafbeelding en kleur toevoegen, en eenvoudig consistente secties of contentblokken cre\u00ebren.<\/li>\n\n\n\n<li><strong>Knoppen<\/strong>\u2014maken het mogelijk om interactieve en visueel aantrekkelijke knoppen op een webpagina te cre\u00ebren, met de mogelijkheid om stijlen, groottes en acties aan te passen.<\/li>\n\n\n\n<li><strong>Accordeon<\/strong>\u2014stelt gebruikers in staat om panelen met gerelateerde inhoud te wisselen.<\/li>\n\n\n\n<li><strong>Titel<\/strong>\u2014wordt gebruikt om koppen te cre\u00ebren voor de pagina of een sectie van de pagina.<\/li>\n\n\n\n<li><strong>Tekst<\/strong>\u2014maakt het eenvoudig om een rijke tekstparagraaf op een pagina weer te geven, met diverse opmaakopties.<\/li>\n\n\n\n<li><strong>Afbeelding<\/strong>\u2014maakt het mogelijk om \u00e9\u00e9n afbeeldingsbron op een webpagina weer te geven. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Ondersteunt ook &#8216;lazy loading&#8217;, wat de paginaprestaties optimaliseert door afbeeldingen alleen te laden wanneer ze zichtbaar moeten worden voor de gebruiker.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014groepeert een afbeelding, titel en beschrijving om secties van website-inhoud te promoten en ernaar te linken.<\/li>\n\n\n\n<li><strong>Lijst<\/strong>\u2014geeft een lijst met pagina&#8217;s weer 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 Formulieren 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> zijn speciaal ontworpen om het maken en beheren van formulieren op uw website te stroomlijnen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Formuliertekst<\/strong>\u2014maakt het mogelijk om diverse invoervelden te cre\u00ebren voor het verzamelen van informatie voor later gebruik\u2014zoals enkelregelige velden, meerregelige tekstvakken of wachtwoordvelden. U kunt het uiterlijk en het gedrag van tekstvelden aanpassen.<\/li>\n\n\n\n<li><strong>Formulieropties<\/strong>\u2014maakt het mogelijk om een formulier te cre\u00ebren met diverse indelingsopties, zoals selectieopties\u2014keuzerondjes, aankruisvakjes (checkboxen), vervolgkeuzemenu&#8217;s, en zelfs op maat ontworpen optiegroepen, om deze aan te passen aan uw merk.<\/li>\n\n\n\n<li><strong>Formulierknop<\/strong>\u2014maakt gebruikersinteracties mogelijk en vergemakkelijkt het verzenden van gegevens, door te dienen als actieve elementen\u2014die gebruikers aanmoedigen om specifieke acties uit te voeren, zoals het indienen van een formulier, het resetten van formuliervelden of het aanroepen 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-commerceplatforms mogelijk, zodat u aantrekkelijke productlijsten, winkelwagentjes, afrekenprocessen en nog veel meer kunt cre\u00ebren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Product<\/strong>\u2014biedt een uitgebreide en visueel aantrekkelijke weergave van individuele producten\u2014inclusief productfoto&#8217;s, beschrijvingen, prijzen en alle andere relevante details.<\/li>\n\n\n\n<li><strong>Gerelateerde producten<\/strong>\u2014maakt cross-selling mogelijk door complementaire of vergelijkbare producten naast het hoofdproduct weer te geven. Genereer automatisch aanbevelingen op basis van gedefinieerde regels, productcategorie\u00ebn of gebruikersgedrag.<\/li>\n\n\n\n<li><strong>Productvoorbeeld<\/strong>\u2014geeft productvoorbeelden weer op elke AEM-pagina, die linken naar de productdetails-pagina.<\/li>\n\n\n\n<li><strong>Zoeken<\/strong>\u2014configureer om een specifiek aantal producten op de pagina weer te geven of om productprijzen dynamisch te laden in een aanvullende browserquery.<\/li>\n\n\n\n<li><strong>Productcarrousel<\/strong>\u2014geeft een lijst met uitgelichte producten weer in carrouselstijl.<\/li>\n\n\n\n<li><strong>Commerce Experience Fragment (Commercieel 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 experience fragment kan bijvoorbeeld een promotiebanner zijn die een tijdelijke uitverkoop benadrukt voor een specifieke productcategorie. Dit fragment kan eenvoudig worden hergebruikt op meerdere pagina&#8217;s of contactpunten, wat zorgt voor consistente promotie en communicatie 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 website wordt gebouwd met 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\">AEM componentenhi\u00ebrarchie<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We hebben de componenten al besproken; nu wilt u leren hoe u een website ermee 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 website met behulp van componenten omvat verschillende cruciale stappen die design- en developmentelementen combineren. Hier is een eenvoudig overzicht van dit proces:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Wireframe<\/strong>. Cre\u00eber een visuele wireframe of lay-outschema van de website op basis van basiscomponenten. Dit helpt bij het vaststellen van de algemene structuur, het ontwerp en de plaatsing van 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 \u2013 zoals kleuren, typografie en afbeeldingen. Dankzij Adobe XD en Adobe-componenten kan uw creatieve team ontwerpen maken op basis van kant-en-klare tools.<\/li>\n\n\n\n<li><strong>Configuratie en stijl<\/strong>. Elk onderdeel of element van de wireframe wordt ge\u00efdentificeerd en gekoppeld aan de overeenkomstige component in de componentenbibliotheek.<\/li>\n\n\n\n<li><strong>Bouw een pagina met componenten<\/strong>. Ontwikkelaars beginnen met het bouwen van de website door elementen 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 aanpassing mogelijk om visuele consistentie met de rest van de site 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 aan unieke functionele 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\">Toegang tot de <a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">Componentenconsole<\/a> krijgt u via <strong>Tools<\/strong> &gt; <strong>Algemeen<\/strong> &gt; <strong>Componenten<\/strong>. Van daaruit kunt u de lijst met componenten doorbladeren 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;6a574c0ddeb8c&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a574c0ddeb8c\" 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 Componentenconsole in AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Selecteer een component uit de lijst en klik om belangrijke informatie hierover te bekijken, zoals de titel, beschrijving, groep en een lijst met links naar actieve pagina&#8217;s waarop de component wordt gebruikt.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a574c0ddf275&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a574c0ddf275\" 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\">Componenten kunnen worden gebruikt in een &#8216;slepen en neerzetten&#8217;-editor door ze in het geselecteerde gedeelte van de pagina te plaatsen.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a574c0ddf9be&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a574c0ddf9be\" 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\">Nadat u een component aan een pagina hebt toegevoegd, kunt u de eigenschappen ervan configureren met behulp van een gebruiksvriendelijk formulier \u2013 bijvoorbeeld inhoud, afbeeldingen, links of andere componentgerelateerde instellingen opgeven.<\/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\">Samenvatting<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Na het lezen van dit artikel zult u waarderen hoe AEM Core Components kant-en-klare en gestandaardiseerde elementen bieden die u helpen bij het vereenvoudigen van het websiteontwerp- en creatieproces, terwijl de hoge kwaliteit wordt gehandhaafd.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het is echter belangrijk te begrijpen dat het hebben van 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 effectieve resultaten. Deze gespecialiseerde ontwikkelaars beschikken over de nodige expertise om AEM-website-elementen effectief te benutten, best practices te volgen en een juiste integratie met de algehele website-architectuur te waarborgen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Het aanpassen van kernelementen aan specifieke zakelijke vereisten of brandingbehoeften vereist de kennis en vaardigheden van ervaren AEM-ontwikkelaars. Zij kunnen omgaan met de complexiteit van personalisatie, terwijl de systeemintegriteit behouden blijft, wat resulteert in de creatie van 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 AEM Core Components?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">De nieuwste versie van AEM Core Components is 2.22.12. Deze versie is compatibel met AEM as a Cloud Service en met 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 die door Adobe worden geleverd: 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\">Basiscomponenten in AEM zijn gestandaardiseerde bouwstenen voor het maken van websites die essenti\u00eble functionaliteit bieden voor websiteontwikkeling. Ervaringsfragmenten zijn herbruikbare inhoudsmodules die consistent inhoudsbeheer mogelijk maken over meerdere kanalen en touchpoints.<\/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 basiscomponenten en fundamentele componenten?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Basiscomponenten in AEM zijn kant-en-klare elementen voor het bouwen van websites. Fundamentele componenten vormen het raamwerk van AEM en maken het cre\u00ebren en beheren van inhoud mogelijk. Basiscomponenten richten zich op website-elementen, terwijl fundamentele componenten het AEM-platform ondersteunen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wat zijn AEM-componenten Voordelen van AEM-componenten Typen AEM Core Components Hoe een website wordt gebouwd met componenten Samenvatting [&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-23151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Zadzwo\u0144 do nas","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\/23151","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=23151"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23151\/revisions"}],"predecessor-version":[{"id":23153,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/posts\/23151\/revisions\/23153"}],"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=23151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/categories?post=23151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/nl\/wp-json\/wp\/v2\/tags?post=23151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}