Blok GutenKit Accordion to idealne rozwiązanie zapewniające odbiorcom łatwy dostęp do dłuższych treści. Dodaje składaną sekcję do Twojej witryny WordPress oraz zapewnia funkcje, które uwielbiają sekcję akordeonu zarówno na etapach aktywnych, jak i nieaktywnych.

W tej dokumentacji pokażemy, jak tworzyć sekcje akordeonowe w domyślnym edytorze Gutenberga.

Jak dodać bloki akordeonu na stronie internetowej Gutenberga #

Aby rozpocząć proces, musisz zainstalować wtyczkę GutenKit. Gdy już skończysz, po prostu wykonaj poniższe kroki.

Krok 1: Dodaj blok akordeonowy GutenKit #

Z poziomu panelu WordPress, 

• Podążać Strony > Dodaj nową stronę lub rozpocznij edycję istniejącej strony.
• Aby dodać nowy blok, kliknij przycisk „+” u góry ekranu edytora bloków.
• Wyszukaj Akordeon GutenKit.
• Gdy się pojawi, kliknij ikonę lub przeciągnij i upuść.

Krok 2: Dodaj elementy akordeonu #

Otwórz ustawienia bloku, w których dodasz tytuł, opis i ikonę akordeonu.

Akordeon: #

Domyślnie blok akordeonu ładuje się z trzema elementami. Kliknij dowolny element, aby edytować tytuł I opis tekst. Tam jest "Pozostaw ten slajd otwarty”, włączenie tej opcji sprawi, że ten suwak lub element będzie zawsze otwarty dla odwiedzających.

Następnie naciśnij przycisk „Dodaj nowe”, aby dodać nowy element akordeonu. Możesz także skopiować już dostosowany element, klikając „Przedmiot klonowania" Ikona. A jeśli nie chcesz zachować przedmiotu, po prostu naciśnij przycisk „X" przycisk.

Wybierz Styl: Wybierz żądany układ akordeonu spośród 5 gotowych stylów.

Ikona: #

• Pozycja ikony: Określ położenie ikony pomiędzy lewą i prawą stroną. Możesz też wyświetlać ikony po obu stronach.
• Pokaż liczbę pętli: Włącz ten przycisk przełączania, aby wyświetlać liczenie liczb w przypadku elementów akordeonowych. Należy pamiętać, że wybranie opcji „Obydwie strony” w poprzednim ustawieniu spowoduje zniknięcie tego ustawienia.
• Ikona Prawa/Lewa: Dodaj ikonę wskaźnika dla odwiedzających, aby otworzyć suwak akordeonu.
• Ikona Prawa/Lewa aktywna: Wyświetla ikonę aktywnego suwaka akordeonu.

*Oprócz wybierania z biblioteki ikon możesz także przesłać plik ikony SVG ze swojego urządzenia.

Krok 3: Stylizuj treść tekstu na akordeonie #

Tytuł: #

• Typografia: Użyj tego obszaru ustawień, aby zastosować wszystkie opcje dostosowywania typografii, takie jak rodzina czcionek, rozmiar, waga, styl, dekoracja, wysokość linii itp.

W dalszej części dostępne są następujące opcje dla obu opcji otwarty I Zamknięte opcje. Oznacza to, że możesz dostosować tekst tytułu oddzielnie dla etapów aktywnych i nieaktywnych.

• Kolor: ustawienie koloru tekstu tytułu.
• Typ tła: Wybierz pomiędzy jednolitym kolorem a tłem gradientowym dla tła tytułu.

• Granica: kontroluj szerokość, ustaw kolor i styl obramowania tytułowego.
• Promień granicy: Określ zaokrąglenie ramki tytułowej.
• Pudełko Cień: Użyj tych elementów sterujących, aby ustawić cień ramki wokół krawędzi tytułu.
• Wyściółka: Dostosuj dopełnienie tytułu elementu akordeonu.
• Margines dolny: Użyj suwaka lub dodaj niestandardową wartość, aby ustawić odstęp między elementami akordeonu.

Opis: #

• Kolor: Wybierz kolor tekstu opisu przedmiotu na akordeonie.
• Typografia: Tutaj znajdziesz opcje zmiany rodziny czcionek tekstu opisu, rozmiaru, wagi, stylu, odstępów i innych.
• Typ tła: Wybierz typ tła pomiędzy jednolitym kolorem a gradientem.
• Promień granicy: Określ okrągłość granicy obszaru opisu.
• Wyściółka: Dostosuj wewnętrzną przestrzeń obszaru opisu.

Krok 3: Dostosowana ramka i ikona akordeonu #

Granica: #

Podobnie jak w przypadku opcji tytułu, możesz również dostosować obramowanie osobno dla obu otwarty I Zamknięte tryby.

• Granica: Kontroluj szerokość, ustawiaj kolor i styl obramowania elementu akordeonu.
• Promień granicy: Określ okrągłość krawędzi elementu akordeonowego.
• Pudełko Cień: Użyj tych elementów sterujących, aby wprowadzić efekty cienia wokół krawędzi elementu akordeonu.
• Wyłącz obramowanie dla ostatnich elementów: Włącz ten przycisk przełączania, aby wyłączyć obramowanie ostatniego elementu akordeonu.

Ikona: #

Poniższe ustawienia stylizacji ikon mają zastosowanie w obu przypadkach Zamknięta ikona I Otwórz ikonę. 

• Rozmiar ikony: Określ rozmiar ikon.
• Kolor: Użyj próbnika kolorów, aby dodać kolor do ikony.
• Typ tła: Wybierz typ tła pomiędzy jednolitym kolorem a gradientem.

• Granica: użyj tego obszaru ustawień, aby zastosować kolor, styl i szerokość obramowania wokół ikony.
• Promień granicy: To ustawienie określa okrągłość obramowania ikony.
• Wyściółka: Dostosuj wypełnienie ikony.
• Margines: Dostosuj margines wokół ikony.

Krok 4: Ustawienia zaawansowane #

Na karcie Ustawienia zaawansowane możesz skonfigurować układ bloku harmonijkowego, tło, style obramowania i kontrolować jego widoczność.

Układ: #

• Margines: Określ przestrzeń wokół układu blokowego. Pomaga ustawić odstęp między innym blokiem.
• Wyściółka: Wprowadź wartość, aby ustawić przestrzeń wokół bloku w jego układzie.
• Szerokość: Oprócz zachowania domyślnej szerokości układu.
  • Pełna szerokość: wybranie tej opcji spowoduje, że układ będzie obejmował całą szerokość ekranu.
  • W linii (automatycznie): Po zastosowaniu będzie miał taką samą szerokość jak element blokowy.
  • Zwyczaj: Wybranie tej opcji spowoduje wyświetlenie suwaka umożliwiającego zdefiniowanie poziomej przestrzeni układu bloku.
• Indeks Z: Użyj suwaka, aby określić kolejność stosu bloku z innymi blokami.

Pozycja: #

W menu rozwijanym zobaczysz trzy opcje: Domyślny, Absolutny, I Naprawił. 

• Absolutny: Wybranie tej opcji zapewni Ci absolutną pozycję bloku, co oznacza, że elementy będą pasować do ich pojemnika.
• Naprawił: Opcja Stała pozycja pozwoli elementowi zmieścić się w całej rzutni lub ekranie.

Obie opcje, Absolutna i Stała, mają podobne ustawienia, jak poniżej:

• Orientacja pozioma: Wybierz kierunek pozycjonowania pomiędzy lewą i prawą stroną.
• Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować poziome położenie bloku.
• Orientacja pionowa: Wybierz kierunek pozycjonowania w górę lub w dół.
• Zrównoważyć: Użyj suwaka lub wprowadź wartość ręcznie, aby dostosować pionowe położenie bloku. 

Tło: #

• Tło: wybierz opcję tła pomiędzy jednolitym kolorem, gradientem lub obrazem.

W opcji Najedź:

• Obraz: Jeśli wybierzesz opcję obrazu, pojawią się następujące opcje:
  • Obraz: wybierz obraz z biblioteki multimediów lub prześlij własny.
  • Rozmiar obrazue: Wybierz rozmiar obrazu pomiędzy Miniaturą, Średnim, Dużym lub Pełnym.

• Pozycja: Wybierz położenie 10 różnych opcji.
• Załącznik: Określ relację stałego lub przewijanego obrazu tła z resztą ekranu przeglądarki.
• Powtarzać: wybierz opcję, aby ustawić sposób powtarzania obrazów tła.
• Rozmiar wyświetlacza: Wybierz rozmiar wyświetlacza spośród czterech różnych opcji.

• Czas trwania przejścia: Użyj suwaka, aby dostosować przejście tła ze stanu normalnego do stanu najechania.

Granica: #

• Granica: w ramach tej opcji ustawień dostępne są opcje ustawień obramowania, takie jak szerokość, styl i kolor.
• Promień granicy: Ustaw okrągłość obramowania, wprowadzając wartość.
• Pudełko Cień: Uzyskaj wszystkie ustawienia, takie jak kolor, poziomo/pionowo, rozmycie, rozproszenie i inne, aby nadać obramowaniu efekty cienia. 

W opcji najechania:

• Czas trwania przejścia: Możesz dodać wartość ręcznie lub użyć suwaka, aby ustawić czas zmiany projektu obramowania w stanie najechania.

Widoczność: #

Moduł widoczności pozwala kontrolować wyświetlanie projektów bloków w zależności od typu urządzenia. Dostępne będą trzy opcje urządzeń (komputer stacjonarny, tablet, telefon komórkowy) z przyciskiem przełączania. Włącz przycisk przełączania, aby ukryć projekt blokowy tego urządzenia.

Jednak nadal możesz to zobaczyć w widoku edytora.

Zaawansowany: #

• Nazwa bloku: Nadaj nazwę, która będzie jednoznacznie identyfikowała ten blok podczas łączenia lub tworzenia skryptów stylizujących blok.
• Kotwica HTML: Dodaj adres URL, aby połączyć stronę internetową.

• Dodatkowe klasy CSS: Przypisz dodatkowe klasy CSS do bloku, co pozwoli Ci stylizować blok według własnego uznania za pomocą niestandardowego CSS. 

Uwaga: Możesz dodać wiele klas oddzielnie ze spacjami.

Otóż to. Mamy nadzieję, że ten przewodnik pomógł Ci dowiedzieć się, jak dodać projekt akordeonu do witryny WordPress.