Przejdź do głównej treści

Jak dodać efekt paralaksy na każdym tematem WordPress

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Ostatnio jeden z naszych czytelników zapytał nas, jak dodać efekt paralaksy do dowolnego motywu WordPress?

Efekt Paralaksy jest obecnie popularnym trendem w Internecie, w którym obraz tła przewija się wolniej niż wiodąca treść.

W tym samouczku pokażemy, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress.

Ale jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu

Ale wracając do tego, dlaczego tu jesteśmy.

Co to jest efekt Parallax?

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 czyni je interaktywnymi.

Odkryj nasze 25 WordPress motywy z paralaksą do stworzenia strony internetowej

Można zastosować efekt Paralaksy strony docelowe, strony sprzedaży lub strona główna korporacyjnej witryny. To świetny sposób na wyróżnienie różnych sekcji na długiej stronie.

Wiele premium motywy WordPress mają wbudowany efekt paralaksy na swojej stronie głównej. Możesz także użyć efektu paralaksy z większością wtyczek WordPress wizualne tworzenie stron.

Jednak nie wszystkie motywy WordPress mają wbudowany efekt paralaksy i możesz nie chcieć używać wizualnego konstruktora stron tylko dla efektu paralaksy.

Przyjrzyjmy się, jak łatwo dodać efekt paralaksy do dowolnego motywu WordPress.

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

Ta metoda nie wymaga dodania 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ę Zaawansowane tła WordPress, Aby uzyskać więcej informacji, sprawdź nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki musisz zmodyfikować stronę, na której chcesz dodać efekt paralaksy. Zauważysz nowy przyciskZaawansowane tła WordPressNa pasku narzędzi edytora wizualnego.

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

Najpierw musisz wybrać obraz jako tło, a następnie zaznacz opcję „ Rozciągać".

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Następnie musisz kliknąć przycisk Wybierz obraz Aby pobrać lub wybrać 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 aktywować efekt Paralaksa Wybierając rodzaj efektu paralaksy. Istnieje wiele stylów, które możesz eksperymentować. Najczęściej stosowanym efektem paralaksy jest przewijanie.

Kliknij przycisk wstawka aby kontynuować.

Wtyczka doda krótki kod na własną wydawca, Będzie to wyglądać tak:

[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "przewiń" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_parallax_n_mouse_parallax tutaj [/ nk_awb]

Zamień „ ta treść Według własnych treści, a następnie zapisz swoją stronę.

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

Metoda 2: Dodaj efekt „Paralaksy” do dowolnego motywu WordPress za pomocą CSS

Ta metoda wymaga znajomości „HTML / CSS”, a także działania motywów i wtyczek WordPress.

Przede wszystkim musisz przesłać do biblioteki multimediów WordPress obraz, którego chcesz użyć dla efektu paralaksy, odwiedzając media> Dodaj nowy ".

Idź dalej, odkrywając Jak zorganizować media na swoim blogu WordPress

Po pobraniu obrazu musisz skopiować adres URL obrazu, edytując obraz w Bibliotece multimediów WordPress.

Następnie musisz dodać następujący kod HTML na stronie, na której chcesz wyświetlić efekt paralaksy. Możesz również dodać ten kod HTML do swojego Motyw WordPress lub motyw podrzędny.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

div class = "parallax"> <div class = "parallax-content"> Twoja treść tutaj ... </ div> </ div>

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

.parallax {background-image: url ( "http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); wysokość: 100%; przymocowanie tła: stały; pozycja w tle: środek; background-repeat: nie powtarzaj; tło-wielkość: okładka; margin-left: -410px; margin-right: -410px; } .parallax-zawartości {szerokość: 50%; margines: 0 auto; Kolor #FFF; Wypełnienie wierzchołek: 50px; }

Pamiętaj, aby zastąpić adres URL obrazu tła własnym obrazem.

Możesz teraz zapisać zmiany i odwiedzić swoją stronę internetową.

Voila! Teraz możesz dodać efekt paralaksy na swojej stronie WordPress.

Odkryj także niektóre motywy i wtyczki premium WordPress

Możesz użyć innych wtyczek WordPress, aby nadać nowoczesny wygląd i zoptymalizować chwyt swojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Darowizna WooCommerce

Zaakceptuj poprzez to rozszerzenie darowizn na swojej stronie internetowej WooCommerce z kwotami określonymi przez klientów. Będą mogli dać tyle, ile chcą. Każda darowizna może być prezentowana jako jakikolwiek zwykły produkt WooCommerce.


Jeśli klient zignoruje stronę koszyka lub przejdzie bezpośrednio do kasy bez dokonywania darowizny, nad stroną kasy pojawi się link, aby mógł dokonać darowizny.

Każdy etap korzystania z darowizny WooCommerce jest wyjaśniony w dokumentacji ze zrzutami ekranu. Wystarczy aktywować wtyczkę, a znajdziesz w koszyku pole „Dodaj prezent”.

Pobierz | Demo | hosting

2. LinkedIn Więcej

LinkedIn Plus to wtyczka WordPress, która umożliwia prezentowanie swojego profilu LinkedIn na blogu. Działa również w przypadku blogów z wieloma autorami. Dodaje przyciski Follow i Share do twoich publikacji, stron lub widżetów WordPress.

To świetny sposób, aby dodać wszystkie funkcje LinkedIn do swojego bloga i zweryfikować swoją markę wśród konsumentów. Daje to możliwość dostosowania wyglądu, konfiguracji ustawień i włączenia innych zaawansowanych opcji w celu promowania swojego profilu wśród potencjalnych rekrutujących lub pracodawców.

Pobierz | Demo | hosting

3. YouTuber

YouTubeR to wyjątkowa wtyczka WordPress, która umożliwia przesyłanie filmów do serwisu YouTube z Twojej witryny i łatwą integrację filmów, list odtwarzania i kanałów YouTube na swojej stronie.

Dzięki tej wtyczce masz możliwość tworzenia wyjątkowych galerii wideo na swojej stronie.

Inne jego cechy to: możliwość Łatwo przesyłaj filmy do YouTube ze swojej witryny WordPress, osadzając łatwe filmy, listy odtwarzania i kanały YouTube na twojej stronie, obsługa Visual Composer, nieskończone przewijanie list odtwarzania, doskonałe buforowanie, responsywny układ, szczegółowa dokumentacja i więcej.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Pobierz | Demo | hosting

Polecane zasoby

Odkryj inne zalecane zasoby, które będą Ci towarzyszyć w tworzeniu witryny i zarządzaniu nią.

Wnioski

To wszystko! Mamy nadzieję, że okazał się bardzo pomocny. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych.

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

A jeśli masz jakieś sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
6 akcji
udział3
ćwierkanie
Enregistrer3