W poprzednim tutorialu - pokazałem jak w layout motywu umieścić pozycję widżetu w sekcji header frameworka Gantry 5 dla WordPress. W jednej sekcji możemy umieścić wiele pozycji widżetów i particles / cząstek, ale ze względu na responsywność nie powinno ich być więcej niż 3-4 w jednej row - linii.

Jeśli nie widziałeś wcześniejszego tutorialu to możesz nie zrozumieć co robię bo niektóre jego elementy które pojawiły się wcześniej nie będą tłumaczone tak dokładnie.

1. Logujemy się do zaplecza WordPress i przechodzimy do motywu Helium Theme >>> zakładka Layout >>> wybieram outline "Testowy"

Gantry5, WordPress, layout

 

2. W sekcji Header mamy teraz jedną pozycję widżetu - dodajmy jeszcze dwie kolejne. Przeciągamy je z panelu bocznego jak poprzednio. Starajmy się umieścić je po prawej stronie pozycji widżetu "Header A".

Pozycje widżetu mają w tym momencie jeszcze nie zmienione nazwy - trzeba nadać im nazwy systemowe zgodne z nazwą sekcji w której się znalazły - czyli Header B i Header C.

Gantry5, WordPress, layout

 

3. Klikam w ikonkę zębatki przy "Widżet Positions" i pojawia się pop-up gdzie wstawiam nazwy systemowe jak widać poniżej. Klikamy niebieski button "Apply and Save" i powtarzam operację z kolejną pozycją widżetu tym razem nadając nazwę "header-c"

Gantry5, WordPress, layout

Projektuję responsywne strony internetowe Lublin na WordPress

4. Pozycje widżetów dla strony www Lublin mają już nadane swoje nazwy systemowe. Oczywiście możecie wstawić tam inne nazwy ale jak pisałem we wcześniejszym tutorialu warto stosować nazewnictwo sugerowane przez twórców frameworka Gantry 5 dla WordPress.

W sekcji Header mamy więc teraz 3 pozycje widżetów o nazwach Header A (id: header-a), Header B (id: header-b), Header C (id: header-c)

Pozycje widżetów mają identyczne szerokości ale można zmienić na dwa sposoby - pokaże to już w kolejnym tutorialu. Możemy dodać jeszcze kolejne pozycje widżetów w tej row - linii, ale ja tego nie stosuję. Uważam że nie powinno być ich więcej niż 4, a 3 to optymalna liczna dla jednej linii.

Gantry5, WordPress, layout

 

5. Nic nie stoi jednak na przeszkodzie żebyśmy dodali kolejna linię w tej sekcji i przeciągnęli do niej kolejne pozycje widżetów.

Klikamy małą ikonkę "+" i pojawia się poniżej kolejna linia w której widzimy napis "Drop particles here" możemy dodawać kolejne particles / cząstki do tej row / linii. Zasada jest identyczna - przeciąganie.

Gantry5, WordPress, layout

 

 6. Dodałem dwie kolejne pozycje widżetów i nadałem im kolejne nazwy systemowe Header D (id: header-d), Header E (id: header-e). Jak widać zajmują one po 50% miejsca w linii frameworka Gantry 5 dla strony www Puławy na WordPress.

 

Gantry5, WordPress, layout

 

7. Particles / cząstki można przeciągać zarówno między sekcjami jak i liniami w sekcjach. Pozycje Widżetów także możemy przeciągać między sekcjami i liniami - ale jeśli mają one nazwę  związaną z nazwą sekcji - w tym wypadku Header to raczej powinny pozostać w tej sekcji i to w kolejności w tym wypadku alfabetycznej - żeby było intuicyjnie.

Przeciągnijmy jednak pozycję widżetu Header C na początek drugiej linii

Gantry5, WordPress, layout

Tworzę responywne strony www Puławy na WordPress

8. Wygląda to teraz tak. Jak widać Gantry 5 jest dosyć elastyczne i możemy łatwo dostosować je do swoich potrzeb - inaczej niż szablon tworzony w html

Gantry5, WordPress, layout

 

9. Zobaczmy jeszcze do zakładki Wygląd >>> Widgety - pojawiły się tu kolejne pozycje widżetów i z tego miejsca możemy dodawać widżety do naszej strony www Lublin na WordPress w standardowy sposób. Kiedy jednak przebrniecie przez dalszej części tego tutorialu może się okazać że Gantry 5 oferuje ciekawsze opcję i przy małych stronach firmowych lepiej jest korzystać z frameworka Gantry 5 jak z Page Buidera.

Gantry5, WordPress, layout

 

Zobacz inne części tutorialu o Gantry 5 dla Wordpress 

 

 

WordPress i framework Gantry 5 dla strony internetowe Lublin cz1

Zakładka styles framework Gantry 5 - WordPress dla strony internetowe Lublin cz2

Zakładka Layout framework Gantry 5 - WordPress dla strony www Lublin cz3

Funkcja Inheriting we frameworku Gantry 5 dla WordPress cz4 - strony www Lublin

Outlines w Gantry 5 - tworzenie kopii motywu frameworku Gantry 5 - WordPress dla strony www Lublin cz5

Dodawanie pozycji widżetu do layoutu we frameworku Gantry 5 dla WordPress - strony www Lublin cz6

Dodawanie pozycji widżetu do layoutu we frameworku Gantry 5 dla WordPress - strony www Lublin cz7

Jak zmieniać szerokość pozycji widgetu w layout frameworka Gantry 5 dla WordPress - strony www Lublin cz8

Page Content - pozycja wpisów - w layout frameworka Gantry 5 dla WordPress - strony www Lublin cz9

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