Jak tworzyć przełączniki i akordeony w WordPress
Accordions i Toggles to przydatne elementy, które dodają więcej funkcji do Twojej strony, umożliwiają lepszą strukturę treści i pomagają w ogólnej organizacji witryny. Dodanie ich nie jest szczególnie skomplikowane, ale może być szczególnie łatwe przy użyciu odpowiedniego narzędzia.
Dlatego zdecydowaliśmy się na przyjazne dla użytkownika dodatki Qi dla Elementora, które obejmują szeroką gamę opcji dostosowywania i są niezwykle łatwe w użyciu. Ta wtyczka jest obecnie największą kolekcją 60 darmowych widżetów, których możesz użyć, aby dodać więcej funkcji do swojej witryny. Istnieje również niesamowita kolekcja ponad 40 widżetów premium Qi. Bardzo ważne jest również to, że jest kompatybilny ze wszystkimi motywami WordPress.
Dodawanie akordeonów i przełączanie bezpłatnego widżetu za pomocą dodatków Qi dla Elementora
Dodatki Qi pozwalają całkowicie dostosować styl akordeonów i przełączników do używanego motywu WordPress, od czcionek po kolory i obramowania oraz wszystko pomiędzy.
Aby uzyskać inspirację, zalecamy zapoznanie się ze stroną z widżetami. Pokażemy Ci, jak to zastosowaliśmy.
Podstawowa percepcja działania Elementora to wszystko, co musisz zrozumieć w tej sekcji. W rzeczywistości jest to wiersz zawierający dwie kolumny z obrazem w lewej kolumnie i akordeonami w prawej. Oczywiście akordeon może zajmować cały rząd lub dowolną jego część, zależnie od potrzeb.
Zanim przejdziemy dalej, sprawdźmy kilka podstawowych cech stylu, które zawiera ten dodatek. Zacznijmy więc od zachowania. Możliwe są dwa rodzaje zachowań – akordeony, w których tylko jeden element może być otwarty w jednym momencie, oraz przełączniki, które umożliwiają otwarcie więcej niż jednego elementu w tym samym momencie.
Styl można dodatkowo zdefiniować za pomocą ramek i dostępnych jest kilka opcji:
- Standard – bez granic
- Pudełko – z obramowaniem,
- Border top – ma ramkę tylko u góry nad nagłówkiem
- Granica między — zawiera tylko granicę między nagłówkiem a opisem
Jak dodać akordeony i przełączniki za pomocą dodatków Qi
Na początek ustawimy podział wiersza na dwie kolumny i dodamy obraz do lewej kolumny, aby sekcja była bardziej atrakcyjna wizualnie.
Po dodaniu obrazu znajdziemy widżet Harmonijki i Przełączanie, wpisując w pasku wyszukiwania lub przewijając menu. Gdy widżet zostanie znaleziony, po prostu kliknij go, przytrzymaj i przejdź do miejsca, w którym chcesz umieścić nowy element.
Dodaliśmy widżet Harmonijki i Przełączanie po prawej stronie wiersza, a wszystkie powiązane z nim ustawienia są widoczne po lewej stronie. Domyślne ustawienia widżetu są ustawione w taki sposób, że tekst i styl automatycznie pasują do używanego motywu, więc jeśli nie widzisz potrzeby jego zmiany, możesz po prostu zakończyć proces tutaj, widżet będzie wyglądał tak, jak naturalnie należał do tematu.
Następną rzeczą, którą musisz ustawić, jest zachowanie i styl. Wspomnieliśmy już o opcjach Zachowania i Stylu, więc możesz ustawić tutaj to, co Ci odpowiada. Na potrzeby tego artykułu wybraliśmy opcję Akordeon z menu Zachowanie i styl Standard.
To, co trzeba teraz zrobić, to dodać elementy. Przewiń w dół, aby znaleźć opcje pozycji. Zauważysz dwie małe ikony w prawym górnym rogu zakładki Przedmioty. Pierwszy z nich służy do kopiowania istniejącego elementu, a mały X następny służy do usuwania elementu. Poniżej zakładki Item znajduje się przycisk Add New, który służy do dodawania nowych pozycji. Gdy klikniesz, aby wprowadzić nową pozycję, musisz najpierw ustawić nagłówek, a następnie wpisać tekst w wyznaczonym polu poniżej. Zauważysz wiele opcji podobnych do tych, które oferują różne edytory tekstu, aby stylizować i formatować tekst. Zalecamy ułożenie tekstu i nagłówka w tym miejscu, ponieważ od razu będziesz mieć podgląd, jak będzie wyglądał na końcu.
Po wprowadzeniu tekstu możesz ustawić Wysokość zawartości. Ta opcja odnosi się do rozmiaru pola przełączania. Jeśli ustawisz ją na najwyższą wysokość, każdy przedmiot będzie miał taki sam rozmiar jak największy. Jeśli wybierzesz opcję Indywidualna wysokość elementu, rozmiar każdego elementu będzie odpowiadał rozmiarowi zawartej w nim zawartości.
Jeśli chcesz zmienić domyślne ikony wyświetlane po otwarciu i zamknięciu elementu, po prostu kliknij pole Otwórz ikonę lub Zamknij ikonę, a zostaną wyświetlone dwie nowe opcje. Jeden służy do dodawania nowych ikon z Biblioteki ikon, a drugi do dodawania SVG.
Teraz możemy przejść do ustawień stylu. Tutaj możesz dostroić akordeon i przełączyć styl widżetu.
Możesz wybrać styl tytułu i ustawić Typografię tytułu. Jak wspomnieliśmy, domyślne opcje są ustawione w taki sposób, aby styl widżetu pasował do używanego motywu. Ale zawsze możesz wypróbować wszystkie inne opcje, po prostu je wybierając, a zmiany będą natychmiast widoczne w widżecie po prawej stronie ekranu. Zapoznaj się z dostępnymi opcjami i zobacz, co jest dla Ciebie najlepsze.
Kolejne ustawienia odnoszą się do zmian stylu, które zachodzą w przypadku elementu, gdy jest on zamykany lub otwierany. Możesz na przykład ustawić inny kolor tekstu po otwarciu lub inny kolor tła. Istnieje również możliwość ustawienia innego wypełnienia, gdy element jest aktywny, tj. Otwarty.
Jeśli wolisz samouczki wideo, spójrz na ten stworzony przez autorów Qi:
Na zakończenie
Gdy poczujesz się lepiej z wtyczką, odkryjesz jeszcze bardziej wyrafinowane opcje dostrajania stylu widżetu Akordeon i Przełączanie. To intuicyjne narzędzie jest idealne dla początkujących, ponieważ jest niezwykle łatwe w użyciu, a zaawansowani użytkownicy również będą z niego korzystać, ponieważ oferuje tak wiele opcji dostosowywania.