Uatrakcyjnij treść za pomocą DJ-Tabs

To co jest NAJWAŻNIEJSZE w Twoim serwisie, to ciekawa TREŚĆ!

Pewnie doskonale o tym wiesz!

Jak tworzyć ciekawą treść? Jeżeli użytkownicy znajdą w Twoim serwisie to, co jest dla nich ciekawe i intrygujące, rozwiązuje ich problemy, to będziesz mieć wiele odwiedzin każdego dnia :-)

Nie o tym jednak tym razem.

W tym artykule chciałbym się bardziej skupić na prezentacji treści!

Współczesny internauta jest dzisiaj bardzo wymagający i chce, aby ta treść była przedstawiona w ciekawy i wygodny sposób! Znajdź choć jeden współczesny portal, który nie ma ani jednej grafiki! Znasz powiedzenie "jeden obraz wart jest tysiąca słów"?

DJ-Tabs to jedno z wielu użytecznych rozszerzeń, jakie znajdziesz w serwisie: DJ-Extensions, które umożliwia prezentację treści w różny, atrakcyjny sposób.

Za jego pomocą, treści Twojego serwisu możesz przedstawić w formie:

• zakładek:

• rozwijanych belek (tzw. akordeonu):

Treści prezentowane w ten sposób, mogą zawierać pojedynczy artykuł, kategorię artykułów, dowolny moduł lub link video.

Zobacz możliwości komponentu DJ-Tabs w wersji demonstracyjnej nowego szablonu JM-Hot-News, wykonanego przez ekipę serwisu Joomla-Monster.com. Szablon ten możesz zobaczyć i ocenić na stronie: Live Demo.

Zwróć uwagę w jak różny sposób można przedstawić treści serwisu korzystając z komponentu DJ-Tabs:

Zakup komponent DJ-Tabs

DJ-Tabs, to komercyjne rozszerzenie, którego półroczna subskrypcja na dzień dzisiejszy wynosi 30$, czyli niecałe 100 zł. Możesz je zakupić w serwisie DJ-Extensions. Aby to zrobić musisz najpierw utworzyć swoje konto. Kliknij link Signup.

 

Wypełnij wszystkie wymagane pola i kliknij przycisk REGISTER:

Po chwili dostaniesz maila z linkiem aktywacyjnym. Kliknij go, aby aktywować konto. Po chwili zobaczysz komunikat informujący o zakończeniu procesu aktywacji Twojego konta. Kliknij link Login, aby zalogować się w serwisie DJ-Extensions.

 

Wpisz nazwę użytkownika i hasło zdefiniowane podczas rejestracji (tworzenia nowego konta) w serwisie, a następnie kliknij przycisk LOGIN.

Teraz kliknij w menu Extensions pozycję DJ-Tabs:

W kolejnym oknie kliknij link: BUY NOW:

Teraz wybierz najlepszy dla Ciebie plan subskrypcyjny i kliknij przycisk BUY NOW:

Teraz uzupełnij swoje dane niezbędne do kontynuowania procesu zakupu. Na koniec kliknij przycisk SAVE.

W oknie Confirmation, sprawdź poprawność zamówienia, zaznacz potwierdzenie zapoznania się z regulaminem, a następnie kliknij przycisk CONTINUE.

W oknie Checkout możesz wpisać kod z kuponu rabatowego (jeżeli takowy posiadasz) i potwierdzić go przyciskiem APPLY. Jeżeli nie posiadasz kodu, kliknij od razu przycisk CHECKOUT.

Aby zakończyć proces zakupu, musisz jeszcze przejść cztery kroki:

• Review Cart (Przegląd Koszyka) - kliknij przycisk Continue to Shipping Information

• Shipping Information (Informacje Wysyłkowe) - uzupełnij wymagane pola, a następnie kliknij przycisk Continue to Billing Information

 

• Billing Information (Informacje o płatności) - jeżeli Twoje dane dotyczące płatności są takie same jak dane wysyłkowe, zaznacz pole wyboru: My Billings information is the same as my shipping information, a następnie kliknij przycisk Continue to Payment Method

