Co to jest efekt paralaksy? Dlaczego i jak go używać w witrynie WordPress

Efekt paralaksy to niezwykle popularna funkcja projektowania, która jest powszechnie stosowana na stronach internetowych WordPress. Ten efekt specjalny występuje w świecie gier od lat, ale ostatnio przeszedł na projektowanie stron internetowych. I do tej pory wydaje się, że ten główny trend nigdzie się nie zmierza, jeśli w ogóle, jest on szerzej wykorzystywany niż kiedykolwiek wcześniej. Czym jest efekt paralaksy i dlaczego warto rozważyć użycie go na swojej stronie WordPress?


W tym artykule zastanowimy się, czym jest efekt paralaksy i jakie korzyści może przynieść Twojej stronie i firmie. Następnie omówimy, jak szybko i łatwo dodać efekt paralaksy do dowolnej witryny, strony lub postu WordPress za pomocą darmowej wtyczki Parallax Scroll.

Co to jest efekt paralaksy?

Dwadzieścia siedemnaście

Efekt paralaksy obejmuje stronę internetową tło porusza się wolniej niż pierwszy plan. To tworzy iluzję głębi strony, nadając treści efekt 3D, gdy przeglądający przewijają w dół.

Większość motywów WordPress premium ma teraz wbudowany efekt paralaksy na swojej stronie głównej. Nawet darmowy domyślny motyw WordPress Twenty Seventeen ma funkcję paralaksy. Większość programów budujących strony zawiera także narzędzie do efektu paralaksy, które umożliwia dodanie efektu do dowolnej strony lub postu w witrynie. Oczywiście istnieje wiele wtyczek WordPress, które można zainstalować, aby dodać elementy efektu paralaksy do swojej witryny.

Jakie są zalety korzystania z efektu paralaksy?

Korzystanie z efektu paralaksy na stronie WordPress ma wiele zalet. Pierwszym i najbardziej oczywistym jest aspekt wizualny efektu paralaksy. Efekt paralaksy jest miłe dla oka, nadając Twojej witrynie świeży, stylowy i nowoczesny wygląd. To efekt wow może sprawić, że Twoje treści naprawdę się pojawią, i stworzy ekscytującą i interesującą przeglądarkę.

Innym kluczowym powodem korzystania z efektu paralaksy w Twojej witrynie jest pomoc rozbić stronę, szczególnie strona główna, w czytelne fragmenty. Użyj tego efektu, aby podkreślić różne sekcje i typy treści, które chcesz zaprezentować. Może to pomóc w promocji różnych aspektów witryny, podświetlić ważne informacje i zachęcić użytkowników do poruszania się po witrynie i uzyskiwania dostępu do treści w sposób wybrany przez użytkownika.

Efekt paralaksy można zastosować na dowolnej stronie lub postu witryny, ale można go szczególnie zobaczyć na stronach głównych, stronach docelowych lub stronach jednostronicowych. Oszałamiająca paralaksa wizualna tworzy, a pozytywny wpływ, jaki ma ona na wrażenia użytkownika, może spowodować, że odwiedzający pozostaną dłużej w Twojej witrynie, i pomogą poprawić współczynniki konwersji witryny w stosunku do jej celów.

Paralaksa na komórce

Chociaż paralaksa jest świetna do zwiększania zainteresowania wizualnego, nie zawsze działa dobrze na urządzeniach mobilnych. Ponieważ telefony i tablety zwykle używają nawigacji po przesunięciu (zamiast przewijania jak komputery stacjonarne) efekty paralaksy mogą nie być poprawnie renderowane. Oczywiście będzie to zależeć od metody i animacji używanych dla własnej sekcji paralaksy, jednak dla dobrej użyteczności warto rozważyć wyłączenie paralaksy na urządzeniach.

Wybierz motyw z efektem paralaksy

Całkowity

Dla tych, którzy rozpoczynają nowy projekt, powinieneś wybrać motyw premium, który zawiera funkcję efektu paralaksy. A jeśli chcesz zastosować efekt paralaksy na różnych stronach witryny, a nie tylko na stronie głównej, możesz rozważyć zastosowanie uniwersalnego motywu z zaawansowanym narzędziem do tworzenia stron. Motywy takie jak Divi from Elegant Themes, Parallax firmy Themify i nasz własny motyw Total, wszystkie zawierają narzędzia do tworzenia stron zapewniające narzędzia do efektów paralaksy.

Dodaj suwaki Parallax za pomocą wtyczki WordPress Revolution Slider

Slider Revolution Parallax

