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
Aplikacje mobilne
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
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.
Dodaj moduł tekstowy
Dodaj zawartość H2
Dodaj tytuł modułu tekstowego do kolumny z wybranym rozmiarem H2.
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
Dodaj moduł podziału
widoczność
Kontynuuj dodawanie nowego modułu separacji tuż pod tytułem modułu tekstowego.
- Pokaż dzielnik: Tak
Kolor separatora
Przejdź do zakładki Projekt, otwórz ustawienia kolorów i odpowiednio zmień kolor separatora:
- Kolor separatora: # 333333
zaklejania
Następnie zmniejszymy rozmiar dzielnika i wyśrodkujemy go.
- Szerokość: 26%
- Wyrównanie modułu: centrum
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.
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
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
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)
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.
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%
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ść.
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.
Domyślny kolor tła
Następnie wybierzemy całkowicie przezroczysty kolor tła.
- Kolor tła: rgba (255,255,255,0)
Kolor tła na estakadzie
A my zmienimy ustawienie tego koloru.
- 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 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
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)
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
Najedź kursorem na ustawienia tekstu tytułu
Zmień rozmiar tekstu, najeżdżając kursorem.
- Rozmiar tytułu tekstu: 30px
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
Parametr ciała podczas przelotu
I ponownie zmień rozmiar treści tekstu unoszącego się w powietrzu.
- Rozmiar tekstu podstawowego: 14px
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)
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
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.
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!
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak spojrzeliśmy na różne rozmiary ekranu.
Biuro
Aplikacje mobilne
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!
Witam,
Dziękuję za ten poradnik, bardzo mi się przydał.
Jednak napotykam 2 małe problemy:
- nie obowiązuje najechane tło (mam wrażenie, że jest za obrazem ...)
- estakada nie otwiera się tak samo jak w przykładzie (mój tekst pozostaje na tej samej wysokości co ikona i nie otwiera się do góry) co daje ładny wygląd.
Czy masz rozwiązanie? Dziękuję
Miłego wieczoru
Witam,
Czy możesz udostępnić zrzut ekranu?
Witam,
Dziękuję za ten samouczek, jest bardzo dobrze wyjaśniony.
Jednak mam problem, gdy najeżdżanie myszą trzęsie się i nie płynie. Czy wiesz, z czego to wynika?
dziękuję
Cześć Sal,
Nie przepraszam.