• Payment Method (Metoda Płatności) - wybierz jedną z dwóch metod płatności:
  • Karta kredytowa - podaj numer swojej karty kredytowej, datę ważności oraz kod CVV, a następnie kliknij przycisk Submit Payment, aby sfinalizować transakcję

• • PayPal - jeżeli posiadasz konto PayPal, kliknij przycisk Continue to PayPal, wówczas zostaniesz przekierowany do serwisu PayPal, gdzie po zalogowaniu potwierdzisz wykonanie płatności.

Jeżeli proces zakupu zostanie zakończony powodzeniem, zaloguj się do serwisu DJ-Extensions, a następnie kliknij link My Account:

W oknie My licenses zobaczysz listę zakupionych rozszerzeń wraz z informacją od i do kiedy obowiązuje. Kliknij ikonkę obok nazwy komponentu: DJ-Tabs, aby otworzyć okno, w którym znajdziesz linki umożliwiające pobranie rozszerzenia.

Teraz w oknie Downloads kliknij link: Dj-Tabs All in one lub przycisk Download, następnie zapisz plik w dowolnej lokalizacji w Twoim komputerze.

Zainstaluj komponent DJ-Tabs

Zaloguj się do zaplecza swojego serwisu, a następnie kliknij w menu Rozszerzenia pozycję Instalacje:

W oknie Instalacje: Instalator, kliknij zakładkę Instaluj z pakietu , a następnie kliknij przycisk Przeglądaj. Wybierz zapisany wcześniej plik instalacyjny komponentu DJ-Tabs i kliknij przycisk Wczytaj i zainstaluj.

 

Po chwili zobaczysz komunikaty informujące o prawidłowym zainstalowaniu pakietu DJ-Tabs:

Kliknij teraz w menu Komponenty pozycję DJ-Tabs.

Zobaczysz panel kontrolny (pulpit) komponentu DJ-Tabs, który składa się z menu znajdującego się po prawej stronie oraz 8 przycisków, które prowadzą do najważniejszych funkcji komponentu. Po prawej stronie znajduje się przycisk Opcje oraz sekcja informująca o aktualnie zainstalowanej wersji DJ-Tabs, autorze rozszerzenia, najnowszej dostępnej wersji a także informacja dotycząca licencji. 

Aby zarejestrować komponent, kliknij gdziekolwiek w obszarze z komunikatem: ENTER YOUR LOCENCE CODE FOR.

Następnie w okienku modalnym w polu Licence wklej kod swojej licencji. Kod tren znajdziesz logując się do serwisu DJ-Extensions, a następnie klikając link My Account:

Kliknij przycisk Submit, aby zapisać zmiany:

Po wklejeniu kodu licencji zobaczysz stosowny komunikat wraz z informacją, do kiedy wprowadzony kod jest ważny. Kliknij przycisk Close, aby zamknąć okno modalne.

Komponent DJ-Tabs jest już zainstalowany i gotowy do pracy ;-)

Utwórz nową grupę zakładek

Tak jak w większości komponentów Joomla!, treści segregowane są w kategoriach. Podobnie jest w komponencie DJ-Tabs. W tym przypadku zawartość przechowywana jest w grupach.

Zawartość, jaka ma być wyświetlana za pomocą DJ-Tabs, musi należeć do jakiejś grupy, zatem najpierw utwórz nową grupę klikając przycisk New Group znajdujący się na pulpicie komponentu DJ-Tabs, lub w oknie DJ-Tabs >> Groups (menu pionowe Groups), przycisk Utwórz.

W polu Tytuł wpisz nazwę nowotworzonej grupy (np. Grupa Testowa), pole Alias pozostaw puste – system sam je zdefiniuje na podstawie wpisu w polu Tytuł. W polu Stan zdecyduj o stanie publikacji grupy (Opublikowano/Nieopublikowano).

Aby zapisać wprowadzone zmiany kliknij przycisk Zapisz i zamknij.

Pamiętaj, że listę utworzonych grup możesz zobaczyć klikając w menu pozycję Groups lub w przycisk Groups znajdujący się na pulpicie:

