Jak tworzyć dynamiczne slajdy za pomocą Smart Slider 3 w OceanWP?

Dodanie suwaka do swojej witryny może być dobrym wyborem, ponieważ robi pierwsze wrażenie na odwiedzających. Ale kiedy już zdecydujesz, że chcesz dodać suwaki do swojej strony WordPress, skąd wiesz, który z nich wybrać? Czy możesz z niego swobodnie korzystać? Czy to proste w zarządzaniu? Czy możesz łatwo umieścić go na swojej stronie?

Odpowiedź na wszystkie Twoje pytania brzmi: tak, to możliwe, Smart Slider 3 może to wszystko zrobić: jest całkowicie darmowy, przyjazny dla użytkownika i dobrze współpracuje również z motywem OceanWP.

W tym samouczku pokażę, jak zaimportować suwak demonstracyjny, stworzyć własny inteligentny suwak i jak utworzyć suwak dynamicznego postu za pomocą motywu OceanWP.

Instalowanie inteligentnego suwaka 3

Możesz łatwo zainstalować Smart Slider 3, przechodząc do Wtyczki → Dodaj nowy . Wyszukaj Smart Slider 3, a następnie możesz go zainstalować.

Inną opcją jest to, że możesz pobrać go bezpośrednio ze strony internetowej Smart Slider 3, a następnie możesz go przesłać.

Następnie możesz aktywować Smart Slider 3:

Jak mogę stworzyć swój pierwszy slajd?

Importowanie slidera demonstracyjnego jest świetne, ale chciałbym pokazać, jak możesz zrobić swój własny slider. Pokażę ci, jak buduję pierwszy slajd przykładowego suwaka o pełnej szerokości.

Najpierw wybieram opcję New Slider na desce rozdzielczej, a następnie wybieram tryb pełnej szerokości w wyskakującym okienku.

Ustawiam rozmiar slidera na 1200x600px, a następnie tworzę swój slider.

Następnie dodaję pusty slajd, który ma kolor tła z gradientem liniowym, więc ustawiam go w zakładce Ustawienia slajdu → zakładka tło .

Do budowy slajdu użyję 2 różnych trybów edycji. Jednym z nich jest tryb zawartości, który działa jak kreator stron, dzięki czemu możesz szybko tworzyć slajdy i ma świetne zachowanie responsywne. Drugim trybem edycji jest tryb Canvas , w którym możesz przeciągać swoje warstwy w dowolne miejsce, ale powinieneś zadbać o pozycjonowanie i responsywność.

Na oryginalnym suwaku widać, że po lewej stronie jest treść: nagłówek, tekst i 2 przyciski, a po prawej zdjęcie laptopa, a na tym zdjęciu warstwa wideo YouTube. Ten obraz i wideo zostaną ustawione w trybie płótna, ponieważ w tym trybie możesz umieścić warstwę nad lub pod inną warstwą.

Ustawiłem maksymalną szerokość treści, ponieważ nie chcę tekstu o pełnej szerokości w linii bez przerw i nie potrzebuję treści po prawej stronie – wideo będzie tam. Więc ustawię go po lewej stronie. A potem wrzucam nagłówek, warstwę tekstową i przyciski do treści. Ustawiam trochę bardziej lewą wyściółkę jak na pozostałych bokach i między warstwami wstawiam mały margines.

Następnie przechodzę do zakładki Projekt w ustawieniach warstwy i ustawiam kolor czcionki oraz rodzinę czcionek. Do przycisku Pobierz podaję link do pobrania i ustawiam efekt najechania.

Możliwości zaprojektowania własnej warstwy jest tak wiele, jak i możesz sprawić, by była responsywna, na przykład możesz ustawić padding z wartością „em”, więc na urządzeniach mobilnych te ustawienia również będą dobre.

Teraz zawartość jest gotowa.

Mam tylko 2 kroki do zakończenia: umieszczam obraz laptopa i warstwę wideo YouTube w trybie Canvas na slajdzie. Po prostu przeciągam go na prawą stronę i dopasowuję.

Myślę, że ta kombinacja laptop + wideo nie jest aż tak ważna dla pojawienia się w urządzeniach mobilnych, więc wyłączam widok mobilny.

Teraz sprawdzam to w widokach responsywnych i widzę, że nagłówek i warstwa tekstowa są większe niż to, czego chcę, więc ustawiam niższą wartość za pomocą skalera rozmiaru czcionki.

Teraz jestem gotowy z pierwszym slajdem. Jeśli chciałbym użyć więcej slajdów do mojego slidera, wystarczy, że zduplikuję ten slider i zmienię wideo lub obraz i podmienię tekst, ponieważ struktura jest już gotowa, więc nie muszę zaczynać od pierwszego krok.

Jak mogę umieścić suwak postu na żywo na mojej stronie głównej?

Jeśli chcesz wyróżnić swój post, dobrym pomysłem jest zrobienie z niego slidera, który zawiera najważniejsze informacje: na przykład tytuł, datę postu oraz zdjęcie, które przyciągnie uwagę odwiedzających i sprawi, że Przeczytaj to.

Dzięki Smart Slider 3 możesz utworzyć suwak dynamicznej zmiany z postu, aby Twoja witryna mogła żyć, ponieważ jeśli udostępnisz nowy post, suwak zmieni się automatycznie.

Pokażę ci przykład, jak możesz to ustawić.

Po zaimportowaniu szablonu WordPress Post Slider o pełnej szerokości dodam nowy dynamiczny slajd, w którym wybiorę opcję Post by filter.

Wybieram kategorię i zamawiam według daty wysłania. Ustawiłem 3 slajdy, aby ostatni 3 Post pojawił się w moim sliderze w wybranej kategorii.

Następnie zapisuję go i mogę dostosować suwak mojego posta.

Domyślnie wyświetlany jest tylko tytuł z wyróżnionym obrazem. Ale to nie jest to, czego potrzebuję, chciałbym użyć przykładowego szablonu, który zaimportowałem. Możesz to zrobić w 3 krokach:

Krok 1: Skopiuj przykładowy slajd

Krok 2 : wklej go do dynamicznego slajdu

Krok 3 : Zmień obraz tła na prezentowany obraz, a zmieni się on dynamicznie.

Otrzymasz motyw i tło dla swojego slajdu dynamiki:

Podobnie można ustawić dynamiczną zmienną dla warstw w ustawieniach warstw. Możesz więc wstawić wiele zmiennych, takich jak tytuł, data, treść, lub możesz również połączyć się z postem.

Możesz ustawić te zmienne, na przykład ustawiłem, że dynamiczna warstwa tekstowa pokazuje tylko 100 znaków mojej treści.

Po utworzeniu dynamicznego suwaka posta musisz wstawić go do motywu OceanWP.

Jak mogę zaimportować gotowy do użycia Slider?

Po aktywacji Smart Slider 3 możesz przejść do menu Smart Slider 3, gdzie zobaczysz pulpit nawigacyjny. Możesz dodać nowy suwak lub wybrać szablon z biblioteki szablonów tutaj. Jeśli chcesz szybko stworzyć slider, najłatwiejszym sposobem jest zaimportowanie Slidera demonstracyjnego.

Smart Slider 3 ma darmowe demo slidery, które możesz łatwo dodać do swojej strony.

W bibliotece szablonów możesz wybrać suwak, którego chcesz użyć, po prostu kliknij przycisk Importuj, a motyw zostanie pobrany do pulpitu nawigacyjnego i możesz go dostosować.

Korzystanie ze slajdów demonstracyjnych

Po dodaniu nowego suwaka lub zaimportowaniu go z szablonów możesz dodać więcej slajdów do suwaka. Wystarczy kliknąć przycisk Dodaj slajd .

Istnieje wiele opcji tworzenia obrazu, wideo lub pustego suwaka, a także możesz dodać suwaki Post i Dynamic lub możesz wybrać nakładkę statyczną, co oznacza, że ​​zawsze będzie nad suwakiem i slajdami i będzie t odłączyć. Na przykład jest to dobry sposób na nawigację.

Możesz również używać slajdów demonstracyjnych na swoim sliderze, istnieje wiele gotowych szablonów, które możesz dostosować. Kliknij opcję Biblioteka i wybierz szablon, z którego będziesz korzystać.

Możesz przełączać się między ciemną lub jasną skórką, a także wybierać spośród kategorii. A po dostosowaniu slajdu możesz zmienić wszystko, nagłówek, tekst, warstwę i tło.

Jak wstawić suwak do motywu OceanWP?

Wstawianie Smart Slider 3 do motywu OceanWP jest bardzo proste:

Możesz użyć skrótu suwaka i łatwo go skopiować i wkleić do posta lub strony.

Lub za pomocą wtyczki OceanWP Extra w Ustawieniach OceanWP możesz umieścić suwak przed / za górnym paskiem, nagłówkiem, tytułem lub stopką.

Jest jeszcze inna opcja, możesz ją dostosować za pomocą Elementora lub innych kreatorów stron za pomocą widżetu Smart Slider 3.

Jak zrobić niestandardowy nagłówek za pomocą Smart Slider 3?

Tworząc niestandardowy nagłówek, możesz użyć kreatora stron, co moim zdaniem jest najłatwiejszym sposobem.

Po prostu przejdź do Panelu motywów → karta Moja biblioteka , a następnie kliknij Dodaj nowy . (Do panelu motywów potrzebujesz wtyczki Ocean Extra, więc powinieneś dodać i aktywować tę zalecaną wtyczkę.) Jeśli używasz kreatora stron Elementor, wybierz szablon Elementor Canvas w Atrybutach postu, a następnie możesz dodać swój suwak do swojego motywu.

Kiedy będziesz gotowy z ustawieniami, przejdź do Wygląd → Dostosuj menu → Nagłówek → Ogólne i wybierz własny nagłówek . A teraz masz własny niestandardowy nagłówek.

Bez narzędzia do tworzenia stron możesz również utworzyć szablon w panelu motywów, używając shortcode.

Ekskluzywna oferta

Zainstalowanie Smart Slider 3 w witrynie WordPress z motywem OceanWP zapewnia dostęp do zestawu zaawansowanych narzędzi do tworzenia niestandardowych treści dla Twojej witryny. Teraz możesz otrzymać 30% zniżki przy zakupie Smart Slider 3 Pro, jeśli użyjesz kuponu SMARTSLIDEROCEANWP30 podczas realizacji transakcji.

Oferta jest ekskluzywna, a kod kuponu jest dostępny tylko przez ograniczony czas. Rozpoczyna się 10 lipca 2018 r. i kończy 17 lipca 2018 r., więc szybko pobierz swoją kopię Smart Slider 3 Pro!

Końcowe przemyślenia

Suwaki mogą być używane na wiele sposobów, powinieneś zdecydować, co chcesz otrzymać. A funkcji jest dużo, o czym nie pisałem. W wersji Pro tworzenie slidera jest bardziej ekscytujące ze względu na animacje, nowe warstwy, efekty paralaksy, efekty dzielenia kształtów i wiele dynamicznych generatorów, takich jak Facebook czy Instagram, dzięki którym możesz ożywić swoją witrynę.