Suwaki treści są obecnie powszechne w WordPress, ale zazwyczaj są używane tylko w bardzo ograniczonym zakresie – zazwyczaj znajdują się na stronach głównych, do prezentowania najnowszych postów lub galerii obrazów. Rozwija się nowy trend, w którym strony internetowe WordPress wykorzystują potencjał i elastyczność suwaków treści do opowiadania wciągających historii, które motywują odwiedzających do podjęcia działania – czyli w formie wycieczek po produktach.
Użycie suwaka treści do prezentacji produktów w WordPress może pomóc w lepszej sprzedaży, prowadząc użytkowników przez kluczowe punkty we własnym tempie – jest to lepsze niż zwykłe użycie wideo, ponieważ mogą oni przewijać do przodu/do tyłu do określonych, zdefiniowanych punktów, zamiast zgadywać czas. Ponadto, użycie suwaka treści w ten sposób wykorzystuje wszystkie rodzaje mediów internetowych – co oznacza, że możesz uwzględnić interaktywne treści w slajdach, zamiast zmuszać użytkownika do pasywnego oglądania wideo.
Do niedawna, aby stworzyć coś więcej niż tylko najprostsze prezentacje produktów za pomocą suwaka treści, trzeba było znać się na kodowaniu, ale my korzystaliśmy z niesamowitego wtyczki suwakowej o nazwie SlideDeck 2, która to zmienia.
Ten potężny plugin sprawia, że tworzenie niesamowitych sliderów jest niezwykle proste w ciągu kilku minut, bez konieczności pisania ani jednej linijki kodu. Omówiliśmy inną solidną funkcję SlideDeck 2 w poprzednim poście, ale ich najnowsza aktualizacja pozwala tworzyć niestandardowe slidery treści i dostosowywać zawartość każdego slajdu, aby tworzyć angażujące prezentacje, które motywują odwiedzających do działania. Przygotowaliśmy ten szybki przewodnik, aby pokazać, jak stworzyć świetną prezentację produktu dla Twojej witryny WordPress za pomocą SlideDeck 2.
Zakup i instalacja wtyczki
Najpierw rzeczy najważniejsze: slajdy niestandardowej treści to funkcja premium w SlideDeck 2, więc będziesz musiał ją kupić, aby używać jej na swojej stronie. Zalecamy odwiedzenie strony internetowej SlideDeck i zakupienie wtyczki – biorąc pod uwagę jej możliwości, jest ona całkiem tania i możesz łatwo zaktualizować, aby uzyskać lepsze funkcje i używać jej na większej liczbie stron.
Aby odblokować funkcję Niestandardowa treść, musisz zakupić pakiet Professional lub Developer, a następnie zainstalować wtyczkę plus „Dodatek”, który odblokowuje dodatkowe funkcje.
Aby zainstalować wtyczkę, możesz skorzystać z naszego pomocnego Przewodnika krok po kroku po instalacji wtyczki WordPress.
Terminologia
Zanim zaczniemy, wyjaśnijmy kilka terminów:
- Typ slajdu – Istnieją 4 różne typy slajdów, z których każdy jest zaprojektowany do obsługi określonego rodzaju treści: obraz, wideo, tekst i HTML.
- Obiektywy – Obiektywy są jak motywy dla twojego suwaka treści. Kontrolują one wygląd i zachowanie suwaka, a także sposób prezentacji treści na stronie. Podobnie jak w przypadku motywów WordPress, zastosowanie innego Obiektywu do twojej treści zajmuje tylko kilka sekund i może przynieść znacząco inny wygląd i styl twojego suwaka.
Dobrze, teraz gdy żargon jest już za nami, przejdź do aktywacji SlideDeck 2 i zacznijmy!
Tworzenie niestandardowego SlideDeck z treścią
Pokażemy Ci, jak stworzyć suwak treści wycieczki produktowej, który miesza cztery różne typy treści, korzystając z funkcji Niestandardowa treść SlideDeck. Zacznij od kliknięcia „Zarządzaj”, aby przejść do głównego pulpitu. Ten ekran pozwala tworzyć nowe SlideDeck i sortować istniejące SlideDeck.
W sekcji Niestandardowa zawartość kliknij niebieski przycisk „Utwórz SlideDeck”. Zostaniesz przeniesiony na ekran Edytora niestandardowej zawartości, aby zbudować swój pierwszy slajd. Po przejściu do Edytora niestandardowej zawartości zacznij od nazwania swojego SlideDeck. Zauważysz, że Twój pierwszy slajd został utworzony i masz wybór między trzema lub czterema różnymi typami slajdów, w zależności od używanego pakietu SlideDeck 2 – użytkownicy pakietu Professional będą mieli dostęp do typów slajdów Obraz, Wideo i Tekst; użytkownicy pakietu Developer będą mogli wybrać typ slajdu HTML oprócz tych trzech.
Pod tym rozwijanym menu znajduje się jedna z najbardziej unikalnych funkcji SlideDeck 2 – okno podglądu na żywo (jest to jeden z powodów, dla których SlideDeck 2 jest polecaną wtyczką WordPress w Planie WPBeginner). Tutaj widzisz, jak Twój slider aktualizuje się w czasie rzeczywistym podczas edycji.
Rozpoczęcie od slajdu z obrazem
Zacznijmy od slajdu obrazkowego – czegoś, co da naszym odwiedzającym szybki i wizualnie angażujący przegląd wycieczki, którą zaraz odbędą. Kliknij na „Typ slajdu” Slajd obrazkowy. Menu wysuwane odświeży się, pokazując wszystkie opcje dotyczące tworzenia slajdu obrazkowego:
Prześlij obraz | Podaj adres URL – Wybierz, czy chcesz przesłać obraz do Galerii mediów WordPress, czy po prostu wkleić adres URL, jeśli jest hostowany gdzie indziej.
Podpis | Tekst główny | Brak – Określ, czy chcesz, aby podpis tekstowy nakładał się na obraz, czy też krótki tekst główny towarzyszył mu. Alternatywnie możesz po prostu wyświetlić cały obraz, bez powiązanego tekstu.
Link do slajdu – Podaj adres URL, który zostanie odwiedzony, jeśli użytkownik kliknie w dowolnym miejscu slajdu.
Tytuł – Nadaj slajdowi tytuł, który będzie wyświetlany w polach podpisu lub tekstu głównego.
Opis – Wprowadź tekst opisu dla slajdu. Możesz wprowadzić tutaj tekst w formacie rich text!
Pozycja podpisu – Określa pozycję nakładki tekstowej na slajdzie. Podpisy mogą znajdować się na górze/na dole, a tekst główny po lewej/po prawej stronie.
Po skonfigurowaniu slajdu zgodnie z własnymi preferencjami, po prostu kliknij przycisk „Zastosuj”, a obszar Podglądu na żywo odświeży się, pokazując Twój pierwszy slajd. W naszym przykładzie zbudowaliśmy nasz slajd, podając adres URL, z podpisem na dole i bez linku do slajdu.
Oto nasz pierwszy niestandardowy slajd z treścią – łatwe, prawda? Teraz dodamy drugi, aby dodać wideo pokazujące demo naszego produktu.
Tworzenie slajdu wideo
SlideDeck 2 obsługuje treści wideo z trzech źródeł – YouTube, Vimeo i Dailymotion – co oznacza, że wystarczy przesłać nasz film demonstracyjny produktu do jednej z tych usług, a następnie wkleić adres URL strony wideo i kliknąć „Zaktualizuj”.
Podobnie jak w przypadku typu slajdu obrazu, możesz wybrać dodanie tytułu i krótkiego podpisu lub akapitu tekstu, aby dać odwiedzającym wyobrażenie o tym, co zobaczą w filmie. Domyślnie SlideDeck 2 pobierze zawartość podpisu, którą masz na swojej stronie YouTube/Vimeo/Dailymotion, ale możesz ją dostosować do swoich potrzeb w prezentacji produktu.
Jak poprzednio, kliknij Zastosuj i szybko przejdź przez suwak – będziesz teraz mógł przełączać się między slajdami z obrazami i filmami.
Tworzenie slajdu tekstowego
Czasami po prostu potrzebujesz miejsca na tekst – na przykład, aby wyświetlić listę funkcji lub udostępnić cytat z pochlebnej recenzji produktu. W takich przypadkach możemy użyć typu slajdu Tekst.
Jest to bardzo prosty typ slajdu, z kilkoma opcjami do rozważenia:
Układ – Podstawowy układ po prostu umieszcza tytuł na górze slajdu, a tekst poniżej. Układ wielokolumnowy zapewnia format bardziej przypominający gazetę, automatycznie dzieląc tekst na dwie kolumny. Cytat blokowy pozwala wyróżnić krótki fragment tekstu dużą, pogrubioną typografią. Jak poprzednio, kliknij Zastosuj, aby dodać slajd do swojego SlideDeck.
Zmiana kolejności slajdów
W tym momencie możesz pomyśleć, że wolałbyś zacząć od slajdu wideo zamiast od obrazu, aby od razu zaangażować użytkowników w wycieczkę. SlideDeck pozwala Ci to zrobić natychmiast – w obszarze nagłówka slajdu kliknij i przeciągnij slajd wideo, a następnie upuść go w podświetlonym miejscu po lewej stronie slajdu z obrazem. Super proste!
Idąc dalej – używanie typu slajdu HTML
Typ slajdu HTML to potężne uzupełnienie pakietu Developer SlideDeck 2, które pozwala na wprowadzanie własnego kodu HTML do slajdu. Jest idealny do bardziej złożonych układów treści lub do dodawania potężniejszych interakcji do suwaka treści. Na przykład możesz osadzić formularz rejestracyjny, dzięki czemu klienci mogą zdecydować się na otrzymywanie biuletynu e-mail na końcu wycieczki produktowej – potężne wezwanie do działania, jeśli kiedykolwiek takie było!
Wybierz typ slajdu HTML, aby wyświetlić edytor HTML w menu wyskakującym.
Do pola Wstaw HTML możesz wkleić swój niestandardowy kod. Zauważysz, że automatycznie koloruje różne tagi, aby pomóc Ci upewnić się, że jest poprawnie ustrukturyzowany. Kilka ważnych punktów do odnotowania:
- Możesz dołączyć reguły stylów CSS dla zawartości slajdu między tagami <style></style>, a będą one obowiązywać we wszystkich slajdach w SlideDeck
- Ponieważ podgląd na żywo SlideDeck nie jest w stanie przewidzieć, jak style Twojego motywu mogą oddziaływać z Twoim suwakiem treści, w przypadku złożonego stylizowania uzyskasz dokładniejszy podgląd, jeśli wyświetlisz go na stronie, na której zamierzasz opublikować swój SlideDeck.
Po umieszczeniu kodu kliknij Zastosuj, a slajd zostanie dodany do rotacji.
Konfiguracja soczewki
Właśnie utworzyłeś swój pierwszy niestandardowy SlideDeck! Poświęć kilka minut na klikanie slajdów w Podglądzie na żywo i rozkoszuj się satysfakcją dobrze wykonanej pracy.
Teraz czas sprawić, by wyglądało to idealnie z Twoją stroną, konfigurując swój Lens. SlideDeck zawiera ogromną liczbę opcji do kontrolowania wyglądu Twojej nowej wycieczki po produkcie poprzez dostosowanie Lensa.
Zapisywanie i publikowanie Twojego SlideDeck
Niesamowita treść? Sprawdzone. Słodki motyw wybrany i dostosowany? Sprawdzone. Wygląda na to, że jesteś gotowy, aby opublikować swoją nową wycieczkę produktową i zamienić odwiedzających w klientów!
SlideDeck oferuje trzy sposoby osadzania suwaków na Twojej stronie WordPress – wstawienie ich do treści istniejącej strony lub wpisu, utworzenie nowej strony lub wpisu z osadzonym suwakiem, a na koniec wstawienie ich do szablonu strony, co jest prawdopodobnie najlepszym rozwiązaniem, jeśli chcesz dodać wycieczkę po produkcie do swojej strony głównej.
Podsumowanie
Chociaż slidery treści są zazwyczaj używane tylko do galerii obrazów lub polecanych postów, SlideDeck 2 daje Ci mnóstwo elastyczności, aby odkryć potencjał sliderów treści w tworzeniu angażujących doświadczeń, które utrzymują zaangażowanie odwiedzających i zachęcają do powrotu. My w WPBeginner gorąco polecamy, abyś to sprawdził! Przykład na żywo, jak używamy niestandardowego SlideDeck, można zobaczyć na naszej stronie Darmowej Konfiguracji Bloga WordPress.
Masz przykład SlideDeck, którym chcesz się podzielić? Daj nam znać w komentarzach! Sprawdź również pierwszą część tej serii, w której pokazujemy, jak tworzyć Dynamiczne Slidery Treści.
Slidery z interfejsem dotykowym to przyszłość projektowania stron internetowych. Pobierz SlideDeck Teraz. Użyj kodu kuponu: WPB-SD2, aby uzyskać 20% zniżki.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.