Jak dodać efekt paralaksy do dowolnego motywu WordPress

Efekt paralaksy to trend w projektowaniu stron internetowych, w którym obraz tła przewija się wolniej niż treść pierwszego planu. Tworzy to iluzję głębi i ruchu, zapewniając bardziej interaktywne doświadczenie użytkownika na Twojej stronie internetowej.

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

W tym artykule pokażemy Ci, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Zbadamy różne metody, w tym użycie wtyczek i niestandardowego kodu, aby zapewnić elastyczne opcje.

Czym jest efekt paralaksy?

Efekt paralaksy to nowoczesna technika projektowania stron internetowych, w której tło przewija się wolniej niż treść pierwszego planu. Ten efekt dodaje głębi obrazom tła i sprawia, że wydają się bardziej interaktywne.

Efekt paralaksy można zastosować na stronach docelowych, w długich treściach, na stronach sprzedaży lub na stronie głównej witryny biznesowej.

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

Wiele motywów WordPress premium zawiera wbudowany efekt paralaksy na stronie głównej. Możesz również użyć tego efektu w większości kreatorów stron WordPress metodą przeciągnij i upuść.

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

Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać efekt tła paralaksy do dowolnego motywu WordPress. Omówimy kilka różnych metod, a poniższe szybkie linki możesz wykorzystać, aby przejść do tej, której chcesz użyć:

• Metoda 1: Dodaj efekt paralaksy do motywu WordPress za pomocą wtyczki
• Metoda 2: Dodaj efekt paralaksy do motywu WordPress za pomocą CSS
• Bonus: Dodaj wideo z YouTube jako pełnoekranowe tło w WordPress

Metoda 1: Dodaj efekt paralaksy do motywu WordPress za pomocą wtyczki

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

Najpierw musisz zainstalować i aktywować wtyczkę Advanced WordPress Backgrounds. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Ustawienia » AWB z poziomu panelu WordPress. Tutaj możesz zaznaczyć pola wyboru dla przeglądarek lub urządzeń, na których nie chcesz wyświetlać efektu paralaksy.

Na przykład, jeśli nie chcesz pokazywać efektu paralaksy użytkownikom na urządzeniach mobilnych, możesz zaznaczyć to pole.

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

Następnie otwórz wybraną stronę lub post w edytorze bloków Gutenberg.

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

Stąd musisz znaleźć i dodać blok Tło (AWB) do wpisu.

Teraz otwórz panel bloków po prawej stronie ekranu i przejdź do zakładki „Obraz”, jeśli chcesz dodać obraz jako tło paralaksy.

Następnie kliknij przycisk „Wybierz obraz”, aby otworzyć bibliotekę multimediów. Możesz również kliknąć przycisk „Użyj obrazu wyróżniającego”, aby automatycznie dodać obraz wyróżniający jako tło.

Możesz nawet dodać kolor tła lub wideo dla efektu, przełączając się na te zakładki.

Po dodaniu obrazu możesz dostosować jego punkt ostrości z panelu bloków i skonfigurować rozmiar tła. Zalecamy jednak pozostawienie rozmiaru tła jako „Pokryj”.

Następnie możesz użyć suwaka, aby zmienić przezroczystość obrazu.

Po wykonaniu tej czynności przewiń w dół do zakładki „Paralaksa” i rozwiń ją.

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

W naszym przykładzie używamy opcji „Opacity + Scroll”.

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

Możesz teraz dodać akapit, obraz, wideo, cytat lub dowolny inny blok, który chcesz. Ten blok zostanie następnie wyświetlony z efektem paralaksy.

Na koniec kliknij przycisk „Zaktualizuj” lub „Opublikuj” na górze, aby zapisać ustawienia.

Teraz możesz odwiedzić swoją witrynę WordPress, aby zobaczyć efekt paralaksy w akcji.

Metoda 2: Dodaj efekt paralaksy do motywu WordPress za pomocą CSS

Jeśli chcesz użyć pojedynczego obrazu jako tła paralaksy na całej swojej stronie internetowej, ta metoda jest dla Ciebie.

Najpierw musisz przesłać obraz, którego chcesz użyć, do swojej biblioteki multimediów WordPress, odwiedzając stronę Multimedia » Dodaj nowy plik multimedialny.

Po wykonaniu tej czynności musisz skopiować adres URL obrazu, klikając go i otwierając jego podpowiedź „Szczegóły załącznika”.

Po wykonaniu tej czynności musisz dodać niestandardowy kod CSS do plików swojego motywu. Jednak najmniejszy błąd podczas wpisywania kodu może zepsuć Twoją stronę i uczynić ją niedostępną.

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

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź na stronę Fragmenty kodu » + Dodaj fragment z panelu WordPress i kliknij przycisk „Użyj fragmentu” w opcji „Dodaj własny kod (nowy fragment)”.

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

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

Następnie dodaj następujący niestandardowy kod CSS do pola „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; 
} 

Po wykonaniu tej czynności upewnij się, że zastąpiłeś przykładowy adres URL w linii kodu background-image: url adresem URL swojego obrazu.

Ten obraz będzie używany jako tło efektu paralaksy na całej Twojej stronie internetowej.

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

Fragment zostanie automatycznie wykonany na Twojej stronie internetowej po dodaniu do niego kodu HTML.

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

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

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

Gdy już tam będziesz, kliknij ikonę trzech kropek w prawym górnym rogu ekranu, aby otworzyć menu. Następnie wybierz tryb „Edytor kodu”.

Teraz musisz dodać następujący kod HTML w edytorze kodu, umieszczając pomiędzy nim treść efektu paralaksy:

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

Następnie możesz łatwo wrócić do edytora wizualnego, klikając link „Wyjdź z edytora kodu” na górze.

Następnie dodaj resztę treści dla strony lub wpisu w edytorze wizualnym.

Na koniec kliknij przycisk „Zaktualizuj” lub „Opublikuj”, aby zapisać swoje ustawienia.

Teraz po prostu odwiedź swojego bloga WordPress, aby zobaczyć efekt paralaksy w akcji.

Bonus: Dodaj wideo z YouTube jako pełnoekranowe tło w WordPress

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

Może to zapewnić wciągające wrażenia dla użytkowników i zwiększyć atrakcyjność wizualną Twojej witryny WordPress. Pełnoekranowe wideo YouTube jako tło może wywoływać emocje i tworzyć głębsze połączenie z odbiorcami.

Na przykład, jeśli organizujesz konkurs na swojej stronie internetowej, możesz użyć YouTube wideo 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ć wideo w tle, aby zaprezentować wpływ, misję swojej organizacji oraz historie osób lub społeczności, którym służysz. Możesz nawet zaprezentować historie sukcesu w pełnoekranowym wideo w tle.

Aby uzyskać więcej informacji, zapoznaj się z naszym samouczkiem na temat dodawania wideo YouTube jako pełnoekranowego tła 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 swojej witryny WordPress oraz naszą listą najlepszych alternatyw dla Canvy dla grafiki stron internetowych.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.