5 fantastycznych sposobów na stylizację modułu referencji Divi

Jedyną rzeczą, której odwiedzający zawsze szukają na stronie internetowej, są referencje. Reprezentują wiarygodność i wpływają na proces decyzyjny leadów lub potencjalnych klientów podczas odwiedzania Twojej witryny. Oprócz upewnienia się, że masz silne referencje, którymi możesz się podzielić, ważną rolę odgrywa również ich atrakcyjność wizualna. W tym poście pokażemy Ci 5 fantastycznych sposobów na stylizowanie modułu referencji Divi, korzystając tylko z wbudowanych opcji.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, przyjrzyjmy się efektowi końcowemu na różnych rozmiarach ekranu.

Pulpit

mobilny

Odtwórz przykład nr 1

Subskrybuj nasz kanał YouTube

Dodaj nową sekcję

Zacznijmy od pierwszego przykładu! Utwórz nową stronę i dodaj zwykłą sekcję.

Dodaj nowy wiersz

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 wprowadź zmiany w ustawieniach rozmiaru.

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

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać moduły! Pierwszym modułem, którego będziemy potrzebować, jest moduł obrazu w kolumnie 1. Śmiało i prześlij wybrany obraz w kwadracie.

Filtry

Następnie przejdź do ustawień filtrów i baw się różnymi efektami.

• Nasycenie: 40%
• Kontrast: 126%

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Drugim i ostatnim modułem, którego będziemy potrzebować w kolumnie 1, jest moduł przycisku. Dodaj wybraną kopię.

Ustawienia przycisków

Następnie przejdź do ustawień przycisku i wprowadź zmiany w wyglądzie przycisku.

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku: 14px
• Kolor 1: #5400ff
• Kolor 2: #00fff6
• Kierunek gradientu: 100 stopni
• Szerokość obramowania przycisku: 0px
• Grubość czcionki: Ultra Bold
• Styl czcionki: wielkie litery

Rozstaw

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

• Górna wyściółka: 10px
• Dolna wyściółka: 10px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Cień Pudełka

I wykończ subtelnym cieniem pudełkowym.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Dodaj moduł referencji do kolumny 2

Dodaj zawartość

W drugiej kolumnie jedynym modułem, którego będziemy potrzebować, jest Moduł Testimonial. Dodaj zawartość do różnych pól i pola zawartości.

Kolor tła

Następnie dodaj lekko przezroczysty kolor tła.

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

Ustawienia ikony wyceny

Zmień również ustawienia ikony cytatu.

• Kolor ikony cytatu: #0c0c0c
• Kolor tła ikony cytatu: rgba (245,245,245,0)

Ustawienia tekstu podstawowego

Następnie zmodyfikuj ustawienia tekstu podstawowego.

• Czcionka ciała: Verdana
• Wysokość linii ciała: 1,7 em

Rozstaw

Kontynuuj, dodając różne niestandardowe wartości marginesów i dopełnienia w ustawieniach odstępów.

• Górny margines: 15vw (komputer stacjonarny i tablet), 0vw (telefon)
• Margines dolny: 50px (tablet i telefon)
• Lewy margines: -10vw (komputer stacjonarny i tablet), 0vw (telefon)
• Prawy margines: 5vw
• Górna wyściółka: 70px
• Dolna wyściółka: 70px
• Lewa wyściółka: 50px
• Prawe wypełnienie: 50px

Granica

Dodaj również lewą ramkę.

• Szerokość lewej krawędzi: 7px
• Kolor lewej krawędzi: #5400ff

Cień Pudełka

Na koniec dodaj subtelny cień pudełkowy, aby ukształtować moduł referencji.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.49)

Sklonuj oba moduły i umieść duplikaty w kolumnie 3 i 4

Po zakończeniu modyfikowania modułów w kolumnach 1 i 2 możesz sklonować moduły i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień obraz

Nie zapomnij zmienić wizerunku swojej drugiej referencji.

Zmień tło gradientowe przycisku

Zmień również tło gradientu przycisku.

• Kolor 1: #ff001d
• Kolor 2: #3700ff
• Kierunek gradientu: 100 stopni

Zmień kolor obramowania referencji

I dopasuj kolor obramowania do nowego tła gradientowego przycisku.

• Kolor lewej krawędzi: #ff001d

Odtwórz przykład nr 2

Dodaj nową sekcję

Przejdźmy do drugiego przykładu! Dodaj nową zwykłą sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

Nie wprowadzając żadnych zmian w sekcji, dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Kontynuuj, otwierając ustawienia wiersza i wprowadzając pewne zmiany w ustawieniach 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 dopełnienia do wiersza i kolumn.

• Lewe wypełnienie: 200px (komputer), 30px (tablet), 25px (telefon)
• Prawe dopełnienie: 200px (komputer), 30px (tablet), 25px (telefon)
• Dopełnienie kolumny 1 po lewej stronie: 5px (komputer), 0px (tablet i telefon)
• Kolumna 1 po prawej stronie: 2.5px (komputer), 0px (tablet i telefon)
• Dopełnienie kolumny 2 po lewej stronie: 2.5px (komputer), 0px (tablet i telefon)
• Kolumna 2 po prawej stronie: 2.5px (komputer), 0px (tablet i telefon)
• Kolumna 3 lewe wypełnienie: 2.5px (komputer), 0px (tablet i telefon)
• Kolumna 3 po prawej stronie: 5px (komputer), 0px (tablet i telefon)

Dodaj moduł wideo do kolumny 1

Link do wideo

Pierwszym modułem, którego będziemy potrzebować w kolumnie 1, jest moduł wideo. Połącz ten film z filmem z referencją.

Nakładka obrazu

Dodaj również nakładkę obrazu.

Dodaj moduł referencji do kolumny 1

Dodaj zawartość

Drugim i ostatnim modułem wymaganym w kolumnie 1 jest Moduł Referencyjny. Zacznij od dodania szczegółów referencji.

Wyłącz ikonę wyceny

Następnie wyłącz ikonę cytatu w ustawieniach elementów.

• Pokaż ikonę wyceny: Nie

Kolor tła

Dodaj następnie białe tło.

• Kolor tła: #ffffff

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Kolor tekstu ciała: #000000
• Odstępy między literami: -0,5px
• Wysokość linii ciała: 1,7 em

Rozstaw

I dodaj niestandardowe wartości marginesów i dopełnienia w ustawieniach odstępów.

• Margines dolny: 30 pikseli (tablet i telefon)
• Górna wyściółka: 50px
• Dolna wyściółka: 50px
• Lewa wyściółka: 80px
• Prawe wypełnienie: 80px

Granica

Dolny lewy i prawy róg modułu jest zaokrąglony „30px”.

Cień Pudełka

I na koniec, aby stworzyć trochę głębi, dajemy modułowi referencji subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: rgba(0,0,0,0.3)

Klonuj moduły trzy razy i umieść duplikaty w pozostałych kolumnach

Gdy skończysz modyfikować oba moduły w kolumnie 1, sklonuj je dwukrotnie i umieść duplikaty w dwóch pozostałych kolumnach.

Zmień linki wideo, treści i nakładki graficzne

Nie zapomnij zmienić linku wideo, treści i nakładek graficznych nowych referencji.

Odtwórz przykład nr 3

Dodaj nową sekcję

Przejdźmy do trzeciego przykładu! Dodaj nową zwykłą sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

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

Kolor tła kolumny 1

Następnie przejdź do ustawień tła i dodaj kolor tła do pierwszej kolumny.

• Kolor tła kolumny 1: #f9f9f9

Kolor tła kolumny 2

Druga kolumna będzie wymagała białego koloru tła.

• Kolor tła kolumny 2: #ffffff

Rozmiary

Następnie przejdź do ustawień rozmiaru i usuń szerokość rynny.

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

Rozstaw

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

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 0px
• Prawe wypełnienie: 0px
• Górna wyściółka kolumny 1: 100px
• Dolna wyściółka kolumny 1: 100px
• Dopełnienie kolumny 1 po lewej stronie: 50px
• Kolumna 1 prawa dopełnienie: 50px
• Górna wyściółka kolumny 2: 100px
• Dolna wyściółka kolumny 2: 100px
• Dopełnienie kolumny 2 po lewej stronie: 50px
• Kolumna 2 prawa dopełnienie: 50px

