Website-ontwikkeling kan zowel complex als tijdrovend zijn. De AEM Core Components bieden u een uitgebreide set ontwikkelingstools om snel gebruikersgerichte interfaces te creëren. Dit zijn bouwstenen voor webpagina’s die standaard responsive design ondersteunen en helpen de websiteprestaties te optimaliseren.
In dit artikel onderzoeken we hoe de AEM Core Components de website-ontwikkeling vormgeven en bieden we u een overzicht van hun voordelen. Ontdek zelf hoe ze het maken van websites kunnen stroomlijnen.
Wat AEM-componenten zijn
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’s, en afbeeldingssecties vereenvoudigen het invoegen van afbeeldingen. De volledige lijst vindt u in de AEM componentenbibliotheek.
Deze vooraf gebouwde componenten in AEM zijn ontworpen met best practices in gedachten. Ontwikkelaars kunnen ze gebruiken om snel pagina’s samen te stellen. Ze dragen bij aan het waarborgen van consistente kwaliteit, responsiviteit en naleving van toegankelijkheidsnormen.
Voordelen van AEM-componenten
Laten we eens kijken welke voordelen uw bedrijf behaalt wanneer uw website is gebouwd met behulp van de AEM Core Components.
Consistente ervaring
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.
Bijvoorbeeld, een multinationaal merk met een online aanwezigheid in meerdere regio’s en talen zou de AEM Core Components kunnen gebruiken om consistente header- en footersecties te definiëren. Deze omvatten logo’s, navigatiemenu’s en contactgegevens om te garanderen dat bezoekers deze elementen onmiddellijk herkennen en associëren met het merk, ongeacht welke regionale website zij bezoeken.
Kosteneffectief onderhoud
Een gestandaardiseerde aanpak betekent kosteneffectief onderhoud. U kunt eenvoudig wijzigingen toepassen op meerdere pagina’s, 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.
Schaalbaarheid en flexibiliteit
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 AEM-functionaliteiten 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.
Geoptimaliseerde Prestaties
Aangezien de AEM Core Components zijn geoptimaliseerd voor prestaties en SEO, volgen ze de beste praktijken voor efficiënte rendering, caching en gestructureerde gegevens. Dit resulteert in snellere laadtijden van pagina’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.
Typen AEM Core Components
Laten we nu kijken naar de verschillende typen componenten in AEM. We kunnen ze onderverdelen in verschillende groepen: Structuur-, Inhouds-, Formulier- en Commerce-componenten.
AEM Structuurcomponenten
Met deze gestructureerde AEM-elementen kunt u boeiende en interactieve webpagina’s creëren die uw publiek aanspreken:
- Navigatie—een 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’s te garanderen.
- Broodkruimel—verbetert de gebruikerservaring door duidelijke en contextuele navigatiepaden te bieden. Vaak bovenaan een webpagina geplaatst, toont het broodkruimel-element een hiërarchisch spoor van links die de huidige locatie van de gebruiker binnen de websitestructuur aangeven.
- Taalnavigatie—biedt 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.
AEM-contentcomponenten
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:
- Container—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ëer eenvoudig en consistent contentsecties of -blokken.
- Knoppen—stelt u in staat interactieve en visueel aantrekkelijke knoppen op uw website te creëren met aanpasbare stijlen, groottes en acties.
- Accordeon—stelt gebruikers in staat om gerelateerde contentpanelen weer te geven/verbergen.
- Titel—gebruikt om koppen te creëren voor een pagina of paginasecties.
- Tekst—vergemakkelijkt de weergave van een alinea met rich text op de pagina, met diverse opmaakopties.
- Afbeelding—maakt de weergave van één afbeeldingsasset op een webpagina mogelijk. Selecteert automatisch de juiste afbeeldingsbreedte op basis van de schermgrootte van het apparaat. Het ondersteunt ook ‘lazy loading’ (uitgesteld laden), wat de paginaprestaties optimaliseert door afbeeldingen alleen te laden wanneer ze bijna zichtbaar worden voor de gebruiker.
- Teaser—combineert een afbeelding, een titel en een beschrijving om inhoudsecties van de website te promoten en te koppelen.
- Lijst—toont een lijst met pagina’s op basis van een zoekopdracht, tags of vanuit een bovenliggende pagina.
AEM Formuliercomponenten
AEM Forms zijn specifiek ontworpen om de creatie en het beheer van formulieren op uw website te stroomlijnen:
- Formulier tekstveld—hiermee kunt u verschillende invoervelden creëren om informatie te verzamelen voor later gebruik — zoals enkelregelige velden, meerregelige tekstvakken of wachtwoordvelden. Kies ervoor om het uiterlijk en het gedrag van de tekstvelden aan te passen.
- Formulieropties—creëert een formulier met verschillende indelingsopties, zoals selecteerbare keuzes — keuzerondjes, aankruisvakjes, vervolgkeuzemenu’s, of zelfs aangepaste optiegroepen die passen bij uw merkidentiteit.
- Formulierknop—maakt gebruikersinteracties mogelijk en vergemakkelijkt het indienen van gegevens door te fungeren als aanklikbare elementen — 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.
AEM E-commerce componenten
Deze elementen maken een naadloze integratie met e-commerce platforms mogelijk, waardoor u aantrekkelijke productlijsten, winkelwagentjes, betaalprocessen, en meer kunt creëren:
- Product—biedt een complete en visueel aantrekkelijke weergave van individuele producten — inclusief productafbeeldingen, beschrijvingen, prijzen en alle andere relevante informatie.
- Gerelateerde producten—hiermee 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ën of gebruikersgedrag.
- Productteaser—toont productteasers op elke AEM-pagina, die linken naar de productdetailpagina.
- Zoeken—te configureren om een bepaald aantal producten per pagina weer te geven, of om productprijzen dynamisch te laden in een aanvullende browseraanvraag.
- Productcarrousel—toont een lijst met uitgelichte producten in carrouselstijl.
- Commerce Ervaringsfragment—omvat handelsspecifieke elementen zoals productlijsten, prijsinformatie, promotiebanners en andere handelsgerelateerde contentelementen.
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’s of contactpunten, waardoor consistente promotie en boodschappen over de gehele commerciële website worden gewaarborgd.
Hoe een webpagina is opgebouwd uit componenten
Nu we de componenten hebben besproken, wilt u vast leren hoe u hiermee een webpagina bouwt.
Ontwerpen met componenten
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:
- Mock-up. Creëer 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.
- Ontwerp. Met behulp van een ontwerptool zoals Adobe XD kunnen designers werken aan het visuele aspect — zoals kleuren, typografie en beeldmateriaal. Met Adobe XD en de Adobe componenten kan uw creatieve team ontwerpen creëren op basis van kant-en-klare tools.
- Configuratie en stijl. Elke sectie of elk element van de mock-up wordt geïdentificeerd en gekoppeld aan de juiste component in de componentenbibliotheek.
- Een componentenpagina bouwen. 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ïmplementeerd. Het AEM-stijlsysteem biedt een reeks vooraf gedefinieerde stijlen en maakt maatwerk mogelijk om visuele consistentie met de rest van de website te garanderen.
Afhankelijk van de specifieke projectvereisten, wilt u wellicht bepaalde elementen aanpassen om te voldoen aan unieke functionele of ontwerpeisen.
Componenten in de AEM-interface
Ga naar de Componentenconsole via Gereedschappen > Algemeen > Componenten. Vanaf daar kunt u de lijst met componenten doorbladeren en de zoekfunctie gebruiken om snel een specifieke component of een groep componenten te vinden.
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’s waar de component wordt gebruikt.
U kunt de componenten gebruiken in een drag-and-drop-editor en deze plaatsen in het gewenste gedeelte van de pagina.
Nadat u een component aan de pagina hebt toegevoegd, kunt u de eigenschappen ervan configureren via een gebruiksvriendelijk formulier — bijvoorbeeld door de inhoud, afbeeldingen, links of andere relevante parameters voor de component te specificeren.
Conclusie
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.
Het is echter belangrijk te erkennen dat het beschikken over ervaren AEM-ontwikkelaars en toegang tot AEM-implementatiediensten cruciaal is voor het behalen van snelle en efficiënte 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.
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.
Veelgestelde vragen
Wat is de nieuwste versie van de AEM Core Components?
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.
Hoeveel componenten zijn er in AEM?
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.
Wat is het verschil tussen hoofdcomponenten en ervaringsfragmenten in AEM?
Hoofdcomponenten in AEM zijn gestandaardiseerde bouwstenen voor het creëren van webpagina’s en bieden essentiële functionaliteiten voor websiteontwikkeling. Ervaringsfragmenten zijn herbruikbare inhoudsmodules die consistent inhoudsbeheer mogelijk maken over meerdere kanalen en contactpunten heen.
Wat is het verschil tussen hoofdcomponenten en basiscomponenten?
Hoofdcomponenten in AEM zijn vooraf gebouwde elementen voor de ontwikkeling van webpagina’s. Basiscomponenten vormen het raamwerk van AEM en maken het creëren en beheren van inhoud mogelijk. Hoofdcomponenten richten zich op webpagina-elementen, terwijl basiscomponenten het AEM-platform ondersteunen.
