Jak łatwo stworzyć responsywny slider w WordPress

Czy zdarzyło Ci się kiedyś wejść na stronę internetową i być pod wrażeniem pięknej, przesuwnej galerii na stronie głównej? To świetny sposób na prezentację najlepszych treści, ale sprawienie, by wyglądała dobrze na każdym urządzeniu, może być prawdziwym utrapieniem.

Wiemy, jak frustrujące jest, gdy slider wygląda idealnie na komputerze, ale jest nieporęczny lub zepsuty na smartfonie. Złe wrażenia mobilne mogą łatwo odstraszyć odwiedzających.

Po przetestowaniu dziesiątek narzędzi na naszych własnych stronach znaleźliśmy najprostsze sposoby na tworzenie suwaków, które działają bezbłędnie wszędzie. Nie potrzebujesz żadnych umiejętności kodowania, aby zbudować taki, który przyciągnie uwagę Twoich odwiedzających.

W tym artykule pokażemy kilka łatwych metod dodawania responsywnego suwaka do Twojej witryny WordPress.

Dlaczego warto dodać responsywny suwak WordPress do swojej witryny?

Slider treści lub pokaz slajdów to świetny sposób na wyróżnienie Twoich najpopularniejszych produktów WooCommerce, najnowszych filmów z YouTube, opinii klientów i nie tylko.

Niektóre suwaki odtwarzają się automatycznie, co oznacza, że przechodzą między slajdami samoczynnie. Pozwala to na wyświetlenie dużej ilości informacji na małej przestrzeni, pozostawiając mnóstwo miejsca na inne treści.

Pamiętaj tylko, że kluczem do świetnego suwaka jest używanie wysokiej jakości, ale dobrze zoptymalizowanych obrazów. Dzięki temu Twój suwak będzie wyglądał ostro, nie spowalniając Twojej witryny. 👍

Z tego powodu wiele stron internetowych używa suwaków na swoich najważniejszych stronach, takich jak strona docelowa, strona główna lub strona sprzedaży.

Nawet jeśli suwak jest ustawiony na automatyczne odtwarzanie, odwiedzający zazwyczaj mogą przełączać się między slajdami ręcznie za pomocą przycisków nawigacyjnych. W ten sposób suwak zachęca odwiedzających do interakcji z Twoją witryną, co czyni ją bardziej angażującą.

Na poniższym GIF-ie możesz zobaczyć, jak dynamiczny może być suwak wideo na stronie.

Mając to na uwadze, zobaczmy, jak łatwo można stworzyć responsywny suwak w WordPressie. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć.

• Metoda 1. Tworzenie responsywnego suwaka WordPress za pomocą wtyczki (szybko i łatwo)
• Metoda 2. Tworzenie responsywnego suwaka za pomocą kreatora stron (bardziej konfigurowalne)
• Metoda 3. Tworzenie suwaka za pomocą Smash Balloon (najlepsze dla postów społecznościowych i opinii)
• Często zadawane pytania dotyczące suwaków responsywnych
• Dodatkowe zasoby

Metoda 1. Tworzenie responsywnego suwaka WordPress za pomocą wtyczki (szybko i łatwo)

Jeśli chcesz stworzyć prosty slider, który będzie dobrze wyglądał na komputerach i urządzeniach mobilnych, polecamy wtyczkę Soliloquy.

Ten suwak WordPress pozwala tworzyć slajdy przy użyciu obrazów z biblioteki multimediów, a także wyświetlać filmy hostowane na platformach zewnętrznych, takich jak YouTube.

Możesz również dodać tekst alternatywny i podpisy do każdego slajdu, co jest świetne do tworzenia treści przyjaznych dla SEO.

Najpierw musisz zarejestrować konto Soliloquy. Następnie możesz zainstalować i aktywować wtyczkę Soliloquy na swojej stronie internetowej. Aby uzyskać więcej szczegółów, postępuj zgodnie z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Soliloquy » Ustawienia w panelu administracyjnym WordPressa i wprowadź swój klucz licencyjny.

Klucz można znaleźć, logując się na swoje konto na stronie Soliloquy. Po wprowadzeniu tych informacji kliknij przycisk „Zweryfikuj klucz”.

Po wykonaniu tej czynności możesz dodać nowy suwak do swojej witryny WordPress, przechodząc do Soliloquy » Dodaj nowy.

Możesz zacząć od wpisania tytułu. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek, co pomoże Ci zidentyfikować suwak w panelu administracyjnym WordPress.

Następnie nadszedł czas na dodanie obrazów i filmów do suwaka. Możesz przeciągnąć i upuścić pliki do edytora lub kliknąć „Wybierz pliki z innych źródeł”.

Jeśli chcesz używać obrazów, możesz dodać te pliki w taki sam sposób, jak dodajesz obrazy w edytorze blokowym WordPress.

Jeśli chcesz dołączyć filmy, zalecamy przesłanie ich do serwisu hostingowego wideo, takiego jak YouTube lub Vimeo. Przesyłanie filmów bezpośrednio na Twoją stronę internetową nie jest dobrym pomysłem, ponieważ może spowolnić Twoją stronę i zająć dużo miejsca na dysku.

Tymczasem platformy takie jak YouTube są zoptymalizowane pod kątem wideo, dzięki czemu możesz wyświetlać wideo w wysokiej rozdzielczości w swoich suwakach bez negatywnego wpływu na Twoją stronę internetową.

Po wybraniu platformy do hostowania wideo musisz przesłać wszystkie filmy, które chcesz umieścić w suwaku WordPress. Jeśli nie wiesz, jak przesyłać filmy, zalecamy zapoznanie się z oficjalną dokumentacją lub instrukcją obsługi wybranej platformy wideo.

Po wykonaniu tej czynności kliknij przycisk „Wybierz pliki z innych źródeł”, a następnie wybierz „Wstaw slajd wideo”.

Możesz teraz wkleić adres URL filmu do pola „Adres URL filmu”.

Soliloquy wyświetla wszystkie obsługiwane formaty linków po prawej stronie, więc upewnij się, że Twój link używa jednego z tych formatów.

Po wykonaniu tej czynności możesz wpisać tytuł w polu „Tytuł”. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz. Możesz również dodać tekst alternatywny, który pomoże silnikom wyszukiwania zrozumieć, o czym jest ten slajd.

Następnie możesz wpisać opcjonalny podpis w polu „Podpis”. Zostanie on wyświetlony w szarym pasku u dołu filmu, zanim odwiedzający naciśnie „Odtwórz”.

Jeśli nie chcesz wyświetlać tego paska, po prostu pozostaw pole „Podpis” puste.

Gdy będziesz zadowolony z wprowadzonych informacji, możesz utworzyć więcej slajdów, klikając „Dodaj kolejny slajd wideo”.

Aby skonfigurować ten nowy slajd, po prostu postępuj zgodnie z opisanym powyżej procesem.

Po utworzeniu wszystkich slajdów kliknij „Wstaw do suwaka”.

Teraz zobaczysz wszystkie swoje slajdy w sekcji „Obecnie w Twoim sliderze”.

Następnie możesz kliknąć zakładkę „Konfiguracja” i użyć ustawień suwaka, aby go dostosować. Na przykład możesz wybrać nowy motyw suwaka, zmienić rozmiar obrazu oraz zmienić pozycję suwaka i podpisów.

Możesz również dostosować strzałki suwaka i przycisk pauzy/odtwarzania, dostosować prędkość przejścia, zmienić czas opóźnienia i wiele więcej.

Następnie upewnij się, że Twój slider wygląda równie dobrze na urządzeniach mobilnych, jak i na komputerach i laptopach.

Następnie kliknij zakładkę „Mobilne” i zaznacz pole obok opcji „Utwórz obrazy slidera mobilnego”.

