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):

.cq-social-follow.et_pb_social_media_follow li a.icon::before {
font-size: 30px;
top: 9px;
left: 9px;
}
.cq-social-follow.et_pb_social_media_follow li a.icon {
width: 50px;
height: 50px;
}

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:

by Paulina Kanak

właścicielka domen Canaq.net | Canaq.pl

© Copyright 2014 | Wszelkie prawa zastrzeżone
cq.canaq@gmail.com

Pin It on Pinterest