Granica

I nadaj każdej z ramek '20px'.

Cień Pudełka

Na koniec nadaj swojemu wierszowi cień pudełka.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł referencji do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Pierwszym modułem, którego będziemy potrzebować w kolumnie 1, jest Moduł Testimonial. Dodaj treść.

Załaduj obrazek

Kontynuuj, przesyłając obraz w ustawieniach obrazu.

Wyłącz ikonę wyceny

Następnie wyłącz ikonę cytatu.

• Pokaż ikonę wyceny: Nie

Wyłącz kolor tła

Wyłącz również kolor tła.

• Użyj koloru tła: nie

Ustawienia tekstu podstawowego

Kontynuuj, przechodząc do karty projektu i wprowadzając zmiany w ustawieniach tekstu podstawowego.

• Czcionka ciała: Abril Fatface
• Kolor tekstu ciała: #000000
• Rozmiar tekstu ciała: 20px

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Drugim modułem, którego będziemy potrzebować w kolumnie 1, jest moduł tekstowy. Dodaj kopię referencji do pola treści.

Rozstaw

Następnie przejdź do zakładki projektowania i dodaj niestandardowy górny i dolny margines.

• Górny margines: 50px
• Margines dolny: 50px

Dodaj moduł obrazu do kolumny 1

Prześlij logo firmy

Trzecim i ostatnim modułem, którego będziemy potrzebować w kolumnie pierwszej, jest moduł obrazu. Możesz użyć tego modułu, aby dodać logo firmy związane z referencją.

Sklonuj wszystkie moduły i umieść duplikaty w kolumnie 2

Gdy skończysz modyfikować wszystkie moduły w kolumnie 1, możesz je sklonować. Gdy to zrobisz, umieść duplikaty w drugiej kolumnie.

Zmień obraz i kopię referencji

Upewnij się, że zmieniłeś treść referencji wraz z obrazami.

Odtwórz przykład nr 4

Dodaj nową sekcję

Przejdźmy do czwartego przykładu! Dodaj nową sekcję do swojej strony.

Dodaj nowy wiersz

Struktura kolumny

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

Obraz tła kolumny 1

Otwórz ustawienia wiersza i dodaj obraz tła do pierwszej kolumny.

• Kolumna 1 Powtórzenie obrazu tła: Bez powtórzeń

Obraz tła kolumny 3

Zrób to samo dla trzeciej kolumny.

• Kolumna 3 Powtórzenie obrazu tła: Bez powtórzeń

Rozmiary

Następnie przejdź do ustawień rozmiaru i wprowadź zmiany.

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

Rozstaw

Następnie usuń domyślną górną i dolną wyściółkę.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł referencji do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł referencji do pierwszej kolumny. Gdy to zrobisz, dodaj szczegóły referencji.

Tło gradientowe

Daj modułowi również tło gradientowe.

• Kolor 1: #8b32ff
• Kolor 2: #ff35ae
• Kierunek gradientu: 120 stopni

Ustawienia ikony wyceny

Następnie wprowadź zmiany w ustawieniach ikon.

• Kolor ikony cytatu: #000000
• Kolor tła ikony cytatu: #ffffff

Ustawienia tekstu

I zmień kolor tekstu w ustawieniach tekstu.

• Kolor tekstu: jasny

Rozstaw

Aby nadać modułowi kwadratowy kształt, dodamy niestandardowe dopełnienie w ustawieniach odstępów.

• Górna wyściółka: 100px
• Dolna wyściółka: 100px
• Lewa wyściółka: 100px
• Prawe wypełnienie: 100px

Cień Pudełka

Będziesz także chciał dodać trochę głębi do referencji, używając subtelnego cienia pudełkowego.

• Siła rozmycia cieni w pudełku: 80px
• Siła rozprzestrzeniania się cieni w pudełku: -10px
• Kolor cienia: #ff35ae

Filtr domyślny

Ideą tego świadectwa jest to, że po najechaniu na niego referencja znika i pojawia się obraz. Aby osiągnąć ten efekt, użyjemy filtra opacity w ustawieniach filtrów. Upewnij się, że domyślne krycie to „100%”.

• Krycie: 100%

Umieść filtr

I usuń krycie po najechaniu.

