Jak dodać i wypełnić "akordeon"

"Akordeon" to świetny sposób na pokazywanie określonych treści tylko na żądanie użytkownika oraz na tworzenie przejrzystego układu strony. W tym artykule pokażemy, jak używać akordeonów w Sitejet Builder.

Akordeon sprawdza się wszędzie tam, gdzie treść jest obszerna, ale użytkownik potrzebuje dostępu tylko do wybranych fragmentów. Najczęstsze zastosowania to sekcja FAQ (najczęściej zadawane pytania), cenniki z opisami poszczególnych pakietów, opisy usług z rozwijanymi szczegółami oraz regulaminy i warunki współpracy podzielone na sekcje. Zamiast publikować długą ścianę tekstu, akordeon pozwala uporządkować informacje w zwięzłe, klikalne sekcje. Odwiedzający szybciej znajduje to, czego szuka, a strona wygląda przejrzyście i profesjonalnie.

W polskiej wersji edytora "akordeon" nosi nazwę Harmonijka. Aby dodać go do swojej strony kliknij ikonę Harmonijka w lewym panelu bocznym i przeciągnij taki element w żądane miejsce.

Dodany akordeon w edytorze strony składa się z przycisku (trigger) i treści (content).

Trigger to przycisk akordeonu zawierający nagłówek. Nagłówki, podobnie jak inne elementy, mogą służyć jako odnośniki do stron internetowych, plików lub innych elementów – w tym przypadku do zawartości akodeona. Trigger możesz dostosować, zmieniając ustawienia w lewym panelu po dwukrotnym kliknięciu.

Content to zawartość naszego akordeonu. Może ona zawierać dowolne treści. Domyślnie jest tam tekst, ale istnieje możliwość wstawienia w tym miejscu dowolnego elementu, np. obrazu lub filmu.

Aby zawartość tego Akordeonu była widoczna po kliknięciu przycisku, potrzebna jest animacja. Ponieważ jest to gotowy szablon, animacja została już dodana do elementu kontenera. Możesz jednak zmienić jej ustawienia, np. sposób otwierania lub szybkość działania. Elementy z animacją są oznaczone ikoną gwiazdki przed nazwą w ścieżce nawigacyjnej na dole.

Po dostosowaniu akordeonu do swoich potrzeb możesz aktywować podgląd, klikając ikonę oka na górnym pasku.

Wskazówka: Domyślnie ustawienia akordeonu powodują, że zawartość pierwszego elementu jest widoczna. Jeśli chcesz, aby była ukryta i pojawiała się dopiero po kliknięciu, przejdź do ustawień animacji tego kontenera i wybierz Element ukryty w opcji Wstępny.

Do rozwijania zawartości akordeonu możesz używać różnych komponentów. Zamiast nagłówka możesz wykorzystać również obraz. W takim przypadku przydatnym elementem do dodania na stronę będą Karty obrazów.

Po dodaniu elementu Karty obrazów do strony, edytor będzie wyglądał następująco:

Aby dodać kolejne pozycje akordeona możesz:

• Zaznaczyć Trigger i nacisnąć [CTRL+D], aby go zduplikować.
• Kliknąć ikonę kopiowania, która pojawia się po najechaniu na element

Uwaga dotycząca kopiowania elementów akordeonu: zawsze sprawdzaj, czy Trigger i odpowiadająca mu treść pozostają ułożone jeden pod drugim. W przeciwnym razie mechanizm linkowania Następny element nie będzie działał poprawnie.

Treść ukryta w akordeonie jest normalnie widoczna dla robotów wyszukiwarek. Google indeksuje tekst w rozwijanym akordeonie tak samo jak każdy inny tekst na stronie, nawet jeśli domyślnie jest on ukryty. Oznacza to, że sekcja FAQ zbudowana z akordeonów będzie pomagać w pozycjonowaniu strony na frazy zawarte w pytaniach i odpowiedziach. Warto pisać pytania w akordeonie tak, jak zadaliby je użytkownicy w wyszukiwarce — naturalnym językiem i z użyciem słów kluczowych związanych z Twoją branżą.

Czy mogę mieć kilka akordeonów na jednej stronie?
Tak. Możesz dodać dowolną liczbę akordeonów na jednej stronie. Każdy akordeon działa niezależnie — otwarcie jednego nie zamyka pozostałych, chyba że zmodyfikujesz ustawienia animacji tak, aby elementy wzajemnie się wykluczały.

Czy treść w akordeonie jest widoczna dla Google?
Tak. Roboty wyszukiwarek indeksują treść akordeonu niezależnie od tego, czy jest domyślnie rozwinięta czy ukryta. Google traktuje tekst w akordeonach na równi z resztą treści na stronie.

Jak zrobić, żeby pierwszy element akordeonu był domyślnie zamknięty?
Domyślnie pierwszy element akordeonu jest rozwinięty. Aby go ukryć, przejdź do ustawień animacji kontenera (ikona gwiazdki w ścieżce nawigacyjnej) i wybierz opcję "Element ukryty" w polu Wstępny. Po tej zmianie wszystkie elementy będą domyślnie zwinięte.

Czy akordeon działa poprawnie na telefonach?
Tak. Akordeony w Sitejet Builder są w pełni responsywne i działają na urządzeniach mobilnych tak samo jak na komputerze. Na mniejszych ekranach akordeony są nawet bardziej przydatne niż na desktopie, ponieważ oszczędzają miejsce i ograniczają potrzebę przewijania długich stron.

Czy mogę umieścić w akordeonie film lub formularz?
Tak. Zawartość akordeonu (pole content) przyjmuje dowolne elementy dostępne w Sitejet Builder — tekst, obrazy, filmy, formularze, przyciski i inne komponenty. Wystarczy przeciągnąć wybrany element do kontenera akordeonu.