A360 Panorama Hero zmienia standardowe Hero WordPressa w interaktywną scenę 360°, zachowując nagłówki, akapity, przyciski, grupy i kolumny jako natywne bloki WordPressa. Najlepszy efekt zapewnia zoptymalizowany obraz equirektangularny 2:1, czytelny overlay i spokojny autoplay.
Przykład
Wygenerowane zdjęcie sferyczne
MOŻLIWOŚCI PANORAMA HERO
Najważniejsze funkcje
Immersyjna panorama WebGL połączona z treścią, która pozostaje edytowalna, tłumaczalna i dostępna jako prawdziwe bloki WordPressa.
+
Natywna treść Gutenberga
Umieszczaj nagłówki, akapity, przyciski, grupy i kolumny wewnątrz panoramicznego Hero.
+
Biblioteka mediów WordPressa
Wybieraj panoramę equirektangularną 2:1 i opcjonalny poster bezpośrednio z biblioteki.
+
Blok i shortcode
Korzystaj z wizualnego bloku A360 Panorama Hero lub integruj viewer shortcode’em a360_panorama.
+
Sterowanie ruchem
Konfiguruj szybkość obrotu, czas wznowienia i autoplay zawsze, z uwzględnieniem ograniczenia ruchu lub wyłączony.
+
Pole widzenia
Dobieraj początkowe FOV do sceny i najważniejszego obszaru panoramy.
+
Responsywna prezentacja
Dostosowuj wysokość panoramy i układ treści do desktopu, tabletu i telefonu.
+
Interaktywne sterowanie
Obsługuj przeciąganie, dotyk, fokus klawiatury i widoczny przycisk zatrzymania obrotu.
+
Poster i stan ładowania
Pokazuj obraz zastępczy podczas uruchamiania WebGL i czytelny komunikat w razie błędu.
Kiedy interaktywna panorama poprawia sekcję Hero?
Panoramiczne Hero sprawdza się, gdy otoczenie jest częścią wartości oferty: w architekturze, nieruchomościach, hotelarstwie, turystyce, obiektach przemysłowych, wydarzeniach, showroomach i oprogramowaniu do wirtualnych spacerów. Może też stanowić abstrakcyjne tło platformy technologicznej, o ile ruch nie konkuruje z głównym komunikatem.
Nie dodawaj 360° wyłącznie dlatego, że robi wrażenie. Nagłówek, wyjaśnienie i główna akcja muszą być zrozumiałe natychmiast. Panorama powinna wzmacniać kontekst i jednocześnie demonstrować możliwości produktu.
Jak przygotować obraz panoramiczny?
Użyj obrazu equirektangularnego w proporcji 2:1. Lewa i prawa krawędź muszą łączyć się naturalnie, ponieważ viewer owija obraz wokół sfery. Najważniejszych obiektów nie umieszczaj na górnym i dolnym biegunie, gdzie rozciągnięcie jest największe.
| Decyzja | Zalecenie |
|---|---|
| Projekcja | Equirektangularna 2:1 |
| Format | WebP dla większości zdjęć i renderów |
| Widok początkowy | Spokojna przestrzeń za tekstem |
| Kontrast | Overlay zamiast tekstu zapisanego w obrazie |
| Fallback | Poster widoczny podczas ładowania WebGL |
Kompresja jest ważna, ponieważ panorama zawiera dużo pikseli. W Hero ekosystemu A360 konwersja obrazu 1774 × 887 z PNG do WebP zmniejszyła plik z około 1,6 MB do około 91 KB bez zmiany wymiarów.
Jak zbudować A360 Panorama Hero?
- Zainstaluj i aktywuj A360 Panorama Hero.
- Dodaj blok A360 Panorama Hero w edytorze WordPressa.
- Wybierz panoramę 2:1 z biblioteki mediów.
- Dodaj wewnątrz natywne bloki nagłówka, tekstu i przycisków.
- Wybierz wysokość, początkowe pole widzenia i wyrównanie treści.
- Ustaw overlay zapewniający czytelność tekstu.
- Skonfiguruj prędkość obrotu, wznowienie i autoplay.
- Przetestuj mysz, dotyk i klawiaturę na opublikowanej stronie.
Shortcode przydaje się przy integracji z szablonem: . Dla redaktora wygodniejszy jest zwykle blok, ponieważ zawartość pozostaje złożona z natywnych bloków WordPressa.
Zalecenia dotyczące wydajności
- Konwertuj PNG do WebP, jeśli przezroczystość nie jest potrzebna.
- Nie ładuj kilku panoram WebGL nad linią załamania.
- Używaj postera zamiast pustego ekranu ładowania.
- Ustaw spokojny obrót i zatrzymuj go w nieaktywnej karcie.
- Po wdrożeniu sprawdź element Largest Contentful Paint.
- Nie używaj źródła znacznie większego, niż wymaga wyświetlanie i zoom.
Ruch, sterowanie i czytelna treść
Autoplay powinien respektować preferencję ograniczenia ruchu albo być wyłączony, jeśli animacja nie jest niezbędna. Użytkownik potrzebuje widocznego przycisku pauzy, zrozumiałej etykiety regionu i odpowiedniego kontrastu. Tekst powinien pozostać HTML-em, a nie pikselami w panoramie — dzięki temu można go zaznaczać, tłumaczyć, indeksować i odczytywać technologiami asystującymi.
Zamień Hero WordPressa w doświadczenie 360°
Połącz immersyjną scenę z edytowalną treścią dzięki A360 Panorama Hero.
Najczęściej zadawane pytania
Jakich proporcji obrazu użyć?
Użyj panoramy equirektangularnej 2:1, na przykład 4000 × 2000 lub 2000 × 1000 px.
Czy WebP nadaje się do panoram?
Tak. Dla zdjęć i renderów często zapewnia dużą redukcję względem PNG.
Czy treść Hero można edytować w Gutenbergu?
Tak. Blok A360 Panorama Hero obsługuje natywne bloki WordPressa wewnątrz sekcji panoramicznej.