{"id":265,"date":"2026-08-21T08:42:14","date_gmt":"2026-08-21T08:42:14","guid":{"rendered":"https:\/\/mechmagic.com\/?p=265"},"modified":"2026-08-21T09:14:10","modified_gmt":"2026-08-21T09:14:10","slug":"a360-panorama-hero-interaktywny-blok-gutenberg-z-panoramicznymi-widokami-360","status":"publish","type":"post","link":"https:\/\/mechmagic.com\/pl\/a360-panorama-hero-interaktywny-blok-gutenberg-z-panoramicznymi-widokami-360\/","title":{"rendered":"A360 Panorama Hero \u2013 Interaktywny blok Gutenberg z panoramicznymi widokami 360\u00b0"},"content":{"rendered":"<section style=\"--a360-hero-height:330px;--a360-hero-overlay:0.45;--a360-hero-content-padding:50px;--a360-hero-content-x:flex-start;--a360-hero-content-y:flex-start;--a360-hero-text-align:left\" class=\"a360-panorama-hero is-short-height is-micro-height wp-block-a360-panorama-hero\"><div class=\"a360-panorama-hero__media\" aria-busy=\"true\"><img class=\"a360-panorama-hero__poster\" src=\"https:\/\/mechmagic.com\/wp-content\/uploads\/2026\/08\/mechmagic-engineering-lab-360.webp\" alt=\"\" fetchpriority=\"high\" decoding=\"async\"><div class=\"a360-panorama\" role=\"region\" aria-label=\"Interaktywna panorama 360 stopni\" tabindex=\"0\" data-image=\"https:\/\/mechmagic.com\/wp-content\/uploads\/2026\/08\/mechmagic-engineering-lab-360.webp\" data-images=\"[&quot;https:\\\/\\\/mechmagic.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/mechmagic-engineering-lab-360.webp&quot;]\" data-scenes=\"[{&quot;url&quot;:&quot;https:\\\/\\\/mechmagic.com\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/mechmagic-engineering-lab-360.webp&quot;,&quot;hotspots&quot;:[{&quot;id&quot;:&quot;hs-mt2pkt0g&quot;,&quot;yaw&quot;:18.699999999999999,&quot;pitch&quot;:5.4000000000000004,&quot;type&quot;:&quot;link&quot;,&quot;title&quot;:&quot;Wi\\u0119cej&quot;,&quot;visible&quot;:true,&quot;description&quot;:&quot;&quot;,&quot;gallery&quot;:[],&quot;youtube&quot;:&quot;&quot;,&quot;productId&quot;:0,&quot;destinationTypee&quot;:&quot;url&quot;,&quot;url&quot;:&quot;https:\\\/\\\/a360.pl&quot;,&quot;targetBlank&quot;:true,&quot;targetImageId&quot;:0,&quot;targetImageUrl&quot;:&quot;&quot;}]}]\" data-panorama-interval=\"8\" data-speed=\"2\" data-fov=\"75\" data-resume=\"4\" data-autoplay=\"always\" data-yaw=\"0\" data-hotspots=\"[{&quot;id&quot;:&quot;hs-mt2pkt0g&quot;,&quot;yaw&quot;:18.699999999999999,&quot;pitch&quot;:5.4000000000000004,&quot;type&quot;:&quot;link&quot;,&quot;title&quot;:&quot;Wi\\u0119cej&quot;,&quot;visible&quot;:true,&quot;description&quot;:&quot;&quot;,&quot;gallery&quot;:[],&quot;youtube&quot;:&quot;&quot;,&quot;productId&quot;:0,&quot;destinationTypee&quot;:&quot;url&quot;,&quot;url&quot;:&quot;https:\\\/\\\/a360.pl&quot;,&quot;targetBlank&quot;:true,&quot;targetImageId&quot;:0,&quot;targetImageUrl&quot;:&quot;&quot;}]\" data-nadir-logo=\"\" data-nadir-rotation=\"0\" data-nadir-size=\"50\" data-block-mouse-interaction=\"true\" data-pause-label=\"Zatrzymaj obr\u00f3t panoramy\" data-resume-label=\"Wzn\u00f3w obr\u00f3t panoramy\"><div class=\"a360-panorama__viewport\"><\/div><div class=\"a360-panorama__loader\" role=\"status\">\u0141adowanie panoramy\u2026<\/div><div class=\"a360-panorama__error\" role=\"alert\" hidden>Nie uda\u0142o si\u0119 wczyta\u0107 panoramy.<\/div><\/div><\/div><div class=\"a360-panorama-hero__overlay\"><\/div><div class=\"a360-panorama-hero__content\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-4b7eca2e wp-block-group-is-layout-constrained\">\n<h1 class=\"wp-block-heading\">A360 Panorama Hero<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/a360-panorama-hero\/\" target=\"_blank\" rel=\"noopener\">Dowiedz si\u0119 wi\u0119cej<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/div><\/section>\n\n\n<p class=\"wp-block-paragraph\">### <a href=\"https:\/\/wordpress.org\/plugins\/a360-panorama-hero\/\" target=\"_blank\" rel=\"noopener\">A360 Panorama Hero \u2013 nowy spos\u00f3b prezentacji pierwszego wra\u017cenia<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pierwszy ekran Twojej witryny to wizyt\u00f3wka. Zamiast p\u0142askiego obrazu mo\u017cesz zaskoczy\u0107 odwiedzaj\u0105cych immersyjn\u0105 panoram\u0105 360\u00b0. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**A360 Panorama Hero** to lekki, dynamiczny blok Gutenberg, kt\u00f3ry pozwala w prosty spos\u00f3b tworzy\u0107 zapieraj\u0105ce dech sekcje hero. Jego moc tkwi w po\u0142\u0105czeniu pe\u0142nej kontroli nad tre\u015bci\u0105 oraz pe\u0142nego interaktywnego widoku panoramicznego.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### Dlaczego warto wybra\u0107 Panorama Hero?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">| Cechy | Opis |<br>\n|&#8212;|&#8212;|<br>\n| **Natywny Gutenberg** | Tekst, przyciski, kolumny i inne bloki WordPress pozostaj\u0105 edytowalne jak zwykle. |<br>\n| **Lekko\u015b\u0107** | Skrypty i style \u0142adowane s\u0105 tylko na stronach z panoram\u0105 \u2013 brak zb\u0119dnego kodu w ca\u0142ej witrynie. |<br>\n| **Brak \u015bledzenia** | Plugin nie wysy\u0142a danych do zewn\u0119trznych serwis\u00f3w, a panorama renderowana jest w przegl\u0105darce u\u017cytkownika. |<br>\n| **Elastyczno\u015b\u0107** | Ustawienia: przyspieszenie rotacji, k\u0105t widoku, przezroczysto\u015b\u0107 nak\u0142adki, wysoko\u015b\u0107 bloku, wyr\u00f3wnanie tre\u015bci oraz marginesy. |<br>\n| **Obs\u0142uga interakcji** | Obs\u0142uga klawiatury, myszy i dotyku \u2013 u\u017cytkownik sam decyduje, gdzie patrze\u0107. |<br>\n| **Shortcode** | Dla projekt\u00f3w, gdzie blok nie wystarczy, mo\u017cna wy\u015bwietli\u0107 panoram\u0119 jako samodzielny element. |<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### Jak dzia\u0142a?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. **Obraz panoramiczny** \u2013 wybierz zdj\u0119cie equirectangular 2:1 z biblioteki medi\u00f3w lub podaj ID\/URL. Najlepsze rezultaty w formacie WebP lub JPEG.<br>\n2. **Tre\u015b\u0107** \u2013 w sekcji \u201cInnerBlocks\u201d wstaw dowolne bloki: nag\u0142\u00f3wek, akapit, przycisk, kolumna itp. Wszystko pozostaje edytowalne w standardowym edytorze WordPress.<br>\n3. **Dostosowanie** \u2013 w panelu bocznym ustaw pr\u0119dko\u015b\u0107 rotacji, pocz\u0105tkowy k\u0105t widoku (FOV), wysoko\u015b\u0107 bloku i inne parametry.<br>\n4. **Prezentacja** \u2013 po za\u0142adowaniu, panorama automatycznie rotuje, ale u\u017cytkownik mo\u017ce j\u0105 przestawi\u0107 w dowolnym kierunku.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### Instalacja i konfiguracja<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. **Pobierz** folder `a360-panorama-hero` i rozpakuj do `\/wp-content\/plugins\/`.<br>\n2. **Aktywuj** plugin w panelu \u201eWtyczki\u201d.<br>\n3. **Dodaj blok** w edytorze Gutenberg \u2013 \u201eA360 Panorama Hero\u201d.<br>\n4. **Wybierz obraz** z biblioteki medi\u00f3w.<br>\n5. **Edytuj tre\u015b\u0107** za pomoc\u0105 natywnych blok\u00f3w.<br>\n6. **Publikuj** i obserwuj, jak Twoi go\u015bcie wchodz\u0105 w interaktywny \u015bwiat 360\u00b0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### Shortcode \u2013 prosta alternatywa<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8222;`text<\/p>\n\n\n\n\n\n\n<p class=\"wp-block-paragraph\">\n&#8222;`<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Wspierane atrybuty**<br>\n&#8211; `image` \u2013 ID za\u0142\u0105cznika, URL obrazu lub nazwa pliku w katalogu `panoramas` pluginu.<br>\n&#8211; `poster` \u2013 opcjonalny obraz wst\u0119pny, wy\u015bwietlany podczas \u0142adowania WebGL.<br>\n&#8211; `height` \u2013 wysoko\u015b\u0107 przegl\u0105darki w pikselach.<br>\n&#8211; `speed` \u2013 pr\u0119dko\u015b\u0107 automatycznej rotacji.<br>\n&#8211; `fov` \u2013 pocz\u0105tkowy k\u0105t widoku.<br>\n&#8211; `resume` \u2013 op\u00f3\u017anienie, po kt\u00f3rym rotacja wznowi si\u0119 po interakcji.<br>\n&#8211; `autoplay` \u2013 `always`, `respect` lub `off`.<br>\n&#8211; `label` \u2013 opis dost\u0119pno\u015bci.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### FAQ<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Kt\u00f3ry format obrazu wybra\u0107?** \u2013 U\u017cyj equirectangular 2:1 w formacie WebP lub JPEG. Oferuj\u0105 one dobr\u0105 r\u00f3wnowag\u0119 jako\u015bci i rozmiaru.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Czy mog\u0119 edytowa\u0107 tekst tak, jak zwykle?** \u2013 Tak. Tre\u015b\u0107 znajduje si\u0119 w `InnerBlocks` i jest edytowana przy pomocy standardowych blok\u00f3w WordPress.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Czy plugin wysy\u0142a dane do zewn\u0119trznych serwis\u00f3w?** \u2013 Nie. Renderowanie panoramy odbywa si\u0119 lokalnie w przegl\u0105darce, a plugin nie korzysta z zewn\u0119trznych us\u0142ug ani nie \u015bledzi u\u017cytkownik\u00f3w.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">#### Dlaczego A360 Panorama Hero to idealne rozwi\u0105zanie?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8211; **Dla hoteli i obiekt\u00f3w noclegowych** \u2013 poka\u017c widok z pokoju lub lobby.<br>\n&#8211; **Dla nieruchomo\u015bci** \u2013 zwr\u00f3\u0107 uwag\u0119 na architektur\u0119 i otoczenie.<br>\n&#8211; **Dla salon\u00f3w meblowych i showroom\u00f3w** \u2013 prezentuj kolekcje w realistycznym otoczeniu.<br>\n&#8211; **Dla biur i firm** \u2013 zaprojektuj wirtualne spotkania i wydarzenia.<br>\n&#8211; **Dla portali turystycznych** \u2013 wprowadzaj u\u017cytkownik\u00f3w w atmosfer\u0119 miejsca.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Wniosek**: A360 Panorama Hero to po\u0142\u0105czenie \u0142atwo\u015bci u\u017cycia, profesjonalnego wygl\u0105du i pe\u0142nej kontroli nad tre\u015bci\u0105. Dzi\u0119ki temu Twoje strony nabieraj\u0105 nowej g\u0142\u0119bi, a odwiedzaj\u0105cy pozostaj\u0105 na nich d\u0142u\u017cej.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8212;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">**Zainstaluj A360 Panorama Hero ju\u017c dzi\u015b i przekszta\u0142\u0107 pierwsze wra\u017cenie w niezapomniane do\u015bwiadczenie 360\u00b0**. <a href=\"https:\/\/wordpress.org\/plugins\/a360-panorama-hero\/\">https:\/\/wordpress.org\/plugins\/a360-panorama-hero\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>### A360 Panorama Hero \u2013 nowy spos\u00f3b prezentacji pierwszego wra\u017cenia Pierwszy ekran Twojej witryny to wizyt\u00f3wka. Zamiast p\u0142askiego obrazu mo\u017cesz zaskoczy\u0107 odwiedzaj\u0105cych immersyjn\u0105 panoram\u0105 360\u00b0. **A360 Panorama Hero** to lekki, dynamiczny blok Gutenberg, kt\u00f3ry pozwala w prosty spos\u00f3b tworzy\u0107 zapieraj\u0105ce dech sekcje hero. Jego moc tkwi w po\u0142\u0105czeniu pe\u0142nej kontroli nad tre\u015bci\u0105 oraz pe\u0142nego interaktywnego [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":273,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-265","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/posts\/265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/comments?post=265"}],"version-history":[{"count":6,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":274,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/posts\/265\/revisions\/274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/media\/273"}],"wp:attachment":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/media?parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/categories?post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/tags?post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}