Jak tworzyć unikalne nakładki najechania na referencje za pomocą Divi

Referencje to ogromna sprawa dla wielu stron internetowych. Wykazują się wiedzą specjalistyczną, a odwiedzający zwykle szukają ich, jeśli chcą dowiedzieć się, jak wiarygodna jest firma lub osoba. Dlatego ważne jest, aby pomyśleć o tym, jak wizualnie prezentujesz referencje na swojej stronie.

Dzięki Divi możesz wyświetlać swoje referencje dokładnie tak, jak chcesz. Aby Cię zainspirować, pokażemy Ci, jak stworzyć oszałamiający i niepowtarzalny sposób na prezentację referencji za pomocą najazdów na siebie.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się efektowi końcowemu.

Dodaj nową sekcję

Zacznijmy! Dodaj nową stronę lub otwórz istniejącą i dodaj nową zwykłą sekcję.

Dodaj nowy wiersz 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Dodaj również niestandardowe wartości odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 2 lewa wyściółka: 2vw (komputer stacjonarny), 3vw (tablet i telefon)
• Kolumna 2 po prawej stronie: 11vw (komputer stacjonarny), 3vw (tablet i telefon)

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać różne moduły! Zacznij od modułu obrazu w pierwszej kolumnie. Prześlij wybrany obraz portretowy.

Wyrównanie obrazu

Otwórz ustawienia obrazu i zmień wyrównanie obrazu.

• Wyrównanie obrazu: do lewej

Rozmiary

Następnie zmień ustawienia rozmiaru.

• Szerokość: 78% (komputer stacjonarny), 70% (tablet i telefon)
• Wyrównanie modułu: do lewej

Dodaj moduł tekstowy najazdu na siebie do kolumny 1

Dodaj zawartość

Tuż pod modułem obrazu dodaj moduł tekstowy. Umieść dane osoby w polu treści.

Domyślne tło

Kontynuuj, dodając kolor tła.

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

Wskaż tło

Dodaj kolejny kolor tła po najechaniu myszą.

• Kolor tła: #0f1bff

Domyślne ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Kolor tekstu: #ffffff
• Rozmiar tekstu: 0px
• Wysokość linii tekstu: 0px

Ustawienia tekstu najechania kursorem

Dokonaj pewnych zmian w ustawieniach tekstu po najechaniu myszą.

• Rozmiar tekstu: 19px
• Wysokość linii tekstu: 2em

Domyślne ustawienia tekstu nagłówka

Należy również zmodyfikować ustawienia tekstu nagłówka.

• Grubość czcionki nagłówka 3: Ultra Bold
• Styl czcionki nagłówka 3: Wielkie litery
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 0px
• Nagłówek 3 Wysokość linii: 0em

Ustawienia tekstu nagłówka kursora

Dodaj różne wartości po najechaniu myszą.

• Rozmiar tekstu nagłówka 3: 35px
• Nagłówek 3 wysokość linii: 1,1 em

Rozstaw

Następnie przejdź do ustawień odstępów i dodaj kilka wartości.

• Górny margines: -100px
• Lewy margines: 50px
• Prawy margines: 50px
• Górna wyściółka: 40px
• Dolna wyściółka: 60px

Zmień orientację tekstu

Wróć do ustawień tekstu i zmień orientację tekstu.

• Orientacja tekstu: Środek

Domyślny cień pudełka

Następnie dodaj domyślny cień pola do modułu tekstowego. Ten cień pudełka będzie częścią ogólnego projektu.

• Pozycja pozioma cienia pudełka: 1000px
• Pozycja pionowa cienia pudełka: -400px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 250px
• Kolor cienia: rgba (175,175,175,0.13)

Wskaż cień pola

Aby utworzyć specjalny efekt nakładania się kursora, dodaj również cień po najechaniu kursorem.

• Pozycja pozioma cienia pudełka: -73px
• Pozycja pionowa cienia pudełka: -49px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 10px
• Kolor cienia: rgba (255,182,12,0,53)

Przejścia

Aby stworzyć płynne przejście, zmień czas trwania przejścia w zakładce Zaawansowane.

• Czas trwania przejścia: 1000 ms

Dodaj moduł tekstu referencji do kolumny 2

Dodaj zawartość

W drugiej kolumnie pierwszą rzeczą, której będziemy potrzebować, jest tytułowy moduł tekstowy. Śmiało i dodaj podsumowanie referencji.

Ustawienia tekstu nagłówka

Następnie zmień ustawienia tekstu nagłówka.

• Czcionka nagłówka 3: Goudy Bookletter 1911
• Nagłówek 3 Wyrównanie tekstu: do lewej
• Rozmiar tekstu nagłówka 3: 3.5vw (komputer), 40px (tablet), 30px (telefon)
• Nagłówek 3 wysokość linii: 1,1 em

Rozstaw

Kontynuuj, dodając kilka niestandardowych wartości odstępów.

• Górny margines: 7vw (komputer), 100px (tablet), 50px (telefon)

Dodaj moduł tekstu opisu do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy z całą referencją tuż pod tytułem Moduł tekstowy.

Ustawienia tekstu

Po dodaniu referencji zmień ustawienia tekstu.

• Wysokość linii tekstu: 2,2 em
• Orientacja tekstu: w lewo

Rozstaw

Dodaj również niestandardowy górny margines.

• Górny margines: 4vw (komputer stacjonarny), 50px (tablet i telefon)

Dodaj nowy wiersz

Struktura kolumny

Teraz, gdy skończyliśmy pierwszy wiersz, dodajmy drugi, używając następującej struktury kolumn:

Rozmiary

Otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie dodaj kilka niestandardowych wartości odstępów.

• Górny margines: 100px
• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Kolumna 1 lewa wyściółka: 11vw (komputer stacjonarny), 3vw (tablet i telefon)
• Kolumna 1 po prawej stronie: 2vw (komputer stacjonarny), 3vw (tablet i telefon)

Klonuj moduły tekstowe poprzedniego wiersza i miejsca w kolumnie 1

Wróć do poprzedniego wiersza i sklonuj oba moduły w kolumnie 2. Gdy to zrobisz, umieść duplikaty w pierwszej kolumnie nowego wiersza.

Zmień orientację tekstu

Zmień orientację tekstu obu modułów.

• Orientacja tekstu: w prawo

Dodaj moduł obrazu do kolumny 2

Załaduj obrazek

Następnie dodaj moduł obrazu do drugiej kolumny i prześlij nowy obraz pionowy.

Wyrównanie obrazu

Zmień wyrównanie obrazu modułu.

• Wyrównanie obrazu: w prawo

Rozmiary

Kontynuuj, zmieniając ustawienia rozmiaru.

• Szerokość: 78% (komputer stacjonarny), 70% (tablet i telefon)
• Wyrównanie modułu: w prawo

Rozstaw

Dodaj również niestandardowe wartości odstępów.

• Górny margines: 50px (tablet i telefon)

Dodaj moduł tekstowy najazdu na siebie do kolumny 2

Dodaj zawartość

Ostatnim modułem, którego potrzebujemy do ukończenia tego projektu, jest moduł tekstowy poniżej modułu obrazu. Dodaj dane osoby w polu treści.

Domyślne tło

Następnie dodaj obraz tła do modułu.

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

Wskaż tło

Zmień kolor tła po najechaniu myszą.

• Kolor tła: #690cff

Domyślne ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Kolor tekstu: #ffffff
• Rozmiar tekstu: 0px
• Wysokość linii tekstu: 0px
• Orientacja tekstu: Środek

Ustawienia tekstu najechania kursorem

Wprowadź pewne poprawki po najechaniu myszą.

• Rozmiar tekstu: 19px
• Wysokość linii tekstu: 2em

Domyślne ustawienia tekstu nagłówka

Zmień również ustawienia tekstu nagłówka.

• Grubość czcionki nagłówka 3: Ultra Bold
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 0px
• Nagłówek 3 Wysokość linii: 0em

Ustawienia tekstu nagłówka kursora

Z kilkoma drobnymi poprawkami po najechaniu.

• Rozmiar tekstu nagłówka 3: 35px
• Nagłówek 3 wysokość linii: 1,1 em

Rozstaw

Kontynuuj, przechodząc do ustawień odstępów i dodaj kilka niestandardowych wartości.

• Górny margines: -80px
• Lewy margines: 50px
• Prawy margines: 50px
• Górna wyściółka: 40px
• Dolna wyściółka: 60px

Domyślny cień pudełka

Dodaj domyślny cień pola do modułu tekstowego.

• Pozycja pozioma cienia pudełka: -1000px
• Pozycja pionowa cienia pudełka: -420px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 250px
• Kolor cienia: rgba (175,175,175,0.13)

Wskaż cień pola

I zmień cień pudełka po najechaniu kursorem.

• Pozycja pozioma cienia pudełka: -73px
• Pozycja pionowa cienia pudełka: -49px
• Siła rozmycia cieni w pudełku: 0px
• Siła rozprzestrzeniania się cieni w pudełku: 10px
• Kolor cienia: rgba (12 255 238 0,53)

Przejścia

Na koniec utwórz płynne przejście, zmieniając czas trwania przejścia.

• Czas trwania przejścia: 1000 ms

Zapowiedź

Teraz, gdy przeszliśmy wszystkie kroki, przyjrzyjmy się końcowemu efektowi!

Końcowe przemyślenia

Mamy nadzieję, że ten post zainspirował Cię do stworzenia oszałamiających sekcji referencji przy użyciu najazdów na siebie! Naprawdę pomagają Ci dodać nowy wymiar do Twojej witryny bez konieczności spędzania dużo czasu na kodowaniu lub zastanawianiu się. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!