{"id":22470,"date":"2023-05-27T19:51:00","date_gmt":"2023-05-27T19:51:00","guid":{"rendered":"https:\/\/site.axamit.com\/?p=480"},"modified":"2026-06-22T05:00:51","modified_gmt":"2026-06-22T05:00:51","slug":"comment-les-composants-de-base-aem-simplifient-le-developpement-de-sites-web","status":"publish","type":"post","link":"https:\/\/axamit.com\/fr\/blog\/adobe-experience-manager\/comment-les-composants-de-base-aem-simplifient-le-developpement-de-sites-web\/","title":{"rendered":"Comment les composants de base AEM simplifient le d\u00e9veloppement de sites web"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Ce que sont les composants AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#benefits-of-aem-components\">Avantages des composants AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#types-of-aem-core-components\">Types de Composants Core d&#039;AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#how-a-web-page-is-built-from-components\">Comment une page web est construite \u00e0 partir de composants<\/a><\/li><li class=\"h2-toc\"><a href=\"#conclusion\">Conclusion<\/a><\/li><li class=\"h2-toc\"><a href=\"#faq\">FAQ<\/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\">Le d\u00e9veloppement de sites web peut \u00eatre \u00e0 la fois complexe et chronophage. Les composants principaux d&rsquo;AEM vous offrent un ensemble complet d&rsquo;outils de d\u00e9veloppement pour cr\u00e9er rapidement des interfaces centr\u00e9es sur l&rsquo;utilisateur. Ce sont des blocs de construction de pages web qui prennent en charge la conception r\u00e9active par d\u00e9faut et contribuent \u00e0 optimiser les performances du site web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans cet article, nous explorerons comment les composants principaux d&rsquo;AEM fa\u00e7onnent le d\u00e9veloppement de sites web et vous offrirons un aper\u00e7u de leurs avantages. Voyez par vous-m\u00eame comment ils peuvent rationaliser la cr\u00e9ation de sites.<\/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\">Ce que sont les composants AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Les composants principaux d&rsquo;AEM sont un ensemble d&rsquo;\u00e9l\u00e9ments standardis\u00e9s de gestion de contenu web (WCM) sp\u00e9cifiquement con\u00e7us pour rationaliser le d\u00e9veloppement de sites web dans AEM. Par exemple, le composant de grille fournit un syst\u00e8me r\u00e9actif pour afficher le contenu sur les pages web, et les sections d&rsquo;images simplifient l&rsquo;insertion d&rsquo;images. Trouvez la liste compl\u00e8te dans la\u00a0<a href=\"https:\/\/www.aemcomponents.dev\/\" target=\"_blank\" rel=\"noopener\">biblioth\u00e8que de composants AEM<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555ced68e2&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555ced68e2\" 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=\"http:\/\/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\">Page d&rsquo;accueil de la biblioth\u00e8que de composants AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ces composants pr\u00e9-construits dans AEM sont con\u00e7us en tenant compte des meilleures pratiques. Les d\u00e9veloppeurs peuvent les utiliser pour assembler rapidement des pages. Ils contribuent \u00e0 garantir une qualit\u00e9 constante, une r\u00e9activit\u00e9 et le respect des normes d&rsquo;accessibilit\u00e9.<\/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\">Avantages des composants AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voyons quels avantages votre entreprise retire de la construction de votre site web \u00e0 l&rsquo;aide des composants principaux d&rsquo;AEM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistent-experience\">Exp\u00e9rience coh\u00e9rente<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les composants principaux d&rsquo;AEM assurent une standardisation, ce qui r\u00e9duit le temps et l&rsquo;effort de d\u00e9veloppement. L&rsquo;utilisation de ces \u00e9l\u00e9ments de pages pr\u00e9-construits acc\u00e9l\u00e8re le d\u00e9lai de mise sur le march\u00e9 de votre site web. Avec des mises en page et des mod\u00e8les de conception pr\u00e9d\u00e9finis, vous pouvez \u00e9galement maintenir une apparence et une convivialit\u00e9 coh\u00e9rentes sur plusieurs propri\u00e9t\u00e9s en ligne, ce qui contribue \u00e0 am\u00e9liorer \u00e0 la fois la reconnaissance de la marque et l&rsquo;engagement des utilisateurs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple, une marque multinationale avec une pr\u00e9sence en ligne couvrant plusieurs r\u00e9gions et langues pourrait utiliser les Composants Core d&rsquo;AEM pour d\u00e9finir des sections d&rsquo;en-t\u00eate et de pied de page coh\u00e9rentes. Celles-ci incluent des logos, des menus de navigation et des informations de contact pour garantir que les visiteurs reconnaissent et associent instantan\u00e9ment ces \u00e9l\u00e9ments \u00e0 la marque, quel que soit le site Web r\u00e9gional qu&rsquo;ils consultent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cost-effective-maintenance\">Maintenance rentable<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Une approche standardis\u00e9e signifie une <a href=\"http:\/\/axamit.com\/fr\/?page_id=19759\" data-type=\"page\" data-id=\"7486\">maintenance rentable<\/a>. Vous pouvez facilement appliquer des modifications <a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">sur plusieurs pages<\/a>, r\u00e9duisant ainsi le temps et les ressources n\u00e9cessaires \u00e0 la gestion continue du site Web. Ce processus de maintenance simplifi\u00e9 se traduit par des \u00e9conomies pour l&rsquo;entreprise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scalability-and-flexibility\">\u00c9volutivit\u00e9 et flexibilit\u00e9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les Composants Core d&rsquo;AEM sont con\u00e7us pour \u00eatre \u00e9volutifs et extensibles. Ils fournissent une base solide pour le d\u00e9veloppement de sites Web, vous permettant d&rsquo;ajouter simplement de nouvelles <a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-features\/\" data-type=\"post\" data-id=\"458\">fonctionnalit\u00e9s AEM<\/a>, d&rsquo;int\u00e9grer des outils tiers et de vous adapter \u00e0 vos besoins commerciaux en constante \u00e9volution. Cette flexibilit\u00e9 garantit que les sites Web construits avec les Composants Core peuvent cro\u00eetre et \u00e9voluer avec votre entreprise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimized-performance\">Performances optimis\u00e9es<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Parce que les Composants Core d&rsquo;AEM sont optimis\u00e9s pour la performance et le SEO, ils suivent les meilleures pratiques pour un rendu efficace, la mise en cache et les donn\u00e9es structur\u00e9es. Cela se traduit par des temps de chargement de page plus rapides et une meilleure visibilit\u00e9 dans les classements des moteurs de recherche. Il en r\u00e9sulte une meilleure exp\u00e9rience utilisateur et une augmentation du trafic organique pour l&rsquo;entreprise.<\/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\">Types de Composants Core d&rsquo;AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Passons maintenant aux diff\u00e9rents types de composants dans AEM. Nous pouvons les diviser en plusieurs groupes : Composants de structure, de contenu, de formulaire et de commerce.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">Composants de structure AEM<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Avec ces \u00e9l\u00e9ments AEM structur\u00e9s, vous pouvez cr\u00e9er des pages web attrayantes et interactives qui captivent votre public :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigation<\/strong>\u2014\u00e9l\u00e9ment essentiel de l&rsquo;architecture de votre site web, la Navigation permet \u00e0 vos utilisateurs d&rsquo;explorer facilement votre contenu. Vous pouvez ajouter la Navigation \u00e0 vos mod\u00e8les de page, en-t\u00eates ou pieds de page pour structurer efficacement le menu de votre site et assurer une navigation coh\u00e9rente sur toutes les pages.<\/li>\n\n\n\n<li><strong>Fil d&rsquo;Ariane<\/strong>\u2014am\u00e9liore l&rsquo;exp\u00e9rience utilisateur en fournissant des chemins de navigation clairs et contextuels. Souvent plac\u00e9 pr\u00e8s du haut d&rsquo;une page web, l&rsquo;\u00e9l\u00e9ment fil d&rsquo;Ariane affiche un chemin hi\u00e9rarchique de liens qui indiquent l&#8217;emplacement actuel de l&rsquo;utilisateur dans la structure du site web.<\/li>\n\n\n\n<li><strong>Navigation linguistique<\/strong>\u2014offrant une navigation par langue et pays pour un site, cet \u00e9l\u00e9ment permet aux visiteurs de naviguer vers la m\u00eame page dans un autre locale. Il est g\u00e9n\u00e9ralement ajout\u00e9 \u00e0 un mod\u00e8le de page, dans l&rsquo;en-t\u00eate ou le pied de page.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">Composants AEM de contenu<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Du texte et de l&rsquo;image aux lecteurs vid\u00e9o et widgets de m\u00e9dias sociaux, ces Composants AEM de contenu offrent des outils polyvalents pour diffuser votre contenu de mani\u00e8re captivante :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Conteneur<\/strong>\u2014utilis\u00e9 pour regrouper d&rsquo;autres \u00e9l\u00e9ments et appliquer une mise en page ou un style commun. Choisissez d&rsquo;ajouter une image d&rsquo;arri\u00e8re-plan et une couleur personnalis\u00e9es, et cr\u00e9ez facilement des sections ou des blocs de contenu de mani\u00e8re coh\u00e9rente.<\/li>\n\n\n\n<li><strong>Boutons<\/strong>\u2014vous permet de cr\u00e9er des boutons interactifs et visuellement attrayants sur votre site web avec des styles, tailles et actions personnalisables.<\/li>\n\n\n\n<li><strong>Accord\u00e9on<\/strong>\u2014permet aux utilisateurs d&rsquo;afficher ou masquer des panneaux de contenu associ\u00e9.<\/li>\n\n\n\n<li><strong>Titre<\/strong>\u2014utilis\u00e9 pour cr\u00e9er des titres pour une page ou des sections de page.<\/li>\n\n\n\n<li><strong>Texte<\/strong>\u2014facilite l&rsquo;affichage d&rsquo;un paragraphe de texte enrichi sur la page, avec diverses options de formatage.<\/li>\n\n\n\n<li><strong>Image<\/strong>\u2014permet l&rsquo;affichage d&rsquo;une seule ressource d&rsquo;image sur une page web. S\u00e9lectionne automatiquement la largeur d&rsquo;image appropri\u00e9e en fonction de la taille de l&rsquo;\u00e9cran de l&rsquo;appareil. Il prend \u00e9galement en charge le chargement paresseux (lazy loading), qui optimise les performances de la page en chargeant les images uniquement lorsqu&rsquo;elles sont sur le point de devenir visibles pour l&rsquo;utilisateur.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014regroupe une image, un titre et une description pour promouvoir et cr\u00e9er des liens vers des sections de contenu du site.<\/li>\n\n\n\n<li><strong>Liste<\/strong>\u2014affiche une liste de pages par requ\u00eate de recherche, par balises ou \u00e0 partir d&rsquo;une page parente.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-aem-components\">Composants de formulaire AEM<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/what-is-aem-forms\/\" data-type=\"post\" data-id=\"562\">AEM Forms<\/a> sont sp\u00e9cifiquement con\u00e7us pour simplifier la cr\u00e9ation et la gestion des formulaires sur votre site web :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Champ texte de formulaire<\/strong>\u2014vous permet de cr\u00e9er diff\u00e9rents champs de saisie pour recueillir des informations en vue d&rsquo;une utilisation ult\u00e9rieure\u2014tels que des champs \u00e0 ligne unique, des zones de texte multilignes ou des champs de mot de passe. Vous pouvez personnaliser l&rsquo;apparence et le comportement des champs de texte.<\/li>\n\n\n\n<li><strong>Options de formulaire<\/strong>\u2014cr\u00e9ez un formulaire avec diff\u00e9rentes dispositions d&rsquo;options, telles que des choix s\u00e9lectionnables\u2014boutons radio, cases \u00e0 cocher, menus d\u00e9roulants, ou m\u00eame des groupes d&rsquo;options personnalis\u00e9s pour correspondre \u00e0 votre image de marque.<\/li>\n\n\n\n<li><strong>Bouton de formulaire<\/strong>\u2014permet les interactions utilisateur et facilite la soumission de donn\u00e9es en servant d&rsquo;\u00e9l\u00e9ments actionnables\u2014invitant les utilisateurs \u00e0 effectuer des actions sp\u00e9cifiques telles que la soumission d&rsquo;un formulaire, la r\u00e9initialisation des champs de formulaire ou le d\u00e9clenchement de fonctions personnalis\u00e9es.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commerce-aem-components\">Composants AEM de commerce<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ces \u00e9l\u00e9ments permettent une int\u00e9gration transparente avec les plateformes de commerce \u00e9lectronique, vous permettant de cr\u00e9er des fiches produits attrayantes, des paniers d&rsquo;achat, des processus de paiement, et bien plus encore :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Produit<\/strong>\u2014offre une repr\u00e9sentation compl\u00e8te et visuellement attrayante des produits individuels\u2014y compris les images de produits, les descriptions, les prix et toute autre information pertinente.<\/li>\n\n\n\n<li><strong>Produits Associ\u00e9s<\/strong>\u2014permet d&rsquo;augmenter les opportunit\u00e9s de vente crois\u00e9e en affichant des produits compl\u00e9mentaires ou similaires aux c\u00f4t\u00e9s du produit principal. G\u00e9n\u00e8re automatiquement des recommandations bas\u00e9es sur des r\u00e8gles pr\u00e9d\u00e9finies, des cat\u00e9gories de produits ou le comportement de l&rsquo;utilisateur.<\/li>\n\n\n\n<li><strong>Teaser Produit<\/strong>\u2014affiche des teasers de produits sur n&rsquo;importe quelle page AEM, renvoyant vers la page de d\u00e9tails du produit.<\/li>\n\n\n\n<li><strong>Recherche<\/strong>\u2014configure l&rsquo;affichage d&rsquo;un nombre donn\u00e9 de produits par page, ou le chargement dynamique des prix des produits via une requ\u00eate de navigateur suppl\u00e9mentaire.<\/li>\n\n\n\n<li><strong>Carrousel de Produits<\/strong>\u2014affiche une liste de produits mis en avant dans un style carrousel.<\/li>\n\n\n\n<li><strong>Fragment d&rsquo;Exp\u00e9rience Commerce<\/strong>\u2014encapsule des \u00e9l\u00e9ments sp\u00e9cifiques au commerce tels que les listes de produits, les informations de prix, les banni\u00e8res promotionnelles et d&rsquo;autres \u00e9l\u00e9ments de contenu li\u00e9s au commerce.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Par exemple, un fragment d&rsquo;exp\u00e9rience commerce pourrait \u00eatre une banni\u00e8re promotionnelle mettant en avant une vente \u00e0 dur\u00e9e limit\u00e9e sur une cat\u00e9gorie de produits sp\u00e9cifique. Ce fragment peut \u00eatre facilement r\u00e9utilis\u00e9\u00a0sur plusieurs pages\u00a0ou points de contact, garantissant une promotion et un message coh\u00e9rents sur l&rsquo;ensemble du site web e-commerce.<\/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\">Comment une page web est construite \u00e0 partir de composants<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"541\" src=\"http:\/\/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\">La hi\u00e9rarchie des composants AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Maintenant que nous avons abord\u00e9 les composants, vous voudrez apprendre \u00e0 construire une page web \u00e0 partir de ceux-ci.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"design-with-components\">Concevoir avec des composants<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Le processus de construction d&rsquo;une page web \u00e0 l&rsquo;aide de composants implique plusieurs \u00e9tapes cl\u00e9s qui combinent des \u00e9l\u00e9ments de design et de d\u00e9veloppement. Voici un aper\u00e7u simple du processus :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Maquette<\/strong>. Cr\u00e9ez une maquette visuelle ou un wireframe de la mise en page web bas\u00e9e sur les composants Core. Cela aide \u00e0 \u00e9tablir la structure globale, le design et le placement des \u00e9l\u00e9ments.<\/li>\n\n\n\n<li><strong>Conception<\/strong>. \u00c0 l&rsquo;aide d&rsquo;un outil de conception tel qu&rsquo;Adobe XD, les designers peuvent travailler sur l&rsquo;aspect visuel\u2014tel que les couleurs, la typographie et l&rsquo;imagerie. Avec Adobe XD et Adobe Components, votre \u00e9quipe cr\u00e9ative peut cr\u00e9er des designs bas\u00e9s sur des outils pr\u00eats \u00e0 l&#8217;emploi.<\/li>\n\n\n\n<li><strong>Configuration et style<\/strong>. Chaque section ou \u00e9l\u00e9ment de la maquette est identifi\u00e9 et associ\u00e9 au composant appropri\u00e9 dans la biblioth\u00e8que de composants.<\/li>\n\n\n\n<li><strong>Construire une page de composants<\/strong>. Les d\u00e9veloppeurs commencent \u00e0 construire la page web en assemblant les \u00e9l\u00e9ments dans l&rsquo;ordre souhait\u00e9, en s&rsquo;assurant que le contenu et les fonctionnalit\u00e9s sont correctement mis en \u0153uvre. Le syst\u00e8me de styles d&rsquo;AEM offre une gamme de styles pr\u00e9d\u00e9finis et permet la personnalisation pour assurer une coh\u00e9rence visuelle avec le reste du site web.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Selon les exigences sp\u00e9cifiques du projet, vous pourriez vouloir personnaliser certains \u00e9l\u00e9ments pour r\u00e9pondre \u00e0 des besoins de fonctionnalit\u00e9 ou de conception uniques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"components-in-the-aem-interface\">Composants dans l&rsquo;interface AEM<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Acc\u00e9dez \u00e0 la\u00a0<a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">Console des composants<\/a>\u00a0depuis\u00a0<strong>Outils<\/strong>\u00a0&gt;\u00a0<strong>G\u00e9n\u00e9ral<\/strong>\u00a0&gt;\u00a0<strong>Composants<\/strong>. \u00c0 partir de l\u00e0, vous pouvez parcourir la liste des composants et utiliser la recherche pour trouver rapidement un composant particulier ou un groupe de composants.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555ced7abd&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555ced7abd\" 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=\"http:\/\/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\">Console des Core Components dans AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">S\u00e9lectionnez un composant dans la liste et cliquez dessus pour afficher des informations cl\u00e9s \u00e0 son sujet, telles que le titre, la description, le groupe et une liste de liens vers les pages actives sur lesquelles le composant est utilis\u00e9.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555ced7f7b&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555ced7f7b\" 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=\"http:\/\/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\">D\u00e9tails du composant dans l&rsquo;interface AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez utiliser les composants dans un \u00e9diteur par glisser-d\u00e9poser, en les pla\u00e7ant sur la section souhait\u00e9e de la page.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac555ced8403&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac555ced8403\" 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=\"http:\/\/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\">Navigateur de composants dans l&rsquo;\u00e9diteur de page AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Une fois que vous avez ajout\u00e9 un composant \u00e0 la page, vous pouvez configurer ses propri\u00e9t\u00e9s via un formulaire convivial \u2014 par exemple, en sp\u00e9cifiant le contenu, les images, les liens ou d&rsquo;autres param\u00e8tres pertinents pour le composant.<\/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\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Apr\u00e8s avoir explor\u00e9 cet article, vous appr\u00e9cierez la mani\u00e8re dont les Core Components d&rsquo;AEM fournissent des \u00e9l\u00e9ments pr\u00eats \u00e0 l&#8217;emploi et standardis\u00e9s qui vous aideront \u00e0 faciliter le processus de conception et de d\u00e9veloppement de votre site web tout en maintenant une qualit\u00e9 \u00e9lev\u00e9e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il est cependant important de reconna\u00eetre que disposer de d\u00e9veloppeurs AEM exp\u00e9riment\u00e9s et avoir acc\u00e8s \u00e0\u00a0<a href=\"http:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">des services d&rsquo;impl\u00e9mentation AEM<\/a>\u00a0est crucial pour obtenir ces r\u00e9sultats rapides et efficaces. Ces d\u00e9veloppeurs sp\u00e9cialis\u00e9s poss\u00e8dent l&rsquo;expertise n\u00e9cessaire pour exploiter efficacement les \u00e9l\u00e9ments du site web AEM, respecter les meilleures pratiques et assurer une int\u00e9gration correcte avec l&rsquo;architecture globale du site web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La personnalisation des \u00e9l\u00e9ments de base pour r\u00e9pondre \u00e0 vos exigences commerciales sp\u00e9cifiques ou \u00e0 vos besoins de marque n\u00e9cessite les connaissances et les comp\u00e9tences de d\u00e9veloppeurs AEM exp\u00e9riment\u00e9s. Ils peuvent g\u00e9rer les complexit\u00e9s de la personnalisation tout en maintenant leur int\u00e9grit\u00e9, ce qui aboutit \u00e0 un site web non seulement rapide, mais aussi adapt\u00e9 aux besoins uniques de votre entreprise.<\/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\">FAQ<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-latest-version-of-core-components-aem-\">Quelle est la derni\u00e8re version des composants principaux AEM ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La derni\u00e8re version des composants principaux AEM est la 2.22.12. Cette version est compatible avec AEM as a Cloud Service et les installations AEM sur site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-many-components-are-there-in-aem-\">Combien de composants y a-t-il dans AEM ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Il existe deux ensembles de composants AEM fournis par Adobe : les composants principaux (Core Components) et les composants de base (Foundation Components). La biblioth\u00e8que compl\u00e8te contient plus de 50 composants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-experience-fragments-in-aem-\">Quelle est la diff\u00e9rence entre les composants principaux (Core Components) et les fragments d&rsquo;exp\u00e9rience (Experience Fragments) dans AEM ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les composants principaux (Core Components) dans AEM sont des blocs de construction standardis\u00e9s pour la cr\u00e9ation de pages web et offrent des fonctionnalit\u00e9s essentielles pour le d\u00e9veloppement de sites web. Les fragments d&rsquo;exp\u00e9rience (Experience Fragments) sont des modules de contenu r\u00e9utilisables qui permettent une gestion coh\u00e9rente du contenu sur plusieurs canaux et points de contact.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-foundation-components-\">Quelle est la diff\u00e9rence entre les composants principaux (Core Components) et les composants de base (Foundation Components) ?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Les composants principaux (Core Components) dans AEM sont des \u00e9l\u00e9ments pr\u00e9-construits pour le d\u00e9veloppement de pages web. Les composants de base (Foundation Components) constituent le cadre d&rsquo;AEM et permettent la cr\u00e9ation et la gestion de contenu. Les composants principaux se concentrent sur les \u00e9l\u00e9ments des pages web, tandis que les composants de base soutiennent la plateforme AEM.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ce que sont les composants AEM Avantages des composants AEM Types de Composants Core d&#039;AEM Comment une page [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":5015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[159],"tags":[],"class_list":["post-22470","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe-experience-manager"],"acf":{"cta":"Give Us a Call","phone":"+1 (438) 383-6878","meta-description":"D\u00e9couvrez la liste des principaux composants AEM qui acc\u00e9l\u00e8rent et simplifient la conception et le d\u00e9veloppement de sites web conviviaux et permettent aux marques d'offrir des exp\u00e9riences exceptionnelles aux visiteurs."},"_links":{"self":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/22470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/comments?post=22470"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/22470\/revisions"}],"predecessor-version":[{"id":22472,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/posts\/22470\/revisions\/22472"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/media?parent=22470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/categories?post=22470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/fr\/wp-json\/wp\/v2\/tags?post=22470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}