Jak dodać efekt najechania na bios członków zespołu w Divi

Nie jest tajemnicą, że strony są świetne do tworzenia kliknięć w Twojej witrynie. To także ten jeden rodzaj strony, który podkreśla ludzką część firmy stojącej za stroną internetową. Świadomość tego uświadamia nam, że ważne jest, abyśmy zwracali uwagę na sposób, w jaki tworzymy strukturę stron, jakie informacje udostępniamy i jak tworzymy interakcje. Jedną z rzeczy, które możesz zrobić, aby podnieść jakość strony, jest udostępnienie sekcji członków zespołu, która stawia pracowników w centrum uwagi. Co więcej, możesz dodać efekt biografii do zdjęć członków zespołu, korzystając tylko z wbudowanych opcji Divi. Pozwoli to zaoszczędzić miejsce na stronie, nad którą pracujesz, i stworzyć interakcję między Tobą a odwiedzającymi.

W tym samouczku pokażemy Ci krok po kroku, jak się tam dostać. Gdy uzyskasz podejście, będziesz mógł dostosować styl projektowania do własnych potrzeb.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Pulpit

mobilny

Zacznijmy odtwarzać

Subskrybuj nasz kanał YouTube

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:

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

Dodaj wiersz nr 1

Struktura kolumny

Po zakończeniu dodawania niestandardowego wypełnienia do sekcji możesz zamknąć ustawienia sekcji i dodać nowy wiersz, używając tylko jednej kolumny.

Dodaj moduł tekstowy

Dodaj zawartość H2

Dodaj tytułowy moduł tekstowy do kolumny z wybraną kopią H2.

Ustawienia tekstu H2

Następnie przejdź do ustawień tekstu H2 i wprowadź zmiany w wyglądzie kopii.

• Czcionka nagłówka 2: Cinzel
• Styl czcionki nagłówka 2: Kapitaliki
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2: 70px

Dodaj moduł dzielnika

Widoczność

Kontynuuj, dodając nowy moduł dzielnika tuż pod tytułem Moduł tekstowy.

• Pokaż dzielnik: tak

Kolor dzielnika

Przejdź do zakładki projekt, otwórz ustawienia kolorów i odpowiednio zmień kolor dzielnika:

• Kolor dzielnika: #333333

Rozmiary

Następnie zmniejszymy rozmiar dzielnika i wyśrodkujemy go.

• Szerokość: 26%
• Wyrównanie modułu: Środek

Dodaj wiersz nr 2

Struktura kolumny

Tuż pod poprzednim dodanym wierszem dodaj nowy wiersz, używając trzech kolumn o jednakowej wielkości.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i dokonaj pewnych zmian w ustawieniach rozmiaru.

• Użyj niestandardowej szerokości: Tak
• Jednostka: PX
• Szerokość niestandardowa: 2000px
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia.

• Górny margines: 50px
• Margines dolny: 50px
• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 5px
• Prawe wypełnienie: 5px
• Dopełnienie kolumny 1, 2 i 3 po lewej stronie: 5px
• Dopełnienie kolumny 1, 2 i 3 po prawej: 5px

Cień Pudełka

Dodajemy również naszemu wierszowi nieco głębi, dodając do niego 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 cienia: rgba(0,0,0,0.3)

Dodaj moduł obrazu do kolumny 1

Prześlij obraz do modułu obrazu

Czas zacząć dodawać moduły! Aby osiągnąć efekt bio hover, będziemy potrzebować w sumie dwóch modułów; Moduł obrazu i Moduł Blurb. Moduł obrazu będzie zawierał obraz członka zespołu, którego chcesz zaprezentować. Z drugiej strony moduł Blurb zostanie użyty do dodania ikony w lewym dolnym rogu i biografii po najechaniu kursorem. Dodaj moduł obrazu do pierwszej kolumny, używając obrazu o rozmiarze kwadratu.

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ń całe nasycenie.

• Nasycenie: 0%

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Kontynuuj, dodając nowy moduł Blurb tuż pod modułem obrazu w kolumnie 1. Dodaj imię i nazwisko członka zespołu w polu tytułu i wprowadź więcej informacji o członku zespołu w polu treści.

Wybierz ikonę

Następną rzeczą, jaką zrobimy, jest wybranie ikony, która pokaże odwiedzającym, że to coś więcej niż tylko zdjęcie.

Domyślny kolor tła

Następnie wybierzemy cały przezroczysty kolor tła.

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

Wskaż kolor tła

I zmienimy ten kolor po najechaniu myszą.

• Kolor tła: rgba (255,255,255,0.88)

Domyślne ustawienia ikon

Chcemy zauważalnej ikony, która pomoże odwiedzającym zrozumieć, że mogą na nią najechać. Zmień ustawienia ikony, aby uzyskać taką ikonę.

• Kolor ikony: #ffffff
• Ikona koła: Tak
• Kolor koła: #000000
• Umieszczenie ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 50px

Ustawienia ikony kursora

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 koła: rgba (255,255,255,0)

Domyślne ustawienia tekstu tytułu

Następnie przejdź do ustawień tekstu tytułu i wprowadź pewne zmiany.

• Czcionka tytułu: Cinzel
• Grubość czcionki tytułu: pogrubiona
• Styl czcionki tytułu: Kapitaliki
• Kolor tekstu tytułu: #000000
• Rozmiar tekstu tytułu: 0px

Ustawienia tekstu w tytule najechania kursorem

Zmień rozmiar tekstu po najechaniu myszą.

• Rozmiar tekstu tytułu: 30px

Domyślne ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Otwórz Sans
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 0px
• Wysokość linii ciała: 1,8 em

Ustawienia tekstu w nawinięciu

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ę między modułem Blurb a modułem obrazu, używając ujemnego marginesu górnego.

• Górny margines: -3,7vw (komputer stacjonarny), -9vw (tablet i telefon)
• Margines dolny: 1,5vw (tablet), 2vw (telefon)

Odstępy najechania

Zmień niestandardowe wartości marginesów i dopełnienia po najechaniu myszą.

• Górny margines: -11,38vw
• Górna wyściółka: 20px
• Dolna wyściółka: 20px
• Prawe wypełnienie: 50px

Sklonuj oba moduły dwukrotnie i umieść duplikaty w pozostałych kolumnach

Skończyliśmy tworzenie naszego pierwszego efektu bio hover. Aby zaoszczędzić czas, możemy po prostu dwukrotnie sklonować oba moduły w kolumnie 1 i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień obraz i zawartość modułu Blurb

Pamiętaj, aby zmienić obraz w module obrazu i kopię w module Blurb, aby zakończyć sekcję członków zespołu!

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 utworzyć efekt biologicznych najechania po najechaniu na zdjęcia członków zespołu, korzystając tylko z wbudowanych opcji Divi. Wspomnieliśmy, jak ważne jest tworzenie dobrych stron, ponieważ są one jedną z najczęściej odwiedzanych stron internetowych. Korzystanie z bio efektów najechania na zdjęcia członków zespołu nie tylko pozwoli Ci przenieść Twoją stronę na wyższy poziom, ale także stworzy interakcję z odwiedzającymi. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!