Czym są pozycje w Joomli?

Podstawowym elementem szablonów Joomla są pozycje modułów, które pozwalają nam określić pozycję danego elementu na naszej stronie podzielonej na sekcje.Pozycje są tworzone przez autora szablonu i nie są stałe dla każdego produktu, więc ilość pozycji, ich nazewnictwo czy też ich lokalizacja w szablonie może się różnić w zależności od dostawcy szablonu.

Używanie pozycji modułów w Joomli jest dużym ułatwieniem w dostosowaniu strony do Twoich potrzeb. Możesz wyświetlać w dowolnym miejscu moduły czy też zmieniać ich kolejność, np.: poprzez intuicyjny system “ Drag and drop “ czyli złap i upuść, pozwala Tobie bez jakiejkolwiek znajomości środowiska informatycznego posortować moduły w odpowiedniej kolejności.

Jak sprawdzić pozycje modułów w Joomla?

Przejdź do swojego panelu administratora, a następnie Rozszerzenia > Szablony

Następnie przejdź do ustawień szablonów - Opcje ( w prawym górnym rogu )

Przełącz Podgląd pozycji modułów na “ włączony “ i zapisz ustawienia.

Gdy już zapiszesz ustawienia wystarczy,że dopiszesz do adresu strony końcówkę : /index.php?tp=1

Czyli adres Twojej strony powinien wyglądać tak : www.TwojaDomenaJoomla.pl/index.php?tp=1

Jeśli wszystko zrobiłeś dobrze, to wejściu w adres powinieneś zobaczyć taki widok pozycji :

( pamiętaj, że ilość i nazewnictwo pozycji może się u Ciebie różnić. )

Jak przypisać moduł do pozycji ?

Możesz przypisać dowolny moduł do dowolnej pozycji w Joomla.

Na potrzeby poradnika stworzymy custom moduł z tekstem, a następnie wyświetlimy go w prawej kolumnie.

Zaloguj się do swojego panelu administratora Joomla i przejdź do Rozszerzenia > Moduły, następnie naciśnij przycisk Utwórz aby stworzyć nowy moduł.

Jeśli posiadasz już moduł, którego chcesz zmienić pozycję, możesz pominąć ten krok.

Z listy tworzenia wybierz custom moduł ( Własny )

Z prawej strony widoku tworzenia modułu znajduję się pole “ Pozycja” - wybierać pozycje możesz poprzez wpisanie jej pierwszych liter ( jeśli znasz jej nazwę ) lub poprzez wybór z listy.

Na potrzeby poradnika wybrałem pozycję Right-Column.

Upewnij się,że Twój moduł jest wyświetlany poprawnie na docelowej stronie.

Możesz sprawdzić do jakich pozycji menu jest przypisany moduł w zakładce “ Przypisz do pozycji menu “

Jak zmienić kolejność wyświetlania modułów ?

Możesz przypisać nieograniczoną ilości modułów do jednej pozycji.

Dla przykładu utworzyłem 3 różne moduły (menu, custom moduł z tekstem oraz obrazek ) i wyświetliłem je na jednej pozycji ( right-column)

Jeśli aktualna kolejność modułów Tobie nie odpowiada możesz ją zmienić w prosty sposób korzystając z wbudowanego narzędzia. Przejdź do Rozszerzenia > Moduły. 

Aby łatwiej zarządzać, przefiltruj swoje moduły poprzez pozycję. W tym celu naciśnij na Narzędzia wyszukiwania i wybierz pozycję na której chcesz dokonywać zmian.

Następnie naciśnij ikonę ze strzałkami (3) i za pomocą metody Drag and drop ( przeciągnij i upuść ) ustaw kolejność wyświetlania.

Co się stanie kiedy zmienisz szablon Joomla?

Jeśli zmienisz szablon Joomla, musisz na nowo przypisywać pozycję modułów, ponieważ są one zapisane w kodzie szablonu, a zmiana na nowy wiąże się z ich zmianą.

W naszych szablonach dla Joomla 3.0 wspierających system bootstrap grid szerokość można określić statycznie - “fixed” lub płynnie - “fluid”.

Opcja “fixed”

Szerokość szablonu zależy od rozdzielczości urządzenia, na którym przeglądana jest strona.
Szerokość szablonu będzie się stopniowo zmniejszać jeżeli strona będzie przeglądana na urządzeniach z małym ekranem.

Opcja “fluid”

Opcja pozwala na określenie szerokości szablonu procentowo lub w pikselach. Jeśli umieścimy wartość w pikselach szerokość wszystkich kolumny zostanie przeliczona na wartość określoną procentowo - uwzględnione zostaną też marginesy między kolumnami. Oczywiście szablon będzie również dostosowywał się do małych ekranów.

