Jak dodać efekt paralaksy do dowolnego motywu WordPress

Ostatnio jeden z naszych czytelników zapytał nas, jak dodać efekt paralaksy do dowolnego motywu WordPress? Efekt paralaksy to trend projektowania stron internetowych, w którym obraz tła przewija się wolniej niż zawartość pierwszego planu. W tym artykule pokażemy, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress.


Dodawanie efektu paralaksy do dowolnego motywu WordPress

Co to jest efekt paralaksy?

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

Efekt paralaksy można zastosować na stronach docelowych, treściach długich, stronach sprzedaży lub stronie głównej witryny firmy. To świetny sposób na wyróżnienie różnych sekcji na długiej stronie.

Wiele wysokiej jakości motywów WordPress ma wbudowany efekt paralaksy na swojej stronie głównej. Możesz także użyć efektu paralaksy w większości wtyczek do konstruktorów stron WordPress.

Jednak nie wszystkie kompozycje mają wbudowany efekt paralaksy i możesz nie chcieć używać programu budującego strony do tworzenia niestandardowych układów strony tylko dla efektu paralaksy.

Zobaczmy, jak łatwo dodać efekt tła paralaksy do dowolnego motywu WordPress.

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

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

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Advanced WordPress Backgrounds. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, w jaki sposób zainstalować wtyczkę WordPress.

Po aktywacji musisz edytować stronę lub post, w którym chcesz dodać efekt paralaksy. W edytorze wizualnym zauważysz nowy przycisk „Zaawansowane tła WordPress”.

Zaawansowany przycisk tła WordPress

Kliknięcie spowoduje wyświetlenie wyskakującego okienka, w którym możesz zmienić różne ustawienia tła, które chcesz dodać.

Najpierw musisz wybrać obraz jako typ tła, a następnie zaznaczyć opcję „rozciągnij”.

Ustawienia tła Paralaksy

Następnie kliknij przycisk „Wybierz obraz”, aby przesłać lub wybierz obraz, którego chcesz użyć. Upewnij się, że używasz dużego obrazu, w przeciwnym razie będzie wyglądał na pikselowany.

Następnie musisz włączyć Paralaksę, wybierając typ paralaksy. Dostępnych jest wiele stylów, z którymi możesz eksperymentować. Najczęściej stosowanym efektem paralaksy jest przewijanie.

Kliknij przycisk Wstaw, aby kontynuować.

Wtyczka doda teraz krótki kod do edytora postów WordPress. Będzie to wyglądać mniej więcej tak:

[nk_awb awb_type = ”image” awb_stretch = ”true” awb_image = ”22 ″ awb_image_size =” full ”awb_parallax =„ scroll ”awb_parallax_speed =” 0,5 ″ awb_mouse_parallax = ”true” awb_mouse_paralsp_sal = ”=”

Twoja treść tutaj

[/ nk_awb]

Zamień „Twoje treści tutaj” na własne treści, a następnie zapisz swoją stronę.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć ją w akcji.

Podgląd efektu paralaksy

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

Ta metoda wymaga dobrego zrozumienia HTML / CSS, a także działania motywów WordPress.

Najpierw musisz przesłać obraz, którego chcesz użyć do efektu paralaksy, do swojej biblioteki multimediów WordPress, odwiedzając stronę Media »Dodaj nowe strona.

Po przesłaniu obrazu musisz skopiować adres URL obrazu, edytując obraz w bibliotece multimediów WordPress.

Skopiuj adres URL obrazu

Następnie musisz dodać następujący kod HTML do strony lub postu, w którym chcesz pokazać efekt paralaksy. Możesz także dodać ten kod HTML do motywu WordPress lub motywu potomnego.

Twoja treść trafia tutaj…

Następnie musisz dodać następujący niestandardowy CSS do motywu WordPress.

.paralaksa {
obraz w tle: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
wysokość: 100%;
załącznik tła: naprawiony;
pozycja tła: środek;
powtarzanie w tle: brak powtarzania;
rozmiar tła: okładka;
margines lewy: -410px;
margines z prawej: -410px;
}

.treść paralaksy {
szerokość: 50%;
margines: 0 auto;
kolor: #FFF;
padding-top: 50px;
}

Nie zapomnij zastąpić adresu URL obrazu tła własnym obrazem tła.

Możesz teraz zapisać zmiany i odwiedzić witrynę, aby zobaczyć, jak działa.

Dodano efekt paralaksy z CSS

Uwaga: może być konieczne dostosowanie CSS do pracy z układem witryny.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Możesz także zobaczyć naszą mega listę najbardziej poszukiwanych wskazówek, sztuczek i hacków WordPress.

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