Dodaj nową zawartość zakładek (kart) w DJ-Tabs

Kliknij przycisk New Item znajdujący się na pulpicie komponentu DJ-Tabs, lub w oknie DJ-Tabs >> Items (menu pionowe Items), kliknij przycisk Utwórz.

Zakładka (karta) zawierająca pojedynczy artykuł

Jeżeli chcesz, aby nowotworzona zakładka zawierała tylko jeden konkretny artykuł, to w polu Name wpisz nazwę zakładki (w moim przykładzie wpisuję: Artykuł), w polu Group wybierz z listy grupę do której ma być przypisana nowotworzona zakładka (w moim przykładzie: Grupa Testowa), natomiast w polu Type, wybierz z listy pozycję: Single Article. Kliknij kartę Basic Options, aby zdefiniować kolejne ustawienia:

Teraz w polu Icon wybierz z listy ikonę jaka będzie widoczna w tworzonej zakładce lub pozostaw pozycję: [no icon]. Ja wybieram ikonkę: icon-pencil-2. W polu Article kliknij przycisk Wybierz, a następnie w oknie modalnym kliknij nazwę artykułu, który ma być wyświetlany w tworzonej zakładce. Ponieważ bazuję na typowej instalacji Joomla! 3.2 z załadowanymi przykładowymi danymi, wybieram artykuł Australian Parks.

Kliknij teraz kartę: Article Options, aby przejść do opcji związanych z wyświetlaniem wybranego artykułu.

Jeżeli w polach z listami wyboru pozostawisz pozycję Use Global, będzie to oznaczało, że do wyświetlania danej zawartości zostaną użyte opcje tzw. globalne zdefiniowane w opcjach konfiguracyjnych komponentu (przycisk Opcje na pulpicie). Na razie zostaw wszystkie ustawienia domyślne i kliknij przycisk Zapisz i nowy aby utworzyć nową zakładkę.

 

Zakładka (karta) zawierająca kategorię artykułów

Teraz utwórz zakładkę, która będzie zawierała listę artykułów z określonej kategorii. W polu: Name wpisz nazwę zakładki (w moim przykładzie wpisuję: Kategoria), w polu Group wybierz z listy grupę do której ma być przypisana nowotworzona zakładka (Kategoria Testowa), natomiast w polu Type, wybierz z listy pozycję: Article Category.

Kliknij kartę Basic Options i w polu Icon wybierz z listy ikonę jaka będzie widoczna w tworzonej zakładce lub pozostaw pozycję: [no icon]. Ja wybieram ikonkę icon-folder-2 ;-) W polu Category wybierz z listy kategorię artykułów. Ponieważ bazuję na typowej instalacji Joomla! 3.2 z przykładowymi danymi, wybieram jedną z kategorii, np. Joomla! W polu Articles Limit wpisz maksymalną ilość artykułów, jaka ma być wyświetlana w nowotworzonej zakładce. Ja wpisuję: 10 ;-)

Kliknij kartę Article Options, aby przejść do opcji związanych z wyświetlaniem artykułów.

 

Podobnie jak w przypadku typu Single Article, jeżeli w polach z listami wyboru pozostawisz pozycję Use Global, będzie to oznaczało, że do wyświetlania danej zawartości zostaną użyte opcje tzw. globalne zdefiniowane w opcjach konfiguracyjnych komponentu (przycisk Opcje na pulpicie).

Na razie zostaw wszystkie ustawienia domyślne i kliknij przycisk Zapisz i nowy aby utworzyć nową zakładkę.

Zakładka (karta) zawierająca moduł

Kolejna zakładka będzie zawierać jeden z modułów utworzonych w Twoim serwisie.

W polu: Name wpisz nazwę zakładki (w moim przykładzie wpisuję: Moduł), w polu Group wybierz z listy grupę do której ma być przypisana nowotworzona zakładka (Grupa testowa), natomiast w polu Type, wybierz z listy pozycję: Module Position.

