Tutorial: efekt paralaksowego przewijania w kreatorze stron Elementor
Efekt paralaksowego przewijania, czy efekt parallax scrolling, jest jednym z popularnych efektów wizualnych, który jest powszechnie stosowany przez użytkowników rozwiązań do WordPress. Jest to rodzaj animacji 2D i opiera się ruchu różnych obiektów, zadaniem którego jest wywołanie wrażenia głębi w wyświetlanej stronie. Technika ta wykorzystuje kilka różnych warstw zdjęcia poruszających się na ekranie z różną prędkością.
Oczywiście popularność tego efektu przewijania została spowodowana wieloma korzyściami. Jednak kluczowe powody są następujące:
- Efekt paralaksowego przwijania pozwala stronie wyglądać bardziej atrakcyjnie i skutecznie wyróżniać się spośród innych. Zwykle takie przewijanie ma efekt "wow" i znacznie wzmacnia UX.
- Ta tachnika stanie się dobrym rozwiązaniem, jeśli chciałbyś podzielić stronę na czytelne części lub wyróżnić na stronie różne sekcje lub typy treści. Pozwala ona skupić się na ważnych informacjach i ulepszyć poruszanie się witryną.
Bez wątpienia ten efekt wizualny przyciąga uwagę użytkowników. W dodatku, taże zachęca ich do dłuższego pozostawania na stronie, co ma pozytywny wpływ na współczynnik konwersji.
Efekt paralaksowego przewijania w kreatorze stron Elementor
Teraz pokażę Ci, jak z pomocą kreatora stron Elementor i wtyczki JetTricks (jest dostępna do pobrania na naszym Elementor marketplace) można stworzyć efekt paralaksowego przewijania:
- Otwórz edytor w Elementorze.
- Utwórz nowy układ i przenieś do niego Spacer.
- Utwórz jeszcze jeden 2-kolumnowy układ. Do lewej kolumny dodaj zdjęcie, a do innej - tekst. Dostosuj rozmiar tekstu według swoich życzeń.
- Po zakończeniu przygotowań trzeba sprawić, by te dwa elementy zachodziły jeden na drugi. Wybierz kolumnę z tekstem. Przejdź do karty Advanced > Margin. Usuń obecne wartości marginesów i ustaw potrzebne znaczenia.
- Teraz wybierz kolumnę ze zdjęciem. Wprowadź takie samie zmiany jak i dla kolumny tekstowej, a potem ustaw wartości lewego i górnego marginesu.
- W karcie Advanced przejdź do ustawień JetTricks i włącz efekt Parallax. W razie potrzeby możesz także zmienić szybkość paralaksy. Im wyższe znaczenie ustawisz, tym bardziej zauważalny będzie efekt paralaksowego przewijania.
- Wybierz parametr ‘Invert’. Podczas przewijania strony zobaczysz, że zdjęcie przesuwa się w górę, a tekst - w dół.
- Dla opcji ‘Sticky On’ wybierz punkty Desktop, Tablet i Mobile aby efekt paralaksowego przewijania stał się responsywny.
- Zastosuj te same zmiany do kolumn tekstowych.
- Przejdź do trybu Responsive Mode > Mobile aby sprawdzić jak wygląda efekt i dostosować jego wyświetlenie na urządzeniach przenośnych.
- Wybierz kolumnę ze zdjęciem i przejdź do karty Advanced. Ustaw margines na zero. Te same zmiany wprowadź do kolumny z tekstem. W razie potrzeby zmniejsz nagłówek. Przejdź do karty Style > Typography > Size aby wprowadzić potrzebne zmiany.
- Powróć do ustawień Advanced, usuń wartości marginesów i ustaw górny margines np. - 300.
- Przejdź do witryny, nacisnij F12 i sprawdź, czy efekt działa poprawnie po włączeniu trybu tabletu. Tutaj możesz sprawdzić wygląd strony na różnych gadżetach, w tym iPad'ie i iPhone'ie.
Teraz, gdy już wiesz jak szybko dodać na stronę efekt paralaksowego przewijania, możesz eksperymentować z jego wyglądem i działaniem aby wyniki końcowe w pełni speniali wymagania tożsamości firmowej.
Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: How to Create a Responsive Parallax Scrolling Effect with Elementor.
TOP-5 motywów WordPress z paralaksowym przewijaniem
Bake-a-cake
Motyw WordPress Bake-a-cake WordPress to idealne rozwiązanie do uruchomienia witryn dla piekarni lub kawiarni. Nowoczesny kolorowy design tego motywu pomoże zaprezentować firmę lub lokal w jak najlepszy sposób. Motyw jest oparty na kreatorze stron Elementor, który pozwala lekko tworzyć układy o dowolnej złożoności bez dodatkowego kodowania. Ponadto, ten motyw jest wyposażony w zestaw wtyczek Jet. Np. dodatek JetElements oferuje szeroką gamę zaawansowanych modułów, a JetBlog pozwala stworzyć stylowy blog i bezproblemowo udostępniać na nim artykuły. Także do Twojej dyspozycji - wtyczka JetTricks, która pozwala tworzyć piękne efekty wizualne, w tym paralaksowe przwijanie. W dodatku dostaniesz:
- Wtyczka JetThemeCore do łatwego i szybkiego tworzenia nagłówków i stopek.
- Zestaw niezbędnych stron: Strpna domowa, O nas, Usługi, Galeria i Kontakty.
- Optymalizacja pod kątem urządzeń mobilnych, co zapewni Twojej stronie idealny wygląd na ekranie dowolnego gadżeta.
- Paczka jakościowych zdjęć.
- Wtyczka JetMenu do tworzenia MegaMenu.
- Zestaw wtyczek Cherry.
- WP Live Customizer do wprowadzenia zmian w trybie czasu rzeczywistego.
- Wtyczka TM Timeline.
- Efekt paralaksowego przewijania itd.
FitSpot
FitSpot to wszechstronny motyw WP opracowany specjalnie dla stron dla studia fitness. Ten oparty na kreatorze stron Elementor motyw WordPress zawiera wszystkie niezbędne do promocji w Internecie, prezentowania usług, personelu, programów studio i angapowania klientąw narzędzi. Dzięki zintegrowanemu edytorowi stron Elementor można lekko dostosować wygląd strony bez dodatkowego kodwania. Wszystko, co należy zrobić, to wybrać potrzebny moduł, przeciągnąć go i upuścić na stronę edycji i dostosować dostępne ustawienia. Ponadto motyw jest wyposażony w paczkę wtyczek Jet, a także takie posiada mnóstwo innych funkcji, takich jak:
- Wtyczka JetElements z mnóstwem modułów, uzupełniających podstawowe funkcji kreatora stron Elementor.
- Dodatek JetMenu do łatwego tworzenia MegaMenu z mnóstwen etykiet statusu towarów, ikon itd .
- Wtyczka JetTricks do dodawania "lepkich" elementów, hotspotów, a także takich efektów wizualnych jak paralaksowe przewijanie itd.
- Wtyczka Appointment Booking umożliwia ustanowienie harmonogramu, dzięki czemu Twoi klienci będą mogli wybrać czas spotkania online.
- Wtyczka TM Gallery do atrakcyjnego wyświetlenia towarów w katalogu.
- Zaawansowene widżety w zestawie kreatora stron Elementor, takie jak: Carousel, Google maps itd.
- Wtyczka Ecwid do dodawania sekcji e-sklep i sprzedaży towarów online.
MagIT
Motyw MagIT stanie się idealną podstawą do tworzenia strony dla konferencji IT. Motyw jest wyposażony we wtyczki Jet, uzupełniające podstawową funkcjonalność kreatora stron Elementor. Możesz użyć takich wtyczek jak JetElements, JetBlocks, a nawet JetTricks, która pozwala uzupełnić witrynę o różne efekty wizualne. Wbudowana wtyczka JetThemeCore pomoże lekko tworzyć nagłówki, stopki, sekcje, archiwum i różne rodzaje stron. Te i poniżesze cechy sprawiają, że motyw MagIT jest idealnym rozwiązaniem dla osób, którzy chcieliby skutecznie wypromować konferencji w Internecie:
- Zestaw gotowych niezbędnych stron: Strona domowa, Program i Koncepcja.
- Zestaw tematycznych zdjęć biznesowych.
- Wtyczki JetBlocks i JetTabs do stosowania takich bloków, jak listy wyszukiwania, formularze logowania i rejestracji, łącza autoryzacyjne i implementowanie kart.
- Dodatek JetBlog do tworzenia stylowego bloga z mnóstwem różnych funkcji.
- Szczególowa dokumentacja i dożywotnie wsparcie techniczne.
- Optymalizacja pod kątem SEO.
- Wtyczka Ecwid itd.
Solarin
Ten motyw WordPress na kreatorze stron Elementor jest przeznaczony do tworzenia stron dla firm, zaangażowanych w dziedzinie alternatywnych źródeł energii. Dzięki specjalnym narzędziom, takim jak np. kreator stron z funkcją Przeciągnij-i-Upuść, mośżna szybko i bezproblemowo tworzyć układy, dodawać zawartość i dostosowywać swoją witrynę bez kodowania. Wtyczki JetElements i JetMenu zawarte do zestawu motywu pomogą uzupełnić podstawową funkcjonalność strony. Pierwsza oferuje szeroki wybór zaawansowanych modułów do kreatora Elementor, a druga pozwala stworzyć piękne i funkcjonalne MegaMenu poprzez zaledwie kilku kliknięć. Także, w ramach tego motywu WordPress dostaniesz:
- Responsywny układ zapewnia szybkie dostosowanie designu strony i wszystkich jego elementów do rozmiaru i rozdzielczości ekranu każdego nowoczesnego urządzenia.
- 4 Warianty układu bloga.
- Efekt paralaksowego przewijania pomoże stworzyć na stronie ilujzę głębi w środowisku 2D.
- Manager wyskakujących okienek pop-up i pop-up newslettera.
- Opcja wyszukiwania Live Search itd.
Cryprate
Motyw Cryprate stanie sięświetnym rozwiązaniem do aktualizacji designu bloga na temat finanse, kryptwaluta itd. Jest w pełni responsywnym i bezbłędnie działa na każdym urządzeniu przenośnym. Także ten motyw WordPress jest oparty na kreator stron Elementor i wyposażony w takie wtyczki Jet, jak: JetElements, JetBlog, JetReviews, JetTricks itd. W dodatku to rozwiązanie zawiera następujące narzędzia:
- Dodatek JetBlog do szybkiego tworzenia funkcjonalnego bloga. a
- Wtyczka JetTricks do uzupełnienia strony o atrakcyjne efekty wizualne.
- Dodatek JetReviews pozwalający użytkownikom na ocenę artykułów na stronie i dzielenie się opinią na ich temat.
- Wtyczka JetThemeCore do szybkiego tworzenia nagłówków, stopek i sekcji.
- Optymalizacja pod kątem SEO.
- Efekty paralaksowego przewijania i wideo w tle.
- Funkcja wyświetlania popularnych i polecanych wpisów.
- Wtyczka WPML do szybkiego tłumaczenia treści i uruchomienia wielojęzycznej strony.
Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]
Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.
W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.