Jak tworzyć pionowe karty przewijania w WordPress z Elementor

Pionowe karty przewijania pozwalają na pokazanie zawartości zakładki w wysokim, obok siebie. Zakładki pozostają ułożone po lewej lub prawej stronie, podczas gdy zawartość każdej zakładki pojawia się po przeciwnej stronie. Odwiedzający mogą przewinąć w dół zakładki, aby zbadać zawartość w nich.

To utrzymuje stronę w czystości, a ludzie mogą przeglądać wiele informacji bez opuszczania bieżącej strony. Nie tylko możesz wyświetlać teksty, ale także wyświetlać obrazy, filmy i szablony w pionowych kartach przewijania. Użytkownicy mogą kliknąć lub dotknąć zakładki, aby zobaczyć połączoną zawartość, podczas gdy inne sekcje pozostają ukryte.

Elementor to popularny konstruktor stron internetowych bez kodu. Dzięki tej wtyczce możesz zbudować całą stronę internetową od zera, używając jej funkcji przeciągania i upuszczania. W tym samouczek pokażemy, jak tworzyć pionowe karty przewijania w WordPress z Elementor.

Użyj przypadków pionowych kart przewijanych

Pionowe karty przewijające pomagają zorganizować dużą zawartość w małej przestrzeni. Pozwalają odwiedzającym przejść przez tematy bez ładowania nowej strony. Ten układ jest łatwy w użyciu zarówno na komputerze komputerowym, jak i mobilnym. Rzućmy okiem na niektóre przypadki użycia pionowych kart przewijanych poniżej.

A. Szczegóły produktu lub usługi

Możesz wyświetlić wiele opisów produktów lub usług obok siebie. Każda karta może pomieścić specyfikacje, ceny, funkcje lub recenzje. Odwiedzający mogą szybko porównać różne opcje bez opuszczania strony.

B. Często zadawane pytania (FAQ)

Pionowe zakładki są idealne do FAQ. Możesz grupować podobne pytania w ramach jednej zakładki i odpowiedzi pod drugą. Czytelnicy mogą przewijać i kliknąć tylko pytania, które ich interesują.

C. Przewodniki lub samouczki krok po kroku

Jeśli chcesz podzielić się procesem wieloma krokami, pionowe zakładki utrzymują każdy krok w czystości. Użytkownicy mogą kliknąć każdą kartę, aby śledzić przewodnik w kolejności. To sprawia, że ​​nauka jest łatwa i utrzymuje schludność strony.

D. Członkowie zespołu lub profile personelu

Przedstaw swój zespół w profesjonalny sposób, nadając każdemu członkowi zakładkę. Każda karta może pokazać zdjęcie, rolę i krótką biografię. Odwiedzający mogą przewijać listę i dowiedzieć się o wszystkich bez bałaganu. Przeglądaj niektóre z najlepszych przykładów strony zespołu.

mi. Portfolio lub prezentacja projektu

Wyświetl swoją pracę lub projekty w pionowych zakładkach, aby zaoszczędzić miejsce. Każda karta może wyświetlać obrazy, opisy i linki do szczegółów. Pomaga to odwiedzającemu zbadać wiele projektów z jednej strony.

Jak utworzyć pionowe karty przewijania w Elementor

Część teoretyczna się skończyła. Mam nadzieję, że masz teraz wyraźne wyobrażenie o tym, czym jest pionowa karta przewijania i jakie są jej przypadki użycia. Teraz omówimy część samouczka. W tej sekcji wyjaśnimy, jak utworzyć pionowe karty przewijania z Elementor na WordPress. Czytaj dalej!

Warunki wstępne na rozpoczęcie samouczka

Aby utworzyć pionowe karty przewijania w WordPress z Elementor, potrzebujesz następujących wtyczek zainstalowanych i aktywowanych w Twojej witrynie.

• Elementor wolny od
• Happyaddons za darmo
• Happyaddons Pro

Uwaga: Potrzebujesz HappyAddons Pro, ponieważ Elementor nie ma wbudowanej opcji tworzenia kart przewijania. HappyAddons Pro oferuje widżet o nazwie Karty Scroll , które z łatwością pozwala tworzyć pionowe karty przewijające.

Gdy te wtyczki będą gotowe na Twojej stronie, postępuj zgodnie z samouczkiem wyjaśnionym poniżej.

Krok 01: Otwórz stronę z Elementor

Po prostu otwórz stronę z Elementor, gdzie chcesz utworzyć pionowe karty przewijania.

Krok 02: Przeciągnij i upuść widżet kart Scroll na płótnie

Znajdź widżet kart Scroll na panelu elementor. Przeciągnij i upuść na płótnie Elementor.

Widżet kart Scroll jest wyposażony w domyślną zawartość. Po dodaniu widżetu do płótna zobaczysz tę domyślną zawartość.

Krok 03: Rozpocznij dodawanie treści do kart

Możesz dodać treść do widżetu kart Scroll i stylizować układ na wiele sposobów. Poznaj je na tym kroku.

# Dodaj tytuł do widżetu kart przewijania

Każda sekcja internetowa powinna mieć tytuł, który wyraźnie mówi, jaki rodzaj treści zawiera. Musisz więc napisać tytuł sekcji Widżetów kart Scroll.

Przejdź do Content> Tabs Treść> Tytuł . Dostaniesz przestrzeń do napisania tytułu. Widać, że napisaliśmy tytuł „Stylish Watch Insights”.

# Napisz opis widżetu

Napisz pod tytułem, możesz napisać opis widżetu. Jeśli opis nie jest konieczny, możesz go po prostu usunąć.

# Dodaj zawartość do kart

Zabierz kursor na kartę i kliknij go. To rozszerzy kartę i pozwoli dodać treść.

# Napisz tytuł karty

Musisz napisać tytuł dla każdej zakładki . Po rozszerzeniu zakładki otrzymasz pole pod tekstem NAV. Tutaj możesz napisać tytuł na kartę.

# Zmień ikonę zakładki

Możesz usunąć ikonę, jeśli nie jest potrzebna. Ale aby zmienić ikonę, kliknij ikonę, którą można zobaczyć pod ikoną NAV.

Biblioteka ikon zostanie natychmiast otwarta. Wybierz ikonę, którą lubisz i naciśnij przycisk Wstaw .

Widać, że ikona została zmieniona.

# Dodaj zawartość do zakładki za pośrednictwem edytora

Każda karta umożliwia dodanie dwóch rodzajów treści. Możesz wybrać, czy użyć edytora , czy szablonu .

Najpierw wybierzmy opcję edytora .

Korzystając z tego edytora, możesz dodać dowolny rodzaj tekstu i obrazów, które natychmiast będą wyświetlane na płótnie odpowiedniej karty.

# Zmień kolor tła zawartości zakładki

Aby lepiej wyróżnić zawartość w karcie, możesz zmienić jej kolor tła, aby dobrze pasował do wszystkich dodanych treści do karty.

# Dodaj zawartość do karty przez szablon

Jak powiedziano powyżej, widżet pozwala dodawać zawartość do karty za pośrednictwem edytora i szablonu. Spójrzmy teraz, jak dodać zawartość za pomocą szablonów.

Wybierz opcję szablonu z typu treści . Jeśli masz już zaprojektowane wstępnie zaprojektowane szablony w Twojej witrynie, ta opcja będzie odpowiednia.

Kliknij ikonę rozwijaną obok, aby wybrać szablon . Następnie wybierz szablon, który chcesz wyświetlić na karcie.

Widać, że nasz pożądany szablon jest już dodany do zakładki.

W ten sam sposób dodaj zawartość do wszystkich kart widżetu kart Scroll.

Krok 04: Skonfiguruj ustawienia widżetu kart Scroll

Po zakończeniu części treści rozwinąć sekcję Ustawienia .

Będziesz mógł zmienić szerokość panelu nawigatora i wysokość panelu treści, w tym różne korekty wyrównania, z tej sekcji.

# Dostosuj szerokość panelu NAV

Widżet Tabs Scroll ma dwie części - panel Navigator (panel NAV) i panel treści .

Możesz zmienić szerokość panelu Navigator, przeciągając skalę w ramach tej opcji. Możesz także dostosować jego pozycję i wyrównanie. Proces jest pokazany w klipu wideo dołączonym poniżej.

# Dostosuj wysokość panelu sterowania

W ten sam sposób dostosuj wysokość panelu sterowania. Potwierdź także, że treść jest prawidłowo wyrównana pionowo.

Krok 05: stylizuj widżet kart Scroll

Przyjdź do zakładki Style . Najpierw ustawmy kolor tła dla panelu nawigatora .

# Dostosuj typografię treści panelu Nav

Zaktualizuj typografię jeden po drugim, dla każdej zawartości dodanej do panelu Navigator. Możesz zmienić rodzinę czcionki, rozmiar, wagę, wysokość linii itp. W razie potrzeby.

# Stylizuj zakładki

Dodając typ obramowania, szerokość granicy, wyściółka, kolor graniczny, promień granicy, kolor tekstu i kolor tła, możesz stylizować zakładki i przedstawić je jak następujący obraz. Mam nadzieję, że możesz to zrobić sam.

W ten sam sposób poszerz i stylizuj zawartość związaną z panelem treści i sekcją Scroll.

Krok 06: Zoptymalizuj widżet kart Scroll dla telefonu komórkowego

Aby zoptymalizować widżet pod kątem rozmiaru ekranu mobilnego, przejdź do trybu portretu mobilnego w górnym pasku.

Zobaczysz, że zakładki Navigator pojawiają się domyślnie na górze.

# Dostosuj wysokość panelu treści dla urządzeń mobilnych

Istniejąca wysokość może nie wystarczyć do panelu treści. W takim przypadku musisz zwiększyć wysokość, aby cała zawartość w zakładce mogła być idealnie widoczna na rozmiarach ekranu mobilnego.

Krok 07: Zoptymalizuj widżet kart Scroll dla tabletów

Podobnie przejdź do trybu portretowego tabletu , aby zoptymalizować zawartość, aby uzyskać optymalny wyświetlacz na rozmiarach ekranu tabletu.

W poniższym klipu wideo można zobaczyć, że widżet wygląda już dobrze na ekranie tabletu. I tak nie musimy go modyfikować.

Krok 08: Podgląd widżetu kart Scroll

Przyjdź na stronę podglądu i sprawdź, czy widżet działa dobrze, czy nie. Widać, że widżet działa dobrze na naszym końcu.

W ten sposób możesz utworzyć pionowe karty przewijania w WordPress z Elementor.

Ostateczne wynos!

Pionowe karty przewijania to inteligentny sposób na utrzymanie schludności strony internetowej podczas udostępniania wielu informacji. Pozwalają odwiedzającym znaleźć to, czego potrzebują, nie przeskakując na nowe strony. Po wykonaniu powyższych kroków możesz łatwo zaprojektować te zakładki za pomocą Elementor i HappyAddons Pro.

Daje to Twojej witrynie nowoczesny wygląd i poprawia sposób, w jaki użytkownicy eksplorują Twoje treści. Jednak podczas tworzenia tej sekcji pamiętaj o kilku najlepszych praktykach. Użyj wyraźnych tytułów dla każdej karty, aby użytkownicy wiedzieli, czego się spodziewać. Upewnij się, że tekst, obrazy i filmy są lekkie, dzięki czemu strona szybko się ładuje.

Sprawdź projekt różnych rozmiarów ekranu i dostosuj odstępy dla użytkowników mobilnych. Utrzymuj kolory i czcionki zgodne ze stylem witryny, aby zakładki naturalnie łączą się z resztą projektu. Te małe szczegóły pomagają stworzyć płynne, zawodowe wrażenia dla każdego gościa.

Dowiedz się, jak zaprojektować pudełko Flip w WordPress z Elementor.