Jak dodać ikony społecznościowe Hover do obrazów członków zespołu za pomocą Divi

Tworząc stronę z informacjami, możesz rozważyć dodanie różnych członków zespołu Twojej firmy do prezentacji. Rozpoczynając ten proces projektowania, zauważysz, że nie może zabraknąć trzech rzeczy: obrazu, nazwy i stanowiska. Ale jeśli chcesz jeszcze bardziej wyróżnić członków swojego zespołu, możesz rozważyć dodanie ich linków do sieci społecznościowych do projektu. Oczywiście możesz zrobić to w staromodny sposób i dodać moduł śledzenia w mediach społecznościowych pod imieniem i stanowiskiem osoby. Możesz jednak również dodać odrobinę interakcji, uruchamiając ikony społecznościowe, gdy tylko ktoś najedzie na jeden z obrazów osoby. W dzisiejszym samouczku pokażemy Ci dokładnie, jak to zrobić za pomocą Divi. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć ręce na darmowym układzie, najpierw musisz je pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Dodaj sekcję #1

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #0f0f0f

Rozstaw

Przejdź do karty projektu przekroju i następnie zmień ustawienia odstępów.

• Górna wyściółka
  • Komputer stacjonarny i tablet: 100 pikseli
  • Telefon: 50px
• Dolna wyściółka:
  • Komputer stacjonarny i tablet: 100 pikseli
  • Telefon: 50px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Dodaj moduł tekstowy nr 1 do kolumny

Dodaj zawartość H1

Dodaj pierwszy moduł tekstowy do kolumny wiersza z wybraną zawartością H1.

Ustawienia tekstu H1

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H1:

• Czcionka nagłówka: Alata
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka:
  • Pulpit: 50px
  • Tablet: 45px
  • Telefon: 35px
• Wysokość linii nagłówka: 1,2 em

Dodaj moduł dzielnika do kolumny

Widoczność

Następnie dodamy moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

Przejdź do zakładki projektu modułu i zmień kolor linii.

• Kolor linii: #ffffff

Rozmiary

Zmień również ustawienia rozmiaru.

• Waga dzielnika: 2px
• Maksymalna szerokość: 100px
• Wysokość: 2px

Dodaj moduł tekstowy nr 2 do kolumny

Dodaj treść opisu

Następny i ostatni moduł, którego potrzebujemy w tym wierszu, to kolejny moduł tekstowy z wybraną zawartością opisu.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

• Czcionka tekstu: Alata
• Kolor tekstu: #7c7c7c
• Rozmiar tekstu: 17px
• Wysokość linii tekstu: 1,9 em

Rozstaw

Usuń również domyślny dolny margines.

• Margines dolny: 0px

Dodaj sekcję #2

Tło gradientowe

Dodaj kolejną sekcję tuż pod poprzednią i użyj dla niej gradientowego tła.

• Kolor 1: #0f0f0f
• Kolor 2: #000000
• Pozycja startowa: 10%
• Pozycja końcowa: 10%

Rozstaw

Następnie zmodyfikuj ustawienia odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 200px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2px

Dodaj moduł śledzenia mediów społecznościowych do kolumny 1

Dodaj wybrane sieci społecznościowe

Pierwszym modułem, którego potrzebujemy w naszym wierszu, jest moduł Social Media Follow w kolumnie 1. Dodaj wybrane przez siebie sieci społecznościowe.

Usuń każdy kolor tła sieci społecznościowej indywidualnie

Następnie otwórz każdą sieć społecznościową indywidualnie i usuń kolor tła.

Dodaj link do każdej sieci społecznościowej indywidualnie

Dodaj również odpowiedni link do każdej sieci społecznościowej.

Domyślny kolor tła

Następnie wróć do ogólnych ustawień modułu i zastosuj następujący kolor tła:

• Kolor tła: rgba(0,0,0,0)

Wskaż kolor tła

Zmień kolor tła po najechaniu myszą.

• Kolor tła do najechania kursorem: #494949

Zdjęcie w tle

