Jak tworzyć treści z zakładkami w Elementorze za pomocą dodatków PowerPack

Opublikowany: 2022-11-02

Zastanawiasz się, jak tworzyć treści z zakładkami w Elementorze?

Zawartość na kartach poprawia wygląd stron internetowych, wyświetlając dużą ilość informacji w kompaktowy, ale funkcjonalny sposób.

W tym artykule omówimy, w jaki sposób możesz tworzyć treści z zakładkami dla swojej witryny WordPress za pomocą dodatków Elementor i PowerPack.

PowerPack Advanced Tab Widget – Przegląd

Dodatki PowerPack dla Elementora to jeden z najlepszych dodatków do kreatora stron Elementor. Ma ponad 150 unikalnych i stylowych szablonów oraz ponad 80 przydatnych widżetów, w tym widżet Zaawansowane zakładki do tworzenia treści z zakładkami w Elementorze.

Zaawansowany widżet kart to najlepszy widżet kart do tworzenia treści z kartami w dowolnej witrynie WordPress. Rzućmy okiem na funkcje widżetu PowerPack Advanced Tabs dla Elementora:

  • Obsługuje wiele źródeł treści
  • Wiele opcji dostosowywania treści do stylizowania treści.
  • Umożliwia tworzenie zakładek poziomych i zakładek pionowych.
  • Zapewnia doskonałe responsywne wsparcie i działa płynnie na wszystkich ekranach.
  • Oferuje wiele opcji stylizacji, takich jak kolor tekstu, typografia, typ tła, odstępy między tabulatorami, obramowanie, wyrównanie tekstu i wiele innych.
  • Umożliwia oddzielne dostosowanie ikony, tytułu i części zawartości.

Twórz zawartość z zakładkami w Elementorze za pomocą dodatków PowerPack

Przed rozpoczęciem upewnij się, że zainstalowałeś i aktywowałeś kreator stron Elementor i dodatki PowerPack dla Elementora.

Po aktywowaniu obu wtyczek w witrynie WordPress otwórz stronę za pomocą edytora Elementor.

Następnie wyszukaj „ Zaawansowane karty ” w obszarze widżetów, a następnie przeciągnij i upuść widżet na stronie.

Nie zapomnij sprawdzić PowerPacka “ PP ” znak w prawym górnym rogu widżetu.

Przeciągnij i upuść widżet „zaawansowanych kart” przez PowerPack na stronie edytora Elementor

Karta zawartości zaawansowanego widżetu karty

Karta treści widżetu Karty zaawansowane zawiera dwie sekcje:

  1. Zaawansowane karty
  2. Układ

Przyjrzyjmy się szczegółowo tym sekcjom.

Zaawansowane karty
Sekcja Zaawansowane karty na karcie Zawartość widżetu Zaawansowane karty

Przyjrzyjmy się dostępnym funkcjom w tej sekcji:

  • Możesz dodać tyle kart , ile chcesz. Po prostu kliknij „ Dodaj element ”, aby utworzyć więcej kart.
  • Każdą kartę możesz dostosować indywidualnie.
  • Typ zawartości: Ta opcja umożliwia wybór wielu typów zawartości, takich jak zawartość, obraz, łącze (wideo/obraz), zapisana sekcja, zapisany widżet i zapisany szablon strony.

„Treść” jako typ treści

„Treść” jako typ zawartości w sekcji Zakładki widżetu Treść z zakładkami od PowerPack Addons

Jeśli chcesz wyświetlić zawartość, możesz dostosować te opcje:

  1. Tytuł: wpisz tytuł treści, korzystając z tej opcji.
  2. Treść: W tej sekcji możesz dodać zawartość do karty za pomocą funkcji, takich jak lista numerów, lista punktowana, link, pogrubienie, kursywa, podkreślenie i wiele innych funkcji stylizacji tekstu. Oprócz tego możesz również dodać obraz z biblioteki multimediów.

„Obraz” jako typ treści

Typ treści jako "Obraz" w sekcji Zakładki widżetu Treść z zakładkami od PowerPack Addons

Jeśli chcesz wyświetlić obraz, możesz dostosować te opcje:

  1. Wybierz obraz: Wybierz obraz z biblioteki obrazków, korzystając z tej opcji.
  2. Rozmiar obrazu: Ta opcja pozwala wybrać żądany rozmiar obrazu.

Jeśli chcesz wyświetlić link, możesz upuścić link do opcji „Link”. A jeśli wybierzesz zapisaną sekcję, zapisany widżet lub zapisany szablon strony, możesz je odpowiednio wybrać.

W miarę dostosowywania części zawartości osobno dla każdej karty, możesz to zrobić również dla ikon każdej karty.

„Ikona” jako typ zawartości w sekcji Zakładki widżetu Treść z zakładkami od PowerPack Addons

Cechy sekcji ikon to:

  1. Typ ikony: Możesz wybrać typ ikony, ikonę lub obraz. Może to być logo Twojej marki lub cokolwiek innego.
  2. Ikona: Możesz wybrać ikonę z biblioteki ikon.
Układ
Sekcja Układ na karcie Treść widżetu Karty zaawansowane

Przyjrzyjmy się dostępnym funkcjom w tej sekcji:

  • Układ: Możesz wybrać układ jako wzór poziomy lub pionowy.
  • Responsywne wsparcie: Widżet Advanced Tabs obsługuje tryb responsywny na wszystkich urządzeniach, zarówno na komputerze stacjonarnym, tablecie, jak i telefonie komórkowym.
  • Wybierz styl: Wybierz styl karty za pomocą tej opcji.
  • Przewiń do góry: Możesz wybrać tak lub nie, czy chcesz przewinąć do góry kart po kliknięciu tytułu.

[ Uwaga: ta opcja będzie dostępna tylko w przypadku wybrania pionowego wzoru układu kart.]

  • Domyślny indeks aktywnej karty: Ta opcja umożliwia ustawienie domyślnej aktywnej karty. Dzięki temu za każdym razem, gdy odwiedzasz witrynę, wybrana karta pojawia się domyślnie.
  • Prefiks niestandardowego identyfikatora: możesz dodać niestandardowy prefiks identyfikatora, który zostanie zastosowany do atrybutów identyfikatora karty w HTML.

Zastosuj te zmiany do widżetu Zaawansowane karty, aby uzyskać najlepsze wyniki.

Zakładka Styl zaawansowanego widżetu zakładki

Karta stylu widżetu kart zaawansowanych zawiera dwie sekcje:

  1. Karty
  2. Tytuł
  3. Zawartość

Przyjrzyjmy się szczegółowo tym sekcjom.

Karty
Sekcja Zakładki w zakładce stylów widżetu Zaawansowane zakładki

Zobaczmy, jakie wszystkie funkcje są zawarte w tej sekcji:

  • Wyrównanie w poziomie lub w pionie: Wybierz wyrównanie kart za pomocą tej opcji, ale najpierw wybierz układ.
  • Odstęp między kartami: Dostosuj odstępy między kartami za pomocą tej opcji.
  • Kolor tła: Korzystając z tej opcji, możesz wybrać kolor tła dla kart.
  • Promień obramowania: Zastosuj promień obramowania, jeśli chcesz wyświetlić krzywe krawędzie na obramowaniu karty.
  • Dopełnienie: Dostosuj dopełnienie karty, aby zachować odstępy między obramowaniem karty a zawartością.
Tytuł
Sekcja tytułu na karcie stylów widżetu Zaawansowane karty

Zobaczmy, jakie wszystkie funkcje są zawarte w tej sekcji:

  • Pozycja ikony: Wybierz pozycję ikony na górze, na dole, w prawo lub w lewo.
  • Rozmiar ikony: Dostosuj rozmiar ikony za pomocą tej opcji.
  • Szerokość obrazu ikony: Dostosuj szerokość obrazu ikony za pomocą tej opcji.
  • Promień obramowania: Zastosuj promień obramowania, jeśli chcesz wyświetlić krzywe krawędzie na obramowaniu tytułu karty.
  • Dopełnienie: Dostosuj dopełnienie karty, aby zachować odstępy między obramowaniem tytułu karty a zawartością.
  • Typografia tytułu: Dostosuj typografię tekstu tytułu za pomocą tej opcji.
  • Kolor ikony: Wybierz kolor ikony za pomocą tej opcji.
  • Kolor tytułu: Dostosuj kolor tekstu tytułu za pomocą opcji koloru tytułu.
  • Kolor tła tytułu: Jeśli chcesz wyświetlić kolor tła tytułu, możesz wybrać kolor tła za pomocą tej opcji.
  • Efekt najechania: Ta opcja zapewnia elastyczność włączania lub wyłączania efektu najechania.
Zawartość
Sekcja zawartości karty stylów widżetu Zaawansowane karty

Zobaczmy, jakie wszystkie funkcje są zawarte w tej sekcji:

  • Wyrównanie: Ustaw wyrównanie zawartości wyświetlanej na kartach za pomocą tej opcji.
  • Typ tła: Możesz wybrać klasyczny lub gradientowy typ tła.
  • Kolor tekstu: wybierz kolor tekstu dla zawartości, którą chcesz wyświetlić na kartach.
  • Typografia tekstu: Za pomocą tej opcji możesz dostosować typografię tekstu treści.
  • Typ obramowania: wybierz typ obramowania zawartości spośród dostępnych opcji, takich jak pełne, podwójne, kropkowane, kreskowane lub rowek.
  • Szerokość obramowania: Szerokość obramowania zastosowana do zawartości można dostosować za pomocą tej opcji.
  • Dopełnienie: Dostosuj dopełnienie, aby umożliwić odstępy między tekstem treści a jego obramowaniem, aby wyglądało na uporządkowane i czyste.
  • Kolor obramowania: Kolor obramowania zawartości można dostosować za pomocą tej opcji.
  • Promień obramowania: Jeśli zastosowałeś obramowanie do części zawartości, możesz dostosować jej promień za pomocą tej opcji.

Tak więc chodziło o dostosowanie zawartości i stylu widżetu Zaawansowane karty dla Elementor by PowerPack Addons.

Zainstaluj, aktywuj i wprowadź zmiany zgodnie z własnym wyborem; to takie proste.

Twórz niesamowitą „treść z zakładkami” za pomocą widżetu Elementor i Advanced Tabs firmy PowerPack

Pobierz PowerPack Advanced Tabs dla Elementora Page Builder

Po zapoznaniu się ze wszystkimi funkcjami widżetu Zaawansowane zakładki dostarczanego przez dodatki PowerPack Elementor, jesteśmy prawie pewni, że pokochasz go w swojej witrynie.

Mamy nadzieję, że ten samouczek pomógł Ci stworzyć stylowe „zakładki” dla Twojej witryny za pomocą widżetu PowerPack Advanced Tabs.

Widgety autorstwa PowerPack Addons są niesamowicie zaprojektowane przez naszych kreatywnych programistów, dzięki czemu osoby niebędące programistami mogą z nich łatwo korzystać w ciągu kilku minut.

Kliknij tutaj, aby uzyskać widżet PowerPack Advanced Tabs i poprawić wygląd swojej witryny oraz wygodę jej użytkowania.

Jeśli podobało Ci się czytanie tego artykułu, chciałbyś również poznać nasze inne elementy PowerPack.

Zachęcamy do wrzucania komentarzy tutaj; chcielibyśmy otrzymać Twoje odpowiedzi.
Dołącz do nas także na Twitterze, Facebooku i YouTube.