Jeśli chcesz polecanego suwaka z efektem paralaksy, naszym najlepszym wyborem jest wtyczka Slider Revolution. Ta wtyczka premium zawiera setki wbudowanych opcji i funkcji czcionek, warstw, efektów suwaka, układów i oczywiście paralaksy.

Włącz suwak Revolution Parallax

Najpierw zainstaluj wtyczkę, a następnie zaimportuj szablon suwaka lub zacznij budować własny suwak od zera (więcej informacji można znaleźć w naszym pełnym przewodniku po Slider Revolution).

Ustawienia paralaksy suwaka rewolucji

Następnie edytuj slajd Główne tło dodać Źródło obraz tła i wybierz Paralaksa / 3D tab, aby przypisać poziom paralaksy. Następnie podczas dodawania warstw wybierz Paralaksa / 3D opcja warstwy dla głębokości paralaksy, aby dodać ruch do tekstu, obrazu, przycisku i innych warstw. To takie proste!

Gdy skończysz, zapisz suwak i użyj skrótu, aby wstawić go do dowolnego postu lub strony. Lub jeśli używasz programu budującego strony, takiego jak Visual Composer, możesz użyć programu budującego strony Slider Revolution, aby szybko wybrać i wstawić suwak.

Dodaj sekcje Parallax za pomocą wtyczki Parallax Scroll WordPress

Zwój Paralaksy

Jeśli masz już motyw, który nie zawiera wbudowanej opcji efektu paralaksy, powinieneś rozważyć skorzystanie z wtyczki WordPress do wykonania zadania. Zwój Paralaksy jest popularną bezpłatną opcją, która umożliwia dodanie obrazu tła z przewijaniem paralaksy do różnych elementów na stronie lub postu w witrynie. Dodaj przewijane tło do pojedynczego elementu, tekstu nagłówka lub pełnej sekcji zawierającej dowolną treść, wszystko za pomocą prostego krótkiego kodu.

Zobaczmy teraz, jak zainstalować i rozpocząć korzystanie z Parallax Scroll…

Instalowanie zwoju Paralaksy

Aby zainstalować Parallax Scroll, zaloguj się do pulpitu WordPress jako administrator i wybierz Wtyczki> Dodaj nowe z menu.

Dodaj nową wtyczkę

Szukaj Zwój Paralaksy, następnie wybierz Zainstaluj teraz> Aktywuj.

Aktywuj Zwój Paralaksy

Teraz zauważysz, że karta przewijania Paralaksy została dodana do menu WordPress.

Dodawanie sekcji przewijania Paralaksy

Aby rozpocząć korzystanie z Parallax Scroll, musisz najpierw utworzyć nową sekcję paralaksy. Aby to zrobić, wybierz Przewiń Paralaksę> Dodaj nowy z menu WordPress.

Przewiń Paralaksę Dodaj nowy

Tutaj możesz teraz utworzyć nową sekcję paralaksy…

Dodaj nową paralaksę

Ustawianie przewijanego obrazu tła paralaksy

Najpierw musisz ustawić obraz dla przewijanego tła paralaksy. Aby to zrobić, kliknij Ustaw wyróżniony obraz i dodaj obraz do sekcji Wyróżniony obraz.

Przedstawiony obraz

Pomyśl dokładnie o obrazie, którego używasz dla każdej sekcji tła. Upewnij się, że są one odpowiednie dla Twojej witryny i synchronizują się z Twoją marką. Jeśli zamierzasz wyświetlić nagłówek lub dalszą treść na górze tego obrazu tła, rozważ użycie koloru bloku lub subtelnych wzorów zamiast zdjęcia lub przyciągającej uwagę grafiki. Pomoże to zapewnić, że Twój obraz działa i promuje twoją treść, zamiast rozpraszać.

Jeśli zdecydujesz się na użycie zdjęć, muszą one być wysokiej jakości. Piękne, przyciągające wzrok obrazy mogą pomóc Twojej witrynie uzyskać profesjonalny i niepowtarzalny wygląd. Te efekty wizualne wywrą silne wrażenie na odbiorcach, co z kolei zachęci ludzi do zapamiętania i powrotu do Twojej witryny. Istnieje szeroki asortyment witryn internetowych, z których można pobierać obrazy najwyższej jakości. Sprawdź naszą kolekcję bezpłatnych i wysokiej jakości stron internetowych z fotografiami, w których szybko znajdziesz wspaniałe zdjęcia na tle paralaksy.

Tworzenie tekstu nagłówka na tle paralaksy