Następnie prześlij obraz tła.

• Rozmiar obrazu tła: okładka
• Mieszanie obrazu tła: mnożenie

Wyrównanie

Przejdź do zakładki projektu modułu i zmień wyrównanie.

• Wyrównanie modułu: Środek

Ikona

Zmodyfikuj też kolor ikony.

• Kolor ikony: rgba(0,0,0,0)

Rozstaw

Następnie przejdź do ustawień odstępów i zastosuj następujące wartości:

• Margines dolny: 0px
• Górna wyściółka:
  • Pulpit: 250px
  • Tablet: 450 pikseli
  • Telefon: 200px
• Dolna wyściółka: 20px

Granica

Zmieniamy też ustawienia granic.

• Wszystkie rogi: 100px
• Szerokość obramowania: 2px
• Kolor obramowania: rgba (255,255,255,0)

Wskaż granicę

Użyj innego koloru obramowania po najechaniu myszą.

• Kolor obramowania kursora: #ffffff

Klasa CSS

Następnie przejdź do zakładki zaawansowane i zastosuj niestandardową klasę CSS.

• Klasa CSS: społecznościowe zespołowe

Najedź przed elementem

I uzupełnij ustawienia modułu, włączając ustawienie najechania na element before i skopiuj i wklej następujące wiersze kodu CSS:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

Dodaj moduł Osoba do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł Person. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

Przejdź do zakładki projektu modułu i zmień ustawienia tekstu w następujący sposób:

• Wyrównanie tekstu: do środka
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Następnie nadaj styl tekstowi tytułu.

• Czcionka tytułu: Alata
• Rozmiar tekstu tytułu:
  • Pulpit: 27px
  • Tablet: 25px
  • Telefon: 22px

Ustawienia tekstu pozycji

Następnie zmodyfikuj ustawienia tekstu pozycji.

• Czcionka pozycji: Alata
• Rozmiar tekstu pozycji:
  • Pulpit: 17px
  • Tablet i telefon: 15px

Rozstaw

Zastosuj niestandardową górną i dolną wyściółkę do ustawień odstępów.

• Górna wyściółka: 40px
• Dolna wyściółka: 40px

Granica

I uzupełnij ustawienia modułu, stosując następujące ustawienia obramowania:

• Szerokość obramowania: 1px
• Kolor obramowania: #ffffff

Usuń pozostałe kolumny wiersza

Po ukończeniu modułów w kolumnie 1 możesz usunąć dwie pozostałe kolumny wiersza.

Klonuj kolumnę dwa razy

Użyj ponownie kolumny 1, klonując ją dwukrotnie.

Klonuj cały rząd

Następnie sklonuj cały rząd tyle razy, ile potrzebujesz.

Zmień całą zduplikowaną zawartość

Media społecznościowe Śledź linki

Oczywiście będziesz musiał zmodyfikować wszystkie zduplikowane treści, zaczynając od linków do sieci społecznościowych w każdym zduplikowanym module Social Media Follow.

Media społecznościowe śledzą obrazy tła

Następnie zmień obraz tła w każdym module Social Media Follow.

Zawartość modułu Osoba

I uzupełnij zmiany, modyfikując zawartość każdego modułu Person.

Dodaj moduł kodu poniżej ostatniego modułu tekstowego w wierszu #1 sekcji #1

Teraz, aby upewnić się, że każda sieć społecznościowa zmienia style zaraz po najechaniu na cały moduł, będziemy potrzebować kilku linijek kodu CSS. Umieścimy ten kod w nowym module kodu, który dodamy do pierwszej sekcji, tuż pod opisem modułu tekstowego.

Dodaj kod CSS

Skopiuj i wklej następujące wiersze kodu CSS i gotowe:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością w prezentacji członków zespołu. Mówiąc dokładniej, pokazaliśmy, jak uruchamiać ikony społecznościowe po najechaniu na jeden z obrazów członka zespołu. Skutkuje to subtelną, ale zabawną interakcją, której możesz użyć do dowolnego rodzaju witryny, którą tworzysz. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.