W tym tutorialu pokażę ci, jak wyświetlić ikony socialowe i podlinkować je do profilów spolecznościowych. Zrobię to na przykładzie szablonu JM Real Estate Ads.

Ustal pozycję modułu

Na początku należy ustalić, na jakiej pozycji będzie wyświetlał się moduł. W szablonie JM Real Estate Ads ikony socialowe wyświetlają się w dolnej części strony.

 

custom-social-icons

 

Najlepszym sposobem na sprawdzenie pozycji modułu na istniejącej już stronie demonstracyjnej (quickstart) jest skorzystanie z przeglądarkowego inspektora - podejrzymy wtedy kod źródłowy szablonu i zlokalizujemy sekcję, na której wyświetlony jest moduł.

Jeśli zaś budujesz stronę od zera, to zapoznaj się z artykułem “All templates positions”. Zamieszczamy go na każdej stronie demonstracyjnej - dla szablonu Real Estate Ads możesz znaleźć go tutaj.

 

all-template

 

W tym przypadku chcę wyświetlić moduł z ikonami socialowymi na pozycji bottom3. Należy pamiętać, że różne szablony mają różne pozycje modułów. Upewnij się, że wybierasz dostępną dla twojego szablonu pozycję modułów.

Pobierz kod dla ikonek socialowych

Jeśli chcesz utworzyć nowy modul HTML z ikonami socialowymi, to potrzebujesz kodu, który umożliwi ci poprawne wyświetlenie modułu. Na każdej stronie demonstracyjnej publikujemy artykuł z typografią, w którym możesz znaleźć gotowe do użycia kody HTML. Upewnij się, że szablon którego używasz posiada ikonki socialowe i skopiuj kod dostępny dla twojego szablonu!

 

social-icons-code

 

Skopiuj kod do schowka.

Utwórz moduł HTML

Teraz należy utworzyć moduł HTML i wyświetlić go na pozycji bottom3. Idź do zaplecza strony, Rozszerzenia-> Moduły-> Utwórz-> Własny HTML

Wklej wcześniej skopiowany kod do modułu. Użyj edytora kodu źródłowego (ponieważ wklejasz kod HTML a nie zwykły tekst).

 

source-code

 

Zmień adresy URL na własne adresy do profili społecznościowych

Ostatnim krokiem jest zmiana przykładowych adresów URL na własne. Aby to wykonać, po prostu zmień wartości, znajdujące się w atrybucie HREF tak jak na obrazku poniżej:

 

profile-links

 

Jeśli ikony socialowe są już opublikowane na stronie, to musisz jedynie zmienić adresy URL. Pomiń kroki 1-3, po prostu wyszukaj moduł.

Ważne

Po dodaniu kodu HTML do modułu możesz zorientować się, że kod który dodałeś nieco różni się od wynikowego, zapisanego kodu. Wynika to z faktu, że edytor Joomla zmienia ‘ ’ na biały znak i usuwa niektóre znaczniki HTML. Pamiętaj, żeby w razie modyfikacji zawsze kopiować kod z typografii.