Opcje “fixed” i “fluid” mogą być określone w Template Manager.

Bootstrap grid - idea 12 kolumn

Bootstrap grid system pozwala umieścić wiele modułów w tej samej pozycji szablonu a także usatlić szerokość każdego z modułów, określając liczbę kolumn, które ma zajmować.

Idea podziału pozycji szablonu na obszary przedstawia się następująco:

Równe szerokości obszarów.

Wrapper używa 12 podstawowych kolumn.
Iloraz ilości wykorzystanych obszarów i ich szerokości (wyrażonej w ilości zajmowanych kolumn) musi być równy 12.

Różne szerokości obszarów.

Obszary w danym wierszu mogą mieć różną szerokość (wyrażoną w ilości zajmowanych kolumn). Suma szerokości obszarów w danym wierszu musi być równa 12.

Jak to wygląda w praktyce?

Różnica w zastosowaniu 12 kolumnowego systemu bootstrap w opcjach “fixed” i “fluid” jest znaczna.

Opcja “fixed”

Przyjrzyjmy się naszemu darmowemu szablonowi JM-Lifestyle.
Po lewej widać screenshot z opisanymi pozycjami szablonu.
Po prawej stronie mamy 12 kolumn siatki graficznej szablonu.

Wszystkie obszary wyświetlone w jednym wierszu muszą dać w sumie 12 kolumn. Jeżeli chciałbyś podzielić którąś z pozycji szablonu na więcej obszarów, pamiętaj że w sumie w wierszu powinno być ich 12.

Przykład.
Przykład 1 - opcja ‘fixed’

W przykładzie zajmiemy się dwiema pozycjami szablonu - top-bar-1 i top-bar-2. Stwórzmy 2 moduły w pozycji top-bar-1 oraz kolejne 2 w pozycji top-bar-2. Musimy określić rozmiar każdego z modułów (parametr Bootstrap Size w zakłdace Advanced Options).

Wybierz Extensions -> Module Manager , a następnie w filtrze wybierz pozycję top-bar-1.

Następnie wejdź w okno edycji kolejnych modułów i ustaw Bootstrap Size.

W przypadku modułów w pozycji top-bar-1 ustalamy Bootstrap Size dla pierwszego modułu na 2 a da drugieo modułu na 4.
Dla obu modułów z pozycji top-bar-2 ustawiamy Bootstrap Size na 3.
Następnie ustaw prawidłową kolejność. Rezultat powinien wyglądać nastepująco.

Zajmijmy się kolejnym przykładem w pozycji bottom.
Przykład 2 - opcja “fixed”

Tym razem mamy 3 moduły w jednym wierszu przypisane do pozycji szablonu nazwanej bottom.
Dla modułów pierwszego i drugiego ustawmy Bootstrap Size na 3. Dla trzeciego wartość Bootstrap Size wyniesie 6.
Rezultat będzie wyglądał następująco:

Opcja “fluid”

Ta opcja daje większe możliwości niż “fixed”.

W tym wypadku, inaczej niż w opcji “fixed”, suma ilości kolumn (wartość parametru Bootstrap Size) wykorzystywanych przez obszary w jednym wierszu nie musi być równa 12. Tym razem, każda z pozycji szablonu może być podzielona na 12 kolumn więc ich suma w jednym wierszu może być różna.

Teraz suma kolumn wrapper’a wynosi 12 ale dodatkowo może podzielić każdą z nich na 12 komórek. Żeby zrozumiec różnicę zróbmy jeszcze raz te same przykłady którymi zajmowaliśmy się przy analizowaniu opcji “fixed”.

Przykład 1 - opcja “fluid”

Tym razem dla modułów w pozycji top-bar-1 ustawiamy Bootstrap Size na 4 i 8. Dla obu modułów w pozycji top-bar-2 Bootstrap Size ustawiamy na 6.
Rezultat wygląda następująco.

Przykład 2 - opcja “fluid”

Jak widać w tym przykładzie wartości parametru Bootstrap Size pozostają takie same jak w pozycji “fixed”.
Dlaczego? Ponieważ pozycja bottom zajmuje cały wiersz (nie musi dzielić miejsca z inną pozycją szablonu) 12 kolumn wrapper’a pokrywa się z 12 komórkami na które możemy podzielić pozycję bottom.

Ustawienia parametru Bootstrap Size pozostawiamy takie same jak wcześniej.
Dla modułów pierwszego i drugiego ustawmy Bootstrap Size na 3. Dla trzeciego wartość Bootstrap Size wyniesie 6.

Rezultat się nie zmienia: