Jak stworzyć tętniącą życiem stronę zespołu Hover dla swojego następnego projektu Divi?

Strony zespołów są często niedoceniane. Przed zakupem produktu lub wynajęciem usługi wielu użytkowników przechodzi do zespołów lub stron, aby lepiej zorientować się w firmie i stojących za nią ludziach. Jeśli strona Twojego zespołu pozostawia pozytywne pierwsze wrażenie, może to prowadzić do wyższych współczynników konwersji. Teraz istnieje wiele sposobów na tworzenie pięknych stron zespołu za pomocą Divi, ale jeśli szukasz inspiracji do następnego projektu, pokochasz ten post. Odtworzymy dynamiczną stronę zespołu po najechaniu kursorem, która po najechaniu aktywuje biografie członków.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Subskrybuj nasz kanał YouTube

1. Zacznij od zwykłej sekcji + jednokolumnowy wiersz dla tytułu

Otwórz nową stronę i ustaw atrybuty strony na „pusta strona”. Gdy to zrobisz, wejdź do Divi Builder i dodaj sekcję z wierszem z jedną kolumną.

Dodaj moduł tekstowy i rozdzielający.

2. Dodaj treść do modułu tekstowego i nadaj mu styl

Dodaj trochę treści H1 do modułu tekstowego.

Przejdź do karty projektu i odpowiednio dostosuj ustawienia tekstu H1:

• Czcionka nagłówka: Poppins
• Grubość czcionki nagłówka: Lekka
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: Czarny #000000
• Rozmiar tekstu nagłówka:
  • Pulpit = 6vw
  • Tablet = 9vw
  • Telefon = 11vw
• Odstępy między literami nagłówka: -0,4vw

3. Nadaj styl dzielnikowi

Przejdźmy do następnego modułu, czyli modułu dzielnika. Zmień kolor dzielnika na czarny i zmodyfikuj ustawienia rozmiaru.

• Kolor dzielnika: czarny #oooooo
• Waga dzielnika: 12px
• Szerokość: 14%
• Wyrównanie modułu: Środek

4. Utwórz biografie zespołu za pomocą zwykłej sekcji + trzykolumnowego wiersza

Teraz, gdy skończyliśmy sekcję tytułową, jesteśmy gotowi do rozpoczęcia tworzenia biografii zespołu. Zacznij od dodania nowej zwykłej sekcji z rzędem trzech kolumn.

5. Dostosuj ustawienia rozmiaru wiersza

Zmień ustawienia rozmiaru, aby wiersz zajmował całą szerokość kontenera sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

6. Dostosuj ustawienia odstępów między wierszami

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 2vw
• Dolna wyściółka: 2vw

7. Dodaj moduł obrazu i rozmycia do kolumny pierwszej

Dwa główne moduły, których użyjemy do stworzenia efektu końcowego, to moduł obrazu i notatka. Najpierw dodaj moduł obrazu, a następnie notkę.

8. Prześlij obraz i nadaj mu styl

Twoja strona zespołu po najechaniu kursorem dotyczy wyłącznie prezentowania członków zespołu. Otwórz moduł obrazu i dodaj zdjęcie jednego z nich. Wykorzystamy jeden z naszych obrazów stockowych Divi. Upewnij się, że wymiary obrazu to 612 pikseli x 612 pikseli.

Wyrównanie

Przejdź do zakładki projektu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

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

Rozstaw

I dodaj trochę ujemnego górnego marginesu.

• Margines:
  • Pulpit = -3vw
  • Tablet i telefon = -13vw

Granica

Aby zmienić obraz w okrąg, zmienimy ustawienia obramowania.

• Zaokrąglone rogi: 20vw wszystkie cztery rogi
• Style obramowania: wszystkie cztery strony
• Szerokość obramowania: 12px
• Kolor obramowania: biały #ffffff
• Styl obramowania: podwójny

Cień Pudełka

Dodajemy także głębi obrazowi, stosując subtelny cień pudełkowy.

• Cień pudełka: pierwsza opcja
• Siła rozmycia cieni w pudełku: 50px

Indeks Z

W jednym z poprzednich kroków dodaliśmy ujemną górną marżę. Aby mieć pewność, że obraz pozostaje na górze kolumny, nawet gdy ją przekroczy, zwiększymy indeks z w ustawieniach widoczności.

• Indeks Z: 3

9. Dodaj treść do Blurb & Style It

Dodaj niestandardowy CSS do ustawień strony

Zanim zrobimy cokolwiek innego, dodamy niestandardowe CSS, aby pozbyć się domyślnego dolnego marginesu ikony wewnątrz notki. Dodaj następujące wiersze kodu CSS do ustawień strony:

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Daj Blurbowi klasę CSS

Następnie otwórz moduł notki i dodaj pasującą klasę CSS.

• Klasa CSS: notka-ikona

Dodaj zawartość

Użyjemy tekstu zastępczego, ale możesz wstawić rzeczywiste imię i nazwisko oraz opis członka zespołu.

Wybierz ikonę

Następnie wybierz ikonę plusa.

• Użyj ikony: Tak
• Ikona: znak plusa wewnątrz okręgu

Styl tła

Przejdź do ustawień tła, dodaj biały domyślny kolor tła i tło gradientowe po najechaniu myszą.

• Tło: Białe #ffffff
• Tło najechania: Gradient
• Gradient kolor jeden: #00ffa1
• Drugi kolor gradientu: #29c4a9
• Typ gradientu: liniowy
• Kierunek gradientu: 154deg
• Pozycja początkowa: 0
• Pozycja końcowa: 46%

Ikona stylu

Następnie zastosuj następujące ustawienia ikon:

• Kolor ikony:
  • Domyślnie: #29c4a9
  • Hover: Przezroczysty rgba (255,255,255,0)
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony:
  • Pulpit = 2vw
  • Tablet = 4vw
  • Telefon = 6vw

Wyrównanie

Przejdź do ustawień tekstu i zmień wyrównanie tekstu.

• Wyrównanie tekstu: do środka

Styl nagłówka tekstu

Następnie otwórz ustawienia tekstu nagłówka i wprowadź zmiany na różnych rozmiarach ekranu.

• Nagłówek: H4
• Czcionka tytułu: Poppins
• Czcionka tytułu: pogrubiona
• Kolor tekstu tytułu: biały #ffffff
• Rozmiar tekstu tytułu:
  • Komputer stacjonarny: 1,5vw
  • Tablet: 2,5vw
  • Telefon: 3.5vw

Tekst główny stylu

Zrób to samo dla ustawień tekstu podstawowego.

• Kolor tekstu ciała: biały #ffffff
• Rozmiar tekstu treści:
  • Komputer stacjonarny = 0,8vw
  • Tablet = 1,9 vw
  • Telefon = 2.6vw
• Wysokość linii ciała:
  • Pulpit = 2vw
  • Tablet + telefon = 3vw

Rozmiary

Następnie zmienimy ustawienia rozmiaru naszego modułu notki.

• Szerokość treści: 100%
• Szerokość: 81%
• Wyrównanie modułu: Środek

Rozstaw

Zastosujemy również niektóre niestandardowe wartości marginesów i dopełnienia dla różnych rozmiarów ekranu.

• Górny margines:
  • Pulpit = -4vw
  • Tablet + telefon = -9vw
• Margines dolny:
  • Pulpit = 3,5vw
  • Tablet + telefon = 10vw
• Wyściółka górna i dolna:
  • Komputer stacjonarny = 7.1vw
  • Tablet = 30vw
  • Telefon = 28vw
• Wyściółka lewa i prawa
  • Pulpit = 2vw
  • Tablet + telefon = 8vw

Granica

Zmień moduł notki w okrąg, dodając trochę promienia obramowania.

• Zaokrąglone rogi: 50vw wszystkie cztery rogi

Cień Pudełka

I uzupełnij projekt modułu notki, dodając cień pudełka, który pojawia się po najechaniu myszą.

• Cień pudełka: piąty styl
• Pozycja pozioma cienia pudełka: 0vw
• Pozycja pionowa cienia pudełka:
  • Pulpit + najechanie = -14vw
  • Tablet = -44vw
  • Telefon = -46vw
• Siła rozprzestrzeniania się cienia pudełka:
  • Pulpit + najechanie = -6vw
  • Tablet + telefon = -19vw
• Kolor cienia pudełka:
  • Najechanie = rgba(0,0,0,0.05)

10. Styl pierwszej kolumny

Teraz, gdy dodaliśmy wszystkie potrzebne nam moduły do ​​kolumny pierwszej, nadszedł czas, aby nadać jej styl.

Tło

Otwórz ustawienia tła kolumny pierwszej i zastosuj następujące tło gradientowe:

• Styl tła: Gradient
• Gradient kolor jeden: #00ffa1
• Drugi kolor gradientu: #29c4a9
• Typ gradientu: Podszewka
• Kierunek gradientu: 282 stopni

Granica

Przejdź do zakładki projektu i zamień kolumnę w okrąg, dodając trochę promienia obramowania.

• Zaokrąglone rogi: 50vw

Przelewowy

Aby upewnić się, że obraz pojawia się nad kolumną, zmienimy poziome i pionowe przepełnienia w ustawieniach widoczności.

• Przepełnienie poziome i pionowe: widoczne

11. Usuń puste kolumny i zduplikuj pierwszą kolumnę dwa razy

Zakończyliśmy pierwszą kolumnę i wszystkie znajdujące się w niej moduły. Aby zaoszczędzić trochę czasu, usuniemy puste kolumny i dwukrotnie sklonujemy pierwszą kolumnę.

Usuń kolumny 2 i 3

Wróć do ustawień głównego wiersza i kliknij ikonę kosza dla kolumn drugiej i trzeciej.

Powiel kolumnę dwa razy

Po usunięciu kolumny drugiej i trzeciej, kolumna pierwsza przez chwilę będzie wyglądać dziwnie, ale wszystko się zmieni, gdy tylko sklonujesz ją dwukrotnie.

12. Zmień zawartość i kolory kolumny drugiej

Teraz nadszedł czas, aby nadać styl nowym kolumnom dla dwóch pozostałych członków zespołu.

Kolumna druga

Otwórz ustawienia drugiej kolumny i zmień tło gradientowe

• Kolor gradientu tła jeden: #00eeff
• Drugi kolor gradientu tła: #309ce5

Prześlij również inny obraz.

Kontynuuj, otwierając moduł notki i zmieniając tło gradientowe.

• Najedź na jeden kolor tła: #00eeff
• Wskaż drugi kolor tła: #309ce5

Zmień również kolor ikony.

• Domyślny kolor ikony: #309ce5

Kolumna trzecia

Otwórz ustawienia trzeciej kolumny i zmień tło gradientowe.

• Kolor gradientu tła jeden: #ff91ec
• Drugi kolor gradientu tła: #a500ff

Następnie zmień gradientowe tło blurb.

• Wskaż jeden kolor tła: #ff91ec
• Unieś kolor tła drugi: #a500ff

Wraz z kolorem ikony.

• Domyślny kolor ikony: #a500ff

Zapowiedź

Teraz, gdy przeszliśmy przez różne kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

To okład!

W tym poście pokazaliśmy, jak stworzyć żywą stronę zespołu najechania z kolorowymi opcjami najechania. Zachęcamy do wykorzystania tego projektu w kolejnym projekcie Divi. Wypróbuj go na stronie zespołu lub katalogu współtwórców. Daj nam znać, jeśli masz jakieś przemyślenia w komentarzach.