Następnie możesz wpisać rozmiary, których chcesz użyć dla obrazów i filmów na urządzeniach mobilnych. Podejmując te decyzje, pomocne może być wyświetlenie wersji mobilnej Twojej witryny WordPress na pulpicie.

Domyślnie Soliloquy ukrywa podpisy dla użytkowników mobilnych. Często pomaga to slajdom lepiej dopasować się do mniejszych ekranów, zazwyczaj używanych przez smartfony i tablety.

Z tego powodu zalecamy pozostawienie tego ustawienia wyłączonego, ale możesz zaznaczyć pole obok „Pokaż podpisy na urządzeniach mobilnych”, jeśli wolisz.

Po wykonaniu tej czynności kliknij zakładkę „Różne”. Tutaj możesz dodać niestandardowy kod CSS do swojego suwaka, edytować tytuł i slug suwaka oraz wyeksportować suwak.

Gdy będziesz zadowolony z konfiguracji suwaka, kliknij przycisk „Opublikuj”.

Soliloquy automatycznie utworzy krótki kod, który możesz dodać do dowolnej strony, wpisu lub obszaru gotowego na widżety.

Aby uzyskać więcej informacji na temat umieszczania skróconego kodu, zapoznaj się z naszym przewodnikiem jak dodać skrócony kod w WordPress.

Dla zaawansowanych użytkowników Soliloquy udostępnia również fragmenty kodu, które można dodać bezpośrednio do plików motywu WordPress. Ta metoda oferuje bardziej precyzyjną kontrolę, ale jest zalecana tylko wtedy, gdy czujesz się komfortowo z edycją kodu. Dla większości użytkowników najlepszym i najbezpieczniejszym sposobem jest trzymanie się bloku lub shortcode!

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodać niestandardowy kod w WordPressie.

Najprostszym sposobem dodania slidera do Twojej witryny jest użycie bloku Soliloquy w edytorze Gutenberg. Po prostu przejdź do strony lub wpisu, w którym chcesz wyświetlić slider, a następnie kliknij przycisk „+”.

W pojawiającym się oknie wpisz „Soliloquy”.

Gdy pojawi się właściwy blok, kliknij, aby dodać go do swojego bloga lub strony internetowej WordPress.

Następnie otwórz blok Soliloquy i wybierz slider, który właśnie utworzyłeś.

Możesz teraz kliknąć przycisk „Zaktualizuj” lub „Opublikuj”, aby suwak stał się aktywny.

Metoda 2. Tworzenie responsywnego suwaka za pomocą kreatora stron (bardziej konfigurowalne)

Jeśli chcesz stworzyć prosty suwak wideo lub obrazkowy, wtyczka taka jak Soliloquy jest świetnym wyborem. Jednak jeśli chcesz płynnie zintegrować suwak z całkowicie niestandardowym projektem strony, takim jak strona docelowa lub strona główna, zalecamy zamiast tego użycie wtyczki do tworzenia stron.

SeedProd to najlepszy kreator stron WordPress typu przeciągnij i upuść. Pozwala projektować niestandardowe strony docelowe, a nawet tworzyć niestandardowe motywy WordPress bez pisania ani jednej linijki kodu.

Posiada również blok Karuzela Obrazów, którego można użyć do tworzenia oszałamiających sliderów.

Możesz po prostu umieścić ten gotowy blok w dowolnym miejscu na stronie, a następnie dostosować go za pomocą potężnego edytora przeciągnij i upuść.

Najpierw musisz zainstalować i aktywować wtyczkę SeedProd. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki SeedProd poprosi o klucz licencyjny.

Ten klucz licencyjny znajdziesz na swoim koncie na stronie SeedProd. Po wprowadzeniu informacji kliknij przycisk „Zweryfikuj klucz”.

Po wykonaniu tej czynności przejdź do SeedProd » Strony docelowe w swoim panelu WordPress.

1. Wybierz szablon strony

