Możliwości na dodanie ikon społecznościowych w motywach Elegant Themes jest wiele. Najbardziej popularnym sposobem, jest skorzystanie z wtyczki Monarch Plugin, dzięki któremu na stałe możemy dodać ikony do wpisu, strony, do panelu bocznego, do stopki itp. Możemy też dodawać je za pomocą modułu Notka, wybierając w ustawieniach ikony różnych portali. Możemy też dodać zwykły tekst, wstawić obrazek wybranej ikony i ją podlinkować. Możemy też skorzystać z modułu Portale Społecznościowe, ale te ikony nie zawsze spełniają nasze oczekiwania, ponieważ są dość małe, albo za kolorowe, albo nie w takim kształcie jakbyśmy chcieli. Tak wyglądają w oryginale:

Ale zaraz zmienimy im trochę parametrów, żeby wyglądały inaczej i pokażę Wam jak je dostosować i gdzie to robić. Zaczynajmy.

Wielkość kafelka i ikony

Korzystając z The Divi Builder dodaj moduł Przyciski społecznościowe i wybierz te, które chcesz aby były widoczne. Następnie przejdź do zakładki Zaawansowane i dodaj dowolną Klasę CSS:

Następnie przejdź do ustawień strony:

W okienku, które się pojawi wklej poniższy kod w pozycji Niestandardowy CSS (ten sam kod możesz również wkleić w Ustawieniach szablonu Divi, wybierając po prawej stronie Divi >Opcje szablonów graficznych > Zakładka Ogólne > pole Niestandardowy CSS u dołu strony):

Powyższy kod, nada Twoim ikonom taki wygląd:

W kodzie możesz operować dowolnie wartościami:
font size – odpowiada ze wielkość ikony
top i left – odpowiadają za odległość ikony do lewej krawędzi i od górne krawędzi. Najprościej mówić dodajesz im margines lewy i górny
width – to szerokość kafelka
height – to wysokość kafelka

Możesz wartości w tych pozycjach zmieniać tak jak chcesz, aby uzyskac zamierzony efekt. Operując wartoścami width oraz height możesz ustawić kafelki kwadratowe albo prostokątne. Poniżej pokażę Ci jak zmienić ustawienia aby kafelki, w których znajduje się ikona były okrągłe 🙂

Okrągły kafelek ikony

Powyżej powiększyliśmy ikony i ich kafelki. Wiesz już, że operując wartościami width i height możesz zamiast kwadratowego kafelka otrzymać prostokątny. Teraz pora na zaokrąglenie i zrobienie koła. W module Portale Społecznościowe przejdź na zakładkę Design i zeskroluj myszką do pozycji Obramowanie > Rounded Corners. Wpisz w dowolnym polu 30px i zapisz zmiany. Twoje ikony powinny wyglądać dokładnie tak: