Nie jest tajemnicą, że strony „O nas” są bardzo dobre w przyciąganiu kliknięć do Twojego strona internetowa. Jest to również tego typu strona, która podkreśli ludzką część biznesu stojącą za Witryna internetowa. Wiedząc o tym, zdajemy sobie sprawę, że ważne jest, aby zwracać uwagę na to, jak strukturyzujemy strony, jakie informacje udostępniamy i jak tworzymy interakcje.

Jedną z rzeczy, które możesz zrobić, aby ulepszyć działanie strony, jest zapewnienie sekcji członków zespołu, która stawia pracowników w centrum uwagi. Ponadto możesz dodać efekt biologicznego najechania na zdjęcia członków zespołu, korzystając tylko z wbudowanych opcji Divi.

Pozwoli ci to zaoszczędzić miejsce na stronie, nad którą pracujesz, i stworzyć interakcję między tobą a twoim odwiedzający.

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

Chodźmy!

badanie

Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Biuro

Divi-bio-efekt hover-desktop-gif.gif

Aplikacje mobilne

Divi-bio-efekt hover-mobile-gif.gif

Zacznijmy od nowa

Dodaj nową sekcję

rozstaw

Utwórz nową stronę lub otwórz istniejącą i dodaj nową sekcję, używając następujących niestandardowych wartości wypełnienia:

  • Najlepsze dopełnienie: 100px
  • Dolne wypełnienie: 100px

efekt bio hover

Dodaj wiersz 1

Struktura kolumny

Po zakończeniu dodawania niestandardowego wypełnienia do sekcji możesz zamknąć ustawienia sekcji i dodać nowy wiersz za pomocą jednej kolumny.

efekt bio hover

Dodaj moduł tekstowy

Dodaj zawartość H2

Dodaj tytuł modułu tekstowego do kolumny z wybranym rozmiarem H2.

efekt bio hover

Ustawienia tekstu H2

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

  • Nagłówek czcionki 2: Cinzel
  • Tytuł Styl czcionki 2: Małe nakładki
  • Tytuł 2 Wyrównanie tekstu: centrum
  • Tytuł 2 Rozmiar tekstu: 70px

efekt bio hover

Dodaj moduł podziału

widoczność

Kontynuuj dodawanie nowego modułu separacji tuż pod tytułem modułu tekstowego.

  • Pokaż dzielnik: Tak

efekt bio hover

Kolor separatora

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

  • Kolor separatora: # 333333

efekt bio hover

zaklejania

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

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

efekt bio hover

Dodaj linię 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.

efekt bio hover

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii i wprowadź zmiany w parametrach rozmiaru.

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

efekt bio hover

rozstaw

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

  • Górny margines: 50px
  • Dolny margines: 50px
  • Top Padding: 10px
  • Dolne wypełnienie: 10px
  • Lewa dopełnienie: 5px
  • Tapicerka z prawej: 5px
  • Kolumna 1, 2 i 3 Padding po lewej stronie: 5px
  • Kolumna 1, 2 i 3 Padding po prawej stronie: 5px

efekt bio hover

Pole cienia

Dajemy również naszej linii trochę głębi, dodając cień ramki o następujących parametrach:

  • Shadow Blur Force: 80px
  • Siła propagacji cienia w pudełku: -14px
  • Kolor cienia: rgba (0,0,0,0,3)

efekt bio hover

Dodaj moduł obrazu do kolumny 1

Załaduj obraz do modułu obrazu

Czas zacząć dodawać moduły! Aby uzyskać biologiczny efekt zawisu, będziemy potrzebować łącznie dwóch modułów. moduł obrazu i moduł blurb. Moduł Obraz będzie zawierał obraz członka zespołu, którego chcesz przedstawić.

W międzyczasie mod Blurb zostanie użyty do dodania ikony w lewym dolnym rogu i biografii najechania kursorem. Dodaj moduł obrazu do pierwszej kolumny, używając obrazu o rozmiarze kwadratu.

efekt bio hover

Filtry

Projekt, który tworzymy jest w całości w skali szarości. Aby dodać ten odcień szarości do naszego obrazu, przejdź do ustawień filtrów i usuń całe nasycenie.

  • Nasycenie: 0%

efekt bio hover

Dodaj moduł Blurb do kolumny 1

