Jak dodać efekt paralaksy do dowolnego motywu WordPress

Efekt paralaksy to trend w projektowaniu stron internetowych, w którym obrazek w tle przewija się wolniej niż treść na pierwszym planie. Tworzy to iluzję głębi i ruchu, tworząc bardziej interaktywne wrażenia użytkownika na twojej witrynie internetowej.

Naszym zdaniem wykorzystanie efektu paralaksy to świetny sposób na przyciągnięcie uwagi odwiedzających. Przyciąga ludzi i zachęca ich do pozostania dłużej, co może zwiększyć zaangażowanie. Odkryliśmy, że nie tylko nadaje to Twojej witrynie elegancki, profesjonalny wygląd, ale może również prowadzić do wyższych konwersji.

W tym artykule pokażemy, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Przeanalizujemy różne metody, w tym korzystanie z wtyczek i własnego kodu, aby zapewnić ci elastyczne opcje.

Czym jest efekt paralaksy?

Efekt paralaksy to nowoczesna technika projektowania stron internetowych, w której tło przewija się wolniej niż treść na pierwszym planie. Efekt ten dodaje głębi obrazkom w tle i sprawia, że są one bardziej interaktywne.

Efekt paralaksy może być stosowany na stronach docelowych, długich treściach, stronach sprzedaży lub stronie głównej witryny internetowej firmy.

Może wyróżnić różne sekcje na długiej stronie, poprawić ogólną atrakcyjność wizualną witryny, zwiększyć zaangażowanie użytkowników i być niesamowitym narzędziem do przekazywania wiadomości lub opowiadania relacji na twoim blogu.

Wiele motywów WordPress premium ma wbudowany efekt paralaksy na stronie głównej. Efekt ten można również wykorzystać w większości wtyczek do tworzenia stron WordPress.

Jednak nie wszystkie motywy mają tę funkcję i możesz nie chcieć używać konfiguratora stron do tworzenia własnych układów stron tylko dla efektu paralaksy.

Powiedziawszy to, przyjrzyjmy się, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Omówimy kilka różnych metod i możesz skorzystać z poniższych odnośników, aby przejść do tej, której chcesz użyć:

Metoda 1: Dodanie efektu paralaksy do motywu WordPress za pomocą wtyczki

Ta metoda nie wymaga dodawania żadnego kodu do twojego motywu WordPress. Jest łatwa i zalecana dla większości użytkowników.

Najpierw należy zainstalować i włączyć wtyczkę Advanced WordPress Backgrounds. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź na stronę Ustawienia ” AWB z kokpitu WordPress. Tutaj możesz zaznaczyć pola dla przeglądarek lub urządzeń, na których nie chcesz wyświetlać efektu paralaksy.

Na przykład, jeśli nie chcesz wyświetlać efektu paralaksy użytkownikom urządzeń mobilnych, możesz zaznaczyć to pole.

Następnie kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Następnie otwórz twoją stronę lub wpis w edytorze bloków Gutenberg.

Gdy już się tam znajdziesz, kliknij przycisk dodawania bloku „+” w lewym górnym rogu ekranu, aby otworzyć menu bloków.

W tym miejscu należy znaleźć i dodać do wpisu blok Tło (AWB).

Teraz otwórz panel bloków po prawej stronie ekranu i przełącz się na kartę „Image”, jeśli chcesz dodać obrazek jako tło paralaksy.

Następnie kliknij przycisk „Wybierz obrazek”, aby uruchomić bibliotekę multimediów. Możesz także kliknąć przycisk „Użyj wyróżnionego obrazka”, aby automatycznie dodać wyróżniony obrazek jako tło.

Można nawet dodać kolor tła lub film dla efektu, przełączając się na te karty.

Po dodaniu obrazka można dostosować jego punkt centralny z panelu bloków i skonfigurować rozmiar tła. Zalecamy jednak pozostawienie rozmiaru tła jako „Okładka”.

Następnie można użyć pokazu slajdów, aby zmienić krycie obrazka.

Gdy to zrobisz, przewiń w dół do karty „Paralaksa” i rozwiń ją.

Stąd możesz wybrać twój rodzaj paralaksy z rozwijanego menu. Po wybraniu opcji zmiany zostaną automatycznie zastosowane w edytorze bloków, gdzie można je przetestować.

W naszym przykładzie używamy opcji „Krycie + Przewijanie”.

Po dodaniu efektu kliknij przycisk „+” w bloku AWB, aby otworzyć menu bloku.

Możesz teraz dodać akapit, obrazek, film, cytat lub dowolny inny blok. Blok ten będzie następnie wyświetlany z efektem paralaksy.

Na koniec kliknij przycisk „Aktualizuj” lub „Opublikuj” u góry, aby zapisać twoje ustawienia.

Teraz możesz przejść na twoją witrynę WordPress, aby zobaczyć efekt paralaksy w działaniu.

Metoda 2: Dodanie efektu paralaksy do motywu WordPress za pomocą CSS

Jeśli chcesz użyć jednego obrazka jako tła paralaksy na całej twojej witrynie internetowej, to ta metoda jest dla ciebie.

Najpierw musisz przesłać obrazek, którego chcesz użyć, do biblioteki multimediów WordPress, przechodząc na stronę Media ” Dodaj nowy plik multimedialny.

Po wykonaniu tej czynności należy skopiować adres URL obrazka, klikając go i otwierając monit „Szczegóły załącznika”.

Gdy to zrobisz, musisz dodać własny kod CSS do plików twojego motywu. Jednak najmniejszy błąd podczas wpisywania kodu może zepsuć twoją witrynę i uczynić ją niedostępną.

Dlatego zalecamy korzystanie z WPCode. Jest to najlepsza na rynku wtyczka do fragmentów kodu WordPress, która sprawia, że dodawanie własnego kodu, w tym CSS, jest bardzo bezpieczne i łatwe.

Najpierw należy zainstalować i włączyć wtyczkę WPCode. Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź na stronę Code Snippets ” + Add Snippet z kokpitu WordPress i kliknij przycisk „Use Snippet” pod opcją „Add Your Custom Code (New Snippet)”.

Spowoduje to przejście do strony „Utwórz niestandardowy fragment kodu”, gdzie możesz zacząć od dodania tytułu dla twojego niestandardowego kodu.

Następnie wybierz opcję „Fragment kodu CSS” z menu rozwijanego Rodzaj kodu po prawej stronie.

Następnie dodaj następujący własny kod CSS w polu „Podgląd kodu”:

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Gdy to zrobisz, upewnij się, że zastąpiłeś przykładowy adres URL w linii background-image: url kodu adresem URL twojego obrazka.

Ten obrazek będzie używany jako tło efektu paralaksy na całej twojej witrynie internetowej.

Następnie przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”.

Fragment kodu zostanie automatycznie wykonany na twojej witrynie internetowej po dodaniu do niego kodu HTML.

Na koniec przewiń z powrotem do góry strony i przełącz przełącznik „Nieaktywny” na „Aktywny”.

Następnie kliknij przycisk „Zapisz fragment kodu”, aby zapisać twoje ustawienia.

Teraz nadszedł czas, aby otworzyć wpis lub stronę WordPress, na której chcesz dodać efekt paralaksy.

Gdy już się tam znajdziesz, kliknij ikonkę z trzema kropkami w prawym górnym rogu ekranu, aby otworzyć menu. Następnie wybierz tryb „Edytor kodu”.

Teraz należy dodać następujący kod HTML w edytorze kodu z treścią dla efektu paralaksy pomiędzy nimi:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Następnie można łatwo wrócić do wizualnego edytora bloków, klikając odnośnik „Wyjdź z edytora kodu” u góry.

Następnie dodaj resztę treści strony lub wpisu w edytorze bloków wizualnych.

Na koniec kliknij przycisk „Aktualizuj” lub „Publikuj”, aby zapisać twoje ustawienia.

Teraz wystarczy przejść na twój blog WordPress, aby zobaczyć efekt paralaksy w działaniu.

Bonus: Dodaj film z YouTube jako tło w trybie pełnoekranowym w WordPressie

Oprócz efektu paralaksy, możesz również dodać film z YouTube jako tło w trybie pełnoekranowym w WordPress.

Może to zapewnić użytkownikom wciągające wrażenia i zwiększyć atrakcyjność wizualną Twojej witryny WordPress. Film z YouTube w trybie pełnoekranowym jako tło może wywołać emocje i stworzyć głębszą więź z twoimi odbiorcami.

Na przykład, jeśli organizujesz rozdanie na twojej witrynie internetowej, możesz użyć filmu YouTube w tle, aby uczynić stronę bardziej ekscytującą i zachęcić użytkowników do wzięcia udziału w konkursie.

Podobnie, jeśli masz organizację charytatywną non-profit, możesz użyć tła filmowego, aby pokazać wpływ twojej organizacji, misję i relacje osób lub społeczności, którym służysz. Możesz nawet zaprezentować relacje z sukcesów w trybie pełnoekranowym w tle filmu.

Więcej szczegółów można znaleźć w naszym poradniku na temat dodawania filmu z YouTube jako tła w trybie pełnoekranowym w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem dla początkujących, jak dodać nieskończone przewijanie do twojej witryny internetowej WordPress i naszą listą najlepszych alternatyw Canva dla grafiki witrynowej.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.