Slider Revolution: Najlepszy przewodnik

Slider Revolution to dosłownie jedna z najpopularniejszych obecnie wtyczek do WordPressa. Z ponad 400 tysiącami sprzedaży i średnią ocen 4,75 wtyczka udowodniła swoją skuteczność i wielkość.

Revolution Slider: co sprawia, że ​​wtyczka jest tak świetna

Slider Revolution został opracowany przez Themepunch. Ta wtyczka to kreator do tworzenia bogatej, dynamicznej zawartości stron internetowych. Nacisk kładziony jest na „dynamiczny”, ponieważ pozwala budować ekscytujące slajdy dodające ruchu na stronach.

Wtyczka jest dostarczana z łatwym w użyciu kreatorem i mnóstwem opcji. Dobrze dopracowane pakiety ustawień pozwalają użytkownikowi dostosować każdy szczegół suwaka i umożliwiają pracę z zupełnie różnymi rodzajami treści. Suwaki można tworzyć dla osobnych postów, dla całych stron i ich małych części. Aby być bardziej precyzyjnym z wtyczką, możesz stworzyć:

• suwaki obrazu i karuzele
• suwaki polecanych postów
• kanały mediów społecznościowych
• galerie medialne
• bloki bohaterów i pierwsze strony

Powody, dla których powinieneś używać Slider Revolution w swojej witrynie

Z Slider Revolution nie możesz się pomylić. Wszechstronna wtyczka z przyjaznymi dla użytkownika narzędziami to idealne rozwiązanie do tworzenia pięknych sliderów, a oto powody.

Dołączona wtyczka

Dziś prawie każdy motyw WordPress zawiera wtyczkę Slider Revolution. Zazwyczaj pakiet motywów zawiera bezpłatną wersję wtyczki. Dołączona wtyczka jest ograniczona do bardzo podstawowych funkcji, ale nadal bardzo wygodnie jest pobrać motyw wraz z konstruktorem suwaków.

Jeśli jednak chcesz uzyskać dostęp do wielu funkcji wtyczki, masz możliwość zakupu niezależnej wtyczki. Standardowa licencja będzie kosztować 29 USD i można ją uzyskać na rynku Codecanyon.

Za rozszerzoną licencję będziesz musiał zapłacić około 150 USD i uzyskać roczne wsparcie techniczne za jedyne 9 USD.

Tak, wtyczka może cię trochę kosztować, ale nadal możesz tworzyć świetne slidery, nawet mając zwykłą licencję na wtyczkę.

Szablony

Niesamowita wtyczka nie tylko zachwyci Cię narzędziami i funkcjami, ale ma także kolekcję dobrze wyglądających gotowych układów. Wspaniała kolekcja gotowych szablonów i biblioteka bezpłatnych obiektów multimedialnych, których można użyć na slajdzie, uprości i przyspieszy tworzenie slajdu. Możesz wybrać szablon dla dowolnych swoich projektów i zamiast budować slider od zera, możesz zaoszczędzić czas i skorzystać z gotowego układu.

Po prostu zaimportuj wybrany szablon i od razu zacznij tworzyć.

Poza tym uzyskasz dostęp do dużej bezpłatnej biblioteki różnych obiektów, takich jak ikony czcionek, obrazy tła, przezroczyste obiekty PNG, SVG i inne. Możesz ich używać i łatwo wstawiać do slajdów.

Edytor wizualny

Slider Revolution jest dostarczany z niesamowitym edytorem WYSIWYG, który bardzo ułatwia tworzenie i modyfikowanie szablonów suwaków. Wielu właścicieli witryn ma trudności z pisaniem skomplikowanych kodów lub zatrudnianiem do tego zadania osobnego zespołu. Dzięki edytorowi suwaków możesz zaoszczędzić czas i cieszyć się funkcją przeciągania i upuszczania, aby tworzyć wyjątkowe slajdy.

Wtyczka suwaka pozwala być bardziej kreatywnym dzięki suwakom, które tworzysz i łatwo prezentujesz je w swojej witrynie. Będziesz mieć mnóstwo niestandardowych opcji, takich jak budowanie niestandardowej lokalizacji suwaka, wybieranie opóźnienia suwaka, dodawanie przejść, dodawanie warstw multimedialnych i tak dalej. można to zrobić w mgnieniu oka, korzystając z listy rozwijanej. Ponadto wtyczka posiada wiele funkcji nawigacyjnych, które pozwalają zmieniać styl nawigacji oraz dodawać strzałki, punktory, zakładki i miniatury.

Wysoka wydajność

Slider Revolution jest dobrze zakodowany, aby szybko się ładować. Wszystkie aspekty suwaków są zoptymalizowane i korzystają z zaawansowanych opcji debugowania w celu rozwiązania wszelkich problemów, automatycznie ładują podstawowe pliki i skalują się z używanymi funkcjami. Wykorzystuje również inteligentne leniwe ładowanie i jest zoptymalizowany pod kątem SEO.

Responsywne układy

Jednym z największych problemów, z jakimi boryka się wielu twórców stron internetowych, jest brak responsywności suwaków. W rezultacie suwaki te nie działają dobrze na małych urządzeniach lub w ogóle nie są wyświetlane. Responsywność jest istotnym elementem doświadczenia użytkownika. Z powodu ogromnego ruchu pochodzącego z telefonów komórkowych, szkoda, że ​​Twoje suwaki nie będą działać dobrze na innych urządzeniach.

Slider Revolution to nie tylko prosty suwak. Wtyczka jest responsywna, więc niezależnie od tego, jakie slajdy utworzysz, możesz mieć pewność, że zostaną zoptymalizowane pod kątem urządzenia, na którym będą używane.

Slider Revolution zadbał o ustawienie responsywnych punktów przerwania dla każdego suwaka, dzięki czemu każdy projekt wygląda świetnie na różnych urządzeniach i małych ekranach. Niezależnie od wybranej opcji — pojedynczej, karuzeli lub standardowego suwaka, możesz mieć pewność, że będzie wyglądać idealnie na każdym urządzeniu.

Opcje dostosowywania

Kolejną zaletą wtyczki Slider Revolution są jej różnorodne opcje dostosowywania. Możesz ustawić opóźnienia slajdów, wybrać strzałki nawigacyjne, tła paralaksy, dodać warstwy multimediów, wstawić przyciski, ustawić niestandardowe czcionki, dodać marginesy i wiele innych.

Wtyczka Slider Revolution pozwala dostosować wszystko. Aby zaoszczędzić czas, możesz zapisać ustawienia predefiniowane, aby użyć ich później w przejściach slajdów, stylach czcionek i animacjach warstw.

Dodatki do suwaka rewolucji

Chcesz, aby Twoje suwaki były bardziej złożone i urozmaicone dzięki efektom przejścia, animacjom?

Możesz ruszać! Slider obsługuje różne typy treści, takie jak posty na blogu i bieżące posty, umożliwia korzystanie z kanałów z platform społecznościowych, takich jak Twitter, Facebook, Vimeo, YouTube i Instagram. Możesz błyskawicznie dodawać linki, filmy, obrazy i tekst. Za pomocą funkcji Wariacje możesz zbudować bogaty w funkcje i wypełniony informacjami slajd, z którego mogą korzystać odwiedzający.

Bezpieczeństwo

Bezpieczeństwo to jeden z najważniejszych aspektów, jeśli chodzi o strony internetowe. Możesz usłyszeć, że Slider Revolution kilka lat temu ma lukę wojenną. Od tego czasu Themepunch zwiększył ochronę oprogramowania i obecnie korzysta z usług organizacji zewnętrznej, która regularnie kontroluje problemy z wtyczkami. Dzięki temu możesz mieć pewność, że wtyczka jest bardzo bezpieczna.

Pomoc techniczna

Wtyczka zawiera szczegółową dokumentację oraz obszerną sekcję FAQ z najpopularniejszymi pytaniami dotyczącymi wtyczki. Dlatego bardzo łatwo jest zacząć z rewolucją suwakową, nawet jeśli nie masz doświadczenia z nią pracować. Dostępność szczegółowych samouczków ułatwia stworzenie slajdu na stronę internetową dla każdego.

Źródła treści

Wtyczka z powodzeniem radzi sobie z tworzeniem sliderów dla różnych źródeł treści. Niezależnie od tego, czy jest to produkt WooCommerce, czy wspólny post, Slider Revolution ma narzędzia.

Potężne funkcje sprawiają, że ta wtyczka jest numerem 1 dla każdego. Jego podstawową zaletą jest to, że prezentuje kategorię rozwiązania typu „wszystko w jednym”. Nie potrzebujesz żadnych dodatkowych wtyczek, wszystko jest we wtyczce.

Powinniśmy również wspomnieć, że jest niedrogi. Standardowa licencja kosztuje 26 USD. Biorąc pod uwagę liczbę funkcji, które otrzymujesz za tę cenę, Slider Revolution jest najbardziej przystępną cenowo wtyczką do suwaków w branży.

W tym ostatecznym przewodniku omówimy wszystko, od instalacji wtyczki po dodanie nowego slajdu i umieszczenie go na stronie internetowej.

Instalacja wtyczki i podstawowa konfiguracja

Wielu twórców motywów zawiera Slider Revolution w pakiecie motywów.

Jeśli kupiłeś jeden z najlepszych motywów WordPress od StylemixThemes, nie musisz ręcznie instalować wtyczki. Slider Revolution zostanie zainstalowany automatycznie wraz z importem demo.

Jeśli pakiet motywu, którego używasz, nie zawiera wtyczki, musisz ją pobrać i zainstalować ręcznie. Aby otrzymać kopię Slider Revolution, kliknij ten link .

Będziesz musiał kupić wtyczkę. Zaloguj się do swojego konta Envato i dokonaj zakupu. Następnie pobierz plik — wybierz opcję pobierania dla „Tylko instalowalny plik WordPress”.

Teraz musisz dodać nową wtyczkę do swojej witryny. Przejdź do pulpitu nawigacyjnego — Wtyczki > Dodaj nowy . Po zakończeniu instalacji aktywuj wtyczkę.

Gratulacje, wszystko gotowe i możesz zacząć tworzyć swój pierwszy slider!

Jak zaktualizować Slider Revolution

Themepunch wydaje regularne aktualizacje wtyczki slidera. Aby go zaktualizować, otwórz Slider Revolution z pulpitu nawigacyjnego i przejdź do zakładki Aktualizacje. Na tej stronie można znaleźć małą sekcję zatytułowaną „Aktualizacje wtyczek”. Określa się tutaj, jaka wersja wtyczki jest aktualnie zainstalowana na Twojej stronie internetowej oraz jest dostępna wersja do aktualizacji.

Możesz również skorzystać ze standardowego sposobu i przejść do Pulpit > Aktualizacje i stamtąd zainstalować nową wersję wtyczki.

Slider Revolution: Pierwsze kroki

Jeśli używasz suwaka po raz pierwszy, może nie być wystarczająco jasny ze względu na używaną tam terminologię. Istnieją trzy główne elementy, z którymi można się pomylić. Są to moduły, slajdy i warstwy. Każdy z nich może być częścią drugiego, jak również pracować indywidualnie.

Na przykład możesz stworzyć moduł zaprojektowany jako suwak i będzie on zawierał slajdy. Poza tym możesz tworzyć moduły, takie jak menu nawigacyjne lub nagłówki, które wcale nie są suwakami, ale nadal będą zawierać slajdy. Powodem tego jest to, że Slider Revolution został początkowo stworzony jako slider builder, jednak teraz jest również używany jako kompletny edytor stron internetowych. Z jego pomocą możesz więc zbudować znacznie więcej niż proste slajdy.

Związek między modułami, slajdami i warstwami

Moduły to kontenery na Prezentacje, które są kontenerami na Warstwy.

