{"id":22476,"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:02:24","modified_gmt":"2026-06-22T05:02:24","slug":"jak-komponenty-podstawowe-aem-upraszczaja-tworzenie-stron-internetowych","status":"publish","type":"post","link":"https:\/\/axamit.com\/pl\/blog\/adobe-experience-manager\/jak-komponenty-podstawowe-aem-upraszczaja-tworzenie-stron-internetowych\/","title":{"rendered":"Jak komponenty podstawowe AEM upraszczaj\u0105 tworzenie stron internetowych"},"content":{"rendered":"<div class=\"custom-toc\"><ul><li class=\"h2-toc\"><a href=\"#what-aem-components-are\">Czym s\u0105 komponenty AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#benefits-of-aem-components\">Korzy\u015bci z komponent\u00f3w AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#types-of-aem-core-components\">Rodzaje komponent\u00f3w podstawowych AEM<\/a><\/li><li class=\"h2-toc\"><a href=\"#how-a-web-page-is-built-from-components\">Jak strona internetowa jest budowana z komponent\u00f3w<\/a><\/li><li class=\"h2-toc\"><a href=\"#conclusion\">Podsumowanie<\/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\">Tworzenie stron internetowych bywa z\u0142o\u017cone i czasoch\u0142onne. Komponenty bazowe AEM (AEM Core Components) zapewniaj\u0105 kompleksowy zestaw narz\u0119dzi deweloperskich do szybkiego tworzenia interfejs\u00f3w skoncentrowanych na u\u017cytkowniku. S\u0105 to bloki konstrukcyjne stron internetowych, kt\u00f3re domy\u015blnie obs\u0142uguj\u0105 responsywny design i pomagaj\u0105 zoptymalizowa\u0107 wydajno\u015b\u0107 witryny.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W tym artykule zbadamy, w jaki spos\u00f3b komponenty bazowe AEM kszta\u0142tuj\u0105 rozw\u00f3j stron internetowych i przedstawimy ich korzy\u015bci. Przekonaj si\u0119, jak mog\u0105 usprawni\u0107 tworzenie witryn.<\/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\">Czym s\u0105 komponenty AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty bazowe AEM (AEM Core Components) to zestaw ustandaryzowanych element\u00f3w zarz\u0105dzania tre\u015bci\u0105 internetow\u0105 (WCM), zaprojektowanych specjalnie w celu usprawnienia tworzenia stron internetowych w AEM. Na przyk\u0142ad komponent siatki (grid) zapewnia responsywny system wy\u015bwietlania tre\u015bci na stronach internetowych, a sekcje obraz\u00f3w upraszczaj\u0105 wstawianie grafik. Pe\u0142n\u0105 list\u0119 znajdziesz w\u00a0<a href=\"https:\/\/www.aemcomponents.dev\/\" target=\"_blank\" rel=\"noopener\">Bibliotece komponent\u00f3w AEM<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac5559477555&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac5559477555\" 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\">Strona g\u0142\u00f3wna Biblioteki Komponent\u00f3w AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Te gotowe komponenty w AEM zosta\u0142y zaprojektowane z my\u015bl\u0105 o najlepszych praktykach. Deweloperzy mog\u0105 ich u\u017cywa\u0107 do szybkiego sk\u0142adania stron. Pomagaj\u0105 zapewni\u0107 sp\u00f3jn\u0105 jako\u015b\u0107, responsywno\u015b\u0107 i zgodno\u015b\u0107 ze standardami dost\u0119pno\u015bci.<\/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\">Korzy\u015bci z komponent\u00f3w AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zobaczmy, jakie korzy\u015bci zyska Twoja firma, gdy Twoja witryna zostanie zbudowana przy u\u017cyciu komponent\u00f3w bazowych AEM.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"consistent-experience\">Sp\u00f3jne do\u015bwiadczenie<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty bazowe AEM zapewniaj\u0105 standaryzacj\u0119, co skraca czas i wysi\u0142ek potrzebny na rozw\u00f3j. Wykorzystanie gotowych fragment\u00f3w stron przyspiesza wprowadzenie witryny na rynek (time-to-market). Dzi\u0119ki predefiniowanym uk\u0142adom i wzorcom projektowym mo\u017cna r\u00f3wnie\u017c zachowa\u0107 sp\u00f3jny wygl\u0105d i styl w wielu w\u0142a\u015bciwo\u015bciach online, co pomaga zwi\u0119kszy\u0107 zar\u00f3wno rozpoznawalno\u015b\u0107 marki, jak i zaanga\u017cowanie u\u017cytkownik\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Na przyk\u0142ad, mi\u0119dzynarodowa marka z obecno\u015bci\u0105 online obejmuj\u0105c\u0105 wiele region\u00f3w i j\u0119zyk\u00f3w mog\u0142aby u\u017cywa\u0107 AEM Core Components do definiowania sp\u00f3jnych sekcji nag\u0142\u00f3wka i stopki. Obejmuj\u0105 one logotypy, menu nawigacyjne i informacje kontaktowe, aby zapewni\u0107, \u017ce odwiedzaj\u0105cy natychmiast rozpoznaj\u0105 i kojarz\u0105 te elementy z mark\u0105, niezale\u017cnie od tego, kt\u00f3r\u0105 regionaln\u0105 witryn\u0119 przegl\u0105daj\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cost-effective-maintenance\">Efektywna Kosztowo Konserwacja<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Standaryzowane podej\u015bcie oznacza <a href=\"http:\/\/axamit.com\/pl\/?page_id=19765\" data-type=\"page\" data-id=\"7486\">efektywn\u0105 kosztowo konserwacj\u0119<\/a>. Z \u0142atwo\u015bci\u0105 mo\u017cesz wprowadza\u0107 zmiany\u00a0<a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-multi-site-manager\/\" data-type=\"post\" data-id=\"2477\">na wielu stronach<\/a>, redukuj\u0105c czas i zasoby wymagane do bie\u017c\u0105cego zarz\u0105dzania witryn\u0105. Ten usprawniony proces konserwacji przek\u0142ada si\u0119 na oszcz\u0119dno\u015bci koszt\u00f3w dla firmy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"scalability-and-flexibility\">Skalowalno\u015b\u0107 i Elastyczno\u015b\u0107<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">AEM Core Components zosta\u0142y zaprojektowane tak, aby by\u0142y skalowalne i rozszerzalne. Stanowi\u0105 solidn\u0105 podstaw\u0119 do rozwoju stron internetowych, umo\u017cliwiaj\u0105c proste dodawanie nowych\u00a0<a href=\"http:\/\/axamit.com\/blog\/adobe-experience-manager\/aem-features\/\" data-type=\"post\" data-id=\"458\">funkcji AEM<\/a>, integracj\u0119 narz\u0119dzi zewn\u0119trznych i dostosowywanie do zmieniaj\u0105cych si\u0119 potrzeb biznesowych. Ta elastyczno\u015b\u0107 zapewnia, \u017ce strony zbudowane z Core Components mog\u0105 rosn\u0105\u0107 i ewoluowa\u0107 wraz z Twoj\u0105 firm\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"optimized-performance\">Zoptymalizowana Wydajno\u015b\u0107<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Poniewa\u017c AEM Core Components s\u0105 zoptymalizowane pod k\u0105tem wydajno\u015bci i SEO, stosuj\u0105 najlepsze praktyki w zakresie efektywnego renderowania, buforowania i danych strukturalnych. Skutkuje to szybszym \u0142adowaniem stron i lepsz\u0105 widoczno\u015bci\u0105 w rankingach wyszukiwarek. Wynikiem tego jest lepsze do\u015bwiadczenie u\u017cytkownika i zwi\u0119kszony ruch organiczny dla firmy.<\/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\">Rodzaje komponent\u00f3w podstawowych AEM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Przejd\u017amy teraz do r\u00f3\u017cnych typ\u00f3w komponent\u00f3w w AEM. Mo\u017cemy je podzieli\u0107 na kilka grup: komponenty Struktury, Tre\u015bci, Formularzy i Handlu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"structure-aem-components\">Komponenty struktury AEM<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dzi\u0119ki tym ustrukturyzowanym elementom AEM mo\u017cesz tworzy\u0107 anga\u017cuj\u0105ce i interaktywne strony internetowe, kt\u00f3re urzekn\u0105 Twoich odbiorc\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nawigacja<\/strong>\u2014stanowi\u0105ca wa\u017cny element w architekturze Twojej witryny, Nawigacja pozwala u\u017cytkownikom na \u0142atwe przegl\u0105danie tre\u015bci. Nawigacj\u0119 mo\u017cna doda\u0107 do szablon\u00f3w stron, nag\u0142\u00f3wk\u00f3w lub stopek, aby efektywnie ustrukturyzowa\u0107 menu witryny i zapewni\u0107 sp\u00f3jn\u0105 nawigacj\u0119 na wszystkich stronach.<\/li>\n\n\n\n<li><strong>\u015acie\u017cka nawigacyjna<\/strong>\u2014poprawia do\u015bwiadczenie u\u017cytkownika, zapewniaj\u0105c jasne i kontekstowe \u015bcie\u017cki nawigacji. Cz\u0119sto umieszczany w g\u00f3rnej cz\u0119\u015bci strony internetowej, element \u015bcie\u017cki nawigacyjnej wy\u015bwietla hierarchiczny ci\u0105g link\u00f3w, kt\u00f3ry wskazuje bie\u017c\u0105c\u0105 lokalizacj\u0119 u\u017cytkownika w strukturze witryny.<\/li>\n\n\n\n<li><strong>Nawigacja j\u0119zykowa<\/strong>\u2014umo\u017cliwiaj\u0105ca nawigacj\u0119 po j\u0119zyku i kraju dla witryny, ten element pozwala odwiedzaj\u0105cym przechodzi\u0107 do tej samej strony w innej wersji j\u0119zykowej\/regionalnej. Jest on cz\u0119sto dodawany do szablonu strony, w nag\u0142\u00f3wku lub stopce.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-aem-components\">Komponenty AEM tre\u015bci<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Od tekstu i obraz\u00f3w, po odtwarzacze wideo i wid\u017cety medi\u00f3w spo\u0142eczno\u015bciowych, te Komponenty AEM tre\u015bci oferuj\u0105 wszechstronne narz\u0119dzia do dostarczania tre\u015bci w anga\u017cuj\u0105cy spos\u00f3b:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Kontener<\/strong>\u2014s\u0142u\u017cy do grupowania innych element\u00f3w i stosowania wsp\u00f3lnego uk\u0142adu lub stylu. Wybierz, aby doda\u0107 niestandardowy obraz t\u0142a i kolor, a tak\u017ce \u0142atwo tworzy\u0107 sp\u00f3jne sekcje lub bloki tre\u015bci.<\/li>\n\n\n\n<li><strong>Przyciski<\/strong>\u2014pozwalaj\u0105 tworzy\u0107 interaktywne i atrakcyjne wizualnie przyciski na Twojej witrynie z mo\u017cliwo\u015bci\u0105 dostosowania styl\u00f3w, rozmiar\u00f3w i dzia\u0142a\u0144.<\/li>\n\n\n\n<li><strong>Akordeon<\/strong>\u2014umo\u017cliwia u\u017cytkownikom prze\u0142\u0105czanie paneli z powi\u0105zanymi tre\u015bciami.<\/li>\n\n\n\n<li><strong>Tytu\u0142<\/strong>\u2014s\u0142u\u017cy do tworzenia nag\u0142\u00f3wk\u00f3w dla strony lub sekcji strony.<\/li>\n\n\n\n<li><strong>Tekst<\/strong>\u2014u\u0142atwia wy\u015bwietlanie bogatego tekstu akapitu na stronie, z r\u00f3\u017cnymi opcjami formatowania.<\/li>\n\n\n\n<li><strong>Obraz<\/strong>\u2014umo\u017cliwia wy\u015bwietlanie pojedynczego zasobu obrazu na stronie internetowej. Automatycznie dobiera odpowiedni\u0105 szeroko\u015b\u0107 obrazu na podstawie rozmiaru ekranu urz\u0105dzenia. Obs\u0142uguje r\u00f3wnie\u017c leniwe \u0142adowanie (lazy loading), kt\u00f3re optymalizuje wydajno\u015b\u0107 strony, \u0142aduj\u0105c obrazy tylko wtedy, gdy maj\u0105 sta\u0107 si\u0119 widoczne dla u\u017cytkownika.<\/li>\n\n\n\n<li><strong>Teaser<\/strong>\u2014\u0142\u0105czy obraz, tytu\u0142 i opis w celu promowania i linkowania do sekcji tre\u015bci witryny.<\/li>\n\n\n\n<li><strong>Lista<\/strong>\u2014wy\u015bwietla list\u0119 stron wed\u0142ug zapytania wyszukiwania, tag\u00f3w lub z poziomu strony nadrz\u0119dnej.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"form-aem-components\">Komponenty AEM dla formularzy<\/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\">Formularze AEM<\/a>\u00a0s\u0105 specjalnie zaprojektowane, aby usprawni\u0107 tworzenie i zarz\u0105dzanie formularzami na Twojej stronie internetowej:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tekst formularza<\/strong>\u2014umo\u017cliwia tworzenie r\u00f3\u017cnych p\u00f3l wprowadzania danych w celu zbierania informacji do p\u00f3\u017aniejszego wykorzystania\u2014takich jak pola jednowierszowe, wielowierszowe obszary tekstowe lub pola hase\u0142. Pozwala na dostosowanie wygl\u0105du i zachowania p\u00f3l tekstowych.<\/li>\n\n\n\n<li><strong>Opcje formularza<\/strong>\u2014tworzy formularz z r\u00f3\u017cnymi uk\u0142adami opcji, takimi jak wybory do zaznaczenia\u2014przyciski radiowe, pola wyboru (checkboxy), listy rozwijane lub nawet niestandardowe grupy opcji dopasowane do Twojej marki.<\/li>\n\n\n\n<li><strong>Przycisk formularza<\/strong>\u2014umo\u017cliwia interakcje u\u017cytkownika i u\u0142atwia przesy\u0142anie danych, s\u0142u\u017c\u0105c jako elementy akcji\u2014zach\u0119caj\u0105c u\u017cytkownik\u00f3w do wykonywania okre\u015blonych dzia\u0142a\u0144, takich jak przesy\u0142anie formularza, resetowanie p\u00f3l formularza lub uruchamianie niestandardowych funkcji.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"commerce-aem-components\">Komponenty AEM dla e-commerce<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Te elementy umo\u017cliwiaj\u0105 bezproblemow\u0105 integracj\u0119 z platformami e-commerce, daj\u0105c mo\u017cliwo\u015b\u0107 tworzenia atrakcyjnych list produkt\u00f3w, koszyk\u00f3w zakupowych, proces\u00f3w realizacji zam\u00f3wienia i wielu innych:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Produkt<\/strong>\u2014zapewnia kompleksow\u0105 i atrakcyjn\u0105 wizualnie reprezentacj\u0119 poszczeg\u00f3lnych produkt\u00f3w\u2014w tym zdj\u0119\u0107 produkt\u00f3w, opis\u00f3w, cen i wszelkich innych istotnych szczeg\u00f3\u0142\u00f3w.<\/li>\n\n\n\n<li><strong>Powi\u0105zane produkty<\/strong>\u2014umo\u017cliwia zwi\u0119kszenie mo\u017cliwo\u015bci sprzeda\u017cy krzy\u017cowej poprzez wy\u015bwietlanie produkt\u00f3w uzupe\u0142niaj\u0105cych lub podobnych obok produktu g\u0142\u00f3wnego. Automatycznie generuj rekomendacje w oparciu o predefiniowane zasady, kategorie produkt\u00f3w lub zachowania u\u017cytkownik\u00f3w.<\/li>\n\n\n\n<li><strong>Zajawka produktu<\/strong>\u2014wy\u015bwietla zajawki produkt\u00f3w na dowolnej stronie AEM z linkiem do strony szczeg\u00f3\u0142\u00f3w produktu.<\/li>\n\n\n\n<li><strong>Wyszukiwanie<\/strong>\u2014skonfiguruj, aby wy\u015bwietla\u0107 okre\u015blon\u0105 liczb\u0119 produkt\u00f3w na stron\u0119 lub aby dynamicznie \u0142adowa\u0107 ceny produkt\u00f3w w dodatkowym zapytaniu przegl\u0105darki.<\/li>\n\n\n\n<li><strong>Karuzela produkt\u00f3w<\/strong>\u2014wy\u015bwietla list\u0119 wyr\u00f3\u017cnionych produkt\u00f3w w stylu karuzeli.<\/li>\n\n\n\n<li><strong>Fragment do\u015bwiadczenia handlowego<\/strong>\u2014obejmuj\u0105cy elementy specyficzne dla handlu, takie jak listy produkt\u00f3w, informacje o cenach, banery promocyjne i inne elementy tre\u015bci zwi\u0105zane z handlem.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Na przyk\u0142ad, fragment do\u015bwiadczenia handlowego mo\u017ce by\u0107 banerem promocyjnym podkre\u015blaj\u0105cym wyprzeda\u017c ograniczon\u0105 czasowo w okre\u015blonej kategorii produkt\u00f3w. Ten fragment mo\u017cna \u0142atwo ponownie wykorzysta\u0107\u00a0na wielu stronach\u00a0lub punktach styku, zapewniaj\u0105c sp\u00f3jn\u0105 promocj\u0119 i komunikacj\u0119 na ca\u0142ej stronie internetowej handlowej.<\/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\">Jak strona internetowa jest budowana z komponent\u00f3w<\/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\">Hierarchia komponent\u00f3w AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Teraz, gdy om\u00f3wili\u015bmy komponenty, b\u0119dziesz chcia\u0142 dowiedzie\u0107 si\u0119, jak budowa\u0107 z nich stron\u0119 internetow\u0105.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"design-with-components\">Projektowanie z komponentami<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Proces budowania strony internetowej przy u\u017cyciu komponent\u00f3w obejmuje kilka kluczowych krok\u00f3w, kt\u00f3re \u0142\u0105cz\u0105 elementy projektowania i rozwoju. Oto prosty przegl\u0105d tego procesu:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Makieta<\/strong>. Utw\u00f3rz wizualn\u0105 makiet\u0119 lub wireframe uk\u0142adu strony internetowej w oparciu o komponenty Core. Pomaga to ustali\u0107 og\u00f3ln\u0105 struktur\u0119, projekt i rozmieszczenie element\u00f3w.<\/li>\n\n\n\n<li><strong>Projektowanie<\/strong>. Korzystaj\u0105c z narz\u0119dzia do projektowania, takiego jak Adobe XD, projektanci mog\u0105 pracowa\u0107 nad aspektem wizualnym\u2014takim jak kolory, typografia i obrazy. Dzi\u0119ki Adobe XD i komponentom Adobe, Tw\u00f3j zesp\u00f3\u0142 kreatywny mo\u017ce tworzy\u0107 projekty oparte na gotowych narz\u0119dziach.<\/li>\n\n\n\n<li><strong>Konfiguracja i styl<\/strong>. Ka\u017cda sekcja lub element makiety jest identyfikowany i dopasowywany do odpowiedniego komponentu w bibliotece komponent\u00f3w.<\/li>\n\n\n\n<li><strong>Tworzenie strony z komponent\u00f3w<\/strong>. Deweloperzy rozpoczynaj\u0105 budowanie strony internetowej, sk\u0142adaj\u0105c elementy w po\u017c\u0105danej kolejno\u015bci, zapewniaj\u0105c prawid\u0142ow\u0105 implementacj\u0119 tre\u015bci i funkcjonalno\u015bci. System styl\u00f3w AEM oferuje szereg predefiniowanych styl\u00f3w i umo\u017cliwia ich dostosowanie w celu zapewnienia sp\u00f3jno\u015bci wizualnej z reszt\u0105 witryny.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">W zale\u017cno\u015bci od specyficznych wymaga\u0144 projektu, mo\u017cna dostosowa\u0107 pewne elementy, aby spe\u0142ni\u0107 unikalne potrzeby funkcjonalne lub projektowe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"components-in-the-aem-interface\">Komponenty w interfejsie AEM<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Dost\u0119p do\u00a0<a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-manager-learn\/sites\/components\/components-console-feature-video-use.html\" target=\"_blank\" rel=\"noopener\">Konsoli Komponent\u00f3w<\/a>\u00a0z\u00a0<strong>Narz\u0119dzia<\/strong>\u00a0&gt;\u00a0<strong>Og\u00f3lne<\/strong>\u00a0&gt;\u00a0<strong>Komponenty<\/strong>. Stamt\u0105d mo\u017cna przegl\u0105da\u0107 list\u0119 komponent\u00f3w i u\u017cywa\u0107 wyszukiwarki, aby szybko znale\u017a\u0107 konkretny komponent lub ich grup\u0119.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac55594785be&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac55594785be\" 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\">Konsola komponent\u00f3w bazowych w AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Wybierz komponent z listy i kliknij, aby wy\u015bwietli\u0107 kluczowe informacje o nim, takie jak tytu\u0142, opis, grupa oraz lista link\u00f3w do aktywnych stron, na kt\u00f3rych komponent jest u\u017cywany.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac5559478a15&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac5559478a15\" 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\">Szczeg\u00f3\u0142y komponentu w interfejsie AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty mo\u017cna u\u017cywa\u0107 w edytorze \u201eprzeci\u0105gnij i upu\u015b\u0107\u201d, umieszczaj\u0105c je w wybranej sekcji strony.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac5559478e4e&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac5559478e4e\" 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\">Przegl\u0105darka komponent\u00f3w w edytorze stron AEM<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Po dodaniu komponentu do strony, jego w\u0142a\u015bciwo\u015bci mo\u017cna skonfigurowa\u0107 za pomoc\u0105 przyjaznego dla u\u017cytkownika formularza\u2014na przyk\u0142ad, okre\u015blaj\u0105c zawarto\u015b\u0107, obrazy, linki lub inne ustawienia istotne dla komponentu.<\/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\">Podsumowanie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Po zapoznaniu si\u0119 z tym artyku\u0142em docenisz, w jaki spos\u00f3b komponenty bazowe AEM dostarczaj\u0105 gotowe do u\u017cycia i ustandaryzowane elementy, kt\u00f3re pomog\u0105 Ci u\u0142atwi\u0107 proces projektowania i tworzenia stron internetowych, jednocze\u015bnie utrzymuj\u0105c wysok\u0105 jako\u015b\u0107.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jednak\u017ce, wa\u017cne jest, aby zda\u0107 sobie spraw\u0119, \u017ce posiadanie do\u015bwiadczonych programist\u00f3w AEM i dost\u0119pu do <a href=\"http:\/\/axamit.com\/adobe-experience-cloud\/adobe-experience-manager\/implementation\/\" data-type=\"page\" data-id=\"7476\">us\u0142ug wdro\u017ceniowych AEM<\/a> jest kluczowe do osi\u0105gni\u0119cia tych szybkich i skutecznych wynik\u00f3w. Ci specjali\u015bci-programi\u015bci posiadaj\u0105 niezb\u0119dn\u0105 wiedz\u0119, aby efektywnie wykorzystywa\u0107 elementy stron internetowych AEM, przestrzega\u0107 najlepszych praktyk i zapewnia\u0107 prawid\u0142ow\u0105 integracj\u0119 z ca\u0142o\u015bciow\u0105 architektur\u0105 strony internetowej.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dostosowywanie kluczowych element\u00f3w do specyficznych wymaga\u0144 biznesowych lub potrzeb brandingowych wymaga wiedzy i umiej\u0119tno\u015bci do\u015bwiadczonych programist\u00f3w AEM. Potrafi\u0105 oni poradzi\u0107 sobie ze z\u0142o\u017cono\u015bci\u0105 dostosowa\u0144, zachowuj\u0105c jednocze\u015bnie ich integralno\u015b\u0107, co skutkuje powstaniem strony internetowej, kt\u00f3ra jest nie tylko szybka, ale tak\u017ce dopasowana do unikalnych potrzeb Twojej firmy.<\/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-\">Jaka jest najnowsza wersja komponent\u00f3w bazowych AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Najnowsza wersja komponent\u00f3w bazowych AEM to 2.22.12. Ta wersja jest kompatybilna z AEM as a Cloud Service oraz z instalacjami AEM on-premise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-many-components-are-there-in-aem-\">Ile komponent\u00f3w jest w AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Istniej\u0105 dwa zestawy komponent\u00f3w AEM dostarczanych przez Adobe \u2014 komponenty bazowe (Core Components) i komponenty podstawowe (Foundation Components). Obszerna biblioteka zawiera ponad 50 komponent\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-experience-fragments-in-aem-\">Jaka jest r\u00f3\u017cnica mi\u0119dzy komponentami bazowymi a fragmentami do\u015bwiadcze\u0144 w AEM?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty bazowe w AEM to standaryzowane bloki konstrukcyjne do tworzenia stron internetowych i zapewniaj\u0105ce podstawow\u0105 funkcjonalno\u015b\u0107 w tworzeniu stron internetowych. Fragmenty do\u015bwiadcze\u0144 to modu\u0142y tre\u015bci wielokrotnego u\u017cytku, kt\u00f3re umo\u017cliwiaj\u0105 sp\u00f3jne zarz\u0105dzanie tre\u015bci\u0105 w wielu kana\u0142ach i punktach styku.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-is-the-difference-between-core-components-and-foundation-components-\">Jaka jest r\u00f3\u017cnica mi\u0119dzy komponentami bazowymi (Core Components) a komponentami podstawowymi (Foundation Components)?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Komponenty bazowe (Core Components) w AEM to gotowe elementy do tworzenia stron internetowych. Komponenty podstawowe (Foundation Components) stanowi\u0105 ramy AEM i umo\u017cliwiaj\u0105 tworzenie oraz zarz\u0105dzanie tre\u015bci\u0105. Komponenty bazowe koncentruj\u0105 si\u0119 na elementach stron internetowych, podczas gdy komponenty podstawowe wspieraj\u0105 platform\u0119 AEM.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Czym s\u0105 komponenty AEM Korzy\u015bci z komponent\u00f3w AEM Rodzaje komponent\u00f3w podstawowych AEM Jak strona internetowa jest budowana z [&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":[157],"tags":[],"class_list":["post-22476","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":"Zapoznaj si\u0119 z list\u0105 g\u0142\u00f3wnych komponent\u00f3w AEM, kt\u00f3re przyspieszaj\u0105 i upraszczaj\u0105 projektowanie i rozw\u00f3j przyjaznych dla u\u017cytkownika witryn internetowych oraz umo\u017cliwiaj\u0105 markom dostarczanie wyj\u0105tkowych do\u015bwiadcze\u0144 dla odwiedzaj\u0105cych."},"_links":{"self":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/posts\/22476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/comments?post=22476"}],"version-history":[{"count":1,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/posts\/22476\/revisions"}],"predecessor-version":[{"id":22478,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/posts\/22476\/revisions\/22478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media\/5015"}],"wp:attachment":[{"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/media?parent=22476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/categories?post=22476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/axamit.com\/pl\/wp-json\/wp\/v2\/tags?post=22476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}