• Krycie: 0%

Klonuj moduł świadectwa do kolumny 3

Gdy skończysz modyfikować moduł świadectwa w kolumnie 1, sklonuj go i umieść duplikat w trzeciej kolumnie.

Zmień tło gradientowe

Następnie zmień gradient tła duplikatu.

• Kolor 1: #32b0ff
• Kolor 2: #89009e
• Kierunek gradientu: 120 stopni

Klonuj rząd

I sklonuj cały rząd.

Usuń tło gradientu referencji i zmień kolor tła

Następną rzeczą, którą musisz zrobić, to usunąć gradientowe tło modułów testimonial i zamiast tego użyć białego koloru tła.

• Kolor tła: #ffffff

Zmień ustawienia tekstu referencji

Po usunięciu tła gradientowego możesz zmienić kolor tekstu w ustawieniach tekstu.

• Kolor tekstu: ciemny

Odtwórz przykład nr 5

Dodaj nową sekcję

Przejdźmy do następnego i ostatniego przykładu tego samouczka! Dodaj nową zwykłą sekcję do swojej strony.

Kolor tła

Zmień kolor tła sekcji.

• Kolor tła: #ededed

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Wprowadź również pewne zmiany w ustawieniach rozmiaru.

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

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł tekstowy do pierwszej kolumny. Dodaj kopię referencji do pola treści.

Kolor tła

I zmień kolor tła modułu.

• Kolor tła: #ffffff

Ustawienia tekstu

Następnie przejdź do zakładki projekt i zmień orientację tekstu w ustawieniach tekstu.

• Orientacja tekstu: Środek

Rozstaw

Dodaj również niestandardowe wartości marginesów.

• Lewy margines: 50px (komputer i tablet), 20px (telefon)
• Prawy margines: 50px (komputer i tablet), 20px (telefon)

Dodaj moduł referencji do kolumny 1

Dodaj zawartość

Tuż pod modułem tekstowym możesz dodać moduł referencji. Wypełnij pola imię i nazwisko autora, stanowisko i nazwę firmy.

Załaduj obrazek

Prześlij obraz również w ustawieniach obrazu.

Tło gradientowe

I dodaj tło gradientowe.

• Kolor 1: #5b32ff
• Kolor 2: #32e5f2
• Kierunek gradientu: 100 stopni

Ustawienia ikony wyceny

Kontynuuj, przechodząc do zakładki projekt i zmieniając ustawienia ikony cytatu.

• Kolor ikony cytatu: #000000
• Kolor tła ikony cytatu: #ffffff

Ustawienia tekstu

Zmień orientację tekstu również w ustawieniach tekstu.

• Orientacja tekstu: Środek
• Kolor tekstu: jasny

Ustawienia tekstu podstawowego

Następnie pobaw się ustawieniami tekstu podstawowego.

• Grubość czcionki ciała: Ultra Bold
• Styl czcionki ciała: wielkie litery
• Rozmiar tekstu ciała: 15px
• Odstępy między literami: -0,5px
• Wysokość linii ciała: 2.1em

Rozstaw

Dodaj trochę ujemnego marginesu górnego, aby utworzyć nakładanie się tego modułu i modułu tekstowego.

• Górny margines: -25px

Cień Pudełka

I zakończ projekt referencji, nadając modułowi referencji subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 80px
• Kolor cienia: rgba(0,0,0,0.3)

Sklonuj oba moduły dwukrotnie i umieść duplikaty w pozostałych kolumnach

Po zakończeniu modyfikowania modułów w kolumnie 1 możesz je sklonować dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień treść i obrazy referencji

Upewnij się, że zmieniłeś zawartość i obrazy używane w modułach.

Zmień tło gradientowe referencji

Wraz z gradientowymi tłami.

• Kolor 1: #a632ff
• Kolor 2: #f7a131

• Kolor 1: #3281ff
• Kolor 2: #2cf483

Zapowiedź

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

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy Ci 5 fantastycznych sposobów na stylizację modułu Divi Testimonial. Przeprowadziliśmy Cię krok po kroku przez samouczek i stworzyliśmy referencje, które możesz wykorzystać na praktycznie każdej stronie internetowej, nad którą pracujesz. Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej.