Share This

Dziś o zakładce Layout - element który pozwala niemal dowolnie zaprojektować układ strony. W Gantry 4 mieliśmy siatkę dzieloną na 12 części gdzie mogliśmy w miarę dowolnie mini manipulować tworząc swoje kompozycje modułów. W każdym jednak poziomym układzie ograniczeni byliśmy tym 12 częściowym podziałem. Proporcje pozycji modułów mogły wyglądać np tak 6/4/2   lub  4/4/4   lub 3/3/3/3. I to było prawie wystarczające. Biorąc jeszcze pod uwagę podział w stronie responsywnej na więcej niż 4 części był trochę za duży. 

Ok zajmijmy się Gantry 5 i nowym rozwiązaniem zakładki Layout

 

Mamy tu podział na lewą część gdzie są "Particles" i prawą "Layout"

Layout jest bardzo rozbudowany - w darmowym szablonie gantry jest bardzo ubogo w porównaniu z tym co widzicie - dodatkowo możemy wczytywać inne layouty za pomocą buttonu "Load" jest m.in kompozycja przypominająca układ z Gantry 4 - a nawet chyba 3 ma nim bazujące.

Wiele nazw pozycji pozostaje z Gantry 4 i to dobrze jeśli decydujemy się zainstalować Gantry 5 na stronie gdzie była wcześniejsza wersja frameworka. Gantry 5 nie jest wstecznie kompatybilne - ale oznacza to tyle że nie da się zrobić aktualizacji między 4 a 5.

Nie jesteśmy na sztywno ograniczeni siatką podzieloną na 12 części co ma wiele zalet. Dodatkowo możemy tworzyć własne pozycje modułów i usuwać je w bardzo prosty sposób. Mimo wydania chyba już 5 szablonów dla joomla zdarzają się niestety ciągle błędy w aktualizacjach. Rokowania są jednak więcej niż obiecujące.

W całej tej kompozycji z całą pewnością powinno pojawić się kilka elementów

Na zielono
- Page Content - to miejsce gdzie pojawiają się artykuły - czasem to wyłączamy szczególnie na stronie głównej ale jednak w joomla to składnik konieczny
- System Messages - czyli miejsce na komunikaty systemowe - np info po wysłaniu postu z formularza kontaktowego

Na niebiesko
- Module Position

Na fioletowo - te cząsteczki nie są widoczne na stronie - umieszczamy je w sekcji Atoms
- Google Analytics - pamiętajmy że wpisanie kodu w sekcji setting (wcześniej omawiana zakładka) nic nie da - musi znaleźć się ta cząsteczka w layoucie szablonu przypisanego do strony głównej.
- Custom CSS/JS - nie używałem ale z tego co widzę służy do podawania lokalizacji własnych plików. W Gantry 5 podobnie jak w 4 możemy nadpisywać style za pomoc pliku custom.scss 
Tyle że w 4 był to plik .less  - jednak w funkcjonalności nie ma prawie różnic. Ma to tę zaletę że nie musimy ingerować w kod szablonu i bać że coś sknocimy. Po za tym pamiętajmy że szablony RT są aktualizowane wiec bezpośrednia ingerencja w pliki szablonu może być wymazana w czasie aktualizacji.

Gantry 5 - responsywne strony www Lublin na joomla  

 

 Jak usunąć pozycję modułu
Nic trudnego - łapiemy kursorem i przeciągamy do góry w kierunku czerwonej kropy :) Następnie zapisujemy buttone "Save Layout"

Gantry 5 - responsywne strony www Lublin na joomla

 

 

Pozostałem pozycje rozciągają się na całą szerokość. Jeśli chcemy wrócić do wcześniejszego układu mamy już aktywny button "Undo" - historia zmian to kolejna nowość w Gantry5

Gantry 5 - responsywne strony www Lublin na joomla

 

Za mało poziomów w sekcji?
Możemy je łatwo dodawać za pomocą "plusika" który pojawia się po najechaniu kursorem w wybrną sekcję

Gantry 5 - responsywne strony www Lublin na joomla

 

