{"id":22473,"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:01:41","modified_gmt":"2026-06-22T05:01:41","slug":"wie-aem-core-components-die-website-entwicklung-vereinfachen","status":"publish","type":"post","link":"https:\/\/axamit.com\/de\/blog\/adobe-experience-manager\/wie-aem-core-components-die-website-entwicklung-vereinfachen\/","title":{"rendered":"Wie AEM Core Components die Website-Entwicklung vereinfachen"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Was AEM Components sind<\/a><\/li><li class=\"h2-toc\"><a href=\"#benefits-of-aem-components\">Vorteile von AEM Components<\/a><\/li><li class=\"h2-toc\"><a href=\"#types-of-aem-core-components\">Arten von AEM Core Components<\/a><\/li><li class=\"h2-toc\"><a href=\"#how-a-web-page-is-built-from-components\">Wie eine Webseite aus Komponenten aufgebaut wird<\/a><\/li><li class=\"h2-toc\"><a href=\"#conclusion\">Fazit<\/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\">Die Website-Entwicklung kann sowohl komplex als auch zeitaufwendig sein. AEM Core Components bieten Ihnen ein umfassendes Set an Entwickler-Tools, um schnell benutzerzentrierte Schnittstellen zu erstellen. Dies sind Webseiten-Bausteine, die standardm\u00e4\u00dfig responsives Design unterst\u00fctzen und dazu beitragen, die Website-Performance zu optimieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In diesem Artikel werden wir untersuchen, wie AEM Core Components die Website-Entwicklung pr\u00e4gen und Ihnen Einblicke in ihre Vorteile geben. \u00dcberzeugen Sie sich selbst, wie sie die Erstellung von Websites optimieren k\u00f6nnen.<\/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\">Was AEM Components sind<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components sind eine Reihe standardisierter Web Content Management (WCM)-Elemente, die speziell entwickelt wurden, um die Website-Entwicklung in AEM zu optimieren. Zum Beispiel bietet die Grid-Komponente ein responsives System zur Anzeige von Inhalten auf Webseiten, und Bildabschnitte vereinfachen das Einf\u00fcgen von Bildern. Die vollst\u00e4ndige Liste finden Sie in der\u00a0<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;6ac55592a53dc&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac55592a53dc\" 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\">Startseite der AEM Component Library<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Diese vorgefertigten Komponenten in AEM wurden unter Ber\u00fccksichtigung bew\u00e4hrter Verfahren entwickelt. Entwickler k\u00f6nnen sie verwenden, um schnell Seiten zusammenzustellen. Sie tragen dazu bei, eine gleichbleibende Qualit\u00e4t, Responsivit\u00e4t und die Einhaltung von Barrierefreiheitsstandards zu gew\u00e4hrleisten.<\/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\">Vorteile von AEM Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sehen wir uns an, welche Vorteile Ihr Unternehmen erh\u00e4lt, wenn Ihre Website mit AEM Core Components erstellt wird.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistent-experience\">Konsistentes Erlebnis<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components bieten Standardisierung, was die Entwicklungszeit und den Aufwand reduziert. Die Verwendung der vorgefertigten Seitenbausteine beschleunigt die Markteinf\u00fchrungszeit Ihrer Website. Mit vordefinierten Layouts und Designmustern k\u00f6nnen Sie zudem ein koh\u00e4rentes Erscheinungsbild \u00fcber mehrere Online-Eigenschaften hinweg beibehalten, was dazu beitr\u00e4gt, sowohl die Markenbekanntheit als auch die Nutzerbindung zu verbessern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zum Beispiel k\u00f6nnte eine multinationale Marke mit einer Online-Pr\u00e4senz, die sich \u00fcber mehrere Regionen und Sprachen erstreckt, AEM Core Components verwenden, um konsistente Kopf- und Fu\u00dfzeilenbereiche zu definieren. Diese umfassen Logos, Navigationsmen\u00fcs und Kontaktinformationen, um sicherzustellen, dass Besucher diese Elemente sofort erkennen und mit der Marke assoziieren, unabh\u00e4ngig davon, welche regionale Website sie gerade besuchen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cost-effective-maintenance\">Kosteng\u00fcnstige Wartung<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ein standardisierter Ansatz bedeutet <a href=\"http:\/\/axamit.com\/de\/?page_id=19762\" data-type=\"page\" data-id=\"7486\">kosteng\u00fcnstige Wartung<\/a>. Sie k\u00f6nnen \u00c4nderungen einfach <a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">auf mehreren Seiten<\/a> anwenden, wodurch der Zeit- und Ressourcenaufwand f\u00fcr die laufende Website-Verwaltung reduziert wird. Dieser optimierte Wartungsprozess f\u00fchrt zu Kosteneinsparungen f\u00fcr das Unternehmen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scalability-and-flexibility\">Skalierbarkeit und Flexibilit\u00e4t<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components sind darauf ausgelegt, skalierbar und erweiterbar zu sein. Sie bieten eine solide Grundlage f\u00fcr die Website-Entwicklung und erm\u00f6glichen es Ihnen, einfach neue <a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-features\/\" data-type=\"post\" data-id=\"458\">AEM-Funktionen<\/a> hinzuzuf\u00fcgen, Tools von Drittanbietern zu integrieren und sich an Ihre sich entwickelnden Gesch\u00e4ftsanforderungen anzupassen. Diese Flexibilit\u00e4t stellt sicher, dass mit Core Components erstellte Websites mit Ihrem Unternehmen wachsen und sich weiterentwickeln k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimized-performance\">Optimierte Leistung<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Da AEM Core Components f\u00fcr Leistung und SEO optimiert sind, folgen sie Best Practices f\u00fcr effizientes Rendering, Caching und strukturierte Daten. Dies f\u00fchrt zu schnelleren Ladezeiten der Seiten und einer verbesserten Sichtbarkeit in den Suchmaschinen-Rankings. Das Ergebnis ist eine bessere Benutzererfahrung und ein erh\u00f6hter organischer Gesch\u00e4fts-Traffic.<\/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\">Arten von AEM Core Components<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kommen wir nun zu den verschiedenen Arten von Komponenten in AEM. Wir k\u00f6nnen sie in mehrere Gruppen unterteilen: Struktur-, Inhalts-, Formular- und Commerce-Komponenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">Struktur-AEM-Komponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Mit diesen strukturierten AEM-Elementen k\u00f6nnen Sie ansprechende und interaktive Webseiten erstellen, die Ihr Publikum fesseln:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigation<\/strong> \u2013 Als wichtiges Element in der Architektur Ihrer Website erm\u00f6glicht die Navigation Ihren Benutzern, Ihre Inhalte einfach zu erkunden. Sie k\u00f6nnen die Navigation zu Ihren Seitenvorlagen, Kopf- oder Fu\u00dfzeilen hinzuf\u00fcgen, um das Men\u00fc Ihrer Website effizient zu strukturieren und eine konsistente Navigation auf allen Seiten zu gew\u00e4hrleisten.<\/li>\n\n\n\n<li><strong>Breadcrumb<\/strong> \u2013 Verbessert die Benutzererfahrung durch die Bereitstellung klarer und kontextbezogener Navigationspfade. Oft am oberen Rand einer Webseite platziert, zeigt das Breadcrumb-Element einen hierarchischen Pfad von Links an, der den aktuellen Standort des Benutzers innerhalb der Websitestruktur abbildet.<\/li>\n\n\n\n<li><strong>Sprachnavigation<\/strong> \u2013 Bietet eine Sprach- und L\u00e4nder navigation f\u00fcr eine Website. Dieses Element erm\u00f6glicht Besuchern, zu derselben Seite in einem anderen Gebietsschema zu navigieren. Es wird h\u00e4ufig zu einer Seitenvorlage, im Kopf- oder Fu\u00dfbereich hinzugef\u00fcgt.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">AEM-Inhaltskomponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Von Text und Bild bis hin zu Videoplayern und Social-Media-Widgets bieten diese AEM-Inhaltskomponenten vielseitige Tools, um Ihre Inhalte auf \u00fcberzeugende Weise zu pr\u00e4sentieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Container<\/strong> \u2013 Wird verwendet, um andere Elemente zu gruppieren und ein gemeinsames Layout oder einen gemeinsamen Stil anzuwenden. W\u00e4hlen Sie, ein benutzerdefiniertes Hintergrundbild und eine Farbe hinzuzuf\u00fcgen und erstellen Sie einfach koh\u00e4rente Abschnitte oder Bl\u00f6cke von Inhalten.<\/li>\n\n\n\n<li><strong>Schaltfl\u00e4chen<\/strong> \u2013 Erm\u00f6glicht Ihnen, interaktive und visuell ansprechende Schaltfl\u00e4chen auf Ihrer Website mit anpassbaren Stilen, Gr\u00f6\u00dfen und Aktionen zu erstellen.<\/li>\n\n\n\n<li><strong>Akkordeon<\/strong> \u2013 Erm\u00f6glicht Benutzern das Ein- und Ausblenden von Panels mit verwandten Inhalten.<\/li>\n\n\n\n<li><strong>Titel<\/strong> \u2013 Wird verwendet, um \u00dcberschriften f\u00fcr eine Seite oder Seitenabschnitte zu erstellen.<\/li>\n\n\n\n<li><strong>Text<\/strong> \u2013 Erm\u00f6glicht die Anzeige eines Rich-Text-Absatzes auf der Seite mit verschiedenen Formatierungsoptionen.<\/li>\n\n\n\n<li><strong>Bild<\/strong>\u2014erm\u00f6glicht die Anzeige eines einzelnen Bildes auf einer Webseite. W\u00e4hlt automatisch die passende Bildbreite basierend auf der Bildschirmgr\u00f6\u00dfe des Ger\u00e4ts. Es unterst\u00fctzt auch Lazy Loading, was die Seitenleistung optimiert, indem Bilder erst geladen werden, wenn sie im Begriff sind, f\u00fcr den Benutzer sichtbar zu werden.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014gruppiert ein Bild, einen Titel und eine Beschreibung zur Bewerbung und Verlinkung von Inhaltsbereichen der Webseite.<\/li>\n\n\n\n<li><strong>Liste<\/strong>\u2014zeigt eine Liste von Seiten nach Suchanfrage, Tags oder von einer \u00fcbergeordneten Seite an.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-aem-components\">AEM Formular-Komponenten<\/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 Formulare<\/a> sind speziell daf\u00fcr konzipiert, die Erstellung und Verwaltung von Formularen auf Ihrer Webseite zu optimieren:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Formulartext<\/strong>\u2014erm\u00f6glicht Ihnen, verschiedene Eingabefelder zu erstellen, um Informationen f\u00fcr die sp\u00e4tere Verwendung zu sammeln\u2014wie einzeilige Felder, mehrzeilige Textbereiche oder Passwortfelder. Sie k\u00f6nnen das Aussehen und Verhalten von Textfeldern anpassen.<\/li>\n\n\n\n<li><strong>Formularoptionen<\/strong>\u2014erstellen Sie ein Formular mit verschiedenen Optionslayouts, wie w\u00e4hlbaren Optionen\u2014Optionsfeldern, Kontrollk\u00e4stchen, Dropdown-Men\u00fcs oder sogar individuell gestalteten Optionsgruppen, passend zu Ihrem Branding.<\/li>\n\n\n\n<li><strong>Formularschaltfl\u00e4che<\/strong>\u2014erm\u00f6glicht Benutzerinteraktionen und erleichtert die Daten\u00fcbermittlung, indem sie als klickbare Elemente dient\u2014die Benutzer dazu auffordern, bestimmte Aktionen auszuf\u00fchren, wie das Absenden eines Formulars, das Zur\u00fccksetzen von Formularfeldern oder das Ausl\u00f6sen benutzerdefinierter Funktionen.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commerce-aem-components\">AEM Commerce-Komponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Diese Elemente erm\u00f6glichen eine nahtlose Integration mit E-Commerce-Plattformen und versetzen Sie in die Lage, ansprechende Produktlisten, Warenk\u00f6rbe, Checkout-Prozesse und vieles mehr zu erstellen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Produkt<\/strong>\u2014bietet eine umfassende und visuell ansprechende Darstellung einzelner Produkte\u2014einschlie\u00dflich Produktbildern, Beschreibungen, Preisen und allen anderen relevanten Details.<\/li>\n\n\n\n<li><strong>Verwandte Produkte<\/strong>\u2014erm\u00f6glicht es Ihnen, Cross-Selling-M\u00f6glichkeiten zu erh\u00f6hen, indem komplement\u00e4re oder \u00e4hnliche Produkte neben dem Hauptprodukt angezeigt werden. Empfehlungen werden automatisch basierend auf vordefinierten Regeln, Produktkategorien oder Benutzerverhalten generiert.<\/li>\n\n\n\n<li><strong>Produkt-Teaser<\/strong>\u2014zeigt Produkt-Teaser auf jeder AEM-Seite an, die zur Produktdetailseite verlinkt.<\/li>\n\n\n\n<li><strong>Suche<\/strong>\u2014konfigurieren Sie, um eine bestimmte Anzahl von Produkten pro Seite anzuzeigen oder Produktpreise dynamisch in einer zus\u00e4tzlichen Browser-Abfrage zu laden.<\/li>\n\n\n\n<li><strong>Produktkarussell<\/strong>\u2014zeigt eine Liste ausgew\u00e4hlter Produkte im Karussell-Stil an.<\/li>\n\n\n\n<li><strong>Commerce Experience Fragment<\/strong>\u2014das handelsspezifische Elemente wie Produktlisten, Preisinformationen, Werbebanner und andere handelsbezogene Inhaltselemente kapselt.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Zum Beispiel k\u00f6nnte ein Commerce Experience Fragment ein Werbebanner sein, das einen zeitlich begrenzten Verkauf in einer bestimmten Produktkategorie hervorhebt. Dieses Fragment kann einfach auf mehreren Seiten oder Kontaktpunkten wiederverwendet werden, um eine konsistente Promotion und Botschaft auf der gesamten Commerce-Website zu gew\u00e4hrleisten.<\/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\">Wie eine Webseite aus Komponenten aufgebaut wird<\/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\">Die Hierarchie der AEM-Komponenten<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Nachdem wir die Komponenten behandelt haben, werden Sie lernen wollen, wie man eine Webseite daraus aufbaut.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"design-with-components\">Design mit Komponenten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Der Prozess des Aufbaus einer Webseite mithilfe von Komponenten umfasst mehrere wichtige Schritte, die Design- und Entwicklungselemente miteinander verbinden. Hier ist ein einfacher \u00dcberblick \u00fcber den Prozess:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Mockup<\/strong>. Erstellen Sie ein visuelles Mockup oder Wireframe des Webseiten-Layouts basierend auf den Core Components. Dies hilft, die Gesamtstruktur, das Design und die Platzierung der Elemente festzulegen.<\/li>\n\n\n\n<li><strong>Design<\/strong>. Mit einem Design-Tool wie Adobe XD k\u00f6nnen Designer den visuellen Aspekt bearbeiten \u2013 wie Farben, Typografie und Bilder. Mit Adobe XD und Adobe Components kann Ihr Kreativteam Designs basierend auf Out-of-the-box-Tools erstellen.<\/li>\n\n\n\n<li><strong>Konfiguration und Stil<\/strong>. Jeder Abschnitt oder jedes Element des Mockups wird identifiziert und der entsprechenden Komponente in der Komponentenbibliothek zugeordnet.<\/li>\n\n\n\n<li><strong>Eine Seite aus Komponenten erstellen<\/strong>. Entwickler beginnen mit dem Aufbau der Webseite, indem sie die Elemente in der gew\u00fcnschten Reihenfolge zusammensetzen und sicherstellen, dass Inhalt und Funktionalit\u00e4t korrekt implementiert werden. Das AEM-Stilsystem bietet eine Reihe vordefinierter Stile und erm\u00f6glicht Anpassungen, um die visuelle Konsistenz mit dem Rest der Website zu gew\u00e4hrleisten.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Je nach den spezifischen Anforderungen des Projekts m\u00f6chten Sie m\u00f6glicherweise bestimmte Elemente anpassen, um einzigartigen Funktionalit\u00e4ts- oder Designanforderungen gerecht zu werden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"components-in-the-aem-interface\">Komponenten in der AEM-Oberfl\u00e4che<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Greifen Sie auf die\u00a0<a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">Komponentenkonsole<\/a>\u00a0\u00fcber\u00a0<strong>Tools<\/strong>\u00a0&gt;\u00a0<strong>Allgemein<\/strong>\u00a0&gt;\u00a0<strong>Komponenten<\/strong>\u00a0zu. Dort k\u00f6nnen Sie die Komponentenliste durchsuchen und die Suchfunktion nutzen, um schnell eine bestimmte Komponente oder eine Gruppe von Komponenten zu finden.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac55592a65c8&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac55592a65c8\" 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\">Konsole der Core Components in AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">W\u00e4hlen Sie eine Komponente aus der Liste aus und klicken Sie darauf, um wichtige Informationen wie Titel, Beschreibung, Gruppe und eine Liste von Links zu den Live-Seiten anzuzeigen, auf denen die Komponente verwendet wird.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac55592a6a81&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac55592a6a81\" 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\">Komponentendetails in der AEM-Oberfl\u00e4che<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sie k\u00f6nnen Komponenten in einem Drag-and-Drop-Editor verwenden, indem Sie sie auf den gew\u00fcnschten Abschnitt der Seite ziehen.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac55592a6f37&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac55592a6f37\" 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\">Komponenten-Browser im AEM-Seiten-Editor<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Sobald Sie eine Komponente zur Seite hinzugef\u00fcgt haben, k\u00f6nnen Sie deren Eigenschaften \u00fcber ein benutzerfreundliches Formular\u2014wie das Festlegen von Inhalten, Bildern, Links oder anderen komponentenspezifischen Einstellungen\u2014konfigurieren.<\/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\">Fazit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nachdem Sie diesen Artikel gelesen haben, werden Sie verstehen, wie AEM Core Components gebrauchsfertige und standardisierte Elemente bereitstellen, die Ihnen helfen, den Design- und Entwicklungsprozess Ihrer Website zu vereinfachen und gleichzeitig eine hohe Qualit\u00e4t zu gew\u00e4hrleisten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Es ist jedoch wichtig zu erkennen, dass erfahrene AEM-Entwickler und der Zugang zu <a href=\"http:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">AEM-Implementierungsdiensten<\/a> entscheidend sind, um diese schnellen und effektiven Ergebnisse zu erzielen. Diese spezialisierten Entwickler verf\u00fcgen \u00fcber die notwendige Expertise, um AEM-Website-Elemente effizient zu nutzen, Best Practices einzuhalten und eine korrekte Integration in die gesamte Website-Architektur sicherzustellen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die Anpassung von Kernelementen an Ihre spezifischen Gesch\u00e4ftsanforderungen oder Branding-Bed\u00fcrfnisse erfordert das Wissen und die F\u00e4higkeiten erfahrener AEM-Entwickler. Sie k\u00f6nnen die Komplexit\u00e4t der Anpassung bew\u00e4ltigen und gleichzeitig deren Integrit\u00e4t wahren, was zu einer Website f\u00fchrt, die nicht nur schnell, sondern auch auf die einzigartigen Bed\u00fcrfnisse Ihres Unternehmens zugeschnitten ist.<\/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-\">Was ist die neueste Version der AEM-Core-Komponenten?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Die neueste Version der AEM-Core-Komponenten ist 2.22.12. Diese Version ist mit AEM as a Cloud Service und On-Premise-AEM-Installationen kompatibel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-many-components-are-there-in-aem-\">Wie viele Komponenten gibt es in AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Es gibt zwei S\u00e4tze von Adobe-bereitgestellten AEM-Komponenten\u2014Core Components und Foundation Components. Die umfassende Bibliothek enth\u00e4lt mehr als 50 Komponenten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-experience-fragments-in-aem-\">Was ist der Unterschied zwischen Core Components und Experience Fragments in AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Core Components in AEM sind standardisierte Bausteine zur Erstellung von Webseiten und bieten wesentliche Funktionen f\u00fcr die Website-Entwicklung. Experience Fragments sind wiederverwendbare Inhaltsmodule, die eine konsistente Inhaltsverwaltung \u00fcber mehrere Kan\u00e4le und Touchpoints hinweg erm\u00f6glichen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-foundation-components-\">Was ist der Unterschied zwischen Core Components und Foundation Components?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Core Components in AEM sind vorgefertigte Elemente f\u00fcr die Entwicklung von Webseiten. Foundation Components bilden das Framework von AEM und erm\u00f6glichen die Inhaltserstellung und -verwaltung. Core Components konzentrieren sich auf Webseiten-Elemente, w\u00e4hrend Foundation Components die AEM-Plattform unterst\u00fctzen.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Was AEM Components sind Vorteile von AEM Components Arten von AEM Core Components Wie eine Webseite aus Komponenten [&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":[156],"tags":[],"class_list":["post-22473","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":"Sehen Sie sich die Liste der prim\u00e4ren AEM-Komponenten an, die das Design und die Entwicklung benutzerfreundlicher Websites beschleunigen und vereinfachen und Marken in die Lage versetzen, Besuchern au\u00dfergew\u00f6hnliche Erlebnisse zu bieten."},"_links":{"self":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/posts\/22473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/comments?post=22473"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/posts\/22473\/revisions"}],"predecessor-version":[{"id":22475,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/posts\/22473\/revisions\/22475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/media?parent=22473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/categories?post=22473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/de\/wp-json\/wp\/v2\/tags?post=22473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}