Jedyne co odwiedzający zawsze szukam A Witryna internetowa, to są referencje. Reprezentują wiarygodność i wpływają na proces decyzyjny potencjalnych klientów podczas wizyty w Twojej Witryna internetowa.
Oprócz upewnienia się, że masz silne referencje do udostępnienia, ich atrakcyjność wizualna również odgrywa ważną rolę. W tym samouczku pokażemy Ci 3 fantastyczne sposoby dostosowania modułu referencyjnego Divi, korzystając tylko z wbudowanych opcji.
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się efektowi końcowemu w różnych rozmiarach ekranu.
Biuro
Aplikacje mobilne
Odtwórz przykład nr 1
Dodaj nową sekcję
Zacznijmy od pierwszego przykładu! Utwórz nową stronę i dodaj zwykłą sekcję.
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i wprowadź zmiany w parametrach rozmiaru.
- Ustaw tę linię na pełną szerokość: Tak
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
Dodaj moduł obrazu do kolumny 1
Prześlij obraz
Czas zacząć dodawać moduły! Pierwszy mod, którego będziemy potrzebować, to mod Image w kolumnie 1. Śmiało i prześlij wybrany kwadratowy obraz.
Filtry
Następnie przejdź do ustawień filtra i graj z różnymi efektami.
- Nasycenie: 40%
- Kontrast: 126%
Dodaj moduł przycisku do kolumny 1
Dodaj kopię
Drugi i ostatni moduł, którego będziemy potrzebować w kolumnie 1, to moduł przycisków. Dodaj wybraną kopię.
Ustawienia przycisków
Następnie przejdź do ustawień przycisku i zmień wygląd przycisku.
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 14px
- Kolor 1: # 5400ff
- Kolor 2: # 00fff6
- Gradient Direction: 100deg
- Szerokość obramowania przycisku: 0px
- Masa czcionki: Ultra Bold
- Styl czcionki: wielkie litery
rozstaw
Dodaj także niestandardowe wartości odstępów.
- Top Padding: 10px
- Dolne wypełnienie: 10px
- Lewe dopełnienie: 30px
- Tapicerka z prawej: 30px
Pole cienia
I wykończ subtelnym kloszem.
- Box Shadow Blur Force: 80px
- Kolor cienia: rgba (0,0,0,0,3)
Dodaj moduł referencji do kolumny 2
Dodaj treść
W drugiej kolumnie jedynym modułem, jakiego będziemy potrzebować, jest moduł referencji. Dodaj trochę treść do różnych dziedzin i obszarów treść.
Kolor tła
Następnie dodaj lekko przezroczysty kolor tła.
- Kolor tła: rgba (255,255,255,0.96)
Ustawienia ikony referencji
Zmień również ustawienia ikony referencji.
- Kolor ikony referencji: # 0c0c0c
- Kolor tła ikony referencji: rgba (245,245,245,0)
Ustawienia tekstu podstawowego
Następnie zmień ustawienia tekstu podstawowego.
- Czcionka ciała: Verdana
- Wysokość ciała: 1.7em
rozstaw
Kontynuuj, dodając różne niestandardowe marginesy i wartości wypełnienia w ustawieniach odstępów.
- Górny margines: 15vw (komputer stacjonarny i tablet), 0vw (telefon)
- Dolny margines: 50px (tablet i telefon)
- Lewy margines: -10vw (komputer stacjonarny i tablet), 0vw (telefon)
- Prawy margines: 5vw
- Najlepsze dopełnienie: 70px
- Dolne wypełnienie: 70px
- Lewe dopełnienie: 50px
- Tapicerka z prawej: 50px
granica
Dodaj także lewą ramkę.
- Szerokość lewej krawędzi: 7px
- Kolor lewej krawędzi: # 5400ff
Pole cienia
Na koniec dodaj subtelny cień, aby ukształtować moduł świadectwa.
- Box Shadow Blur Force: 80px
- Siła propagacji cienia w pudełku: -10px
- Kolor cienia: rgba (0,0,0,0,49)
Sklonuj oba moduły i umieść duplikaty w kolumnach 3 i 4
Po zakończeniu edycji modułów w kolumnach 1 i 2 możesz je sklonować i umieścić duplikaty w dwóch pozostałych kolumnach.
Zmień obraz
Nie zapomnij zmienić obrazu swojej drugiej opinii.
Zmień tło gradientowe
Zmień także tło gradientowe przycisku.
- Kolor 1: # ff001d
- Kolor 2: # 3700ff
- Gradient Direction: 100deg
Zmień kolor granicy zeznania
Połącz kolor obramowania z gradientowym tłem nowego 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 nową linię
Struktura kolumny
Bez wprowadzania zmian w sekcji dodaj nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Kontynuuj, otwierając parametry linii i zmieniając parametry rozmiaru.
- Ustaw tę linię na pełną szerokość: Tak
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
rozstaw
Następnie dodaj niestandardowe wartości wypełnienia do wiersza i kolumn.
- Padding left: 200px (komputer stacjonarny), 30px (tablet), 25px (telefon)
- Wypełnienie po prawej: 200px (komputer stacjonarny), 30px (tablet), 25px (telefon)
- Kolumna 1 Wypełnienie po lewej: 5px (komputer stacjonarny), 0px (tablet i telefon)
- Kolumna 1 Wypełnienie po prawej: 2.5px (komputer stacjonarny), 0px (tablet i telefon)
- Kolumna 2 Wypełnienie po lewej: 2.5px (komputer stacjonarny), 0px (tablet i telefon)
- Kolumna 2 Wypełnienie po prawej: 2.5px (komputer stacjonarny), 0px (tablet i telefon)
- Kolumna 3 Wypełnienie po lewej: 2.5px (komputer stacjonarny), 0px (tablet i telefon)
- Kolumna 3 Wypełnienie po prawej: 5px (komputer stacjonarny), 0px (tablet i telefon)
Dodaj moduł wideo do kolumny 1
Link do filmu
Pierwszy moduł, którego będziemy potrzebować w kolumnie 1, to moduł wideo. Połącz ten film wideo ze swoim poleceniem wideo.
Nakładka obrazu
Dodaj także nakładkę obrazu.
Dodaj moduł referencji do kolumny 1
Dodaj treść
Drugi i ostatni moduł wymagany w kolumnie 1 to moduł zeznań. Zacznij od dodania szczegółów zeznania.
Wyłącz ikonę opinii
Następnie wyłącz ikonę opinii w ustawieniach przedmiotu.
- Pokaż ikonę referencji: Nie
Kolor tła
Dodaj wtedy białe tło.
- Kolor tła: #ffffff
Ustawienia tekstu podstawowego
Zmień także ustawienia tekstu podstawowego.
- Tekst w kolorze: # 000000
- Odstępy między literami: -0.5px
- Wysokość ciała: 1.7em
rozstaw
Dodaj niestandardowy margines i wartości dopełnienia w ustawieniach odstępów.
- Dolny margines: 30px (tablet i telefon)
- Wypełnienie: 50px
- Dolne wypełnienie: 50px
- Lewe dopełnienie: 80px
- Tapicerka z prawej: 80px
granica
Dajemy również modułowi zaokrąglone narożniki w lewym i prawym dolnym rogu „30px”.
Pole cienia
Wreszcie, aby nadać głębię, nadajemy modułowi Testimonial subtelny cień pudełkowy.
- Box Shadow Blur Force: 80px
- Siła propagacji cienia w pudełku: -10px
- Kolor cienia: rgba (0,0,0,0,3)
Sklonuj moduły trzy razy i umieść duplikaty w pozostałych kolumnach
Po zakończeniu edycji dwóch modułów w kolumnie 1, sklonuj je dwukrotnie i umieść duplikaty w dwóch pozostałych kolumnach.
Edytuj łącza wideo, zawartość i obrazy nad powierzchnią
Nie zapomnij zmienić łącza wideo, pliku treść i nakładki graficzne z nowymi referencjami.
Odtwórz przykład nr 3
Dodaj nową sekcję
Przejdźmy do trzeciego przykładu! Dodaj nową zwykłą sekcję do swojej strony.
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając 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.
- Kolumna 1 Kolor tła: # f9f9f9
Kolor tła kolumny 2
Druga kolumna będzie potrzebować białego tła.
- Kolumna 2 Kolor tła: #ffffff
zaklejania
Następnie przejdź do parametrów wymiarowania i usuń szerokość rynny.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
rozstaw
Następnie dodaj niestandardowe wartości odstępów.
- Najlepsze dopełnienie: 0px
- Padding Bottom: 0px
- Lewe dopełnienie: 0px
- Tapicerka z prawej: 0px
- Górna wyściółka kolumny 1: 100px
- Kolumna Dolne wypełnienie 1: 100px
- Kolumna 1 Padding lewa: 50px
- Kolumna 1 Wypełnienie po prawej: 50px
- Górna wyściółka kolumny 2: 100px
- Dolne wypełnienie kolumny 2: 100px
- Kolumna 2 Padding lewa: 50px
- Kolumna 2 Wypełnienie po prawej: 50px
granica
I nadaj każdej z granic wartość „20px”.
Pole cienia
Na koniec, nadaj swojej linii cień pola.
- Box Shadow Blur Force: 80px
Dodaj moduł referencji do kolumny 1
Dodaj treść
Czas zacząć dodawać moduły! Pierwszy moduł, którego będziemy potrzebować w kolumnie 1, to moduł referencji. Dodaj zawartość.
Prześlij obraz
Kontynuuj, przesyłając obraz w ustawieniach obrazu.
Wyłącz ikonę opinii
Następnie wyłącz ikonę opinii.
- Pokaż ikonę referencji: Nie
Wyłącz kolor tła
Wyłącz także kolor tła.
- Użyj koloru tła: Nie
Ustawienia tekstu podstawowego
Kontynuuj, przechodząc do karty Projekt i wprowadź pewne zmiany w ustawieniach tekstu podstawowego.
- Policja: Abril Fatface
- Tekst w kolorze: # 000000
- Rozmiar tekstu podstawowego: 20px
Dodaj moduł tekstowy do kolumny 1
Dodaj treść
Drugi moduł, którego będziemy potrzebować w kolumnie 1, to moduł tekstowy. Dodaj kopię referencyjną do obszaru zawartości.
rozstaw
Następnie przejdź do karty Projekt i dodaj niestandardowe marginesy górne i dolne.
- Górny margines: 50px
- Dolny margines: 50px
Dodaj moduł obrazu do kolumny 1
Pobierz logo firmy
Trzecim i ostatnim modułem, którego będziemy potrzebować w pierwszej kolumnie, jest moduł obrazu. Możesz użyć tego modułu, aby dodać logo firmy powiązane z referencją.
Sklonuj wszystkie moduły i umieść duplikaty w kolumnie 2
Po zakończeniu edycji wszystkich modułów w kolumnie 1 możesz je kopiować i kopiować. Gdy to zrobisz, umieść duplikaty w drugiej kolumnie.
Zmień zdjęcie i kopię opinii
Pamiętaj, aby zmienić treść zeznania za pomocą zdjęć.
wreszcie
To wszystko w tym samouczku, mam nadzieję, że pozwoli Ci zaoferować kilka odmian