Dodaj nagłówek

Jeśli chcesz utworzyć tekst nagłówka na tle paralaksy, musisz następnie wprowadzić tytuł wpisu. Tytuł ten pojawi się wtedy jako tytuł nagłówka na górze wybranego obrazu tła paralaksy.

Możesz nie chcieć nagłówka w sekcji paralaksy. W takim przypadku powinieneś nadać każdej paralaksie tytuł postu, aby każda utworzona sekcja była łatwa do zidentyfikowania. Następnie musisz wybrać, aby ukryć tytuł w Opcje przewijania Paralaksy (opisane w dalszej części tego artykułu), więc nagłówek nie jest wyświetlany na przedniej stronie witryny.

Wyświetlaj dowolne treści z przewijanym tłem Paralaksa

Możesz chcieć, aby sekcja paralaksy wyświetlała inną treść nad obrazem tła. Może to obejmować wszystko, co niezbędne dla Twojej witryny, od tekstu i obrazów po skróty. Zdecyduj, co chcesz wyświetlić, a następnie wprowadź tę treść w polu postu.

Dostosowywanie ustawień przewijania Paralaksy

Gdy będziesz zadowolony z treści, musisz dostosować ustawienia sekcji paralaksy do swojej strony.

Opcje przewijania Paralaksy

Przewiń w dół do Opcje przewijania Paralaksy. W sekcji Styl możesz zmienić wysokość paralaksy i rozmiar obrazu, a także wybierając opcję Pełna szerokość, aby wymusić wyświetlanie motywu na całej szerokości ekranu przez motyw, jeśli nie jest on jeszcze.

Możesz także zmienić poziome i pionowe położenie nagłówka na tle paralaksy. A jeśli chcesz ukryć tytuł wpisu, możesz to zrobić tutaj, pisząc Nie wyświetla się; w Styl nagłówka.

Ustawienia paralaksy pozwoli ci dostosować sposób działania przewijania paralaksy. Obejmuje to zmianę prędkości tła paralaksy. Wypróbuj różne prędkości, aby zobaczyć, co działa dla Twojej witryny i odbiorców.

Istnieje również Ustawienia mobilne opcja, która pozwala wyłączyć obraz tła paralaksy i / lub zawartość na telefonach komórkowych, jeśli uważasz, że sekcje paralaksy nie działają dobrze na urządzeniach mobilnych.

Po dostosowaniu ustawień i zakończeniu tworzenia sekcji paralaksy kliknij przycisk Publikuj.

Wstawianie sekcji paralaksy do posta lub strony

Następnie musisz wstawić sekcję paralaksy do postu lub strony w swojej witrynie. Wybierz Przewijanie Paralaksy z menu WordPress.

Krótki kod przewijania Parallax

W przedstawionej tabeli zobaczysz teraz krótki kod dla właśnie utworzonej sekcji paralaksy. Skopiuj kod, a następnie otwórz odpowiednią stronę lub post. Wklej kod do treści strony w odpowiedniej pozycji.

Wstaw shortcode

Przejrzyj zmiany, a jeśli jesteś zadowolony z nowej sekcji paralaksy, kliknij Publikuj. Możesz teraz utworzyć kolejne sekcje, nadać stronie lub opublikować pełny efekt paralaksy. A jeśli musisz wprowadzić zmiany, po prostu ponownie otwórz stronę sekcji paralaksy i wprowadź niezbędne zmiany.

Końcowe przemyślenia

Jeśli Twój motyw nie ma wbudowanej funkcji efektu paralaksy lub jeśli chcesz dodać efekt do czegoś więcej niż tylko strony głównej, przewijanie Parallax pozwoli ci szybko utworzyć sekcje paralaksy, aby dodać je do stron lub postów.

Jak widzieliście, dodanie efektu paralaksy na swojej stronie może być bardzo opłacalne. Może nie tylko znacznie poprawić wygląd Twojej witryny, ale także zachęcić odbiorców, umożliwić jej łatwe poruszanie się po stronie i dostęp do treści oraz wydłużyć czas spędzany na stronie. Ta poprawa komfortu użytkowania powinna ostatecznie pomóc Twojej witrynie przekonwertować się na jej cele, niezależnie od tego, czy chodzi o zwiększenie liczby powracających użytkowników, zbieranie potencjalnych klientów, czy sprzedaż produktów lub usług.

Czy dodasz efekt paralaksy do swojej strony głównej, strony docelowej, posta czy gdzie indziej? Podziel się swoimi przemyśleniami w komentarzach poniżej…

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me