Tworzenie szablonów dla Joomla! Helix Ultimate

Tworzenie szablonów dla Joomla! Helix Ultimate

Temat tworzenia własnego szablonu zupełnie od zera nie jest dla każdego! Wymaga sporych umiejętności programistycznych. Jeżeli projektujesz witryny w oparciu o Joomla!, to ilość czasu potrzebna do utworzenia szablonu tą metodą może okazać się nieadekwatna do ceny, jaką proponujesz klientowi.

Czy możliwe jest utworzenie własnego szablonu bez zaawansowanej wiedzy programistycznej i inwestowania tak dużej ilości czasu? Tak!

Wyobraź sobie, że istnieją narzędzia, które pozwalają utworzyć własny szablon nawet osobom, które na kodowaniu nie znają się prawie wcale! W sieci znajdziesz wiele tego typu narzędzi. Większość obecnie dostępnych narzędzi do tworzenia własnych szablonów dla Joomla! dostępna jest całkowicie bezpłatnie. Każde z nich ma zestaw własnych unikalnych funkcjonalności, które często decydują o wyborze danego narzędzia. Spora część z nich opiera się na tzw. szablonie bazowym i dołączonych specjalnych bibliotekach programistycznych, tzw. frameworkach. Dzięki nim otrzymujesz zestaw gotowych narzędzi umożliwiających modyfikację szablonu bazowego. 

Dzisiaj nawet wyspecjalizowane firmy tworzące szablony korzystają z narzędzi ułatwiających i automatyzujących im pracę.

Helix Ultimate to bardzo ceniony przez wielu webmasterów framework, którego producentem jest zespół z JoomShaper. Firma wykonuje zarówno szablony, jak i rozszerzenia dla Joomla! Jej przedstawicielem na Polskę jest Paweł Frankowski, który jest także twórcą wielu książek i artykułów na temat Joomla! Szczególnie polecam Ci jego ostatnią książkę: WordPress i Joomla! Zabezpieczanie i ratowanie stron WWW.

Krótką prezentację możliwości frameworka Helix Ultimate możesz zobaczyć na YouTube. Zobacz koniecznie, ponieważ w ten sposób szybko zorientujesz się, jakie możliwości daje to narzędzie! W dzisiejszym świecie wszystko bardzo szybko się zmienia, zwłaszcza w przypadku aplikacji webowych. Dlatego pamiętaj, że jest on ciągle udoskonalany, więc może okazać się, że kiedy będziesz czytać ten tekst, będzie dostępna już jego nowsza wersja.

Ważna uwaga! Jeżeli korzystałeś z framework-a Helix 3, to pamiętaj, że Helix Ultimate, to jego następca, ale to zupełnie nowy produkt i nie ma możliwości migracji z Helix 3 do Helix Ultimate. 

Pakiet quickstart - własna wersja demonstracyjna witryny

Najlepszym sposobem ma dokładne poznanie jakiegoś narzędzia jest jego używanie! Najpierw możesz przeklikać wersję demonstracyjną szablonu opartego na tym frameworku. Następnie możesz zainstalować w swoim środowisku testowym (JAMP, XAMPP) tzw. pakiet quickstart. To instalator Joomla! razem z zaimplementowanymi dodatkowymi rozszerzeniami, szablonem bazowym i przykładowymi treściami. Po instalacji powstanie gotowa, witryna demonstracyjna z przykładowymi treściami oraz modułami rozmieszonymi w określonych pozycjach szablonu bazującego na framework-u Helix Ultimate.

Aby pobrać odpowiednie pliki musisz utworzyć swoje konto w witrynie JoomShaper.  Po zalogowaniu się otwórz stronę Helix Ultimate, a następnie kliknij przycisk DOWNLOAD.

Kliknij przycisk Download obok pozycji Quickstart Pack, zapisz plik w dowolnej lokalizacji na swoim komputerze, a następnie rozpakuj go do odpowiedniej lokalizacji w swoim środowisku testowym.

Jeżeli dopiero zaczynasz swoją przygodę z Joomla! i nie masz jeszcze doświadczenia w obsłudze panelu administracyjnego (tzw. zaplecza), zapisz się na Joomla! Darmowy Kurs lub sięgnij po książkę Joomla! 3.x. Praktyczny kurs.

Ja już od lat do testowania wszystkich witryn opartych o Joomla! używam JAMP-a. To lokalne środowisko serwerowe stworzone przez Michała Trzepizura, wiceprezesa fundacji PCJ Otwarte Źródła, której misją jest wspieranie polskiej społeczności Joomla! JAMP to aplikacja, która spełnia wszystkie wymagania techniczne Joomla!, jest ciągle rozwijana i na bieżąco aktualizowana. Dzięki JAMP praca nad kolejnymi projektami witryn staje się prosta i szybka. Na dzień dzisiejszy, dla mnie to najlepsze środowisko lokalne środowisko serwerowe dla witryn opartych o Joomla!

Jeżeli korzystasz z innego środowiska testowego na swoim komputerze, to jedyna różnica może polegać na lokalizacji folderu, do którego należy rozpakować pobrany wcześniej plik. Proponuję, aby pliki witryny demonstracyjnej opartej o framework Helix Ultimate umieścić w nowym folderze o nazwie: helixultimate-demo. W przypadku JAMP-a będzie to lokalizacja: twój_Dysk:\Folder_z_programem_JAMP\mnt\var\www, natomiast w przypadku XAMP: twój_dysk:\xampp\htdocs.

Uruchom swój lokalny serwer WWW, a następnie w przeglądarce wpisz adres: localhost/helixultimate-demo. Jeżeli utworzyłeś własny folder, to zamiast helixultimate-demo, wpisz nazwę własnego folderu! Na pewno zauważysz znajome opcje instalacyjne Joomla!. Jeżeli po raz pierwszy instalujesz Joomla!, to zerknij np. do artykułu: Joomla! 3.2 - instalacjia i konfiguracja, aby dowiedzieć się więcej szczegółów dotyczących procesu instalacji.

Po zakończeniu procesu instalacji od razu masz gotową, profesjonalnie wyglądającą własną wersję demonstracyjną witryny opartej o framework Helix Ultimate.

Helix Ultimate podobnie jak inne tego typu narzędzia, składa się z dwóch integralnych elementów: szablonu bazowego oraz frameworka. Oznacza to, że otrzymujesz nie tylko funkcjonalny "silnik", ale również gotowy szablon, który stanowi fundament dla twojego projektu. 

Zaloguj się do zaplecza swojej wersji demonstracyjnej witryny i otwórz menadżera styli szablonów (menu Rozszerzenia / Style). Kliknij nazwę stylu shaper_helixultimate - Default, a następnie przycisk Template Options, aby wyświetlić opcje konfiguracyjne szablonu. Opcje te zostały pogrupowane w pasku pionowym, który znajduje się po lewej stronie okna, natomiast po prawej stronie zobaczysz podgląd witryny. Jeżeli wprowadzisz jakieś zmiany, aby je zobaczyć na podglądzie, trzeba kliknąć przycisk Save znajdujący się na samym dole paska pionowego. Opcje konfiguracyjne szablonu opartego na framework-u Helix Ultimate zostały pogrupowane w następujący sposób:

Ustawienia podstawowe (Basic)

Tutaj znajdują się podstawowe opcje konfiguracyjne. W tym miejscu możesz na przykład zdecydować, czy nagłówek z logo i menu mają być widoczne podczas przewijania strony. Możesz także zdefiniować logo, tekst nagłówka i slogan strony, a także zdefiniować jako tło strony wybrany obraz. Tutaj znajdują się także odpowiednie pola służące do wpisania linków do portali społecznościowych, a także opcje konfiguracyjne służące do wyświetlenia strony typu Comming Soon, za pomocą której możesz wyświetlić stronę z licznikiem odliczającym czas, jaki pozostał do otwarcia strony. Tego typu stronę możesz wykorzystać, zamiast zwykłego komunikatu informującego, że strona jest wyłączona.

Ustawienia predefiniowane (Presets)

Tutaj znajdziesz osiem predefiniowanych styli, dzięki którym możesz szybko zmienić kolorystykę szablonu. Wystarczy, że klikniesz wybrany styl, a następnie klikniesz przycisk Save, aby zapisać te ustawienia. 

Poniżej ikonek symbolizujących predefiniowane ustawienia, znajduje się przełącznik Custom Style. Jeżeli jest włączony, to możesz zmienić ustawienia związane z wyglądem poszczególnych elementów szablonu, takie, jak kolor tła, kolor czcionki, kolor odnośnika itp. Aby zmienić kolor wybranego elementu możesz wpisać jego wartość posługując się kodem heksadecymalnym lub kliknąć w obszarze pola i skorzystać z okienka color picker.

Ustawienia układu strony (Layout Builder)

W tym miejscu wyświetla się okno umożliwiające zmianę układu strony. Dzięki temu możesz praktycznie dowolnie konfigurować układ szablonu. Możesz na przykład zmieniać kolejność poszczególnych bloków oraz kolejność kolumn. Możesz przypisywać własne pozycje modułów oraz dodawać kolejne wiersze i kolumny do siatki układu;

Ustawienia menu (Navigation)

Tutaj znajdziesz opcje dotyczące wyboru menu, które będzie wyświetlane jako poziome menu główne witryny, a także zdefiniować typ tego menu oraz szerokość pozycji podrzędnych;

Ustawienia czcionek (Typography)

Ustawienia związane z czcionkami używanymi w witrynie. Możesz zdefiniować font i jego wielkość dla w takich elementach witryny, jak menu poziome, nagłówki (od H1 do H6). Możesz także definiować ustawienia czcionek dla wybranych selektorów lub identyfikatorów zdefiniowanych w CSS. Dzięki temu możesz zdefiniować inne ustawienia czcionki dla pojedynczego elementu witryny;

Ustawienia widoku bloga (Blog)

Ustawienia pozwalające na włączenie lub wyłączenie niektórych elementów strony wyświetlanych w widoku bloga oraz ich podstawową konfigurację;

Custom Code

W tym miejscu znajdują się pola, w których możesz wpisać własny kod HTML, CSS lub JavaScript;

Ustawienia zaawansowane (Advanced)

W tym miejscu znajdziesz opcje, dzięki którym możesz zmniejszyć rozmiar wczytywanych do przeglądarki plików. Dzięki temu Twoja strona będzie wczytywała się szybciej, a to może znacznie wpłynąć na zadowolenie internautów oraz wyższą pozycję w wynikach wyszukiwania wyszukiwarek internetowych. W tym miejscu możesz także zapisać w osobnym pliku wszystkie ustawienia zdefiniowane w szablonie, a także zaimportować ustawienia wcześniej już zapisane;

Gorąco zachęcam Cię do zapoznania się z oficjalną dokumentacją Helix Ultimate.  Znajdziesz tam wszystkie niezbędne informacje dotyczące tego świetnego frameworka.

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Jak wybrać hosting dla Joomla!?
Szablon dla Joomla! - darmowy, czy płatny?

Podobne wpisy

 

    By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/