Pojawia się nowe pole z napisem "Drop particles here" więc łapiemy i przeciągamy - jeśli robicie stronę dla klienta radzę używać tu tylko cząsteczek typu pozycja menu -w innym wypadku jeśli klient będzie chciał wszystko mieć edytowalne będziecie musieli uczyć go podstaw frameworka

Gantry 5 - responsywne strony www Lublin na joomla

 

Tak wygląda dodawanie nowej pozycji menu - jak i każdej innej cząsteczki - przeciąganie. Fani wklepywania kodu z ręki pewnie odbiorą to jako profanacje ale dla mnie to spore ułatwienie. Prosty webmaster w wielu kwestiach obędzie się już bez programisty.

Gantry 5 - responsywne strony www Lublin na joomla

 

Ok mamy nową pozycję, możemy dodać jeszcze kilka, ale w stronie RWD której nie chcecie potem dodatkowo jeszcze optymalizować pod mniejsze rozdzielczości myślę że więcej niż 3 to za dużo.

Co dalej trzeba nadać jakąś nazwę pozycji. Jesteśmy w sekcji "Header" jeśli nie przewidujemy więcej pozycji wyżej "header-d" będzie OK
klikamy w zębatkę jaka znajduje się przy każdej "particle - cząsteczce" i wyskakuje pop-up. Możemy zmienić nazwę pozycji (klikamy w ołóweczek) i "Key" nazwę systemową (?)

Gantry 5 - responsywne strony www Lublin na joomla

 

może to wyglądać tak

Gantry 5 - responsywne strony www Lublin na joomla

 

W zakładce "Block" tego okna - możemy dodać m.in wbudowane w szablon style dla całej pozycji menu. RT zapewnia wiele wbudowanych styli modułów, możemy też bez problemu w zewnętrznym pliku tworzyć swoje style
Ponieważ z jednej pozycji umieszczamy czasem kilka modułów mają one ten sam styl i prezentowane są jako blok. }
Ale przecież możliwość dodawania własnych klas jest też w modułach - niestety do tej pory nie działa - wydaje mi się że jest to niedopracowanie i ta opcja powinna się pojawić, tak żeby moduły będące w jednej pozycji mogły mieć indywidualne style.

Na dole mamy podaną w polu "Block size" szerokość pozycji - jest jedna więc 100%
Z pozostałych pól nie korzystałem więc nie piszę nic :)
Jeśli użyjemy przycisku "Apply" okno się zamknie i będzie trzeba zmiany zapisać jeszcze buttonem "Save Layout" więc polecam "Apply and Save"

Gantry 5 - responsywne strony www Lublin na joomla

 

Poziomy możemy także zamieniać kolejnością przeciągając je w ramach sekcji. Można oczywiście przeciągnąć cały poziom do innej sekcji ale lepiej tego nie robić chociażby żeby zachować porządek w nazewnictwie w sekcjach naszej strony www Lublin. Przeciąganie pozycji modułów w ramach sekcji i poza nią też jest możliwe.

Gantry 5 - responsywne strony www Lublin na joomla

 

Możemy także modyfikować ustawienia całej sekcji

Gantry 5 - responsywne strony www Lublin na joomla

 

Layout - boxed lub Fullwidth - ale w tej chwili jest z tym różnie. Wydawać by się mogło że wybierając Fullwidth otrzymamy poziom o szerkości ekramu - ale w ostatnim szablonie wybranie tej opcji pozwalało jedynie na zmianę koloru tła przez przypisanie stylu a teksty musiały zachować szerokość strony. Możemy też przypisać Styll CSS dla całej sekcji

Gantry 5 - responsywne strony www Lublin na joomla

 

W tym tutorialu tyle. Gantry 5 rozwija się i czasem poprawki przynoszą także błędy. Jeszcze kilka szablonów i może będę wiedział więcej. O pozostałych "particle - cząstkach" w kolejnym tutorialu.

 

 

Przydało się? - Udostępnij

Blog - popularne

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

Przezroczystość w plikach PNG - jak zapisać plik z PNG z przezroczystością w Adobe Photoshop dla...

Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej