Pobierz DARMOWY układ referencji ruchu dla Divi

Nie jest tajemnicą, że referencje są kluczową częścią wielu firm i ich strony internetowej. Dodają poczucie wiarygodności świadczonych przez Ciebie usług lub oferowanych produktów. Zwracanie szczególnej uwagi na sposób, w jaki prezentujesz swoje referencje, często się opłaca. Dzięki Divi istnieje mnóstwo sposobów na stylizowanie sekcji referencji, jest nawet dedykowany moduł referencji. Jeśli jednak szukasz wyjątkowego sposobu na dodanie interakcji do swoich referencji, pokochasz ten post. Udostępniamy piękny, niestandardowy układ referencji ruchu zbudowany z nowych efektów przewijania Divi. Odtworzymy również projekt krok po kroku!

Weźmy się za to.

Zapowiedź

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

Pulpit

mobilny

Pobierz układ referencji ruchu ZA DARMO

Aby położyć swoje ręce na układzie referencji w ruchu swobodnym, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Zacznijmy odtwarzać!

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień kolor tła na czarny.

• Kolor tła: #000000

Rozstaw

Przejdź do zakładki projektowania sekcji i dodaj niestandardowe górne i dolne wyściółki na różnych rozmiarach ekranu.

• Górna wyściółka: 10% (komputer), 20% (tablet), 30% (telefon)
• Dolna wyściółka: 10% (komputer stacjonarny), 20% (tablet), 30% (telefon)

Dodaj wiersz nr 1

Struktura kolumny

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

Dodaj moduł tekstowy do kolumny

Dodaj zawartość H2

Pierwszym modułem, którego potrzebujemy w kolumnie tego wiersza, jest moduł tekstowy z pewną zawartością H2.

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu tekstowego i odpowiednio zmień ustawienia tekstu H2:

• Czcionka nagłówka 2: Questrial
• Nagłówek 2 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 2: 85px (komputer), 45px (tablet), 35px (telefon)
• Nagłówek 2 Odstępy między literami: 2px
• Nagłówek 2 Wysokość linii: 1,1 em

Dodaj moduł dzielnika do kolumny

Widoczność

Następnie dodaj moduł dzielnika tuż pod modułem tekstowym i upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Ustawienia linii

Przejdź do zakładki projektu modułu i zmień ustawienia linii w następujący sposób:

• Kolor linii: #161616
• Styl linii: Jednolity
• Pozycja linii: górna

Rozmiary

Zmodyfikuj również ustawienia rozmiaru.

• Waga dzielnika: 14px
• Szerokość: 13% (komputer), 20% (tablet), 30% (telefon)
• Wyrównanie modułu: Środek

Dodaj wiersz nr 2

Struktura kolumny

Do następnego rzędu! Ten wiersz będzie poświęcony naszemu pierwszemu świadectwu. Użyj następującej struktury kolumn:

Obraz tła pulpitu

Następnie prześlij niebieski obraz tła pulpitu, który możesz znaleźć w folderze pobierania, który udało Ci się pobrać na początku tego postu.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: Środek

Obraz tła tabletu i telefonu

Używamy obróconej wersji niebieskiego obrazu tła na mniejszych ekranach. Ten obraz tła można również znaleźć w folderze pobierania.

• Rozmiar obrazu tła: Dopasuj
• Pozycja obrazu tła: środek

Rozmiary

Przejdź do zakładki projektu wiersza i zmień maksymalną szerokość w ustawieniach rozmiaru.

• Maksymalna szerokość: 2000px

Rozstaw

Wprowadź również pewne zmiany w ustawieniach odstępów.

• Górny margines: 100px
• Górna wyściółka: 15%
• Dolna wyściółka: 15%

Efekt przewijania ruchu w poziomie

Następnie przejdź do zakładki Zaawansowane i włącz ruch poziomy w efektach przewijania.

• Włącz ruch poziomy: Tak
• Przesunięcie początkowe: -4
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: 0
• Wyzwalacz efektu ruchu: Góra elementu

Efekt przewijania i zanikania

Dodamy również niestandardowy efekt przewijania i znikania.

• Włącz pojawianie się i zanikanie: tak
• Początkowe krycie: 0% (przy 19%)
• Średnie krycie: 100% (od 25% do 88%)
• Końcowe krycie: 0% (przy 93%)
• Efekt wyzwalania ruchu: Góra elementu

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Pierwszym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy. Umieść treść referencji w polu treści.

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Questrial
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 50px (komputer), 30px (tablet), 25px (telefon)
• Wysokość linii tekstu: 1,5 em
• Wyrównanie tekstu: do środka

Rozmiary

Następnie zmień szerokość na różnych rozmiarach ekranu na karcie projektu.

• Szerokość: 63% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie modułu: Środek

Dodaj moduł Osoba do kolumny

Dodaj zawartość

Przejdźmy do następnego modułu, czyli modułu Person. Dodaj nazwę, stanowisko i linki do mediów społecznościowych.

Załaduj obrazek

Następnie prześlij wybrany kwadratowy obraz.

Ustawienia ikon

Przejdź do zakładki projekt i zmień kolor ikony w ustawieniach ikony.

• Kolor ikony: #2b302e

Obraz

Zmień obraz w okrąg, dodając zaokrąglone rogi.

• Wszystkie rogi: 100px

Ustawienia tekstu tytułu

Następnie zmień ustawienia tekstu tytułu w następujący sposób:

• Czcionka tytułu: Questrial
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 24px

Ustawienia tekstu podstawowego

Wprowadź też pewne zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Questrial
• Kolor tekstu ciała: #ffffff
• Rozmiar tekstu ciała: 15px

Ustawienia tekstu pozycji

Zmieniamy także ustawienia tekstu pozycji.

• Czcionka pozycji: Questrial
• Kolor tekstu pozycji: #1b66ff
• Rozmiar tekstu pozycji: 17px

Rozmiary

Wraz z szerokością w różnych rozmiarach ekranu.

• Szerokość: 25% (komputer stacjonarny), 100% (tablet i telefon)
• Wyrównanie modułu: Środek

Rozstaw

Przejdź do ustawień odstępów i dodaj górny margines.

• Górny margines: 100px

Główny element

Aby upewnić się, że cała zawartość jest wyrównana w naszym module Person, przejdziemy do zakładki zaawansowane i dodamy dwie linie kodu CSS do głównego elementu modułu.

display: flex;
align-items: center;

Obraz członka

Użyjemy również niestandardowej szerokości elementu obrazu członka na mniejszych ekranach.

Tablet:

width: 20% !important;

Telefon:

width: 30% !important;
margin-right: 5%;

Klonuj rząd nr 2

Po ukończeniu wiersza zawierającego opinię możesz sklonować cały wiersz raz.

Zmień obrazy tła wiersza

Musimy wprowadzić pewne zmiany w tym zduplikowanym wierszu, zaczynając od obrazów tła na komputerze i mniejszych ekranów. Czerwone wersje obrazów tła można znaleźć w folderze pobierania.

Zmień odstępy między wierszami

Dodaj trochę ujemnego górnego marginesu do następnego wiersza.

• Górny margines: -15%

Zmień kolor tekstu pozycji modułu osoby

I uzupełnij ustawienia duplikatów wierszy, zmieniając kolor tekstu pozycji w ustawieniach modułu osoby.

• Kolor tekstu pozycji: #ff233e

Klonuj ostatni rząd

Po ukończeniu zduplikowanego wiersza referencji możesz go sklonować.

Zmień obrazy tła wiersza

Zmień obrazy tła wiersza, używając żółtych wersji, które można znaleźć w folderze pobierania.

Zmień kolory tekstu pozycji modułu osoby

Zmodyfikuj również kolor tekstu pozycji w ustawieniach modułu osoby i gotowe!

• Kolor tekstu pozycji: #ffbc1b

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście udostępniliśmy piękny układ referencji ruchowych, który można było pobrać za darmo! Wykorzystaliśmy niestandardowe tła i byliśmy w stanie podkreślić każdą opinię za pomocą efektów przewijania Divi. Odtworzyliśmy projekt, krok po kroku! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.