Kliknij kartę Basic Options i w polu Icon wybierz z listy ikonę jaka będzie widoczna w tworzonej zakładce lub pozostaw pozycję: [no icon]. Ja wybieram ikonkę icon-puzzle. W polu Position wpisz nazwę pozycji jaką przypiszesz do modułu, który powinien wyświetlać się w nowotworzonej zakładce. Ja wpisuję: modul_grupa_testowa. Zauważ, że w tym przypadku nie ma zakładki Article Options.

Na koniec kliknij przycisk Zapisz i nowy, aby zapisać wprowadzone zmiany i utworzyć kolejną zakładkę.

Zakładka (karta) zawierająca wideo z serwisu YouTube lub Vimeo

Następna zakładka będzie zawierać film video z serwisu YouTube lub Vimeo.

W polu: Name wpisz nazwę zakładki (w moim przykładzie wpisuję: Video), w polu Group wybierz z listy grupę do której ma być przypisana nowotworzona zakładka (Grupa Testowa), natomiast w polu Type, wybierz z listy pozycję: Video Link.

Kliknij kartę Basic Options i w polu Icon wybierz z listy ikonę jaka będzie widoczna w tworzonej zakładce lub pozostaw pozycję: [no icon]. Ja wybieram ikonkę: icon-play-2. W polu Video Link wklej link do wideo umieszczonego w serwisie YouTube lub Vimeo.

Na koniec kliknij przycisk Zapisz i zamknij, aby zapisać wprowadzone zmiany.

 

Wyświetl utworzone zakładki (karty, taby)

Aby utworzone za pomocą komponentu DJ-Tabs zakładki były widoczne w Twoim serwisie, możesz utworzyć nową pozycję menu, opublikować moduł DJ-Tabs lub umieścić je po prostu w artykule.

Utwórz nową pozycję menu

To bardzo prosta czynność :-)

Kliknij w menu Menu, a następnie pokaż wskaźnikiem myszy nazwę menu, do którego chcesz dodać pozycję, po kliknięciu której zostaną wyświetlone zakładki DJ-Tabs i kliknij pozycję Utwórz pozycję menu.

 

W polu Tytuł menu wpisz nazwę pozycji menu. Ja wpisuję: Accordion Views ;-)

W polu Typ pozycji menu kliknij przycisk Wybierz i w oknie modalnym kliknij link DJ-Tabs, a następnie kliknij link Accordion View. Wówczas Twoje zakładki będą się wyświetlać w widoku rozwijanych belek (tzw. Akordeonu);

Teraz kliknij kartę Opcje i w polu Select Group wybierz z listy grupę zakładek, jaka ma się wyświetlać po kliknięciu tej pozycji menu (w moim przykładzie, to: Nowa grupa). W polu Select Theme wybierz szablon definiujący wygląd wybranej grupy zakładek DJ-Tabs. Na koniec kliknij przycisk Zapisz i zamknij, aby zapisać wprowadzone zmiany.

Otwórz stronę główną swojego serwisu i kliknij w menu pozycję: Accordion Views, aby zobaczyć wygląd zakładek wyświetlanych za pomocą komponentu DJ-Tabs.

Jeżeli podczas tworzenia nowej pozycji menu w polu Typ pozycji menu wybierzesz Tabs View, wówczas Twoje zakładki będą się wyświetlać w widoku zakładek (tabów, kart):

Opublikuj moduł DJ-Tabs

Otwórz okno menadżera modułów (menu Rozszerzenia pozycja Moduły), a następnie odszukaj moduł o nazwie DJ-Tabs i kliknij na jego nazwie, aby edytować jego ustawienia.

W polu Select Group wybierz z listy grupę zakładek, jaka ma się wyświetlać w tym module. W moim przykładzie to: Grupa Testowa. W polu Select Theme wybierz szablon definiujący wygląd wybranej grupy zakładek DJ-Tabs., natomiast w polu Select layout wybierz z listy:

• Tabs – jeżeli chcesz wyświetlić swoje zakładki w widoku zakładek;
• Accordion – jeżeli chcesz wyświetlić swoje zakładki w widoku rozwijanych belek (tzw. akordeonu);

W polu Pozycja wybierz pozycję w szablonie Twojego serwisu na jakiej ma się wyświetlić moduł DJ-Tabs.

Przetestuj działanie DJ-Tabs i zdefiniuj w szablonie protostar pozycję modułu na której obecnie znajduje się menu poziome: position-1.

W polu Stan wybierz pozycję Opublikowano.

Kliknij kartę Przypisz do pozycji menu i w polu Zasada przypisania wybierz pozycję Na wszystkich stronach lub inną, jeżeli chcesz, aby moduł był wyświetlany tylko na wybranych pozycjach menu.
Pamiętaj, że domyślnie moduł nie jest przypisany do żadnej pozycji menu, więc nie będzie widoczny w Twoim serwisie, nawet wówczas, gdy zostanie opublikowany! 

 

Na koniec kliknij przycisk Zapisz i zamknij, aby zapisać wprowadzone zmiany.

Pamiętaj, aby wycofać publikację modułu Top, który obecnie wyświetla menu na pozycji position-1 w szablonie protostar.

Teraz odśwież stronę główną Twojego serwisu i zobacz jak prezentują się zakładki DJ-Tabs:

Dodaj zakładki DJ-Tabs w wybranym artykule

Edytuj wybrany artykuł, a następnie umieść kursor tekstowy w miejscu, w którym chcesz umieścić zakładki utworzone w komponencie DJ-Tabs i kliknij przycisk DJ-Tabs znajdujący się pod edytorem.

W oknie modalnym w polu Select Group wybierz z listy grupę zakładek, jaka ma się wyświetlać w tym module.
W polu Select Theme wybierz szablon definiujący wygląd wybranej grupy zakładek DJ-Tabs.
W polu Select Layout wybierz z listy:

• Tabs – jeżeli chcesz wyświetlić swoje zakładki w widoku zakładek;
• Accordion – jeżeli chcesz wyświetlić swoje zakładki w widoku rozwijanych belek (tzw. akordeonu);

Na koniec kliknij przycisk Insert:

Zauważ, że w edytorze w miejscu przez Ciebie wskazanym pojawiła się ikonka komponentu DJ-Tabs :-)

Kliknij przycisk Zapisz i zamknij, aby zakończyć edycję artykułu, a następnie sprawdź, jak prezentują się zakładki DJ-Tabs w artykule:

Szablony DJ-Tabs

Wygląd zakładek zdefiniowanych w komponencie DJ-Tabs możesz w bardzo szerokim zakresie modyfikować. Możesz także tworzyć własne szablony korzystając z opcji dostępnych z poziomu komponentu.

Aby edytować istniejące szablony, kliknij na pulpicie komponentu DJ-Tabs przycisk Themes:

Aby dostosować do własnych potrzeb istniejący szablon, wystarczy, że klikniesz nazwę wybranego szablonu.

Niezależnie od tego, czy tworzysz nowy szablon (przycisk Utwórz lub przycisk New Theme na pulpicie), czy edytujesz istniejący, masz do dyspozycji dwie zakładki: Edit i Styling.

Zakładka Edit zawiera następujące pola:

• pole Tytuł – wpisz lub zmień nazwę szablonu
• pole Stan - zdecyduj o stanie publikacji szablonu
• pole Random - zdecyduj, czy szablon ma być włączony do puli szablonów losowych, kiedy wybierzesz opcję >>RANDOM<< w polu Select Theme.

Zakładka Styling, zawiera kilkanaście pól, których zmiana wpływa na wygląd szablonu DJ-Tabs. Zamiast opisu poszczególnych pól przygotowałem dla Ciebie grafikę, dzięki której szybciej załapiesz jakie opcje odpowiadają za poszczególne elementy zakładek DJ-Tabs:

Mam nadzieję, że teraz nie masz już obaw przed, czy warto korzystać z komponentu DJ-Tabs!

Życzę miłego testowania ;-)

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Wpisz swoje imię oraz adres e-mail a następnie kliknij "ZAPISZ MNIE"

Twoje imię:


Adres email: