[vc_row content_placement="middle" css=".vc_custom_1508940533685{kolor tła: #f8f6f6 !ważne;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885{pxbottom: 0 !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

Divi: najłatwiejszy w użyciu motyw WordPress

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="zielony" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] POBIERZ [/vcex_button][/ kolumna_vc][/wiersz_vc]

Divi: Najlepszy motyw WordPress wszechczasów!

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

Nie jest tajemnicą, że strony „Kim jesteśmy” świetnie nadają się do generowania kliknięć w Twojej witrynie. Jest to również tego typu strona, która skupia się na ludzkiej części biznesu stojącej za witryną. Wiedząc o tym, zdajemy sobie sprawę, że ważne jest, aby zwracać uwagę na to, jak układamy 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 utworzy zawisłą interakcję między tobą a użytkownikami.

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

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 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.

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

Elementor pozwala tworzyć Łatwo i za darmo dowolny projekt strony internetowej lub bloga o profesjonalnym wyglądzie. Przestań płacić dużo za stronę internetową, którą możesz zrobić sam.

  • 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 mod Blurb tuż pod modyfikacją obrazu w kolumnie 1. Dodaj nazwę członka zespołu w polu 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.

Chcesz sprzedawać swoje produkty w Internecie?

Pobierz bezpłatnie WooCommerce, najlepsze wtyczki e-commerce, aby sprzedawać swoje fizyczne i cyfrowe produkty na WordPress i łatwo tworzyć swój sklep internetowy. Idealny dla początkujących.

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 mieć widoczną ikonę, która pomoże odwiedzającym zrozumieć, że mogą na nią najechać kursorem. 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

Telefon komórkowy

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!

2 akcji
udział2
ćwierkanie
Enregistrer