¶ Jak dodać akordeon (harmonijkę) na stronę
Akordeon (harmonijka) pozwala ukryć część treści i wyświetlić ją dopiero po kliknięciu nagłówka. Sprawdza się idealnie w sekcjach FAQ, opisach usług i wszędzie tam, gdzie chcesz zachować przejrzysty układ strony. Poniżej znajdziesz instrukcję dodawania i konfiguracji akordeonu w Sitejet Builder.
¶ Ustawienia i wypełnianie akordeonu
- Kliknij ikonę Harmonijka w lewym panelu bocznym edytora.
- Przeciągnij wybrany wariant akordeonu w żądane miejsce na stronie.
Każdy akordeon składa się z dwóch części:
- Trigger — przycisk z nagłówkiem, który użytkownik klika, aby rozwinąć treść.
- Content — ukryta zawartość, która pojawia się po kliknięciu triggera. Może zawierać tekst, obrazy, filmy i inne elementy.
- Kliknij dwukrotnie na triggerze, aby zmienić tekst nagłówka i dostosować jego ustawienia w panelu po lewej.
- Kliknij dwukrotnie na polu content, aby edytować treść. Możesz tam wstawić dowolny element z panelu Elementy — np. obraz lub film.
¶ Animacja rozwijania
Gotowy szablon akordeonu ma już przypisaną animację rozwijania do kontenera z treścią. Możesz zmienić jej parametry:
- Kliknij dwukrotnie na kontenerze content w edytorze.
- W panelu ustawień znajdź sekcję animacji — elementy z animacją oznaczone są ikoną gwiazdki w ścieżce nawigacyjnej na dole ekranu.
- Zmień sposób otwierania, szybkość działania lub inne parametry animacji.
- Kliknij ikonę oka na górnym pasku, aby aktywować podgląd i sprawdzić, jak akordeon działa na stronie.
Wskazówka: Domyślnie zawartość pierwszego elementu akordeonu jest widoczna. Aby ukryć ją i wyświetlić dopiero po kliknięciu, przejdź do ustawień animacji kontenera i wybierz Element ukryty w opcji Wstępny.
¶ Akordeon z obrazami jako przyciskami
Zamiast nagłówka tekstowego trigger akordeonu może być obrazem. Użyj w tym celu elementu Karty obrazów.
- Kliknij ikonę Obrazy w lewym panelu bocznym, a następnie przeciągnij element Karty obrazów na stronę.
- Kliknij dwukrotnie na obrazie, aby otworzyć jego ustawienia. W Menadżerze Plików wybierz obraz lub wgraj własny plik.
- Edytuj Tytuł zdjęcia w sekcji Tekst, aby dodać opis widoczny na obrazie.
- W sekcji Połącz ustaw powiązanie z treścią akordeonu — opcja Następny element jest domyślnie zaznaczona i łączy obraz z kolejnym kontenerem.
¶ Duplikowanie elementów akordeonu
Aby dodać kolejne pozycje akordeonu:
- Zaznacz Trigger i naciśnij CTRL+D (lub CMD+D na Macu), aby go zduplikować.
- Alternatywnie kliknij ikonę kopiowania, która pojawia się po najechaniu na element.
Ważne: Po duplikowaniu upewnij się, że trigger i odpowiadająca mu treść są ułożone bezpośrednio jeden pod drugim. W przeciwnym razie mechanizm linkowania Następny element nie będzie działał poprawnie.
Sitejet Builder na SmartXHosting.pl — kreator stron z hostingiem, SSL i domena w jednym pakiecie. Bez kodowania. Sprawdz oferte Sitejet Builder.
¶ Zobacz także
- Jak zamówić Sitejet Builder — zamówienie i aktywacja usługi
- Jak dodać kafelki z treścią — bloki z tekstem i obrazem na stronie
- Jak dodać galerię zdjęć — galeria obrazów i filtrowana galeria