Czy chciałbyś stworzyć biografię z DIVI członków swojego zespołu z efektem najechania?
Nie jest tajemnicą, że strony o są idealne do tworzenia interakcji na Twoim Witryna internetowa. Jest to również tego typu strona, która podkreśli ludzką część firmy stojącej za Witryna internetowa.
Jedna z rzeczy, które możesz zrobić, aby poprawić doświadczenie strony o jest udostępnienie sekcji członków zespołu, w której Twoi pracownicy znajdą się w centrum uwagi.
Czytaj także: Divi: Jak stworzyć przezroczysty i lepki globalny nagłówek
W tym samouczku pokażemy Ci krok po kroku, jak to zrobić. Gdy zrozumiesz podejście, możesz je dostosować do własnych potrzeb.
Chodźmy!
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
Komputer stacjonarny
Aplikacje mobilne
Dodaj nową sekcję
rozstaw
Utwórz nową stronę lub otwórz istniejącą i dodaj nową sekcję, korzystając z następujących niestandardowych wartości dopełnienia:
- Margines wewnętrzny (górny i dolny): 100px
Dodaj wiersz #1
Struktura kolumny
Po zakończeniu dodawania niestandardowych dopełnień do sekcji możesz zamknąć ustawienia sekcji i dodać nową linię za pomocą jednej kolumny.
Dodaj moduł tekstowy
Dodaj moduł tekstowy do kolumny z wybranym tytułem w rozmiarze H2.
Ustawienia tekstu H2
Następnie przejdź do ustawień tekstu H2 i dokonaj zmian.
- Czcionka nagłówka: Cinzel
- Styl kopiowania nagłówka: Tt (patrz Przechwytywanie)
- Wyrównanie tekstu: wyśrodkowane
- Rozmiar tekstu nagłówka: 70px
Dodaj moduł separatora
widoczność
Kontynuuj, dodając nowy moduł separatora tuż pod modułem tekstowym.
- Pokaż dzielnik: tak
Kolor dzielnika
Przejdź do zakładki Styl, otwórz ustawienia kolorów i odpowiednio zmień kolor separatora:
- Kolor etykiety: #333333
zaklejania
Następnie zmniejszymy rozmiar dzielnika i wyśrodkujemy go.
- Maksymalna szerokość: 26%
- Wyrównanie tekstu: do środka
Dodaj wiersz 2
Struktura kolumny
Tuż poniżej poprzedniej linii, którą dodałeś, kontynuuj i dodaj nowy wiersz, używając trzech kolumn o równej wielkości.
zaklejania
Bez dodawania żadnych modułów otwórz ustawienia linii i wprowadź zmiany w ustawieniach rozmiaru.
- Użyj niestandardowej szerokości rynny: Tak
- Rozstaw kolumn: 1
- Maksymalna szerokość: 2 pikseli
- zharmonizowanie wysokości kolumn: tak
rozstaw
Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów.
- Margines (górny i dolny): 50 pikseli
- Margines wewnętrzny: (górny i dolny: 10 pikseli), (lewy i prawy: 5 pikseli)
Wprowadź parametry każdej z kolumn, a także zmodyfikuj wartości marginesów wewnętrznych w następujący sposób:
- Margines wewnętrzny (lewy i prawy): 5px
Pole cienia
Nadajemy również naszej linii pewną głębię, dodając do niej cień pudełka z następującymi ustawieniami:
- Siła rozmycia cieni w pudełku: 80px
- Siła rozprzestrzeniania się cieni w pudełku: -14px
- Kolor czcionki napisów: rgba(0,0,0,0.3)
Dodaj moduł obrazu do kolumny 1
Załaduj obraz do modułu Obraz
Czas zacząć dodawać moduły!
Aby osiągnąć efekt bio hover, będziemy potrzebować w sumie dwóch modułów; moduł obrazu i moduł podsumowania.
Zobacz także: Divi: Jak stworzyć responsywną siatkę obrazu z linkami i efektami najechania?
Moduł obrazu będzie zawierał obraz członka zespołu, którego chcesz wyróżnić. Z drugiej strony moduł Podsumowanie zostanie użyty do dodania ikony w lewym dolnym rogu i biografii po najechaniu kursorem.
Dodaj moduł Image do pierwszej kolumny, używając kwadratowego obrazu.
Filtry
Projekt, który tworzymy jest całkowicie w skali szarości. Aby dodać tę skalę szarości do naszego obrazu, przejdź do ustawień filtrów i usuń wszystkie nasycenia.
- Nasycenie: 0%
Dodaj moduł Podsumowanie do kolumny 1
Kontynuuj, dodając nowy moduł Podsumowanie tuż pod modułem Obraz w kolumnie 1. Dodaj imię i nazwisko członka zespołu w polu tytułu i wprowadź dodatkowe informacje o członku zespołu w polu. treść.
Wybierz ikonę
Następną rzeczą, którą zrobimy, jest wybranie ikony wyboru, która się wyświetli odwiedzający że istnieje coś więcej niż tylko obraz.
Domyślny kolor tła
Następnie wybierzemy całkowicie przezroczysty kolor tła.
- Tło: rgba (255,255,255,0)
Kolor tła po najechaniu myszą
I zmienimy ten kolor po najechaniu myszą.
- Kolor tła: rgba (255,255,255,0.88)
Domyślne ustawienia ikon
Chcemy widocznej ikony, która pomoże odwiedzający zrozumieć, że mogą nad nim latać. Zmień ustawienia ikony, aby uzyskać taką ikonę.
- Kolor ikony: #ffffff
- Kolor tła obrazu/ikony: #000000
- Umieszczenie obrazu/ikony: po lewej
- Szerokość obrazu/ikony: 50px
- Obraz/ikona zaokrąglony prostokąt: 100px
Ustawienia ikony po najechaniu kursorem
Nie chcemy jednak, aby ikona pojawiała się po najechaniu kursorem. Dlatego zamiast tego użyjemy całkowicie przezroczystego koloru.
- Kolor ikony: rgba (255,255,255,0)
- Kolor tła obrazu/ikony: rgba (255,255,255,0)
Domyślne ustawienia tekstu tytułu
Następnie przejdź do ustawień tekstu tytułu i wprowadź pewne zmiany.
- Tytuł czcionki: Cinzel
- Miękkie jasne teksty: pogrubiony tekst
- Styl kopiowania tytułu: Tt
- Kolor tekstu tytułu: #000000
- Rozmiar tekstu tytułu: 0px
Ustawienia tytułu po najechaniu kursorem
Zmień rozmiar tekstu po najechaniu myszą.
- Rozmiar tekstu tytułu: 30px
Domyślne ustawienia tekstu prezentacji
Zmień także ustawienia notki.
- Treść czcionki: Open Sans
- Kolor tekstu: #000000
- Rozmiar tekstu ciała: 0px
Ustawienia najechania tekstem głównym
I ponownie zmień rozmiar tekstu podstawowego po najechaniu myszą.
- Rozmiar tekstu ciała: 14px
Domyślne odstępy
Na koniec musimy utworzyć nakładanie się modułu Podsumowanie i modułu Obraz, używając ujemnego marginesu górnego.
- Marża górna: -3,7 vw (komputer), -9 vw (tablet i telefon)
- Margines dolny: 1,5 vw (tablet), 2 vw (telefon)
Odstępy podczas najeżdżania
Zmień wartości marginesów po najechaniu myszą.
- Marża (górna): -11,38 vw
- Margines wewnętrzny: (górny i dolny: 20 pikseli), (prawy: 50 pikseli)
Klonuj kolumnę 1 dwukrotnie
Zakończyliśmy tworzenie naszego pierwszego efektu bio hover. Aby zaoszczędzić czas, możemy po prostu sklonować kolumnę 1 dwukrotnie z parametrów wiersza. Najpierw usuń pozostałe dwie kolumny, a następnie kliknij dwukrotnie, aby sklonować kolumnę 1
Zmień obraz i zawartość modułu Podsumowanie w sklonowanych kolumnach
Nie zapomnij zmienić obrazu w module Obraz i opisu w module Podsumowanie, aby zakończyć!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Komputer stacjonarny
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak stworzyć efekt najechania na zdjęcia członków zespołu, używając tylko wbudowanych opcji Divi. Wspomnieliśmy, jak ważne jest tworzenie dobrych stron „O”, ponieważ jest to jedna z najczęściej odwiedzanych stron internetowych.
Korzystanie z efektów najechania na zdjęcia członków zespołu nie tylko przeniesie Twoją stronę z informacjami na wyższy poziom, ale także zwiększy zaangażowanie odwiedzający. Jeśli masz jakieś wątpliwości lub sugestie, znajdź nas sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
