Kompletny przewodnik po suwaku treści

Opublikowany: 2020-04-20

W dzisiejszych czasach próba konkurowania z innymi firmami online może być trudna. Wynika to częściowo z platform takich jak WordPress, Joomla i Magento, które uprościły proces budowania stron internetowych które wyglądają, jakby były prosto z prasy profesjonalnego projektanta stron internetowych (nawet jeśli jest to tylko motyw premium typu plug-and-play).

suwak treści
Suwak treści

Oczywiście nie ma nic złego w posiadaniu strony internetowej, która wygląda świetnie, ale przypomina witryny konkurencji. Jednak strona internetowa musi dokonać konwersji, aby przetrwać, co oznacza pokonanie konkurencji. Jak więc zaprojektować stronę internetową tak, aby wyróżniała się na tle morza sobowtórów? Jednym ze sposobów, aby to zrobić, jest użycie profesjonalnego i responsywnego suwaka treści.

Chociaż suwak treści nie będzie miał sensu dla każdej witryny, jeśli zostanie użyty we właściwym kontekście i dobrze wykonany, może mieć potężny wpływ na odbiorców.

W tym ostatecznym przewodniku po suwaku treści zagłębimy się nieco głębiej w to, czym dokładnie jest suwak treści i co może zrobić dla Twojej witryny. Następnie omówimy, jak używać Smart Slider 3, aby przenieść możliwości suwaka na wyższy poziom.

Czy Twoja witryna powinna mieć suwak treści?

Suwak treści ma wiele nazw: suwak , karuzela , pokaz slajdów i tak dalej. Niezależnie od tego, jak to nazwiesz, element obrotowy działa w ten sam sposób. Wypełnia wyznaczoną przestrzeń w Twojej witrynie - prawie zawsze pełną (lub prawie pełną) szerokość strony - i umożliwia odwiedzającym przerzucanie slajdów w celu konsumowania różnych fragmentów treści we własnym tempie.

Może to być naprawdę pomocny dodatek do Twojej witryny – nie tylko dla Ciebie jako projektanta lub programisty starającego się być sprytnym, jeśli chodzi o wykorzystanie dostępnych nieruchomości, ale także dla odwiedzających.

Za pomocą suwaka treści możesz…

Promuj nowe treści na blogu w dynamiczny sposób, zachowując najnowsze posty z przodu.
Reklamuj najnowsze produkty, promocje lub nowości na stronie głównej.
Opowiedz o tym, co dzieje się teraz w Twojej firmie.

Połącz filmy w jedną przestrzeń, aby odwiedzający wiedzieli, gdzie mogą obejrzeć Twoją kolekcję opowiadań, samouczków itp.
Grupuj powiązane obrazy lub filmy dotyczące produktów, właściwości lub usług, dzięki czemu odwiedzający mogą zobaczyć dla nich różne widoki lub zastosowania bez konieczności przewijania lub przechodzenia do nowych stron.
Zaprezentuj kreatywne portfolio w sposób zwięzły, a jednocześnie całkowicie przyciągający wzrok.
Opowiedz historię lub podaj inną sekwencyjną narrację, którą użytkownicy poczują się zmuszeni do kliknięcia i śledzenia.
Udostępniaj fragmenty tekstu , niezależnie od tego, czy są to zbiory opinii, statystyki dotyczące Twojej firmy, czy inspirujące cytaty z ostatnich opublikowanych historii lub wywiadów.

Dopóki używasz suwaka z właściwych powodów i pozytywnie wpływasz na wrażenia użytkownika, pomagając odbiorcom szybciej i wygodniej przyswajać treści, suwak treści będzie świetnym dodatkiem do Twojej witryny. Podsumowując, to tylko niektóre z korzyści ogólnie związanych z prawidłowym użyciem suwaka treści:

  • Minimalizm: jeśli masz powiązane treści lub multimedia, skonsolidowanie ich w suwaku może pomóc w uporządkowaniu projektu witryny.
  • Użyteczność: ma to również wpływ na zdolność użytkowników do przeglądania treści. Zamiast zmuszać ich do przewijania lub odwiedzania wielu stron, wszystko to znajduje się teraz w jednym wygodnym miejscu i w narzędziu, którym mogą kontrolować tempo.
  • Estetyka: Suwaki dają możliwość popisania się; nie ma znaczenia, czy podkreślasz treść pisemną czy wizualną. Suwaki po prostu sprawiają, że wygląda dobrze.
  • Zaangażowanie: nawet jeśli nie ustawisz suwaka treści na autoodtwarzanie, w momencie, gdy odwiedzający najadą kursorem na przestrzeń i zobaczą wskazówki kierunkowe, spowoduje to, że zaangażują się w suwak, aby zobaczyć więcej.
  • SEO: Ponieważ suwak wymaga od użytkowników poruszania się po większej liczbie slajdów w celu odkrycia nowej treści, zwiększa to ilość czasu spędzanego na Twoich stronach; co prowadzi do poprawy SEO.

Jak widać, można wiele osiągnąć, dodając suwak treści do swojej witryny. Teraz skupmy się na tym, jak to zrobić.

Jak zbudować suwak treści na swojej stronie internetowej za pomocą Smart Slider 3?

Teraz oczywiście zawartość, która pojawia się na twoim suwaku, również odgrywa tutaj kluczową rolę. Nie wystarczy po prostu zdecydować, że przesuwany element będzie fajnie wyglądał na Twojej stronie głównej lub do przechowywania portfolio obrazów. Musisz dowiedzieć się, jaki rodzaj treści umieścić na swoim suwaku.

Nie sądziłeś, że to możliwe, a nawet opcja? Jeśli używasz wtyczki Smart Slider 3, możesz zbudować wszystko, korzystając z dostępnych warstw, typów suwaków, animacji tła i innych funkcji.

Porozmawiajmy więc o różnych rodzajach treści, które można dodać do suwaka, przyglądając się bliżej, jak je dodać za pomocą wtyczki Smart Slider 3. Aby dodać nową warstwę treści do slajdu, kliknij zielony znak plus w lewym górnym rogu:

Wybierz rodzaj treści

Warstwa nagłówka

Warstwa nagłówka jest szczególnie ważna w przypadku slajdów z treścią, ponieważ uporządkowany tekst informuje czytelników, jak ustalić priorytety jego czytania. Innymi słowy, najpierw należy przeczytać większy nagłówek, ponieważ zwykle zawiera on treść slajdu. Dzięki tej warstwie możesz dostosować wszystko, co dotyczy stylizacji tekstu nagłówka, w tym: wiadomość, rodzinę czcionek, rozmiar czcionki, wyrównanie, kolor czcionki, kolor tła, krycie, animację, tekst z hiperłączem i inne.

Warstwa nagłówka
Warstwa nagłówka

Warstwa tekstowa

Następna jest warstwa tekstowa. Nagłówek wprowadza tytuł lub zwięzłe podsumowanie slajdu, a tekst zapewnia głębszy opis. Dzięki tej warstwie masz te same kontrolki, co w warstwie nagłówka. Główna różnica polega na sposobie prezentacji tekstu na różnych urządzeniach i rozmiarach ekranu.

Warstwa tekstowa
Warstwa tekstowa

Warstwa przycisku

W przypadku niektórych projektów suwaków możesz nie potrzebować elementów przycisków (lub wezwania do działania). Ta opcja jest dostępna tylko wtedy, gdy chcesz dać odwiedzającym coś do kliknięcia. Jeśli więc używasz suwaka do promowania produktu, usługi lub chcesz ich czegoś edukować, jest to dobra okazja, aby dodać przycisk, który przekieruje ich do kolejnych kroków i dokona konwersji.

Warstwa przycisku
Warstwa przycisku

Warstwa obrazu

Jeśli nie używasz obrazu lub tła wideo o pełnej szerokości dla swoich slajdów, możesz zamiast tego wypełnić je częściową zawartością obrazu. Po prostu prześlij zdjęcie, którego chcesz użyć, i przeciągnij je na slajd. Treść graficzna może znajdować się obok, na górze, pod i pośrodku treści tekstowej. Od Ciebie zależy, jak chcesz ułożyć slajdy.

Warstwa obrazu
Warstwa obrazu

Warstwa napisów

Nie każdy slajd oparty na obrazie będzie dobrze wyglądał z nakładką tekstu lub nawet ma sens. Zamiast tego, jeśli chcesz zapewnić odwiedzającym jakieś odniesienie do zawartości znajdującej się na slajdzie, ale nie chcesz ingerować w środowisko, możesz dodać warstwę podpisów.

Warstwa YouTube, Vimeo i wideo

Istnieje kilka różnych opcji dodawania treści wideo do slajdów: YouTube, Vimeo i Wideo. Każdy z nich upraszcza proces osadzania treści wideo z innego źródła, dając nawet możliwość przesłania własnego obrazu okładki, aby upewnić się, że wyświetlany zrzut ekranu jest odpowiedni i dobrze wygląda.

Warstwa YouTube
Warstwa YouTube

Ponadto w Smart Slider 3 dostępna jest również opcja warstwy audio na wypadek, gdybyś chciał udostępnić podcast lub bajt dźwiękowy na slajdzie.

Warstwa ikon

Ikony to doskonale zwięzły element, który jednocześnie przekaże odwiedzającym wiele informacji. Zazwyczaj nie są one używane oddzielnie, chyba że do przycisku CTA dodasz ikonę. Zamiast tego znajdziesz grupy ikon, które są reprezentatywne dla wielu różnych usług lub produktów w witrynie internetowej firmy. Dzięki setkom ikon Font Awesome do wyboru w Smart Slider 3 powinieneś znaleźć dokładnie to, czego szukasz.

Warstwa listy

Funkcja warstwy listy przyda się podczas pisania odpowiednich opisów produktów lub tworzenia pokazów slajdów na stronie, aby udostępnić je odwiedzającym. Jest również prosty w użyciu: po prostu wprowadź elementy listy, wybierz styl punktora, a następnie zastosuj ustawienia tekstu, tak jak w innych warstwach tekstu.

Pasek postępu

Pasek postępu to doskonały sposób na graficzne wyświetlanie informacji na slajdzie. Jest to idealne rozwiązanie do podkreślenia umiejętności posiadanych przez członków Twojego zespołu, liczby filiżanek kawy, które wszyscy wypili w zeszłym miesiącu, lub innego ciekawego ciekawostki, którą chcesz przekazać odwiedzającym.

Pasek postępu
Pasek postępu

Oprócz dodawania odpowiedniego typu zawartości do suwaka, pamiętaj o następujących najlepszych praktykach podczas jego projektowania:

  • Niech będzie responsywny: większość suwaków po prostu zmniejsza zawartość. Jednak Smart Slider 3 ma warstwy domyślne, które rozpoznają dostępną przestrzeń i odpowiednio ją dostosowują.
  • Umieść najważniejszą treść na pierwszym lub dwóch suwakach : Badania wykazały, że to właśnie one uzyskują najwięcej wyświetleń i kliknięć, więc nie każ odwiedzającym czekać na dobre treści.
  • Optymalizuj pod kątem wyszukiwania : oprócz korzystania z wtyczki, która sprawia, że ​​suwak płynnie łączy się z resztą projektu witryny, potrzebujesz takiej, która pomoże w pozycjonowaniu. Smart Slider 3 zawiera wszystkie znaczniki i atrybuty HTML, aby ułatwić wyszukiwanie sliderów.
  • Ustaw czas trwania slajdu, który nie jest zbyt szybki ani zbyt wolny : i zawsze pamiętaj, aby dać użytkownikom możliwość samodzielnego kontrolowania szybkości, jeśli ustawienia wstępne im nie odpowiadają.
  • Pamiętaj, że Twoi odbiorcy, marketerzy, a nawet niektórzy programiści są w relacji miłości i nienawiści do suwaków : jeśli chcesz pozostać w ich łaskach, upewnij się, że suwaki zawierają tylko wysokiej jakości, wartościowe i trafne treści.