Dodaj treść

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ź dodatkowe informacje o członku zespołu w polu. treść.

efekt bio hover

Wybierz ikonę

Następną rzeczą, którą zrobimy, jest wybranie ikony wyboru, która się wyświetli odwiedzający że jest coś więcej niż tylko zdjęcie.

efekt bio hover

Domyślny kolor tła

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

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

efekt bio hover

Kolor tła na estakadzie

A my zmienimy ustawienie tego koloru.

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

efekt bio hover

Domyślne ustawienia ikon

Chcemy widocznej ikony, która pomoże odwiedzający zrozumieć, że mogą nad nim przelecieć. Zmień ustawienia ikony, aby uzyskać taką ikonę.

  • Kolor ikony: #ffffff
  • Ikona koła: tak
  • Kolor okręgu: # 000000
  • Lokalizacja ikony: po lewej
  • Użyj rozmiaru czcionki ikony: Tak
  • Rozmiar czcionki ikony: 50px

efekt bio hover

Ustawienie ikony aktywowania

Jednak nie chcemy, aby ikona pojawiała się po najechaniu kursorem. Dlatego zamiast tego używamy całkowicie przezroczystego koloru.

  • Kolor ikony: rgba (255,255,255,0)
  • Kolor koła: rgba (255,255,255,0)

efekt bio hover

Domyślne ustawienia tytułu

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

  • Tytuł Police: Cinzel
  • Czcionka tytułu: Bold
  • Styl czcionki tytułu: małe nakładki
  • Tytuł tekstu kolorowego: # 000000
  • Rozmiar tytułu tekstu: 0px

efekt bio hover

Najedź kursorem na ustawienia tekstu tytułu

Zmień rozmiar tekstu, najeżdżając kursorem.

  • Rozmiar tytułu tekstu: 30px

efekt bio hover

Domyślne ustawienia tekstu podstawowego

Zmień także ustawienia tekstu podstawowego.

  • Body Police: Open Sans
  • Tekst w kolorze: # 000000
  • Rozmiar tekstu podstawowego: 0px
  • Wysokość ciała: 1.8em

efekt bio hover

Parametr ciała podczas przelotu

I ponownie zmień rozmiar treści tekstu unoszącego się w powietrzu.

  • Rozmiar tekstu podstawowego: 14px

efekt bio hover

Domyślne odstępy

Na koniec będziemy musieli utworzyć zakładkę między modułem Blurb i modułem obrazu, używając ujemnego górnego marginesu.

  • Górny margines: -3.7vw (komputer stacjonarny), -9vw (tablet i telefon)
  • Dolny margines: 1.5vw (tablet), 2vw (telefon)

efekt bio hover

Stacjonarne odstępy

Zmień niestandardowy margines i wartości wypełnienia podczas najazdu.

  • Górny margines: -11,38vw
  • Top Padding: 20px
  • Dolne wypełnienie: 20px
  • Tapicerka z prawej: 50px

efekt bio hover

Dwukrotnie sklonuj dwa moduły i umieść duplikaty w pozostałych kolumnach.

Zakończyliśmy tworzenie naszego pierwszego biologicznego efektu unoszenia się. Aby zaoszczędzić czas, możemy po prostu dwukrotnie sklonować dwa moduły z kolumny 1 i umieścić duplikaty w pozostałych dwóch kolumnach.

efekt bio hover

Edytuj obraz i zawartość modułu Blurb

Nie zapomnij zmienić obrazu w module Obraz i skopiuj go do modułu Blurb, aby uzupełnić sekcję członków zespołu!

efekt bio hover

badanie

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak spojrzeliśmy na różne rozmiary ekranu.

Biuro

efekt bio hover

Aplikacje mobilne

efekt bio hover

końcowe przemyślenia

W tym artykule pokazaliśmy, jak stworzyć biologiczny efekt najechania na zdjęcia członków zespołu, korzystając tylko z wbudowanych opcji Divi. Podkreśliliśmy, jak ważne jest tworzenie dobrych stron, ponieważ są one jednymi z najczęściej odwiedzanych.

Użycie bio-efektów najechania na zdjęcia członków zespołu nie tylko poprawi jakość Twojej strony, ale także stworzy interakcję z odwiedzającymi. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej!