Jeżeli nie korzystamy z szablonu Divi albo z pluginu The Divi Builder, gdzie “zakładki” możemy dodać automatycznie, możemy oczywiście stworzyć je ręcznie poprzez dodanie nastepującego kodu:

Tabbed content

gdzie Tab One, Tab Two itd. odpowiadają za nazwę zakładki, a Content za treść, która w danej zakładce ma się pojawić. Odpowiednia mdyfikacja zamieszczonego kodu pozwoli na dodawanie “Zakładek” u góry strony, po lewej stronie, w formie slidera, a także na użycie obrazu.

Możliwe jest również użycie gotowej opcji w panelu edytora tekstu (przy założeniu że plugin Elegant Shortcodes został zainstalowany) zarówno  w trybie oferowanym przez WordPressa jak i poprzez Generator Divi, ale o tym napiszemy w dalszej części artykułu.

MANUALNA INTERWENCJA

Ręczne tworzenie i modyfikacja kodu za pomoca, którego możliwe jest tworzenie zakładek.

ELEGANT SHORCODES

Wstawianie zakładek za pomocą Pluginu Shortcodes w narzędziach edytora tekstu.

THE DIVI BUILDER

Tworzenie i modyfikacja zakładek poprzez panel The Divi Builder

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula.
Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.
Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing.
Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam.

W przykładzie zamieszczonym po lewej stronie dodaliśmy 5 zakładek, których tytuły umieszczone są u góry, nad treścią. Kod który został wkorzystany wyglada następująco:

Tabbed content2

W przykładzie zamieszczonym po prawej stronie dodaliśmy 3 zakładki, których tytuły umieszczone są po lewej stronie. Kod który został wkorzystany wyglada następująco:

Tabbed content3

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing.
Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna.
Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing.
Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam.

W przykładzie zamieszczonym po lewej stronie umieszczone zostały 3 zakładki, w formie slajdu. Zakładki nie posiadają tytułów a jedynie nawigację ruchomą, której używamy za pomocą strzałek. Kod który został wkorzystany wyglada następująco:

Tabbed content4

Przykład zamieszczony po prawej stronie to zakładki w formie slidera obrazu. Kod który został wkorzystany wyglada następująco:

Tabbed content5

W pozycjach [ imagetab width=” ” height=” ” ] możliwe jest określenie wysokości i szerokości umieszczonego obrazu. Jeżeli obraz ma posiadać oryginalne wymiary poiedzy cudzysłowiem nie podajemy żadnej wartości. Jeżeli chcemy jednak aby obraz wyświtlał sie w określonym rozmiarze wówczas w każdym cudzysłowiu należy podać wartość pikseli, np.: [ imagetab width = ” 500 ” height = ” 500 ” ]

Jeżeli chcemy uzyskać efekt automatycznego przewiajania obrazów w kodzie należy zamienić następujące sekwencje: Zamiast [ tabs slidertype=”images” ] należy umieścić kod: [ tabs slidertype=”images” fx=”slide” auto=”yes” ] 

ELEGANT SHORDCODES

Po zainstalowaniu wybranego przez nas szablonu, należy pobrac Plugin Elegant Shortcodes i aktywować go w ustawieniach wtyczek w panelu bocznym wordpressa. Po jego włączeniu w naszym edytorze tekstu pojawią się nastepujące ikony:

Tabbed shortcodes

Ikona zaznaczona na zilelono to panel umożliwiający dodawanie zakładek w formie slidera, obrazu, zakładek po lewej stronie i u góry nad treścią. Są to dokładnie takie same Zakładki jak opisane powyżej tylko dodawane bez interwencji ręcznej w kodzie. Oznacza to, że po uzupełnieniu odpowiednich pól, kod który pokazywaliśmy Wam powyżej utworzy się automatycznie. Poniższy obraz przedstawia panel, w którym tworzone są zakładki poprzez Elegant Shordcodes.

Tabbed shortcodes2

Do wyboru mamy Rodzaj slajdera (Top Tabs – zakładki górne, Left Tabs – zakładki umieszczone po lewej stronie w pionie, Simple – slider bez tytułów zawierający jedynie treść i przewijany za pomoca strzałek, oraz Images – czyli zakładki w formie dowolnego obrazu), Efekt (fade/slide), możliwość włączenia automatycznego przewijania zakładek (Automatycznie: TAK/NIE), Automatyczną Prędkość co oznacza, że sami możemy zdecydować w jakim tempie zakładki będą przewijane (opcja dostępna jedynie w sytuacji w której Automatycznie zostanie ustawione na TAK), Tekst Zakładki, który dostępny jest dla rodzaju Top Tabs i Left Tabs oraz Treść zakładki. Jeżeli zamiast standardowego tekstu w zakładce Treść ma pojawić sie obraz, należy wkleić w polu adres URL obbrazu zewnętrzny bądź z naszego serwera. Jeżeli obrazy które chcemy wyświetlić znajdują się już w naszych Mediach na wordpressie, wystarczy w panelu bocznym wordpressa wejść w Media i w szczegóły danego obrazu aby skopiować jego URL.

Jeżeli po dodaniu danej zakładki okaże się, że chcecie ją edytować (dodać kolejną zakładkę bądź usunąć już istniejącą, albo zmienić prędkość wyświetlania slajdera, dodać obraz, zamienić treść itd.) należy zrobić to ręcznie. Po zapisaniu zmian podczas tworzenia zakładki nie mamy mozliwości ponownego wyświetlenia panelu Zakładek dostępnego z poziomu edytora tekstu.  Do tego przyda Wam się sposób tworzenia ręcznego shortcodów opisany na samym początku artykułu.

Tabbed shortcodes3

THE DIVI BUILDER

Kolejną metodą tworzenia zakładek jest Plugin The Divi Builder. Daje nam on możliwość nie tylko stworzenia samych zakładek, ale ponadto pozwala nam on na łatwą i szybka edycję czcionki, koloru tła, wysokości zakładki itp. W opcjach tworzenia zakładek przez Plugin The Divi Builder możliwe jest dodanie standardowych zakładek u góry nad tekstem i nie ma możliwości stworzenia zkładek po lewej stronie oraz w formie slajdu z automatycznym przewijaniem. Do tego rodzaju animacji służą inne moduły jak np.: slider. Znaczącym plusem takiego działania w PluginieThe Divi Builder jest to, że bez dodatkowych i niestandardowych kodów CSS mamy możłiwość stworzenia niepowatarzalnego wglądu slidera/zakładek korzystając z całego wachlarza dostępnych opcji.Dodajemy Standardową sekcję/Sekcję specjalną. (Nie ma możliwości utworzenia zakładki poprzez sekcje Pełnej szerokości, ale w łatwy sposób można to zmienić edytując ustawienia)

  1. Dodajemy Standardową sekcję/Sekcję specjalną. (Nie ma możliwości utworzenia zakładki poprzez sekcje Pełnej szerokości, ale w łatwy sposób można to zmienić wybierając inny rodzaj sekcji).
  2. Wybieramy ilość kolumn dla danej sekcji.
  3. W kolumnie, w której chcemy wstawić Zakładki, klikamy kursorem na Wstaw moduł(y) i wybieramy moduł Zakładki.

Ustawienia modułu Zakładki składają się z 3 paneli:

  • Ustawień ogólnych, w których dodajemy zakładki.
  • Zaawansowanych ustawień projektu, gdzie dokonujemy zmian kolorów zakładek, edycji czcionki, koloru tła czy obranowania.
  • Niestandardowyh CSS, w których możemy wstawić kod CSS za pomoca którego zmienimy wygląd panelu, jego położenia itp.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.

Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus.

Jeżeli chcemy aby Zakładki prezentowały się w trybie pełnej szerokości w ustawieniach wiersza musimy wymusić tryb pełenej szerokości poprzez ustawienie na TAK polecenia Wymuś pełną szerokość dla tego wiersza oraz ustawiając niestandardową szerokość rynny  na 1. Taka konfiguracja ustawień sprawi, że Zakładki będą prezentowane na całej szerokości strony bez zachowania marginesów. Jeżeli natomiast chcemy aby marginesy zostały zachowane a jedynie zakładki zajmowały szerszą powierzchnię, w ustawieniach wiersza wybieramy TAK przy opcji Wymuś pełną szerokość dla tego wiersza nie modyfikując niestandardowych szerokości rynny.