Tutorial: Jak stworzyć efekt śniegu w kreatorze stron Elementor
Jeśli chciałbyś stworzyć na stronie zimową atmosferę i trochę ożywić jej design, możesz dodać efekt śniegu. Delikatnie opadające płatki śniegu pomogą Ci stworzyć wyjątkową atmosferę i zapewnią rozrywkę odwiedzającym.
Ponadto dobrą wiadomością jest to, że nie musisz podsiadać żadnych specjalnych umiejętności w zakresie kodowania. Wszystko czego potrzebujesz to kreator stron Elementor, dodatek JetTricks do Elementora i odrobinę własnej kreatywności, aby stworzyć atrakcyjny efekt śniegu.
Dodatek JetTricks to wspaniała wtyczka do WordPress kreatora Elementor, która umożliwia tworzenie efektu paralaksy, elementów lepkich, rozwijanych kolumn, podpowiedzi, punktów aktywnych, elementów "Zobacz więcej" itd. Przy pomocy funkcji cząstki przekroju stworzymy efekt śniegu, który doda dynamiczności do ogólnego designu witryny i będzie aktualny przez całą zimę!
Faza przygotowania
Przed rozpoczęciem należy wykonać kilka rzezczy. Najpierw przejdź do panelu kreatora stron Elementor i otwórz sekcję Ustawień, znajdującą się w górnej części panelu w małym niebieskim oknie. Dalej należy kliknąć dowolną pustą sekcję ekranu i przejść do sekcji Edycja.
Następnie otwórz ustawienia Układu i wybierz opcję pełnej szerokości i minimalnej wysokości w sekcjach Szerokość i Wysokość zawartości. W takim przypadku sekcja zajmie całą szerokość strony. Ponadto będziesz mógł ręcznie zmieniać wysokość:
Przejdź do sekcji Zaawansowane i sprawdź czy posiadasz wtyczkę JetTricks. Jeśli już ją pobrałeś, zobaczysz jej zakładkę:
Po kliknięciu na nią, po prostu włącz cząstki:
Poniżej zobaczysz puste pole i małą nutę: Wklej tutaj kod cząsteczki JSON. Wygeneruj go stąd. Jeśli klikniesz link, znajdziesz się tutaj:
Nie bój się, ponieważ nie będziesz musiał niczego kodować. Będziesz musiał wkleić wygenerowany kod w tym pustym polu po stworzeniu efektu. Aby się nie rozpraszać, po prostu wyłącz kartę. Przejdź do ustawień tła strony i włącz opcję Ukryj kartę:
Efekt śniegu: tworzenie i dostosowanie
Jak widać, można wybrać również kolor tła (jego wybór nie zmieni kolor tła Twojej witryny). Ta opcja jest dostępna, ponieważ pokazuje po prostu, jak może wyglądać Twoja witryna, jeśli zmienisz tło.
Główne zmiany można wprowadzić zmieniając parametry w małym oknie z ustawieniami.
Następna sekcja nosi nazwę Interaktywność i zawiera trzy ustawienia: onhover, onclick, i modes. Przejrzmy się co mośżna zmienić z pomocą pierwszych dwóch.
Jeśli klikniesz obok cząstki, zniknie ona z kursora. To samo stanie się z płatkami śniegu, gdy ktoś kliknie obok nich. Aby tego uniknąć, przejdź do opcji onhover i onclick i wyłącz je. Teraz, cokolwiek zrobisz z kursorem w pobliżu cząsteczek, nie zareagują na to.
Teraz przejdź do sekcji Particles, aby dostosować ich ruch.
Na przykład możesz włączyć lub wyłączyć ich ruch, dostosować jego kierunek, sprawić, że spadną prosto lub losowo (jeśli wybierzesz aby spadały prosto, przepłyną ściśle w jednym kierunku, co nie wygląda zbyt naturalnie). Możliwe także dostosowanie prędkości i trybu out (możesz je odbić od dołnej części strony, ale to też nie wygląda naturalnie).
W sekcji Line Linked możesz wyłączyć opcję, która łączy ze sobą płatki śniegu:
Można także zmienić przejrzystość płatków śniegu, ich rozmiar, kolor, kształt, gęstość i liczbę, aby stworzyć naprawdę realistyczny efekt śniegu. Także, aby płatki śniego wyglądały bardziej realistycznie, możesz przejść do ustawień Rozmiar i wybrać opcję "losowo".
Teraz, kiedy stworzyliśmy efekt śniegu, musimy je wyeksportować i po prostu wkleić do kreatora stron Elementor. Wszystko, co musisz zrobić, to pobrać aktualną konfigurację w formacie JSON.
Następnie otwórz go za pomocą Notepad lub innego edytora tekstowego na komputerze. Skopiuj kod i wklej go w puste pole w pliku Elementor > JetTricks > Advanced.
I gotowe! Właście stworzyłeś efekt śniegu! I wcale nie było to takie trudne, prawda?
Przy okazji, jeśli planujesz całkowicie przeprojektować swoją witrynę, dobrym rozwiązaniem stanie się zmiana szablonu. Poniżej zebraliśmy 5 świeżych motywów WordPress na kreatorze stron Elementor, które są dostępne na naszym marketplace.
5 Nowych motywów WordPress na kreatorze Elementor
Challeger
Ten nowy motyw WordPress jest dobrym rozwiązaniem do prezentacji usługi doradczych. Ze względu na jego uniwersalny charakter, można go używać na wiele sposobów. Kreator stron Elementor pozwala na uzupełnienie witryny o różne elementy stylistyczne i widżety.
Fructesh
Ten motyw WordPress poświęcony jest branży dostarczania owoców ekologicznych. Tylko dlatego, że jest to w pełni konfigurowalne rozwiązanie uniwersalne, możliwe jest stworzenie strony dostarczania o dowolnym wyglądzie. Także motyw posiada takie funkcje:
- Dodatek JetElements
- MegaMenu
- 4 Wsptępnie zaprojektowane warianty układu bloga
- Fonty Google
- Różne warianty układu stopek
Ponadto poisada on narzędzie WordPress Live Customizer, które pozwala wprowadzać zmiany i sprawdzać, jak wyglądają na stronie w czasie rzeczywistym.
Minder
Wybierz ten motyw WordPress jako podstawę do tworzenia witryny, jeśli jesteś właścicielem agencji nieruchomości. Z pomocą wtyczki JetElements będziesz mógł stworzyć pełnowartościową stronę z bogatą funkcjonalnością bez posiadania żadnych specjalnych umiejętności w zakresie kodowania.
Możliwe jest zorganizowanie tekstu w najbardziej atrakcyjny sposób dzięki wygodnemu edytorowi tekstu. Można edytować zdjęcia, tworzyć karuzele, skrzynki i galerie. Ponadto można dodawać różne ikony, liczniki, karty, przyciski, alerty i nie tylko - kreator stron Elementor oferuje niemal nieograniczoną funkcjonalność.
BeClinic
Uniwersalny motyw medyczny, który stanie się dobą podstawą do tworzenia strony dla kliniki chirurgii plastycznej,, promowania usług kosmetologicznych, medycyny rodzinnej, sklepu z kosmetykami medycznymi i strony poświęconej usługom medycznym.
Za pomocą funkcji Przeciąganij-i-Upuść kreatora stron Elementor można tworzyć różne strony i uzupełniać je o różne typy treści. Ponadto do zestawu motywu zostały zawarte:
- JetMenu
- Revolution Slider
- 3 nagłówki i 2 stopki
- 4 Wsptępnie zaprojektowane warianty układu bloga
- Fonty Google
- Bonusowe zdjęcia stockowe
Możliwe jest dodanie funkcjonalności e-commerce za pomocą darmowej paczki narzędzi WooCommerce.
Spacew
Ten motyw WordPress na Elementorze pomoże Ci zwiększyć popularność przestrzeni coworkingowej. Tworzenie stron usług, portfeli, różnych sekcji i innych odpowiednich stron i typów treści za pomocą wtyczki JetElements, która jest zawarta do zestawu motywu, jest super szybkie i łatwe.
Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]
Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.
* * *
P. S. Również mnie zapominaj o dwóch gigantach TemplateMonster, które są o 100% kompatybilne z kreatorem Elementor - Monstroid i Monstroid2. Zostały one ostatnio zaktualizowane i mają teraz bardziej atrakcyjne funkcje niż kiedykolwiek wcześniej!
To była ostatnia pomocna wskazówka do tego artykułu. Aby uzyskać więcej przydatnych informacji, bądź na bieżąco z MonsterPost! 🙂
* * *
Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create Animated Snowfall Effect with Elementor.
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.