Istnieją moduły zawierające slajdy. Każdy moduł musi mieć przynajmniej jeden slajd. Kiedy tworzysz pusty moduł, pusty slajd jest dodawany automatycznie. Możesz utworzyć dodatkowe slajdy lub dodać wszystko tylko do jednego slajdu. To w pełni zależy od rodzaju tworzonej treści.

Slajd to pojemnik na warstwy. Każdy slajd musi mieć co najmniej jedną warstwę. Po utworzeniu nowego slajdu warstwa tła jest dodawana automatycznie. Ta warstwa jest zawsze tam, można jej zmienić nazwę i uczynić ją niewidoczną, ale nie można jej usunąć. Ten obszar tła można wypełnić warstwami.

Warstwy zawierają elementy wizualne, dźwiękowe lub układu i są dodawane do slajdów. Tekst, przycisk, obraz, dźwięk, wideo, grupa i wiersz to wszystkie typy warstw. Każda warstwa reprezentuje pojedynczy kawałek nośnika. Warstwy można animować w sposób, który najlepiej odpowiada Twoim pomysłom.

Jak korzystać z Slider Revolution: Ustawienia globalne

Jak już wspomnieliśmy, Slider Revolution ma mnóstwo opcji i nie jest to przesada. Dlatego przed przystąpieniem do budowania slidera zalecamy najpierw przejrzeć ustawienia globalne i poznać główne zasady pracy z wtyczką.

Jeśli klikniesz Slider Revolution z pulpitu nawigacyjnego, będziesz mógł otworzyć ekran konfiguracji wtyczki.

Ekran konfiguracji

W górnej części ekranu znajduje się zakładka z następującymi opcjami:

Moduły, aktualizacje, aktywacja, wiadomości, informacje globalne, często zadawane pytania, wsparcie.

Na tym etapie będziemy pracować tylko z dwoma z nich: Modules — aby utworzyć nowy i Globals — aby przyjrzeć się globalnym ustawieniom wtyczek.

Ustawienia ogólne

Zaczniemy od Globals . Ustawienia globalne są podzielone głównie na kilka sekcji:

• Ogólny
• Domyślne punkty przerwania siatki układu
• Czcionki
• Różnorodny

Te ustawienia odpowiadają za domyślne opcje siatki responsywnej, które mają zastosowanie podczas budowania nowego suwaka, ładowania niestandardowych czcionek, tworzenia bazy danych i nie tylko.

Jest tylko kilka opcji, na których musisz się skupić. Po pierwsze, jest responsywność, aby upewnić się, że przyszłe suwaki będą dobrze wyglądać na dowolnych urządzeniach. Oto krótki przewodnik dotyczący urządzeń i ich rozmiarów.

W sekcji Domyślny punkt przerwania siatki układu można ustawić szerokość w pikselach dla różnych typów urządzeń: komputerów stacjonarnych, notebooków, tabletów i urządzeń przenośnych.

Jeśli każde urządzenie ma swój własny rozmiar, wprowadź dokładną szerokość dla każdego typu, aby zapewnić prawidłowe wyświetlanie suwaka.

• Standardowe monitory stacjonarne mają szerokość 1920px.
• Notebooki, w tym wszystkie laptopy, MacBooki i tablety ułożone poziomo, mają około 1600 pikseli szerokości.
• Tablety zorientowane pionowo mają szerokość nie większą niż 778px (bazuje na iPadzie).
• I urządzenia mobilne. To ważna część, ponieważ w dzisiejszych czasach ponad połowa całego ruchu w Internecie jest generowana przez urządzenia mobilne i nie będzie satysfakcjonujące, jeśli użytkownicy nie będą prawidłowo widzieć suwaków na Twojej stronie. Może to być jednak mylące, a powodem tego jest to, że współczesne smartfony mają zupełnie inne rozmiary. Sugerujemy użycie numeru, nie większego niż 500px.

Drugą rzeczą, którą możesz chcieć kontrolować, jest dostęp do suwaka. Opcja Uprawnienia pozwala odmówić dostępu do wtyczki innym użytkownikom z wyjątkiem administratorów i redaktorów.

Teraz możesz zacząć budować swoje slidery! Istnieją trzy opcje, z których możesz skorzystać. Możesz zacząć od zera i zbudować nowy slider, możesz wyeksportować plik z szablonów Slider Revolution lub zaimportować przykładowe slidery dołączone do twojego motywu.

W naszym artykule przyjrzymy się pierwszej opcji i zbudujemy nowy suwak od podstaw. To pozwoli nam zbadać więcej możliwości wtyczki.

Tworzenie nowego slidera

Teraz, gdy skończymy z kilkoma podstawowymi ustawieniami, możemy przystąpić do tworzenia nowego slajdu. Otwórz ustawienia Slider Revolution i kliknij New Blank Module.

Zostaniesz poproszony o przejrzenie krótkiego przewodnika. Kliknij Przewodnik startowy, jeśli chcesz wziąć krótką lekcję. Lub zamknij przewodnik, aby pominąć ten krok.

Twój ekran zostanie podzielony na kilka obszarów: od lewej jest ramka, w której wyświetlana jest cała zawartość, od prawej — to przestrzeń robocza z sekcjami i ustawieniami.

Opcje ogólne

Zacznijmy od Opcji ogólnych . Kliknij ikonę koła zębatego , aby otworzyć ustawienia. Przede wszystkim musimy nazwać nasz moduł. W sekcji Tytuł wprowadź nazwę i powiel ją dla aliasu małymi literami i myślnikami między słowami zamiast spacji.

Alias ​​jest potrzebny do dodania suwaka do strony. Możesz również użyć dostarczonego shortcode, kopiując go i umieszczając na stronie lub poście, w którym chcesz wyświetlić swój suwak.

Następnie możemy dostosować typ oraz wysokość i szerokość obszaru warstwy pulpitu. Te ustawienia znajdują się w zakładce Układ.

Dla typu masz do wyboru trzy opcje:

• Suwak — kilka animowanych slajdów, które obracają się, aby wyświetlić jeden po drugim.
• Scena — pojedynczy slajd, który można wykorzystać jako moduł treści.
• Karuzela — wiele slajdów z widocznymi jednocześnie wieloma slajdami.

Kolejnym ustawieniem, które musimy określić, jest rozmiar. Dostępne są również trzy opcje:

Auto — jest to domyślny parametr, który rozciąga suwak do szerokości głównego kontenera określonej przez motyw WordPress.

Pełna szerokość — opcja suwaka pełnej szerokości rozciąga się od lewej do prawej (nadal musisz zdefiniować wysokość)

Pełny ekran — duże suwaki wypełniające cały ekran, bez względu na rozmiar przeglądarki lub urządzenia.

Dzięki wtyczce Slider Revolution możesz animować każdą część strony w witrynie. Proszę wziąć pod uwagę, że w ten sposób waga Twojej strony zostanie zwiększona, a tym samym jej załadowanie zajmie więcej czasu. W rezultacie może to negatywnie wpłynąć na ranking SEO.

Ustawienia zmiany rozmiaru

Klasyczna lub liniowa zmiana rozmiaru zapewnia odpowiednią kompresję suwaka po skonfigurowaniu ustawień głównego rozmiaru ekranu (na przykład suwak 1000 x 400 pikseli skompresuje się do suwaka 500 x 200 pikseli z czcionkami, obrazami i innymi elementami suwaka).

Inteligentne dziedziczenie umożliwia automatyczne tworzenie rozmiarów urządzeń w oparciu o wybrane ustawienia pulpitu, z możliwością dostosowania.

Konfiguracja niestandardowa lub ręczna pozwala ustawić rozmiar suwaka za pomocą dokładnych pikseli, z możliwością ustawienia rozmiarów suwaka przy różnej szerokości ekranu — na komputerze stacjonarnym, laptopie, tablecie i telefonie.

Reakcja slajdów

Iść dalej. Jeszcze nie skończyliśmy z responsywnością. Istnieje rozmiar obszaru warstwy, w którym można określić szerokość przeglądarki.

Zwykle opcje są domyślnie ustawione na Rozmiary automatyczne i określane są tylko parametry pulpitu. Możesz zrobić to samo dla innych opcji, włączając je.

Ponadto, jeśli włączysz konkretne urządzenie, obszar roboczy (pojemnik na slajdy) zostanie dostosowany do parametrów wybranego urządzenia, co oznacza, że ​​możesz sterować wyświetlaniem suwaka dla konkretnego urządzenia.

Dla każdego urządzenia zostaną określone rozmiary siatki z ustawień globalnych. Siatka to obszar, w którym znajdują się twoje warstwy suwaków. Nie ma ścisłych liczb, które należy wpisać. Po wypróbowaniu kilku opcji dowiesz się, co jest dla Ciebie najlepsze.  

To był dopiero początek, kilka ogólnych opcji, które ułatwią ci dalszą pracę z suwakiem. A kiedy skończysz z tą częścią, możesz przejść do następnego kroku.

Bliższe spojrzenie na opcje

Oprócz opcji ogólnych istnieją trzy inne zakładki, z którymi będziesz często wchodzić w interakcje. Chcemy poprowadzić Cię przez główne ustawienia, z którymi będziesz operować. Zasadniczo tworzenie slajdów uwzględnia kilka elementów zaangażowanych w proces. Są to opcje ogólne, ustawienia nawigacji, opcje slajdów i warstwy.

Nie żartowaliśmy, mówiąc, że Slider Revolution ma mnóstwo opcji. Jest zbyt wiele elementów do omówienia, opiszmy je trochę, a następnie przejrzyjmy bardziej szczegółowo te najważniejsze.

1. Opcje ogólne

Dotknęliśmy już niektórych elementów z opcji ogólnych, takich jak tytuł i układ. Jednak oprócz tego są inne rzeczy, które musisz dostosować.

Podsumowując, opcje Ogólne umożliwiają skonfigurowanie następujących elementów:

Tytuł — aby podać nazwę suwaka.
Układ — wybierz typ suwaka (suwak, scena lub karuzela) i rozmiar (automatyczny, na całej szerokości lub na pełnym ekranie). Pomaga to w edycji szerokości i wysokości obszaru warstwy, pozycji modułu, domyślnego koloru tła lub obrazu i nie tylko.
Treść — określa sposób dodawania treści do slidera. Możesz wybierać spośród 9 źródeł treści.

• Domyślne — tutaj sugerujemy skoncentrowanie się na jednym ważnym parametrze — Czas trwania slajdu (jak długo będzie trwał każdy slajd).
• Ogólne — ta sekcja zawiera ustawienia pokazu slajdów do automatycznego obracania, zatrzymywania po najechaniu myszą, zapętlania slajdów i wybierania wyznaczonego pierwszego slajdu. Tutaj również możesz ukryć lub wyłączyć suwak na urządzeniu mobilnym lub pod określonymi szerokościami pikseli.
• On Scroll — ten pozwala użytkownikom wybierać efekty przewijania, takie jak paralaksa, głębia 3D, oś czasu, zanikanie, rozmycie, skala szarości i inne. Wszystkie efekty mają konfigurowalne ustawienia.
• Spinner — lub preloader, a wtyczka ma 15 opcji spinnera do wyboru.
• Zaawansowane opcje pozwalają włączyć leniwe ładowanie, wybrać obraz zastępczy lub uprościć suwak w starych przeglądarkach.
• CSS/jQuery — tutaj możesz dodać swój własny kod do sliderów. Zauważ, że ten jest lepszy dla profesjonalistów lub użytkowników zaznajomionych z koncepcją programowania i kodowania.
• Jako modalny — ta konkretna opcja jest potrzebna, jeśli chcesz utworzyć suwak, który pojawia się jako wyskakujące okienko lub lightbox i zapewnia opcje pozycji suwaka, koloru okładki i skrótu do użycia podczas wstawiania suwaka modalnego na stronach.
• Skórka — skórka przedstawia ustawienie, które możesz utworzyć i przypisać do warstw tekstu (określa kolor podświetlenia, nagłówka, treści).

Dodatki — tutaj znajdziesz dodatki (uwaga – dodatki są dostępne tylko po wykupieniu własnej licencji typu slider).

2. Opcje nawigacji

Jeśli planujesz dołączyć więcej niż jeden slajd, opcje nawigacji pomogą Ci dodać do suwaka narzędzia nawigacyjne, takie jak punktory, strzałki i przyciski.

Wszystkie opcje obejmują łatwe do dostosowania ustawienia pozycji/wyrównania, rozmiaru, widoczności i globalnego stylu/wstępnych ustawień.

Elementy nawigacji obejmują:

• Postęp — pasek postępu lub kółko, które wizualizuje aktualny postęp slajdu.
• Strzałki — ułatwiają odwiedzającym przeglądanie slajdów.
• Punktory — 14 stylów kropek nawigacyjnych do dodania do slajdu.
• Karty — bardzo przydatne w przypadku suwaków treści, w których potrzebna jest nawigacja po kartach.
• Kciuki — wymagane do wyświetlania miniatury jako opcji nawigacji. Dostępnych jest 5 opcji.
• Poprzedni rozmiar — określa rozmiar obrazu podglądu.
• Dotyk — zawiera opcje przewijania bloków, prędkości i kierunku.
• Klawiatura — możesz włączyć nawigację za pomocą klawiatury (zalecane ze względu na ułatwienia dostępu).
• Mysz — umożliwia sterowanie myszą, takie jak funkcja karuzeli lub przewijanie do tyłu.
• Edytor nawigacji — ta sekcja służy do dostosowywania strzałek, punktorów, tabulatorów lub kciuków za pomocą własnego niestandardowego kodu.

3. Opcje slajdów

Kolejna część ustawień dotyczy opcji slajdów.

• Tło: wybierz tło dla slajdu. Wybierz przezroczysty, kolorowy (możesz dodać gradient), obraz, obraz zewnętrzny lub wideo (YouTube, Video lub HTML5).
• Miniatura: Zdefiniuj miniaturę widoczną przez administratora oraz miniaturę używaną do nawigacji.
• Animacja: wybierz animację przejścia dla swoich slajdów.
• Filtry — 22 różne filtry, które możesz dodać do swoich slajdów.
• Postęp — umożliwia dostosowanie długości slajdu, pauzy i widoczności slajdu.
• Reguły publikowania — kontroluj, czy slajd jest publikowany, czy nie.
• Tagi i łącze — pomaga dodać niestandardowe dane klas, identyfikatorów i HTML do slajdu, a także łącze.
• Parametry — dodaj do 10 niestandardowych parametrów do użycia w slajdach i nawigacji.
• Warstwy pętli — zarządzaj ustawieniami pętli, jeśli suwak ma tylko jeden slajd.
• Przy przewijaniu — dostosuj efekty paralaksy i przewijania dla każdego slajdu.

Dodawanie nowych slajdów

Po zakończeniu ustawiania suwaka i dostosowywania wszystkich opcji nadszedł czas na dodanie nowego slajdu do projektu. Możesz zobaczyć ramkę, która wyświetla zawartość slajdu po jej dodaniu. Teraz jest przezroczysty. Możesz zmienić opcję tła i dodać obraz lub ustawić kolor.

Możesz przesłać obraz ze swojego komputera lub użyć zewnętrznego źródła (poprzez dodanie linku). Możesz także ustawić kolor jako tło zamiast obrazu. Można to zrobić całkiem łatwo.

Wystarczy wybrać opcję Kolorowy z listy rozwijanej Typ w panelu Źródło, a następnie kliknąć przycisk Kolor BG, aby wybrać kolor. Jeśli chcesz użyć wideo, po prostu dodaj źródło.

Dodawanie nowej warstwy do slajdu

U góry ekranu znajdziesz opcję +Dodaj warstwę . Użyj go, aby dodać nową warstwę do slajdu. Dostępnych jest 8 różnych opcji.

Najpopularniejszymi opcjami są jednak obrazy i teksty z obsługą przycisków, jeśli potrzebujesz dodać narzędzia nawigacyjne do suwaka.

Opcje warstw: jak używać

Elastyczność Slider Revolution opiera się na dostępności wielu opcji i możliwości ustawienia każdego szczegółu z osobna, a także dostosowania całego projektu slidera. Warstwy nie są wyjątkiem. Za każdym razem, gdy dodajesz nową warstwę do slajdu, możesz kontrolować każdą jej opcję. W przykładzie dodawania nowego obrazu do slajdu przejrzymy wszystkie parametry, które opcje warstwy pozwalają zmienić.

Jeśli chcesz dodać warstwę obrazu do slajdu, po prostu kliknij Obraz na liście rozwijanej Dodaj warstwę . Następnie prześlij żądany obraz.

Obok ramki znajdziesz różne opcje warstw (treść, styl, rozmiar i pozycja itp.).

Zawartość warstwy wyświetla podstawowe informacje o warstwie. Możesz ustawić lazy loading i zmienić jego typ źródła.

Korzystając z opcji stylu warstwy , będziesz mógł dodać kolorowe tło.

Następna opcja to Odstępy . Odstępy pomagają nam przesuwać warstwę z góry na dół, od lewej do prawej, od dołu do góry i od lewej do prawej. Są one oznaczone literą „M”.

Poz i rozmiar. Ustaw wyrównanie oraz położenie i rozmiar warstwy obrazu. Wyrównanie w pionie i poziomie można łatwo zmienić, wystarczy kliknąć jedną z ikon wyrównania.

Następnie możesz ustawić pozycję za pomocą opcji Odsunięcie pionowe od pozycji wyrównanej. Graj z parametrami X i Y, aby przesunąć warstwę na slajdzie.

Zaawansowane opcje warstw

Zaawansowane opcje stylu umożliwiają obracanie warstwy w poziomie, pionie i centralnie oraz dodawanie cieni do warstw.

Opcje animacji warstw

Animacja to główna opcja w Slider Revolution. Główną ideą wtyczki jest dodawanie do witryny animowanych elementów zamiast statycznych, standardowych wizualizacji.

Opcje animacji dodają ruch do slajdów, za pomocą tej akcji możesz animować slajdy oraz ustawiać animacje pojawiania się i zamykania.

Istnieją dwie linie dla opcji pojawienia się i wyjścia: IN i OUT.

Każda linia zawiera rozwijane menu z różnymi rodzajami animacji. Domyślnie opcja pojawiania się jest ustawiona dla wszystkich warstw. Wypróbuj kilka animacji, aby zobaczyć, jak wygląda na slajdzie i wybierz najlepszą.

Poniższa sekcja jest używana do czasu trwania animacji, luzowania animacji i do definiowania rozpoczęcia animacji . Czas trwania określa, ile czasu zajmuje zakończenie animacji, opcja Start określa czas, po którym animacja zostanie uruchomiona po załadowaniu slajdu. Wygładzanie określa szybkość postępu animacji.

Oś czasu animacji

Jeśli do slajdu dodano wiele warstw, prawdopodobnie nie chcesz, aby pojawiły się wszystkie jednocześnie. Oś czasu animacji Slider Revolution może pomóc w rozwiązaniu tego problemu. Znajduje się tuż pod naszą ramą roboczą.

Domyślny początek klatek dla każdej warstwy jest ustawiony na 0 milisekund, co oznacza, że ​​warstwy pojawią się na ekranie po 0 milisekundach załadowania. Czas pojawiania się jest zwykle ustawiony na 3 sekundy, co oznacza, że ​​warstwa staje się w pełni widoczna po 3 sekundach. Aby zmienić opcje, wybierz warstwę i edytuj ją, określając inną wartość.  

Upewnij się, że ustawiłeś różne wartości dla różnych warstw, aby nie pojawiały się od razu i wyglądały na niechlujne.

Przyjrzyjmy się teraz bliżej opcjom osi czasu

1.Widok listy

Te ikony mogą służyć do ukrywania lub pokazywania warstw oraz ukrywania lub pokazywania wierszy w oparciu o wyrównanie w pionie. Dostęp do tych opcji ma tylko administrator serwisu.

2. Czas trwania osi czasu
Całkowity czas trwania osi czasu jest zdefiniowany w module Opcje ogólne > Ustawienia domyślne. Można go również ustawić indywidualnie w Opcje slajdów > Postęp.

Przeciągając blok na osi czasu w lewo iw prawo, możesz łatwo dostosować długość slajdu. Inną opcją, którą możesz zrobić, jest kliknięcie ikony zegara i edycja jej procentowo.

3. Podgląd osi czasu

Aby wyświetlić podgląd osi czasu, kliknij ikonę Odtwórz lub po prostu przeciągnij bezczynny blok.

4. Zmień nazwy warstw

Aby zmienić nazwę warstwy, kliknij dwukrotnie tekst warstwy na osi czasu i zmień jego nazwę. Możesz także edytować tytuł warstwy w górnej środkowej części Edytora.

5. Warstwy z-index / Kolejność układania

Aby ustawić indeks Z/kolejność układania, wystarczy przeciągnąć warstwy na osi czasu.

6. Animacje

Dla każdej warstwy istnieje animacja wejścia i wyjścia oraz dodatkowe animacje klatek kluczowych. Wszystkie animacje prezentowane są na osi czasu.

Przeciągnij blok animacji, aby dostosować punkt początkowy animacji na osi czasu. I edytuj czas trwania animacji, przeciągając punkt końcowy bloku

Opcje pętli warstw

Zakładka Pętla pozwala tworzyć zapętlone animacje. Możesz wybrać typ animacji, zdefiniować szybkość i dynamikę pętli oraz ustawić czas rozpoczęcia i zakończenia pętli.

Do wyboru jest 8 typów: niestandardowe, pętle wahadłowe, pętle efektów, fala, ruchy, obracanie, przesuwanie i unoszenie się oraz puls. Każda animacja w pętli ma swój własny zestaw opcji.

Wahadło sprawia, że ​​twoja warstwa kołysze się z boku na bok. Wśród opcji, które możesz ustawić, jest stopień końcowy i początkowy — identyfikuje stopnie, pomiędzy którymi animacja wystąpi, oraz punkt początkowy X i Y — ten parametr określa punkt osi, od którego będzie się obracać warstwa, możesz to określić w procentach.

Pętle efektów umożliwiają wybór spośród kilku opcji — Skala szarości, Mrugnięcie, Płaskie i Lithing. Wszystkie efekty wyglądają inaczej, dlatego zalecamy przyjrzenie się każdej opcji, aby wybrać tę, która jest dla Ciebie najlepsza.

Animacja Wave sprawia, że ​​warstwa obraca się ruchem podobnym do ruchu fali. Obraca się wokół osi na zewnątrz warstwy. Możesz ustawić Rotation X i Y Point, aby określić położenie osi, wokół której będzie się obracać warstwa, Start Angle, aby określić początkową pozycję animacji i promień dla orbity obrotu.

Pętla Wiggle sprawi, że Twoja warstwa będzie się poruszać z boku na bok – od góry do dołu, od lewej do prawej i odwrotnie. Skorzystaj z listy rozwijanej, aby wybrać odpowiednią opcję.

Pętla Rotating powoduje, że warstwa obraca się wokół ustawionego punktu osi. Warstwa zostanie obrócona i zatoczy pełne koło, jeśli wybierzesz pierwszy element z menu rozwijanego Obracanie — element Obróć.

Aby Twoja warstwa przesuwała się od lewej do prawej, od prawej do lewej, od góry do dołu, po przekątnej, możesz użyć animacji Slide and Hover. Możesz ustawić pozycję początkową i końcową animacji.

Animacja Pulse sprawia, że ​​warstwa jest stale powiększana i pomniejszana. Określ początek i koniec powiększenia. Domyślne wartości to 1 dla początku i końca. Oznacza to, że warstwa pozostanie w 100% swojej wielkości. Innymi słowy, nie będzie animowany. Jeśli wprowadzisz 0,5 dla początku powiększenia, twoja warstwa zacznie się od 50% jej rozmiaru i powiększy się do 100% swojego rozmiaru, a następnie z powrotem do 50% itd.

Opcje aktywowania warstwy

Efekty najechania to podstawa dobrego UX. Efekty najechania zwykle wskazują, że akcja jest wymagana lub wykonana, zwłaszcza że ta metoda jest aktywnie używana z suwakami. Dzięki Slider Revolution możesz zmieniać warstwy, teksty i obrazy po najechaniu myszą.

Dodawanie efektów najechania w Slider Revolution

Najpierw musisz włączyć zawinięcie warstwy. Wybierz warstwę, do której chcesz dodać efekt, i kliknij na wskaźniku myszy w obszarze Opcje warstwy. Kliknij Włączone, aby go włączyć.

Poniżej znajdziesz wszystkie opcje potrzebne do ustawienia zachowania warstwy po najechaniu myszą. Jeśli zostawisz wszystko tak, jak jest, warstwa nie pokaże żadnych zmian.

Ustawienia kursora

Pierwszą rzeczą, którą możesz tutaj ustawić, jest Kursor. W rozwijanym menu możesz znaleźć różne opcje dla Kursora. Auto i Default pełnią te same funkcje i nie będą odzwierciedlać żadnej różnicy. Krzyżyk i wskaźnik definiują kształt kursora myszy na ekranie.

Tutaj jest jeszcze więcej stylów kursora. Niektóre z nich są dość nietypowe, jednak większość z nich wskazuje na działanie warstwy po uruchomieniu. Na przykład, jeśli łączysz warstwę z Centrum pomocy, możesz wybrać kursor Pomoc.

Zdarzenie wskaźnika domyślnie jest ustawione na Auto. Żadna opcja nie jest używana, gdy nie ma powiązanych treści. Ta sekcja pozwala wybrać wygląd kursora po najechaniu na warstwę, włączyć animację i skonfigurować.

Animacja najechania

Następnie jest animacja najechania, którą możesz ustawić w zależności od swoich preferencji. Jest kilka rzeczy, o których powinieneś wiedzieć. Po pierwsze, nie wygląda to dobrze, gdy warstwa zmienia się po najechaniu kursorem, a przejście następuje za chwilę. Zawsze lepiej, gdy przejście następuje z opóźnieniem. . Domyślnie opóźnienie jest ustawione na 300 ms, zostaw to tak, jeśli ci to odpowiada, lub zmień wartość.

Możesz także ustawić luz dla przejścia. Masz do wyboru kilka opcji.

Filtr

Do swojej warstwy możesz dodać Filtr. Innymi słowy, lirę można do pewnego stopnia zamazać. Opcja jest wyrażona w pikselach. Im wyższa wartość, tym „grubsze” rozmycie.

Styl

Istnieje również część Styl, w której możesz ustawić kolor tła i dostosować obramowanie, a mianowicie zmienić ich kolor i wybrać styl obramowania.

Opcje warstwy przewijania

Opcje On Scroll umożliwiają przesuwanie slajdu podczas przewijania myszy. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Jak stworzyć efekt paralaksy za pomocą suwaka?

Paralaksa to jeden z najpopularniejszych efektów, który sprawia, że ​​strona jest bardziej efektowna i dynamiczna. Prawdopodobnie widziałeś wiele stron internetowych i motywów zintegrowanych z tym konkretnym efektem. A teraz pokażemy, jak możesz zbudować go samodzielnie za pomocą wtyczki Slider Revolution.

Co to jest paralaksa?

Efekt paralaksy można zdefiniować jako efekt, w którym elementy w tle i na pierwszym planie poruszają się z różnymi prędkościami i tworzą iluzję głębi. Zwykle elementy tła poruszają się wolniej

Istnieją różne sposoby na osiągnięcie tego efektu na swojej stronie internetowej. Na szczęście dla nas Slider Revolution posiada wszystkie funkcje, które pomogą Ci osiągnąć efekt paralaksy.

Tworzenie paralaksy w Slider Revolution

Najpierw włącz paralaksę . Przejdź do modułu Opcje ogólne > Włącz przewijanie > Funkcje oparte na przewijaniu > Parallax i ustaw przełącznik Parallax Enabled w pozycji On .

Wtyczka oferuje wiele różnych wartości głębokości. Wybierz ten, który jest dla Ciebie najlepszy. Możesz także wprowadzić własne wartości.

Dodawanie paralaksy do obrazów tła

Aby dodać efekt paralaksy do obrazu tła, przejdź do Opcje slajdów > Przy przewijaniu > Ustawienia paralaksy i 3D , a następnie wybierz preferowaną głębokość z listy rozwijanej.

Przy doborze głębokości obowiązują surowe zasady. Lepiej jest wypróbować różne wartości i zobaczyć, która z nich działa lepiej z twoim suwakiem. Różne głębokości bezpośrednio wpływają i tworzą różne efekty. Dlatego zalecamy ich wypróbowanie, aby zobaczyć wynik.

Dodawanie paralaksy do warstw

W Slider Revolution efekt paralaksy można dodać nie tylko do obrazów tła, ale także do poszczególnych warstw. Wspaniałe w tym efekcie jest to, że daje użytkownikom złudzenie, jeśli kontrolują części suwaka na stronie, po prostu poruszając myszą. Wygląda to naprawdę ładnie na stronie, a ponadto jest bardzo łatwe w konfiguracji.

Wybierz warstwę, przejdź do zakładki Opcje warstwy > Przy przewijaniu > Paralaksa i 3D i wybierz żądany poziom głębi.

W rezultacie otrzymasz warstwę z paralaksą, która aktywuje się podczas ruchu myszy.

Niezależnie od tego, czy jest to obraz tła, czy pojedyncza warstwa, dodanie efektu paralaksy Slider Revolution jest niezwykle łatwe. Chociaż nie każdy slider potrzebuje paralaksy. Używaj go głównie do prostych suwaków, ponieważ dynamiczne z dużą ilością animacji prawdopodobnie radzą sobie lepiej bez tego efektu.

