{"id":61,"date":"2026-07-23T07:41:33","date_gmt":"2026-07-23T07:41:33","guid":{"rendered":"https:\/\/mechmagic.com\/a360-panorama-hero\/"},"modified":"2026-07-24T10:34:39","modified_gmt":"2026-07-24T10:34:39","slug":"a360-panorama-hero","status":"publish","type":"page","link":"https:\/\/mechmagic.com\/pl\/a360-panorama-hero\/","title":{"rendered":"Jak zbudowa\u0107 interaktywne Hero 360\u00b0 w WordPressie"},"content":{"rendered":"\n<p class=\"mm-article-answer wp-block-paragraph\"><strong>A360 Panorama Hero zmienia standardowe Hero WordPressa w interaktywn\u0105 scen\u0119 360\u00b0, zachowuj\u0105c nag\u0142\u00f3wki, akapity, przyciski, grupy i kolumny jako natywne bloki WordPressa. Najlepszy efekt zapewnia zoptymalizowany obraz equirektangularny 2:1, czytelny overlay i spokojny autoplay.<\/strong><\/p>\n\n\n<section style=\"--a360-hero-height:380px;--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\/07\/quentum.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\/07\/quentum.webp\" data-width=\"1200\" data-engine=\"https:\/\/mechmagic.com\/wp-content\/plugins\/a360-panorama\/assets\/js\/a360.js?ver=1.0.1\" data-speed=\"3.8\" data-fov=\"75\" data-resume=\"4\" data-autoplay=\"always\"><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><button class=\"a360-panorama__toggle\" type=\"button\" aria-pressed=\"false\" aria-label=\"Zatrzymaj obr\u00f3t panoramy\"><span aria-hidden=\"true\">\u2161<\/span><\/button><\/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\">Przyk\u0142ad<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Wygenerowane zdj\u0119cie sferyczne<\/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\">Dowiedz si\u0119 wi\u0119cej<\/a><\/div>\n<\/div>\n<\/div>\n\n<\/div><\/section>\n\n<nav class=\"wp-block-group mm-article-toc is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">Spis tre\u015bci<\/p><ol class=\"wp-block-list\"><li><a href=\"#when\">Kiedy u\u017cywa\u0107 360\u00b0?<\/a><\/li><li><a href=\"#image\">Przygotowanie obrazu<\/a><\/li><li><a href=\"#build\">Budowa Hero<\/a><\/li><li><a href=\"#performance\">Wydajno\u015b\u0107<\/a><\/li><li><a href=\"#accessibility\">Dost\u0119pno\u015b\u0107<\/a><\/li><li><a href=\"#faq\">FAQ<\/a><\/li><\/ol><\/nav>\n\n<section class=\"wp-block-group mm-feature-section is-layout-flow wp-block-group-is-layout-flow\"><p class=\"mm-feature-kicker wp-block-paragraph\">MO\u017bLIWO\u015aCI PANORAMA HERO<\/p><h2 class=\"wp-block-heading\">Najwa\u017cniejsze funkcje<\/h2><p class=\"mm-feature-intro wp-block-paragraph\">Immersyjna panorama WebGL po\u0142\u0105czona z tre\u015bci\u0105, kt\u00f3ra pozostaje edytowalna, t\u0142umaczalna i dost\u0119pna jako prawdziwe bloki WordPressa.<\/p><div class=\"wp-block-group mm-feature-grid is-layout-flow wp-block-group-is-layout-flow\"><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Natywna tre\u015b\u0107 Gutenberga<\/h3><p class=\"wp-block-paragraph\">Umieszczaj nag\u0142\u00f3wki, akapity, przyciski, grupy i kolumny wewn\u0105trz panoramicznego Hero.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Biblioteka medi\u00f3w WordPressa<\/h3><p class=\"wp-block-paragraph\">Wybieraj panoram\u0119 equirektangularn\u0105 2:1 i opcjonalny poster bezpo\u015brednio z biblioteki.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Blok i shortcode<\/h3><p class=\"wp-block-paragraph\">Korzystaj z wizualnego bloku A360 Panorama Hero lub integruj viewer shortcode\u2019em a360_panorama.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Sterowanie ruchem<\/h3><p class=\"wp-block-paragraph\">Konfiguruj szybko\u015b\u0107 obrotu, czas wznowienia i autoplay zawsze, z uwzgl\u0119dnieniem ograniczenia ruchu lub wy\u0142\u0105czony.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Pole widzenia<\/h3><p class=\"wp-block-paragraph\">Dobieraj pocz\u0105tkowe FOV do sceny i najwa\u017cniejszego obszaru panoramy.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Responsywna prezentacja<\/h3><p class=\"wp-block-paragraph\">Dostosowuj wysoko\u015b\u0107 panoramy i uk\u0142ad tre\u015bci do desktopu, tabletu i telefonu.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Interaktywne sterowanie<\/h3><p class=\"wp-block-paragraph\">Obs\u0142uguj przeci\u0105ganie, dotyk, fokus klawiatury i widoczny przycisk zatrzymania obrotu.<\/p><\/article><article class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\">+<\/p><h3 class=\"wp-block-heading\">Poster i stan \u0142adowania<\/h3><p class=\"wp-block-paragraph\">Pokazuj obraz zast\u0119pczy podczas uruchamiania WebGL i czytelny komunikat w razie b\u0142\u0119du.<\/p><\/article><\/div><\/section>\n\n\n<h2 class=\"wp-block-heading\">Kiedy interaktywna panorama poprawia sekcj\u0119 Hero?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Panoramiczne Hero sprawdza si\u0119, gdy otoczenie jest cz\u0119\u015bci\u0105 warto\u015bci oferty: w architekturze, nieruchomo\u015bciach, hotelarstwie, turystyce, obiektach przemys\u0142owych, wydarzeniach, showroomach i oprogramowaniu do wirtualnych spacer\u00f3w. Mo\u017ce te\u017c stanowi\u0107 abstrakcyjne t\u0142o platformy technologicznej, o ile ruch nie konkuruje z g\u0142\u00f3wnym komunikatem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nie dodawaj 360\u00b0 wy\u0142\u0105cznie dlatego, \u017ce robi wra\u017cenie. Nag\u0142\u00f3wek, wyja\u015bnienie i g\u0142\u00f3wna akcja musz\u0105 by\u0107 zrozumia\u0142e natychmiast. Panorama powinna wzmacnia\u0107 kontekst i jednocze\u015bnie demonstrowa\u0107 mo\u017cliwo\u015bci produktu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak przygotowa\u0107 obraz panoramiczny?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">U\u017cyj obrazu equirektangularnego w proporcji 2:1. Lewa i prawa kraw\u0119d\u017a musz\u0105 \u0142\u0105czy\u0107 si\u0119 naturalnie, poniewa\u017c viewer owija obraz wok\u00f3\u0142 sfery. Najwa\u017cniejszych obiekt\u00f3w nie umieszczaj na g\u00f3rnym i dolnym biegunie, gdzie rozci\u0105gni\u0119cie jest najwi\u0119ksze.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Decyzja<\/th><th>Zalecenie<\/th><\/tr><\/thead><tbody><tr><td>Projekcja<\/td><td>Equirektangularna 2:1<\/td><\/tr><tr><td>Format<\/td><td>WebP dla wi\u0119kszo\u015bci zdj\u0119\u0107 i render\u00f3w<\/td><\/tr><tr><td>Widok pocz\u0105tkowy<\/td><td>Spokojna przestrze\u0144 za tekstem<\/td><\/tr><tr><td>Kontrast<\/td><td>Overlay zamiast tekstu zapisanego w obrazie<\/td><\/tr><tr><td>Fallback<\/td><td>Poster widoczny podczas \u0142adowania WebGL<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Kompresja jest wa\u017cna, poniewa\u017c panorama zawiera du\u017co pikseli. W Hero ekosystemu A360 konwersja obrazu 1774 \u00d7 887 z PNG do WebP zmniejszy\u0142a plik z oko\u0142o 1,6 MB do oko\u0142o 91 KB bez zmiany wymiar\u00f3w.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Jak zbudowa\u0107 A360 Panorama Hero?<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Zainstaluj i aktywuj A360 Panorama Hero.<\/li>\n\n\n\n<li>Dodaj blok A360 Panorama Hero w edytorze WordPressa.<\/li>\n\n\n\n<li>Wybierz panoram\u0119 2:1 z biblioteki medi\u00f3w.<\/li>\n\n\n\n<li>Dodaj wewn\u0105trz natywne bloki nag\u0142\u00f3wka, tekstu i przycisk\u00f3w.<\/li>\n\n\n\n<li>Wybierz wysoko\u015b\u0107, pocz\u0105tkowe pole widzenia i wyr\u00f3wnanie tre\u015bci.<\/li>\n\n\n\n<li>Ustaw overlay zapewniaj\u0105cy czytelno\u015b\u0107 tekstu.<\/li>\n\n\n\n<li>Skonfiguruj pr\u0119dko\u015b\u0107 obrotu, wznowienie i autoplay.<\/li>\n\n\n\n<li>Przetestuj mysz, dotyk i klawiatur\u0119 na opublikowanej stronie.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Shortcode przydaje si\u0119 przy integracji z szablonem: <code><\/code>. Dla redaktora wygodniejszy jest zwykle blok, poniewa\u017c zawarto\u015b\u0107 pozostaje z\u0142o\u017cona z natywnych blok\u00f3w WordPressa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zalecenia dotycz\u0105ce wydajno\u015bci<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Konwertuj PNG do WebP, je\u015bli przezroczysto\u015b\u0107 nie jest potrzebna.<\/li>\n\n\n\n<li>Nie \u0142aduj kilku panoram WebGL nad lini\u0105 za\u0142amania.<\/li>\n\n\n\n<li>U\u017cywaj postera zamiast pustego ekranu \u0142adowania.<\/li>\n\n\n\n<li>Ustaw spokojny obr\u00f3t i zatrzymuj go w nieaktywnej karcie.<\/li>\n\n\n\n<li>Po wdro\u017ceniu sprawd\u017a element Largest Contentful Paint.<\/li>\n\n\n\n<li>Nie u\u017cywaj \u017ar\u00f3d\u0142a znacznie wi\u0119kszego, ni\u017c wymaga wy\u015bwietlanie i zoom.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ruch, sterowanie i czytelna tre\u015b\u0107<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Autoplay powinien respektowa\u0107 preferencj\u0119 ograniczenia ruchu albo by\u0107 wy\u0142\u0105czony, je\u015bli animacja nie jest niezb\u0119dna. U\u017cytkownik potrzebuje widocznego przycisku pauzy, zrozumia\u0142ej etykiety regionu i odpowiedniego kontrastu. Tekst powinien pozosta\u0107 HTML-em, a nie pikselami w panoramie \u2014 dzi\u0119ki temu mo\u017cna go zaznacza\u0107, t\u0142umaczy\u0107, indeksowa\u0107 i odczytywa\u0107 technologiami asystuj\u0105cymi.<\/p>\n\n\n<div class=\"wp-block-group mm-article-cta is-layout-flow wp-block-group-is-layout-flow\"><h2 class=\"wp-block-heading\">Zamie\u0144 Hero WordPressa w do\u015bwiadczenie 360\u00b0<\/h2><p class=\"wp-block-paragraph\">Po\u0142\u0105cz immersyjn\u0105 scen\u0119 z edytowaln\u0105 tre\u015bci\u0105 dzi\u0119ki A360 Panorama Hero.<\/p><p class=\"wp-block-paragraph\"><a href=\"https:\/\/mechmagic.com\/pl\/a360-panorama-hero\/\">Poznaj A360 Panorama Hero \u2192<\/a><\/p><\/div>\n\n\n<h2 class=\"wp-block-heading\">Najcz\u0119\u015bciej zadawane pytania<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Jakich proporcji obrazu u\u017cy\u0107?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">U\u017cyj panoramy equirektangularnej 2:1, na przyk\u0142ad 4000 \u00d7 2000 lub 2000 \u00d7 1000 px.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Czy WebP nadaje si\u0119 do panoram?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tak. Dla zdj\u0119\u0107 i render\u00f3w cz\u0119sto zapewnia du\u017c\u0105 redukcj\u0119 wzgl\u0119dem PNG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Czy tre\u015b\u0107 Hero mo\u017cna edytowa\u0107 w Gutenbergu?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tak. Blok A360 Panorama Hero obs\u0142uguje natywne bloki WordPressa wewn\u0105trz sekcji panoramicznej.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Praktyczny poradnik wyboru panoramy equirektangularnej, konfiguracji A360 Panorama Hero oraz zachowania szybko\u015bci i czytelno\u015bci.<\/p>\n","protected":false},"author":1,"featured_media":166,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[6,10,7],"class_list":["post-61","page","type-page","status-publish","has-post-thumbnail","hentry","category-a360","category-virtual-tours","category-wordpress"],"_links":{"self":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"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=61"}],"version-history":[{"count":7,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/pages\/61\/revisions\/164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/media\/166"}],"wp:attachment":[{"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mechmagic.com\/pl\/wp-json\/wp\/v2\/categories?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}