W artykule:
Niedawno 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.
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. Efekt ten dodaje głębi obrazom tła i sprawia, że są one interaktywne.
Efekt paralaksy może być stosowany na stronach docelowych, długich treściach, stronach sprzedaży lub stronie głównej witryny biznesowej. Jest to świetny sposób, aby wyróżnić różne sekcje na długiej stronie.
Wiele motywów premium WordPress ma wbudowany efekt paralaksy na stronie głównej. Możesz również użyć efektu paralaksy w większości wtyczek do tworzenia stron WordPress.
Jednak nie wszystkie motywy mają wbudowany efekt paralaksy i możesz nie chcieć używać kreatora stron do tworzenia niestandardowych układów stron tylko dla efektu paralaksy.
Przyjrzyjmy się, 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 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ć Advanced WordPress Backgrounds plugin. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz edytować stronę lub post, w którym chcesz dodać efekt paralaksy. Zauważysz nowy przycisk „Zaawansowane tła WordPress” w edytorze wizualnym.
Kliknięcie go spowoduje wyświetlenie 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”.
Następnie musisz kliknąć przycisk „Wybierz obraz”, aby przesłać lub wybrać obraz, którego chcesz użyć. Upewnij się, że używasz dużego obrazu, w przeciwnym razie pojawi się on 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 scroll.
Kliknij przycisk Wstaw, aby kontynuować.
Wtyczka doda teraz shortcode wewnątrz 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_parallax_size=” 30″awb_mouse_parallax_speed=”10000″]
Twoje Treści Tutaj
[/nk_awb]
Zastąp „Twoje treści tutaj” z własną treścią, a następnie zapisz swoją stronę.
Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć ją w akcji.
Metoda 2: Dodaj efekt paralaksy do dowolnego motywu WordPress za pomocą CSS
Ta metoda wymaga uczciwego zrozumienia HTML / CSS, a także sposobu działania motywów WordPress.
Najpierw musisz przesłać obraz, którego chcesz użyć do efektu paralaksy do biblioteki multimediów WordPress, odwiedzając Media ” Dodaj Nowy strona.
Po przesłaniu obrazu musisz skopiować adres URL obrazu, edytując obraz w bibliotece multimediów WordPress.
Następnie musisz dodać następujący kod HTML do strony lub posta, w którym chcesz pokazać efekt paralaksy. Możesz również dodać ten kod HTML do swojego motywu WordPress lub motywu podrzędnego.
< div class = "parallax"> < div class = "parallax-content"> Twoje treści trafiają tutaj... < / div> < / div>
Następnie musisz dodać następujący Niestandardowy CSS do swojego motywu WordPress.
.parallax {
background-image: url("https://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
wysokość: 100%;
tło-załącznik: stałe;
background-position: center;
background-repeat: no-repeat;
tło-rozmiar: okładka;
margin-left: - 410px;
margin-right: - 410px;
}
.parallax-content {
Szerokość: 50%;
margin: 0 auto;
color: # 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ć swoją witrynę, aby zobaczyć je w akcji.
Uwaga: Może być konieczne dostosowanie CSS do układu witryny.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress. Możesz również zobaczyć naszą mega listę najbardziej poszukiwanych wskazówek, sztuczek i hacków WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