Dodawanie warstwy przycisków

Dzięki Slider Revolution możesz stworzyć i zaprojektować przycisk, który chcesz dodać do swojego slidera w celu nawigacji. Aby to zrobić, najpierw musimy dodać warstwę przycisków do ramki roboczej suwaka.

Po dodaniu przycisku pojawi się on w formie tekstowej, wystarczy go dostosować. Po prawej stronie ekranu można znaleźć wiele opcji wstępnie zaprojektowanych przycisków. Możesz wybrać jeden z nich dla swojego przycisku.

Co więcej, możesz wybrać coś oryginalnego, ponieważ istnieją różne odmiany przycisków odtwarzania, przełączników i innych. Możliwe jest również dodanie efektu cienia i uatrakcyjnienie wyglądu przycisku.

Po wybraniu stylu możesz zmienić ustawienia zaawansowane i dostosować jego wygląd. Wszystkie ustawienia można znaleźć w zakładce Opcje warstw.

Możesz zmienić początkowy wygląd przycisku, zmienić tekst, zmienić jego wyświetlanie po najechaniu kursorem i skonfigurować animacje.

Jak sprawić, by suwak był responsywny?

Na samym początku ustawiliśmy już pewne parametry, aby nasze slajdy były responsywne. To nie wystarczy. W tym celu musisz również upewnić się, że każda warstwa na każdym slajdzie płynnie dostosowuje się do wszystkich urządzeń i rozmiarów ekranu.

Tak więc po dodaniu wszystkich slajdów i warstw do suwaka nadszedł czas, aby dostosować je do wszystkich innych dostępnych urządzeń.

Edytując slajdy w ramce roboczej, ustawiasz je przede wszystkim tak, aby dobrze wyglądały na urządzeniach stacjonarnych. Gdy masz pewność, że wszystko wygląda idealnie na komputerze, możesz zacząć bawić się układami dla innych urządzeń.

Teraz możesz wybrać urządzenie, które chcesz emulować z listy rozwijanej. Włącz urządzenie, które chcesz sprawdzić na wyświetlaczu suwaka. Dostępne urządzenia to: komputer stacjonarny, notebook, tablet, telefon komórkowy.

Możesz modyfikować wszystko dla każdego urządzenia. Na przykład w przypadku warstw tekstowych można ustawić inny rozmiar czcionki, wysokość linii, grubość czcionki i kolor, wszystko w zależności od urządzenia, na którym wyświetlany jest suwak. W przypadku warstwy obrazu, aby zmienić jej rozmiar, należy dodać inną szerokość, a wysokość obrazu zostanie automatycznie dostosowana do szerokości.

Zwróć uwagę na niebieskie obramowania siatki. Definiują one krawędzie urządzenia, z którym aktualnie pracujesz. Jeśli więc którakolwiek z twoich warstw wykracza poza granice, pamiętaj o zmianie ustawień tych warstw.

Na koniec zapisz suwak i sprawdź, jak wygląda na żywo.

Dodawanie suwaka do strony

Wykonałeś dobrą robotę i teraz nadszedł czas, aby zobaczyć, jak Twój slider wygląda na stronie. Aby to zrobić, użyj skrótu Slider Revolution, który utworzyłeś wcześniej. Ten skrót można znaleźć w zakładce Tytuł w sekcji Opcje ogólne.

Lub jeśli otworzysz Slider Revolution z pulpitu nawigacyjnego. Znajdź aktualny moduł i wybierz opcję Osadź.

W wyskakującym okienku wybierz opcję Dla stron i postów i skopiuj krótki kod.

Krótki kod powinien wyglądać tak: [rev_slider alias=”tytuł”][/rev_slider] z „tytułem” opartym na aliasie, który nadałeś suwakowi.

Wyświetlanie suwaka z Elementor

Użycie metody shortcode do wyświetlenia suwaka na stronie jest dość proste. Istnieje jednak sposób, który mógłby być jeszcze prostszy. Wszystkie suwaki, które zbudujesz za pomocą wtyczki Slider Revolution, można wstawić na stronę za pomocą widżetu Elementor. Wybierz stronę, na której chcesz wyświetlić suwak, i otwórz ją za pomocą edytora Elementor. Następnie po prostu przeciągnij i upuść element na ramę roboczą. Na panelu widżetów wyszukaj widżet Slider Revolution 6 i dodaj go do strony. Podczas przeciągania widżetu musisz wybrać suwak, którego chcesz użyć.

Użyj tego sposobu jako alternatywy dla shortcode, ponieważ niektórym właścicielom witryn łatwiej jest pracować z widżetami kreatora stron.

Jak eksportować suwaki

Aby wyeksportować suwak, przejdź do Slider Revolution, klikając odpowiednią kartę z menu pulpitu nawigacyjnego. Zostaną tam wyświetlone wszystkie suwaki, które zaimportowałeś lub utworzyłeś.

Najedź myszą na miniaturę modułu, który chcesz wyeksportować. Kliknij małą strzałkę w prawym dolnym rogu. Spośród wszystkich wyświetlonych opcji wybierz Eksportuj i kliknij na niego.

Zobaczysz okno dialogowe potwierdzenia, które poinformuje Cię, że eksport może trochę potrwać. Kliknij „Tak, wyeksportuj suwak”, aby rozpocząć pobieranie. Po zakończeniu pobierania będziesz mieć plik .ZIP swojego suwaka.

Podsumowując

Prawie wszystkie motywy opracowane przez StylemixThemes zawierają wtyczkę Slider Revolution w pakiecie. Uwielbiamy to potężne oprogramowanie, które daje nam szansę na uatrakcyjnienie, atrakcyjność i interaktywność stron internetowych.

Mamy nadzieję, że nasz przewodnik pomógł lepiej zrozumieć proces budowania suwaka za pomocą tej niesamowitej wtyczki. Jeśli szukasz więcej informacji, śledź stronę główną Slider Revolution.