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 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Niedawno 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ż zawartość pierwszego planu.

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.

Jak dodać efekt paralaksy do dowolnego motywu WordPress e1567702269161

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

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

Efekt paralaksy można zastosować dalej strony docelowe, strony sprzedaży lub strona główna firmowej witryny internetowej. 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: 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ę Zaawansowane tła WordPress, Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki musisz edytować stronę, na której chcesz dodać efekt paralaksy. Zauważysz nowy przycisk "Zaawansowane tła WordPress»Na pasku narzędzi edytora wizualnego.

Dodaj zaawansowane tło WordPress

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

Przede wszystkim musisz wybrać obraz jako tło, a następnie zaznaczyć 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]

Zaawansowane tło okna WordPress

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. Dostępnych jest wiele stylów, z którymi możesz eksperymentować. Najczęściej używanym 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.

Efekt paralaksy na wordpressieMetoda 2: Dodaj efekt „Paralaksy” do dowolnego motywu WordPress z CSS

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

Najpierw musisz przesłać do swojej biblioteki multimediów WordPress obraz, którego chcesz użyć do efektu paralaksy, odwiedzając „ media> Dodaj nowe ".

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

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

Skopiuj adres URL obrazu do 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.

div class = "paralaksa"> Twoje treści tutaj ...

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

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]

.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ą.

Przykład efektu paralaksy Wordpressa

Tutaj jest ! Teraz możesz dodać efekt paralaksy do swojej witryny 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 darowizny za pośrednictwem tego rozszerzenia na swojej stronie WooCommerce z kwotami określonymi przez klientów. To pozwoli im dawać tyle, ile chcą. Każda darowizna może być prezentowana jako jakikolwiek zwykły produkt WooCommerce


Wtyczka do darowizn Woocommerce

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

Każdy krok korzystania z WooCommerce Donation jest wyjaśniony w dokumentacji ze zrzutami ekranu. Po prostu aktywuj wtyczkę, a w koszyku znajdziesz pole „Dodaj darowiznę”.

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.Wtyczka LinkedIn plus LinkedIn wordpress

To świetny sposób, aby dodać wszystkie funkcje LinkedIn do swojego bloga i zweryfikować swoją markę wśród konsumentów. Daje Ci możliwość dostosowania jego wyglądu, konfiguracji ustawień i aktywowania innych zaawansowanych opcji, aby promować swój profil wśród potencjalnych rekruterów lub pracodawców. 

Pobierz | Demo | hosting

3. YouTuber

YouTubeR to wyjątkowa wtyczka WordPress, która umożliwia przesyłanie filmów z YouTube z Twojej witryny i łatwe osadzanie filmów z YouTube, list odtwarzania i kanałów w Twojej witrynie.

Wtyczka youtuber youtube wordpress

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

Inne jego cechy to: możliwość łatwe przesyłanie filmów do YouTube z witryny WordPress, integracja ł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

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać 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

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Powrót do góry