Tutorial: Jak dodać animowaną galerię na stronę WordPress

Proces tworzenia wyglądu witryny jest dość długi. Wybór ładnego motywu o tylko mała jego część. Motyw jest bardzo przydatnym narzędziem, które pomaga szybciej budować witrynę, ale jest to tylko podstawa. Jeśli pozostawisz projekt bez zmian - Twoja witryna nie będzie oryginalna i niepowtarzalna. Wyobraź sobie, ile osób wybrało ten sam szablon! Aby się wyróżnić, musisz odpowiednio dostosować - wybierać kolory i fonty, dodawać zdjęcia i wideo, teksty i linki. Oprócz tego powinny być dostępne efekty animacji i widżety, które można dodać, instalując wtyczki.

W rzeczywistości, gdy mówimy o wtyczkach, które wpływają na wygląd witryny, myślę, że można je porównać z biżuterią. Dlaczego ludzie ją noszą? Aby być się ładniejszymi i przyciągać uwagę. Oczywiście koncepcja piękna nie jest taka sama w każdym kraju. Biżuteria pięknej kobiety będzie drastycznie różnić się w Afryce, Japonii i Wielkiej Brytanii. Jednak w ten czy inny sposób biżuteria przyciągnie uwagę. Wtyczki osiągają ten sam cel - dekorują stronę internetową i przyciągają uwagę użytkowników. Niezależnie od tego, czy jest to efekt paralaksy, czy unikalny sposób wyświetlania produktów, osiągnie on główny cel każdej witryny - sprawi, że odwiedzający nie tylko zostanie, ale również przejrzy treść i być może podejmie działania, które chcesz, aby podjął.

Co na pierwszej stronie przyciągnie twoją uwagę? Oczywiście grafika! Zdumiewające zdjęcia, żywe dzieła sztuki i zapierające dech w piersiach infografiki - to najlepsze produkty, które przyciągają uwagę. Jeśli jednak nie zamierzasz utworzyć drugiej witryny na Instagramie lub Pinterest - nie możesz wypełnić witryny tylko zdjęciami. Musi być jakiś tekst i inne rzeczy. I tu właśnie przychodzą różne rodzaje galerii i kolekcji obrazów, aby cię uratować. Animowana galeria lub animated wall to jeden z efektów, który może nieco urozmaicić twój blog, sklep lub portfolio.

Z tytułu jasno wynika, czym jest animated wall. W rzeczywistości jest to galeria, która nie tylko wyświetla obrazy, ale także zmienia i przesuwa je zgodnie z wybranym algorytmem. Wizualizacje przesuwają się, wtaczają, znikają lub powiększają, dodając nieco dynamiki do widoku ogólnego. To prawie jak karuzela, ale ma w niej więcej przedmiotów. Dlaczego jest lepsza niż zwykła galeria? Automatycznie się porusza! Każdy ruch, mruganie lub błyskanie automatycznie przyciąga wzrok użytkownika. Poza tym, gdy obrazy się zmieniają, jest to dobra okazja, aby pokazać więcej zdjęć niż w statycznym bloku galerii.

Tworzenie galerii Animated wall

Przede wszystkim musisz uzyskać specjalną wtyczkę. Ja osobiście poleciłbym wtyczkę Animated Live Wall - została stworzona przez profesjonalistów i nie jest zbyt droga. Możesz jednak spróbować znaleźć inne rozwiązania w Internecie. Po pobraniu wtyczki zainstaluj ją na swojej stronie internetowej. Otwórz pulpit administracyjny i wybierz Wtyczki> Dodaj nowy. Kliknij przycisk „Prześlij wtyczkę”, wybierz plik ze swojego komputera i zainstaluj go.

Po aktywacji zobaczysz, że do pulpitu nawigacyjnego została dodana dodatkowa karta - „Animated Live Wall”. Po kliknięciu Animated Live Wall > Dodaj nową - otwiera się narzędzie do galerii animowanych. Tutaj możesz stworzyć i dostosować galerię, a następnie wstawić ją na dowolną stronę, po prostu kopiując i wklejając link.

Jak widać, dzięki tej wtyczce możesz zbudować galerię ze zdjęć przechowywanych na komputerze lub połączyć ją z osobistymi wpisami na koncie Instagram lub Flickr. Pokażę ci, jak stworzyć galerię zdjęć dostępnych na twoim komputerze. Kliknij pole „Dodaj zdjęcia” i wybierz je (lub po prostu przeciągnij i upuść je w tym polu). Wybrane zdjęcia zostaną wyświetlone w oknie poniżej.

Tutaj możesz również zmienić nazwę zdjęć i dodać do nich linki. Okno ma kilka dodatkowych zakładek, które dają wszystkie opcje dostosowywania. Przejrzyjmy je jeden po drugim. Karta Układy oferuje cztery warianty układu: siatka, mur, mozaika i uzasadnienie. Będziesz jednak mógł dodawać animacje tylko do galerii siatki. Ponieważ mówimy o animowanych ścianach - wybrałam układ siatki.

• Karta „Konfiguracja” służy do definiowania wszystkich ustawień animowanej galerii. Wszystkie opcje są dość oczywiste, ale przejrzyjmy je i zobaczmy, co możesz zmienić.
• Wydziwianie. To oczywiste; tutaj określasz, ile wierszy będzie miała siatka. Radzę nie robić więcej niż trzy, aby wypełnienie galerii pasowało do ekranu, ale zależy to od Twojego gustu.
• Kolumny. Ta sama sytuacja tutaj - ta opcja określa liczbę kolumn w siatce. Powiedziałbym, że trzy lub cztery rzędy będą tutaj liczbą idealną. W takim przypadku obraz będzie wystarczająco duży, aby był wyraźnie widoczny.
• Rozmiar miniaturki. Rozwijane menu udostępnia sześć wariantów rozmiaru zdjęć. Wybieram opcję „Duże”, ale lepiej będzie trochę zagrać z tym parametrem i zobaczyć, co najlepiej będzie pasowało do ogółnego stylu witryny.
• Animacja w trybie na żywo. Tutaj możesz wybrać sposób przesunięcia zdjęć na animowanej ścianie. Istnieje 16 wariantów, a ponadto możesz wybrać opcję „losową” - sposób, w jaki poruszają się obrazy, zostanie wybrany losowo. Ja osobiście nie chcę zbyt dużego ruchu, więc wybieram opcję „showHide”. Zdjęcia w mojej galerii po prostu się zmieniają bez żadnych dodatkowych ruchów.
• Max Step. Tutaj ustawia się liczbę zdjęć zmienianych w tym samym czasie. Może to być jedno zdjęcie na raz lub wszystkie zdjęcia w siatce. Zostawię tutaj ustawienia domyślne; trzy zdjęcia na raz są wystarczające dla mojego gustu.
• Szybkość animacji. Ten i następny parametr to te, na które należy zwrócić szczególną uwagę. Jeśli liczba jest zbyt mała - zdjęcia będą migać zbyt szybko i denerwować użytkowników. A jeśli będzie za duży - zmiany będą trudne do zauważenia. Radziłabym zacząć od domyślnej szybkości i zmienić ją po przyjrzeniu się jej.
• Interwał animacji. Jak powiedziałam powyżej - szybkość jest bardzo ważna. Ta opcja określa, jak często zdjęcia będą się zmieniać. 
• Zmieniać zdjęcia. Z jakiegoś powodu możesz chcieć, aby niektóre zdjęcia pozostały niezmienione. Możesz wpisać identyfikatory zdjęcia, które chcesz pozostać w galerii na tym pasku. Nie mam takich zdjęć, więc zostawię je puste.
• Odstęp między zdjęciami. Jak wynika z tytułu, ta opcja pozwala ustawić odstęp między zdjęciami siatki. Nie podoba mi się taka separacja, więc zostawię ją na „0”.
• Link do przekierowania na zdjęciu. Jeśli chciałbyś, aby obrazy klikane przez użytkownika otwierały się w osobnej zakładce - wybierz opcję „Nowa zakładka”. 

LightBox to funkcja, która otwiera galerię w oknie nakładki rozciągającym się na cały ekran. Na karcie LightBox możesz włączyć lub wyłączyć lightbox, wybrać jego styl i rozmiar miniaturek. Nie chcę, aby galeria była wyświetlana w widoku lightbox, dlatego ją wyłączam.

Jeśli podana funkcja nie jest wystarczająca, zawsze możesz dodać niestandardowy kod CSS. Niestandardowa karta CSS jest właśnie w tym celu. Jeśli jednak nie wiesz, jak utworzyć ten fragment kodu i nie masz przyjaznego programisty, który mógłby Ci pomóc - zalecamy unikanie tej karty (tak jak ja).

Dodawanie galerii Animated wall na stronę

Po zakończeniu dostosowywania - nazwij galerię i naciśnij przycisk „Aktualizuj” w prawym górnym rogu. Teraz należy ją umieścić na jednej ze stron Twojej witryny. Skopiuj krótki kod galerii, klikając przycisk folderu w rogu.

Znajdując się na potrzebnej stronie- kliknij przycisk „Dodaj blok” i wybierz blok „Niestandardowy HTML”.

Wszystko, co musisz teraz zrobić, to wkleić krótki kod do paska. Po tym zaktualizuj stronę i gotowe - dodałeś animowaną ścianę do strony. Odwiedzający stronę internetową będzie wyglądać tak:

* *

*

Podczas korzystania z wtyczek istnieje tylko jedno prawdziwe niebezpieczeństwo. Podobnie jak w przypadku biżuterii możesz łatwo przesadzić. Ludzie z mnóstwem biżuterii wyglądają dziwnie i zabawnie. Witryna z mnóstwem różnych efektów zirytuje użytkownika i odejdzie. Więc teraz, kiedy wiesz, jak dodać animowaną galerię do swojej witryny, pamiętaj, aby jej nie przesadzić.

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można przeczytać tutaj: How to Add an Animated Gallery to Your WordPress Website?