Przejdź do głównej treści

Jak dodać efekt rollover ze szczegółami dla obrazów Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Nie jest tajemnicą, że strony „Kim jesteśmy” są bardzo dobre do generowania kliknięć w Twojej witrynie. Jest to również tego rodzaju strona, która skupi się na ludzkiej części biznesu za witryną. Zdając sobie z tego sprawę, zdajemy sobie sprawę, że ważne jest, aby zwracać uwagę na to, jak organizujemy strony, rodzaj udostępnianych informacji i jak tworzymy interakcje.

Jedną z rzeczy, które możesz zrobić, aby zwiększyć wygodę korzystania ze strony, jest udostępnienie sekcji członków zespołu, która stawia pracowników w centrum uwagi. Oprócz tego możesz dodać efekt bioflash do zdjęć członków zespołu, używając tylko wbudowanych opcji Divi.

Pozwoli ci to zaoszczędzić miejsce na stronie, nad którą pracujesz, i utworzy zawisłą interakcję między tobą a użytkownikami.

W tym samouczku pokażemy krok po kroku, jak się tam dostać. Po uzyskaniu takiego podejścia możesz dostosować styl projektowania do własnych potrzeb.

Chodźmy!

badanie

Przed zanurzeniem się w samouczku, spójrzmy na wynik na różnych rozmiarach ekranu.

Biuro

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

Telefon komórkowy

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 karty Projekt, otwórz ustawienia kolorów i odpowiednio zmień kolor dzielnika:

  • Kolor separatora: # 333333

efekt bio hover

zaklejania

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

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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 uzyskaj dostęp 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 Shadowbox: -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 osiągnąć efekt przepełnienia biologicznego, będziemy potrzebować łącznie dwóch modułów. moduł obrazu i moduł blurb. Moduł Image będzie zawierał obraz członka zespołu, który chcesz przedstawić.

W międzyczasie moduł Blurb zostanie użyty do dodania ikony w lewym dolnym rogu i przelotnej biografii. Dodaj moduł obrazu do pierwszej kolumny, używając kwadratowego obrazu.

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

  • Nasycenie: 0%

efekt bio hover

Dodaj moduł Blurb do kolumny 1

Dodaj treść

Kontynuuj dodawanie nowego modułu Blurb tuż pod modułem obrazu w kolumnie 1. Dodaj nazwę członka zespołu do pola tytułu i wprowadź dodatkowe informacje o członku zespołu w polu zawartości.

efekt bio hover

Wybierz ikonę

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

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

efekt bio hover

Domyślny kolor tła

Następnie wybierzemy pełny 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ącym zrozumieć, że mogą nad nią 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

Parametr ikony przelotu

Nie chcemy jednak, aby ikona była przepełniona. 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 zawisu. Aby zaoszczędzić czas, możemy po prostu sklonować dwa moduły w kolumnie 1 dwa razy i umieścić duplikaty w dwóch pozostałych kolumnach.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

efekt bio hover

Zmodyfikuj obraz i zawartość modułu Blurb

Nie zapomnij zmienić obrazu w module Image i kopii w module Blurb, aby zakończyć sekcję członków zespołu!

efekt bio hover

badanie

Teraz, gdy przeszliśmy przez wszystkie etapy, spójrzmy na wynik na różnych rozmiarach ekranu po raz ostatni.

Biuro

efekt bio hover

Telefon komórkowy

efekt bio hover

końcowe przemyślenia

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

Stosowanie organicznych efektów flyover do zdjęć członków zespołu nie tylko poprawi jakość strony, ale także umożliwi interakcję z użytkownikami. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Ten artykuł zawiera komentarze 4
  1. Witam,

    Dziękuję za ten samouczek, był dla mnie bardzo przydatny.
    Jednak napotykam 2 małe problemy:
    - tło w locie nie ma zastosowania (mam wrażenie, że jest za obrazem…)
    - przegląd nie otwiera się w taki sam sposób jak w przykładzie (mój tekst pozostaje na tej samej wysokości co ikona i nie otwiera się), co daje mi ładny rendering.

    Czy masz rozwiązanie? Dziękuję

    Miłego wieczoru

  2. Witam,
    Dziękuję za ten samouczek, jest bardzo dobrze wyjaśniony.
    Mam jednak problem z najechaniem myszką, moje drżące zawisanie nie jest płynne. Czy wiesz co to jest?

    dziękuję

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer