Het bouwen van websites kan zowel complex als tijdrovend zijn. AEM Core Components 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.
In dit artikel onderzoeken we hoe AEM Core Components de ontwikkeling van websites beïnvloeden en presenteren we de voordelen van het gebruik ervan. Ontdek hoe ze het bouwen van sites kunnen stroomlijnen.
Wat zijn AEM-componenten
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’s, terwijl afbeeldingssecties het invoegen van afbeeldingen vereenvoudigen. Een volledige lijst is te vinden in de AEM Component Library.
Deze kant-en-klare componenten in AEM zijn ontworpen met het oog op best practices. Ontwikkelaars kunnen ze gebruiken om snel pagina’s samen te stellen. Ze helpen zorgen voor consistente kwaliteit, responsiviteit en naleving van toegankelijkheidsstandaarden.
Voordelen van AEM-componenten
Laten we eens kijken welke voordelen uw bedrijf zal ervaren wanneer uw website wordt gebouwd met AEM Core Components.
Consistente ervaring
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.
Bijvoorbeeld, een internationaal merk met een online aanwezigheid die meerdere regio’s en talen omvat, zou AEM Core Components kunnen gebruiken om consistente header- en footersecties te definiëren. Deze omvatten logo’s, navigatiemenu’s en contactinformatie, om ervoor te zorgen dat bezoekers deze elementen onmiddellijk herkennen en associëren met het merk, ongeacht welke regionale site ze bekijken.
Kosteneffectief onderhoud
Een gestandaardiseerde aanpak betekent kosteneffectief onderhoud. U kunt eenvoudig wijzigingen aanbrengen op meerdere sites, waardoor de tijd en middelen die nodig zijn voor het lopende websitebeheer worden verminderd. Dit gestroomlijnde onderhoudsproces leidt tot kostenbesparingen voor uw bedrijf.
Schaalbaarheid en flexibiliteit
AEM Core Components zijn ontworpen om schaalbaar en uitbreidbaar te zijn. Ze vormen een solide basis voor websiteontwikkeling, waardoor u eenvoudig nieuwe AEM-functies 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.
Geoptimaliseerde prestaties
Omdat AEM Core Components zijn geoptimaliseerd voor prestaties en SEO, passen ze best practices toe voor efficiënte rendering, caching en gestructureerde gegevens. Dit resulteert in kortere laadtijden van pagina’s en een betere zichtbaarheid in de zoekmachinerankings. Het gevolg hiervan is een verbeterde gebruikerservaring en verhoogd organisch zakelijk verkeer.
Typen AEM Core Components
Laten we nu de verschillende typen componenten in AEM bekijken. We kunnen ze in verschillende groepen verdelen: structurele componenten, inhoudscomponenten, formuliercomponenten en e-commercecomponenten.
AEM structurele componenten
Met deze gestructureerde AEM-elementen kunt u boeiende en interactieve websites creëren die uw publiek zullen verrassen:
- Navigatie—als 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ënt te structureren en consistente navigatie op alle pagina’s te garanderen.
- Broodkruimelnavigatie—verbetert de gebruikerservaring door duidelijke en contextuele navigatiepaden te bieden. Vaak bovenaan een webpagina geplaatst, toont het broodkruimelnavigatie-element een hiërarchische reeks links die de huidige locatie van de gebruiker binnen de sitestructuur weergeven.
- Taalkeuze—door 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.
AEM inhoudscomponenten
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:
- Container—wordt 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ëren.
- Knoppen—maken het mogelijk om interactieve en visueel aantrekkelijke knoppen op een webpagina te creëren, met de mogelijkheid om stijlen, groottes en acties aan te passen.
- Accordeon—stelt gebruikers in staat om panelen met gerelateerde inhoud te wisselen.
- Titel—wordt gebruikt om koppen te creëren voor de pagina of een sectie van de pagina.
- Tekst—maakt het eenvoudig om een rijke tekstparagraaf op een pagina weer te geven, met diverse opmaakopties.
- Afbeelding—maakt het mogelijk om één afbeeldingsbron op een webpagina weer te geven. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Ondersteunt ook ‘lazy loading’, wat de paginaprestaties optimaliseert door afbeeldingen alleen te laden wanneer ze zichtbaar moeten worden voor de gebruiker.
- Teaser—groepeert een afbeelding, titel en beschrijving om secties van website-inhoud te promoten en ernaar te linken.
- Lijst—geeft een lijst met pagina’s weer op basis van een zoekopdracht, tags of vanuit een bovenliggende pagina.
AEM Formulieren Componenten
AEM Formulieren zijn speciaal ontworpen om het maken en beheren van formulieren op uw website te stroomlijnen:
- Formuliertekst—maakt het mogelijk om diverse invoervelden te creëren voor het verzamelen van informatie voor later gebruik—zoals enkelregelige velden, meerregelige tekstvakken of wachtwoordvelden. U kunt het uiterlijk en het gedrag van tekstvelden aanpassen.
- Formulieropties—maakt het mogelijk om een formulier te creëren met diverse indelingsopties, zoals selectieopties—keuzerondjes, aankruisvakjes (checkboxen), vervolgkeuzemenu’s, en zelfs op maat ontworpen optiegroepen, om deze aan te passen aan uw merk.
- Formulierknop—maakt gebruikersinteracties mogelijk en vergemakkelijkt het verzenden van gegevens, door te dienen als actieve elementen—die gebruikers aanmoedigen om specifieke acties uit te voeren, zoals het indienen van een formulier, het resetten van formuliervelden of het aanroepen van aangepaste functies.
AEM Commerce Componenten
Deze elementen maken naadloze integratie met e-commerceplatforms mogelijk, zodat u aantrekkelijke productlijsten, winkelwagentjes, afrekenprocessen en nog veel meer kunt creëren:
- Product—biedt een uitgebreide en visueel aantrekkelijke weergave van individuele producten—inclusief productfoto’s, beschrijvingen, prijzen en alle andere relevante details.
- Gerelateerde producten—maakt cross-selling mogelijk door complementaire of vergelijkbare producten naast het hoofdproduct weer te geven. Genereer automatisch aanbevelingen op basis van gedefinieerde regels, productcategorieën of gebruikersgedrag.
- Productvoorbeeld—geeft productvoorbeelden weer op elke AEM-pagina, die linken naar de productdetails-pagina.
- Zoeken—configureer om een specifiek aantal producten op de pagina weer te geven of om productprijzen dynamisch te laden in een aanvullende browserquery.
- Productcarrousel—geeft een lijst met uitgelichte producten weer in carrouselstijl.
- Commerce Experience Fragment (Commercieel Ervaringsfragment)—omvat handelsspecifieke elementen, zoals productlijsten, prijsinformatie, promotiebanners en andere handelsgerelateerde contentelementen.
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’s of contactpunten, wat zorgt voor consistente promotie en communicatie op de gehele commerciële website.
Hoe een website wordt gebouwd met componenten
We hebben de componenten al besproken; nu wilt u leren hoe u een website ermee bouwt.
Ontwerpen met componenten
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:
- Wireframe. Creëer 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.
- Ontwerp. Met behulp van een ontwerptool, zoals Adobe XD, kunnen ontwerpers werken aan het visuele aspect – zoals kleuren, typografie en afbeeldingen. Dankzij Adobe XD en Adobe-componenten kan uw creatieve team ontwerpen maken op basis van kant-en-klare tools.
- Configuratie en stijl. Elk onderdeel of element van de wireframe wordt geïdentificeerd en gekoppeld aan de overeenkomstige component in de componentenbibliotheek.
- Bouw een pagina met componenten. 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ïmplementeerd. Het AEM-stijlsysteem biedt een reeks vooraf gedefinieerde stijlen en maakt aanpassing mogelijk om visuele consistentie met de rest van de site te garanderen.
Afhankelijk van de specifieke projectvereisten, wilt u mogelijk bepaalde elementen aanpassen om aan unieke functionele of ontwerpbehoeften te voldoen.
Componenten in de AEM-interface
Toegang tot de Componentenconsole krijgt u via Tools > Algemeen > Componenten. Van daaruit kunt u de lijst met componenten doorbladeren en de zoekfunctie gebruiken om snel een specifieke component of een groep ervan te vinden.
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’s waarop de component wordt gebruikt.
Componenten kunnen worden gebruikt in een ‘slepen en neerzetten’-editor door ze in het geselecteerde gedeelte van de pagina te plaatsen.
Nadat u een component aan een pagina hebt toegevoegd, kunt u de eigenschappen ervan configureren met behulp van een gebruiksvriendelijk formulier – bijvoorbeeld inhoud, afbeeldingen, links of andere componentgerelateerde instellingen opgeven.
Samenvatting
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.
Het is echter belangrijk te begrijpen dat het hebben van ervaren AEM-ontwikkelaars en toegang tot AEM-implementatiediensten 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.
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.
Veelgestelde vragen
Wat is de nieuwste versie van AEM Core Components?
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.
Hoeveel componenten zijn er in AEM?
Er zijn twee sets AEM-componenten die door Adobe worden geleverd: Core Components en Foundation Components. De uitgebreide bibliotheek bevat meer dan 50 componenten.
Wat is het verschil tussen Core Components en Experience Fragments in AEM?
Basiscomponenten in AEM zijn gestandaardiseerde bouwstenen voor het maken van websites die essentiële functionaliteit bieden voor websiteontwikkeling. Ervaringsfragmenten zijn herbruikbare inhoudsmodules die consistent inhoudsbeheer mogelijk maken over meerdere kanalen en touchpoints.
Wat is het verschil tussen basiscomponenten en fundamentele componenten?
Basiscomponenten in AEM zijn kant-en-klare elementen voor het bouwen van websites. Fundamentele componenten vormen het raamwerk van AEM en maken het creëren en beheren van inhoud mogelijk. Basiscomponenten richten zich op website-elementen, terwijl fundamentele componenten het AEM-platform ondersteunen.
