Wiadomym jest, że nikt nie lubi przewijać ogromne teksty w poszukiwaniu pożądanych informacji na stronie. Więc, co zrobić aby Twoja strona wyglądała przyjemnie dla oczu? Jeśli nie wyśżwietlasz na niej artykułów naukowych, uzupełnij swoje wpisy o różne elementy projektowe lub wykorzystaj akordeony i karty aby ukryć duże części tekstu. Dzięki temu treść będzie łatwiejsza do odczytania, a strona wygodniejsza w użyciu.
Istnieją trzy główne sposoby na dodawanie akordeonów i kart do strony WordPress: z pomocą kodowania, instalację odpowiedniej wtyczki lub korzystania ze wtyczki JetTabs do kreatora Elementor. Jeśli nie jesteś zawodowym programistą, pierwszy sposób - kodowanie, nie jest dobrym wyborem, ponieważ wymaga posiadania specjalnych umiejętności technicznych. Przyjrzyjmy się więc bliżej dwóm pozostałym wariantom.
Wtyczki do WordPress, które pomogą dodać akordeony i karty
Accordion Shortcodes
Jest to darmowa wtyczka, więc wystarczy ją pobrać i zainstalować poprzez sekcję Wtyczki> Dodaj nową nw panelu admina swojej witryny. Kliknij w przycisk "Załaduj wtyczkę", zainstaluj i aktywuj.
Po instalacji wtyczka doda dwa małe przyciski do paska narzędzi tworzenia stron WordPress: "Dodaj grupę akoredeonów" i "Dodaj elementy akordeonu". Pierwszy z nich daje ci możliwość wybrania funkcji, których chciałbyś użyć do akordeonu, np. kiedy otwarte płytki zostaną zamknięte i jaki znacznik HTML zostanie użyty dla tytułu.
Wybrałam funkcje "Zamknij automatycznie", "Kliknij, aby zamknąć" i "Przewiń do góry". Wszystkie skróty są automatycznie wstawiane do strony po kliknięciu przycisku "OK". Teraz nadszedł czas, aby dodać elementy akordeonu. Naciśnij przycisk "Dodaj element akordeonu".
W odpowiednich paskach wpisz nazwę elementu i wybierz stan początkowy. Po uzyskaniu shortcode, przenieść go między nawiasami "][". Tekst, który chciałbyś umieścić w rozwijanym menu, musi znajdować się pomiędzy “[accordion-item title="yourtitle" state=closed]” i "[/ akordeon-item]". Ostateczny shortcode będzie wyglądał tak:
Zaktualizuj stronę aby obejrzeć wyniki. Jak widać, używa wspólnego dla Twojego motywu arkusza stylów.
Aby nadać elementom na stronie innego stylu, musisz dostosować plik arkusza stylów CSS witryny. Moim zdaniem jest to główna wada tej wtyczki. Zdecydowanie zalecam aby unikać wprowadzenia zmian do tego pliku, jeśli nie jesteś o 100% pewny, że wiesz, co robisz. Nieprawidłowe modyfikowanie arkusza stylów może spowodować awarię witryny.
Tabs Shortcode and Widget
Jak i akordeony, karty pozwalają odwiedzającym Twoją stronę przeczytać tylko te części informacji, które są dla nich interesujące. Ta wtyczka też jest dostępna do pobrania za darmo i ma ten sam problem, co poprzednia - aby ją w pełni dostosować według swoich życzeń, będziesz musiał zedytować plik stylesheet.css. Jeśli jednak podoba Ci się styl swojego motywu, możesz skorzystać z niej. Więc aby dodać na stronę karty, zainstaluj i aktywuj wtyczkę i przejdź do karty tworzenia strony w panelu admina. Wtyczka dodała do paska narzędzi następujący przycisk:
Naciśnij i wybierz "Układy kart". Po prawej stronie okna dostosowywania zobaczysz, jak karty będą wyglądały na stronie. Wybierz liczbę kart, tryb układu - poziomy lub pionowy, nazwij wszystkie karty, dodaj ikony i treści, a następnie naciśnij przycisk "Wstaw".
Ostateczy shortcode będzie wyglądał tak:
Jak już wspominałam wcześniej, karty są stylizowane w taki sam sposób, jaki cały motyw. Jeśli chciałbyś zmienić wygląd kart, powinieneś dostosować plik arkusza stylów CSS stylesheet.css. Ponownie, nie polecam wprowadzenia zmian do tego pliku, jeśli nie jesteś naprawdę pewien, że czegoś nie zepsujesz.
Wtyczka JetTabs do Elementora
Korzystam z kreatora Elementor, ponieważ upraszcza on proces tworzenia strony. Możesz zobaczyć wszystkie wprowadzone zmiany w czasie rzeczywistym i osiągnąć wyniku, którego potrzebujesz znacznie szybciej. Z pomocą wtyczki do Elementora o nazwie JetTabs można uzupełnić go o funkcję, pozwalającą dodawać na stronę akordeony i karty. Dzięki JetTabs dodawanie tych elementów na stronę jest o wiele łatwiejsze niż z pomocą wspomnianych powyżej rozszerzeń. Wtyczka JetTabs oferuje użytkownikowi trzy widżety - akordeony klasyczne, akordeony zdjęć i karty. Zacznijmy od akordeonu. Dodaj nową sekcję i przenieś do niej Klasyczny akordeon. Domyślna liczba kart to trzy, ale można ją łatwo zmienić.
Kliknięcie elementu Toggle w menu wywoła okno ustawień definiujące ikonę karty, etykietę i szablon znacznika (Uwaga: nie będzisz mogł dodać zawartości do karty, gdy szablon nie jest zdefiniowany.) Wybierz “tab-1 (section)”, aby uzyskać pole dla tekstu).
Sekcja "Ustawienia" pozwala na wybór animacji dla wyświetlanego tekstu. Wypróbuj wszystkie warianty, aby wybrać ten, który najbardziej Ci się podoba i pasuje do stylu witryny. Następnie przejdź do karty "Styl" i wybierz kolor, font i marginesy dla wszystkich elementów. Wygląd bloku akordeonu zależy wyłącznie od Ciebie i będziesz mógł od razu sprawdzić czy pasuje on do reszty projektu strony.
Widżet Karty działa prawie tak samo - umieść go w sekcji strony i dostosuj tak, jak blok akordeonu. Wybierz liczbę kart, dodaj do każdej nazwę, wybierz szablon i dostosuj styl kart,a blok kart jest gotowy. W zależności od liczby elementów, które chciałbyś zmienić, proces tworzenia sekcji akordeonu lub kart zajmie od pięciu do trzydziestu minut.
Ten artykuł został przetłumaczony z angielskiego. Orygimał można znaleźć tutaj: How Do You Add Accordions and Tabs to Your Website Easily?
* * *
Ponieważ używam kreatora stron Elementor do tworzenia witryn, preferuję korzystanie z jednej wtyczki JetTabs zamiast pobierania specjalnych rozszerzeń. Tak, inne wtyczki są darmowe, ale są również trudniejsze do dostosowania. Ale jeśli projekt motywu nie wymaga dostosowania i chciałbyś, aby akordeony, karty i wszystkie inne elementy byli stylizowane w podobny sposób, te wtyczki staną się dobrym rozwiązaniem.
P.S. Jakich narzędzi używasz aby dodać na stronę akordeony i/lub karty? Kodujesz je od zera, czy korzystasz z konkretnej wtyczki? Podziel się swoją opinią w sekcji komentarzy!
Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]
Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.