Czy chcesz wyświetlać ikony mediów społecznościowych po najechaniu kursorem na zdjęcia w? Divi ?
Tworząc stronę z informacjami, możesz rozważyć dodanie różnych członków zespołu Twojej firmy do prezentacji.
Kiedy rozpoczniesz ten proces projektowania, zauważysz, że od samego początku nie może zabraknąć trzech rzeczy: obrazu, nazwy i stanowiska. Ale jeśli chcesz jeszcze bardziej zaprezentować członków swojego zespołu, możesz również rozważyć dodanie ich linków do mediów społecznościowych do projektu.
Oczywiście możesz pójść w staromodny sposób i dodać moduł „Obserwuj nas w mediach społecznościowych” pod nazwiskiem i stanowiskiem osoby. Możesz jednak również dodać odrobinę interakcji, wyświetlając te ikony, gdy tylko ktoś najedzie na jeden z obrazów tej osoby.
W dzisiejszym samouczku pokażemy Ci dokładnie, jak to zrobić za pomocą Divi.
Chodźmy.
badanie
Zanim zagłębimy się w samouczek, rzućmy okiem na wynik na różnych rozmiarach ekranu.
Wynik na laptopie
Wynik na urządzeniu mobilnym
Zacznijmy realizację z Divi!
Dodaj sekcję # 1
Kolor tła
Dodaj nową sekcję do strony, nad którą pracujesz.
Otwórz ustawienia sekcji i zmień kolor tła.
- Tło: #0f0f0f
rozstaw
Przełącz na kartę Wnętrze rozwijana opcja Rozstaw a następnie zmień ustawienia odstępów.
- Dopełnienie (góra i dół): 100px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
Dodaj moduł „Tekst” #1 do kolumny
Dodaj tytuł rozmiaru H1
Dodaj pierwszy moduł "Tekst" do wiersza kolumny
Dodać treść rozmiar H1 (nagłówek 1) do wyboru.
Ustawienia tekstu H1
Przełącz na kartę Wnętrze, rozwiń opcję Nagłówek tekstu i odpowiednio zmień ustawienia tekstu H1:
- Czcionka nagłówka: Alata
- Kolor tekstu nagłówka: #ffffff
- Rozmiar czcionki:
- Pulpit: 50px
- Tablet: 45px
- Telefon: 35px
- Wysokość linii nagłówka: 1,2 em
Dodaj moduł „Przegroda” do kolumny
widoczność
Następnie dodamy moduł „Divider”. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.
- Pokaż dzielnik: TAK
Linia
Przełącz na kartę Wnętrze, rozwiń opcję Linia i zmień kolor linii.
- Kolor linii: #ffffff
zaklejania
Opcja rozwijania Dobór i zmień również ustawienia rozmiaru.
- Waga dzielnika: 2px
- Maksymalna szerokość: 100px
- Wysokość: 2px
Dodaj moduł „Tekst” #2 do kolumny
Dodaj treść opisu
Następnym i ostatnim modułem, którego potrzebujemy w tej linii, jest kolejny moduł „Tekst” z rozszerzeniem treść wybrany przez Ciebie opis.
Ustawienia tekstu
Przełącz na kartę Wnętrze, rozwiń opcję Tekst i zmień ustawienia tekstu w następujący sposób:
- Czcionka tekstu: Alata
- Kolor tekstu: #7c7c7c
- Rozmiar: 17px
- Wysokość linii tekstu: 1,9 em
rozstaw
Usuń także 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.
- Lewy kolor: #0f0f0f
- Prawy kolor: #000000
- Lewa pozycja: 10%
- Właściwa pozycja: 90%
rozstaw
Przełącz na kartę Wnętrze, rozwiń opcję Rozstaw a następnie zmień ustawienia odstępów.
- Dopełnienie (góra): 0px
- Wypełnienie (dół): 200px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:
zaklejania
Otwórz ustawienia linii i zmień ustawienia rozmiaru w następujący sposób:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 2px
Dodaj moduł „Śledź w mediach społecznościowych” do kolumny 1
Dodaj wybrane sieci społecznościowe
Pierwszym modułem, którego potrzebujemy w naszym wierszu, jest moduł „Śledź w mediach społecznościowych” w kolumnie 1. Dodaj wybrane sieci społecznościowe.
Usuń kolor z każdej sieci społecznościowej indywidualnie
Otwórz każdą sieć społecznościową indywidualnie
Usuń kolor tła.
Dodaj link do każdej sieci społecznościowej indywidualnie
Dodaj również link odpowiadający 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:
- Tło: rgba(0,0,0,0)
Kolor tła po najechaniu myszą
Zmień kolor tła po najechaniu myszą.
- Tło (najechanie): #494949
Obraz tła
Następnie prześlij obraz tła.
- Rozmiar obrazu tła: okładka
- Mieszanie obrazu tła: mnożenie
wyrównanie
Przełącz na kartę Wnętrze i zmodyfikuj linię trasowania.
- Moduł wyrównania: Środek
ikona
Zmień także kolor ikony.
- Kolor ikony: rgba(0,0,0,0)
rozstaw
Następnie przejdź do ustawień odstępów (Rozstaw) i zastosuj następujące wartości:
- Margines (dolny): 0px
- Wyściółka (góra):
- Pulpit: 250px
- Tablet: 450px
- Telefon: 200px
- Wypełnienie (dół): 20px
Granica
Zmieniamy też ustawienia granic.
- Zaokrąglone rogi: 100px
- Szerokość obramowania: 2px
- Kolor obramowania: rgba (255,255,255,0)
Obramowanie po najechaniu
Użyj innego koloru obramowania po najechaniu myszą.
- Kolor obramowania (najechanie): #ffffff
Klasa CSS
Następnie przejdź do zakładki Zaawansowane i zastosuj niestandardową klasę CSS.
- Klasa CSS: zespoły-społeczności
Niestandardowy CSS (przed)
I uzupełnij ustawienia modułu, włączając ustawienie zawisu na elemencie "Zanim" oraz kopiując i wklejając następujące wiersze kodu CSS:
content: "Restons connectés!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
Dodaj moduł „Osoba” do kolumny 1
Dodaj treść opisu
Następnym i ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł „Osoba”. Dodaj trochę treść wybrany przez Ciebie opis.
Ustawienia tekstu
Przełącz na kartę Wnętrze i zmień ustawienia tekstu w następujący sposób:
- Wyrównanie tekstu: do środka
- Kolor tekstu: jasny
Ustawienia tekstu tytułowego
Następnie dostosuj tekst tytułu.
- Czcionka tytułu: Alata
- Tytuł Tekst Rozmiar tytułu:
- Pulpit: 27px
- Tablet: 25px
- Telefon: 22px
Ustawienia tekstu opisu stanowiska
Następnie edytuj ustawienia tekstu opisu stanowiska.
- Czcionka pozycji: Alata
- Rozmiar tekstu pozycji:
- Pulpit: 17px
- Tablet i telefon: 15px
rozstaw
Zmień ustawienia odstępów w następujący sposób:
- Dopełnienie (góra i dół): 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 z wiersza
Po ukończeniu modułów Kolumny 1 możesz usunąć pozostałe dwie kolumny z rzędu.
Klonuj kolumnę dwukrotnie
Użyj ponownie kolumny 1, klonując ją dwukrotnie.
Sklonuj cały rząd
Następnie sklonuj cały rząd tyle razy, ile potrzeba.
Edytuj wszystkie zduplikowane treści
Dodaj moduł Kod poniżej ostatniego modułu tekstowego w wierszu 1 sekcji 1
Teraz, aby upewnić się, że każda sieć społecznościowa zmieni swój styl, gdy tylko cały moduł zostanie najechany, będziemy potrzebować kilku linijek kodu CSS. Umieścimy ten kod w nowym module kodu, który dodamy do pierwszej sekcji, tuż pod tekstem opisu
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>
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Biuro
Pobierz DIVI teraz !!!
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak wykazać się kreatywnością we wprowadzaniu członków zespołu.
W szczególności pokazaliśmy, jak wyświetlać ikony mediów społecznościowych, gdy najedziesz kursorem na jeden z obrazów członka zespołu. Rezultatem jest subtelna, ale przyjemna interakcja, której możesz użyć do każdego rodzaju Witryna internetowa które tworzysz.
Jeśli potrzebujesz więcej elementów do ukończenia projektów tworzenia stron internetowych, przejrzyj również nasz przewodnik na Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Ale tymczasem, udostępnij ten artykuł w różnych sieciach społecznościowych.
