Strona główna jest gotowa, ale menu prowadzi na razie donikąd. W tym kroku zbudujemy trzy podstrony: „O nas", „Usługi" i „Kontakt". Przy okazji zobaczysz, czym w Joomli różni się artykuł od pozycji menu i dlaczego jedna podstrona może wyglądać zupełnie inaczej niż druga.
Trzy pojęcia, które trzeba rozdzielić
W Joomli mylą się początkującym trzy rzeczy i warto ustawić je sobie w głowie raz, zanim zaczniemy klikać.
- Artykuł to sama treść. Tekst, zdjęcia, nagłówki. Sam z siebie nie ma adresu, pod którym da się wejść z menu.
- Pozycja menu to adres i punkt wejścia. Mówi Joomli: pod tym adresem pokaż ten artykuł, tę listę albo ten formularz.
- Zarys (po angielsku outline) to zestaw ustawień Gantry: układ sekcji, kolory, cząstki. Jedna strona ma jeden zarys.
Podstrona firmowa powstaje więc z trzech elementów naraz: treści w artykule, adresu w pozycji menu i wyglądu w zarysie. Kiedy coś nie działa, prawie zawsze brakuje jednego z tych trzech.
Podstrona „O nas"
Krok 1: artykuł z treścią
Wejdź w Treści, potem Artykuły i Nowy. Wpisz tytuł „O nas" i treść.
Co realnie warto tu napisać, żeby strona pracowała na Ciebie:
- Od kiedy działacie i na jakim terenie. Klient szukający firmy lokalnie sprawdza to jako pierwsze.
- Kto przyjedzie. Stały zespół czy zmienne osoby, ile osób, czy są sprawdzone.
- Na czym się nie znacie. To brzmi jak strzał w stopę, a działa odwrotnie: firma, która mówi „nie robimy prania dywanów", jest wiarygodniejsza niż taka, która robi wszystko.
- Konkret zamiast przymiotnika. „Ubezpieczenie OC na 100 tysięcy złotych" mówi więcej niż „profesjonalizm i rzetelność".
W polu Alias wpisz o-nas. To będzie fragment adresu, więc trzymaj się małych liter i myślników.
Zajrzyj jeszcze w zakładkę Publikacja i wypełnij Opis meta. To zdanie, które zobaczy człowiek w wynikach wyszukiwania. Dwie linijki, po ludzku, z konkretem.
Krok 2: pozycja menu
Wejdź w Menu, wybierz swoje menu i kliknij Nowy.
- Tytuł: „O nas".
- Typ pozycji menu: kliknij Wybierz, potem Artykuły i Pojedynczy artykuł.
- Wybierz artykuł: wskaż artykuł „O nas".
- Zapisz.
Od tej chwili podstrona ma swój adres i pokazuje się w menu, bo pasek nawigacji czyta to samo menu, które podłączyliśmy w poprzednim kroku.
Krok 3: wygląd podstrony
Podstrona dziedziczy wygląd z zarysu Domyślny, który szablon PP Clean tworzy przy instalacji. Ma pasek nawigacji, obszar treści i stopkę, czyli dokładnie to, czego potrzebuje zwykła podstrona tekstowa.
Sprawdź to teraz w przeglądarce. Jeśli podstrona wygląda jak strona główna, z banerem i cennikiem, to znaczy, że pozycja menu ma przypisany zarys strony głównej. Poprawisz to w zakładce Assignments panelu Gantry albo w samej pozycji menu.
Podstrona „Usługi"
Tu robimy inaczej, bo strona usług nie jest zwykłym tekstem. Ma sprzedawać, więc zbudujemy ją z cząstek, tak jak stronę główną.
Nowy zarys dla tej podstrony
W panelu Gantry kliknij Outlines, potem Add. Nazwij zarys „Usługi" i wybierz opcję utworzenia go na bazie zarysu Strona główna. Dostaniesz kopię gotowego układu, z której usuniesz to, czego na tej podstronie nie chcesz.
Sensowny układ podstrony usług:
- PP Hero z poziomem nagłówka ustawionym na h2, bo h1 należy do tytułu podstrony.
- PP Usługi z pełną listą, tym razem czterema kartami zamiast trzech.
- PP Szachownica z opisem jednej, najważniejszej usługi.
- PP Cennik, ten sam co na stronie głównej.
- PP Stopka.
Reszta cząstek do kosza. Kasowanie w edytorze układu działa przeciągnięciem na ikonę kosza, która pojawia się przy przenoszeniu bloku.
Dlaczego akurat h2, a nie h1
Strona powinna mieć jeden nagłówek pierwszego poziomu, bo mówi wyszukiwarce, o czym jest. Na podstronie tę rolę pełni tytuł artykułu albo pozycji menu. Gdyby baner też wstawiał h1, na stronie byłyby dwa i żaden nie byłby jednoznaczny.
Cząstka PP Hero ma na to pole wyboru w zakładce Treść, więc nie trzeba robić drugiej cząstki ani grzebać w kodzie.
Przypisanie zarysu do podstrony
Zarys sam z siebie nie wie, gdzie ma się pokazać. Wejdź w zakładkę Assignments, znajdź na liście pozycję menu „Usługi" i zaznacz ją. Zapisz.
Alternatywnie da się to ustawić z drugiej strony: w pozycji menu, w zakładce z ustawieniami szablonu, wybrać styl PP Clean, Usługi. Efekt jest ten sam, więc rób tak, jak Ci wygodniej, ale rób tylko w jednym miejscu, żeby potem nie szukać, które ustawienie wygrywa.
Podstrona „Kontakt"
Kontakt zrobimy jeszcze inaczej, bo ma zawierać działający formularz, a formularz to w Joomli osobny mechanizm. Zajmiemy się nim w całości w następnym kroku kursu.
Na razie utwórz pozycję menu „Kontakt" typu Pojedynczy artykuł i podepnij pod nią pusty artykuł z krótkim wstępem oraz danymi firmy. Wrócimy tu z formularzem.
Cennik: osobna podstrona czy sekcja?
Cennik jest już sekcją na stronie głównej, więc osobna podstrona nie jest konieczna. Warto ją zrobić w jednym przypadku: gdy cennik jest na tyle rozbudowany, że na stronie głównej zajmowałby pół ekranu przewijania.
Jeśli się na nią zdecydujesz, zrób ją tak samo jak „Usługi": nowy zarys na bazie strony głównej, w środku PP Hero z nagłówkiem h2, PP Cennik i stopka. Pamiętaj wtedy, żeby przycisk „Wyceń" w pasku nawigacji prowadził do kontaktu, a nie do cennika, bo cennik nie jest działaniem, tylko informacją.
Rzecz, którą łatwo przeoczyć: strona 404
Prędzej czy później ktoś trafi pod adres, którego nie ma. Domyślnie zobaczy surowy komunikat Joomli, bez menu i bez drogi powrotu.
Szablon PP Clean ma na to gotowy zarys o nazwie _error. Wejdź w niego przez Outlines i sprawdź, czy zawiera pasek nawigacji i stopkę. Jeśli tak, człowiek, który zabłądził, ma jak wrócić na stronę główną, zamiast zamykać kartę.
Sprawdzenie przed przejściem dalej
- Każda pozycja w menu prowadzi pod działający adres.
- Podstrony mają po jednym nagłówku h1.
- Każda podstrona ma wypełniony opis meta.
- Podstrona „Usługi" ma własny zarys i nie wygląda jak strona główna.
- Menu na telefonie zwija się do przycisku i wszystkie pozycje są w panelu bocznym.
Kolejny krok to formularz kontaktowy, czyli miejsce, w którym zapytania zaczynają do Ciebie trafiać.