SeedProd oferuje ponad 180 profesjonalnie zaprojektowanych szablonów, które są pogrupowane w kategorie. Na górze zobaczysz kategorie, które pozwalają tworzyć piękne strony „wkrótce”, aktywować tryb konserwacji, tworzyć niestandardową stronę logowania dla WordPress i wiele więcej.

Wszystkie szablony SeedProd są łatwe do dostosowania, dzięki czemu możesz użyć dowolnego projektu. Kiedy znajdziesz szablon, który Ci się podoba, po prostu najedź na niego kursorem myszy i kliknij ikonę zaznaczenia.

Teraz możesz wpisać nazwę swojej strony docelowej w polu „Nazwa strony”. SeedProd automatycznie utworzy „URL strony” na podstawie nazwy strony.

Warto umieścić odpowiednie słowa kluczowe w tym adresie URL, gdzie tylko jest to możliwe, ponieważ pomoże to wyszukiwarkom zrozumieć, o czym jest strona. Może to często poprawić Twoje SEO w WordPressie.

Aby zmienić automatycznie generowany adres URL strony, po prostu wpisz go w polu „Adres URL strony”.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „Zapisz i zacznij edytować stronę”. Spowoduje to załadowanie interfejsu edytora stron SeedProd.

2. Dostosuj układ swojej strony

Kreator typu „przeciągnij i upuść” w SeedProd pokazuje podgląd projektu strony na żywo po prawej stronie. Po lewej znajduje się menu ze wszystkimi różnymi blokami i sekcjami, które można dodać do strony.

Gdy znajdziesz blok, który chcesz dodać, po prostu przeciągnij i upuść go na swój szablon.

Aby dostosować blok, po prostu kliknij, aby wybrać ten blok w edytorze SeedProd. Menu po lewej stronie zaktualizuje się, pokazując wszystkie ustawienia, których możesz użyć do jego dostosowania.

Podczas tworzenia strony możesz przenosić bloki w swoim układzie metodą przeciągnij i upuść. Bardziej szczegółowe instrukcje znajdziesz w naszym przewodniku na temat tworzenia strony docelowej w WordPress.

3. Dodaj i zaprojektuj swój responsywny suwak

Aby utworzyć responsywny slider w SeedProd, po prostu znajdź blok Karuzela obrazów w menu po lewej stronie, a następnie przeciągnij go na swój układ.

Następnie kliknij, aby wybrać blok Karuzela obrazów w edytorze strony.

Teraz możesz dodać wszystkie obrazy, które chcesz wyświetlić w sliderze. Aby zacząć, kliknij element „Obraz 1”, który SeedProd tworzy domyślnie.

Możesz teraz użyć zdjęcia z wbudowanej biblioteki SeedProd lub kliknąć „Użyj własnego obrazu” i wybrać plik z biblioteki multimediów WordPress.

Po wybraniu obrazu możesz dodać podpis, który pojawi się pod tym obrazem. SeedProd domyślnie nie wyświetla podpisów, ale pokażemy Ci, jak je włączyć później w tym poście.

Gdy będziesz zadowolony z konfiguracji slajdu, kliknij przycisk „Dodaj obrazy”, aby utworzyć kolejny slajd.

Aby dodać więcej slajdów, po prostu postępuj zgodnie z powyższym procesem.

Po dodaniu wszystkich obrazów do suwaka, czas dostosować jego wygląd i działanie.

W menu po lewej stronie kliknij, aby rozwinąć sekcję „Ustawienia karuzeli”.

Na początek możesz przełączać się między jasnym i ciemnym trybem przycisków nawigacyjnych suwaka.

Aby wypróbować te różne tryby, kliknij przyciski obok opcji „Tryb koloru nawigacji”. Podgląd na żywo zaktualizuje się automatycznie, dzięki czemu będziesz mógł zobaczyć, który tryb najbardziej Ci się podoba.

Domyślnie karuzela wyświetla pojedynczy slajd, a odwiedzający będą musieli użyć elementów sterujących nawigacją, aby zobaczyć więcej treści.

Możesz jednak chcieć wyświetlić wiele slajdów naraz, otwierając menu rozwijane „Slajd do wyświetlenia” i wybierając liczbę z listy. Może to być przydatne, jeśli slider zawiera dużo treści i obawiasz się, że odwiedzający mogą nie kliknąć wszystkich slajdów.

Domyślnie odwiedzający będą musieli kliknąć, aby zobaczyć następny slajd. Mając to na uwadze, możesz włączyć automatyczne odtwarzanie, ponieważ często zwiększa to liczbę slajdów, które widzi odwiedzający.

Aby to zrobić, kliknij, aby włączyć przełącznik „Autoodtwarzanie”, a następnie określ, jak długo każdy slajd powinien pozostać na ekranie, wpisując liczbę w polu „Prędkość autoodtwarzania”.

Jeśli dodałeś podpisy do swoich obrazów, upewnij się, że klikniesz suwak „Pokaż podpis”, aby zmienić go z „Nie” na „Tak”.

Możesz również zmienić wyrównanie podpisu.

W zależności od koloru tła, może być konieczna zmiana koloru podpisu, zanim będą widoczne dla odwiedzających.

Aby to zrobić, kliknij zakładkę „Zaawansowane”, a następnie użyj ustawień „Kolor podpisu”.

Możesz dalej stylizować tekst, klikając przycisk „Edytuj” obok opcji „Typografia podpisu”.

Dodaje to pewne ustawienia, w których możesz zmienić rozmiar czcionki, wysokość linii, odstępy i inne.

Gdy będziesz zadowolony z wyglądu podpisów, możesz dodać różne cienie pudełek do slajdów, korzystając z listy rozwijanej „Style obrazu suwaka”.

Te cienie mogą naprawdę sprawić, że slajdy będą się wyróżniać, więc warto wypróbować różne cienie, aby zobaczyć, czy pasują do projektu Twojej strony.

W zakładce „Zaawansowane” znajdziesz również ustawienia, które pozwalają dodać obramowanie, zmienić odstępy, a nawet stworzyć animację wejścia.

Zapoznaj się z tymi zaawansowanymi ustawieniami, aby zobaczyć wszystkie różne efekty, które możesz stworzyć. Na przykład, możesz dodać obramowanie, aby Twój suwak się wyróżniał, lub użyć animacji, aby przyciągnąć wzrok odwiedzających! ✨

4. Opublikuj swoją stronę docelową

Gdy będziesz zadowolony z wyglądu slidera, możesz kontynuować pracę nad resztą strony. Po prostu przeciągnij bloki na swój projekt, a następnie dostosuj je za pomocą ustawień w menu po lewej stronie.

Jeśli chcesz usunąć blok, najedź na niego kursorem, a następnie kliknij ikonę kosza, gdy się pojawi.

Po zapytaniu kliknij „Tak, usuń”.

Gdy będziesz zadowolony z wyglądu strony, kliknij przycisk „Zapisz”, aby ją opublikować. Na koniec wybierz „Opublikuj”, aby Twój suwak stał się aktywny.

Metoda 3. Tworzenie suwaka za pomocą Smash Balloon (najlepsze dla postów społecznościowych i opinii)

Chętniej próbujemy rzeczy, które widzimy, jak inni kupują, używają lub polecają. Dlatego dobrym pomysłem jest pokazywanie dowodów społecznych na Twojej stronie internetowej, w tym recenzji klientów, referencji, a nawet pozytywnych komentarzy w mediach społecznościowych.

Najprostszym sposobem na pokazanie dowodu społecznościowego na swojej stronie jest użycie Smash Balloon. Smash Balloon posiada wtyczki, które pozwalają na osadzanie treści z Instagrama, Facebooka, Twittera i YouTube'a.

Posiada również wtyczkę Reviews Feed, której możesz użyć do wyświetlania recenzji z Facebooka, Tripadvisor, Yelp, Trustpilot, WordPress.org i Google.

Jednak wyświetlanie wielu pozytywnych komentarzy i recenzji w Twoim sklepie internetowym lub na stronie internetowej może zajmować dużo miejsca.

Dlatego Smash Balloon jest wyposażony w wbudowane układy karuzeli i szablony, których możesz użyć do tworzenia responsywnych suwaków. Pozwala to na tworzenie pokazów slajdów z mediów społecznościowych i recenzji za pomocą zaledwie kilku kliknięć.

Co więcej, Smash Balloon będzie automatycznie pobierać nowe treści, dzięki czemu slider zawsze będzie wyświetlał najnowsze posty.

Inną opcją jest wyświetlanie treści z Twoich własnych kont mediów społecznościowych.

Jeśli odwiedzającym spodoba się to, co zobaczą, mogą zdecydować się na obserwowanie Cię w mediach społecznościowych.

Aby pomóc Ci zdobyć więcej obserwujących, Smash Balloon oferuje gotowe przyciski wezwania do działania, które możesz dodać do swoich suwaków.

Aby uzyskać szczegółowe instrukcje krok po kroku, zapoznaj się z naszymi poradnikami na temat jak dodać kanały mediów społecznościowych do WordPressa oraz jak wyświetlać recenzje Google, Facebook i Yelp w WordPressie.

Często zadawane pytania dotyczące suwaków responsywnych

Nasz zespół otrzymuje wiele pytań dotyczących używania suwaków w WordPressie. Poniżej znajdują się odpowiedzi na niektóre z najczęściej zadawanych pytań, które słyszymy od naszych czytelników.

Co to jest responsywny slider WordPress?

Responsywny suwak to komponent pokazu slajdów, który automatycznie dostosowuje swój rozmiar i układ do każdego ekranu. Zapewnia to, że wygląda świetnie i jest łatwy w użyciu na komputerach stacjonarnych, tabletach i smartfonach.

Czy slidery są złe dla SEO?

Chociaż źle napisane suwaki mogą spowolnić Twoją witrynę i zaszkodzić SEO, nowoczesne wtyczki są tworzone z myślą o wydajności. Na przykład wtyczka taka jak Soliloquy wykorzystuje ładowanie leniwe i odpowiednią strukturę HTML, aby być przyjazną dla SEO.

Ważne jest również dodanie opisowego tekstu alternatywnego do obrazów slajdów. Pomaga to wyszukiwarkom zrozumieć Twoją treść.

Czy suwaki spowalniają Twoją witrynę?

Suwaki mogą wpływać na czas ładowania strony, jeśli zawierają duże, niezoptymalizowane pliki obrazów. Jednak najlepsze wtyczki do suwaków WordPress są lekkie i zoptymalizowane pod kątem szybkości.

Aby upewnić się, że Twój suwak nie spowolni Twojej witryny, zalecamy kompresję obrazów przed przesłaniem ich do WordPress. Zmniejsza to ich rozmiar pliku bez utraty jakości.

Jaka jest najlepsza responsywna wtyczka do suwaków dla WordPress?

Najlepsty wtyczka zależy od Twoich konkretnych potrzeb. Polecamy Soliloquy jako najlepszy ogólny wybór ze względu na łatwość użycia i szybką wydajność.

Jeśli chcesz tworzyć niestandardowe układy stron, blok Karuzela obrazów SeedProd oferuje większą elastyczność projektowania. Do wyświetlania kanałów mediów społecznościowych lub recenzji klientów w suwaku, Smash Balloon jest idealnym narzędziem.

Dodatkowe zasoby

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo stworzyć responsywny suwak w WordPress. Możesz również sprawdzić te inne przewodniki na naszej stronie:

• Jak stworzyć slider wideo i obrazkowy w WordPress (łatwy sposób)
• Najlepsze wtyczki PDF dla WordPress (przeglądarka, osadzanie i pobieranie)

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.