Czy chciałbyś stworzyć sekcję Referencje w formie siatki? na swojej stronie internetowej z modułem Referencje firmy Divi ?
Układy siatki są idealne do treść które trzeba trzymać razem. Świadectwa są tego doskonałym przykładem. W Divi, referencje są tworzone z nowym modułem dla każdej referencji. Ale na szczęście wyświetlanie ich w siatce jest proste.
W tym artykule zobaczymy jak ułożyć referencje w formie siatki z modułem Opinie de Divi. Zobaczymy dwa różne układy, więc możesz wybrać ten, który najlepiej odpowiada Twoim potrzebom.
Zacznijmy!
badanie
Oto przegląd tego, co zrobimy w tym samouczku.
Układ siatki
Alternatywny układ
Projekt pierwszego layoutu z Divi
Pokażemy szczegóły obu układów, ale drugi układ użyje modułów z pierwszego.
Utwórz linię
Najpierw utwórz nowy wiersz i wybierz a Układ 3 kolumnowy.
Następnie otwórz parametry linii klikając jego ikonę koła zębatego.
Wybierz zakładkę Wnętrze i aktywuj Użyj niestandardowej szerokości rynny i ustaw go na 1.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
Następnie przewiń w dół do Rozstaw i zmień ustawienia odstępów w następujący sposób. Zamknij rząd. Utworzymy drugi wiersz, ale najpierw dokończymy ten, a potem sklonujemy.
- Dopełnienie (góra i dół): 0px
Dodaj moduł „Referencje”
Następnie dodaj moduł referencji w lewej kolumnie.
Ustawienia zawartości modułu
Następnie dodaj treść zeznań. Obejmuje to imię i nazwisko autora, stanowisko, nazwę firmy, treść zwłok oraz zdjęcie osoby składającej zeznania.
- Autor: imię i nazwisko autora
- Stanowisko: Stanowisko zajmowane w firmie
- Firma: nazwa firmy
- Treść ciała: referencja
- Obraz: wybrany obraz
Parametry konstrukcyjne modułu
Następnie wybierz zakładkę Wnętrze.
Cytat ikona
Zmień ustawienia ikon. Kolor ikony będzie również używany jako nazwa osoby. Będzie tak samo dla wszystkich modułów.
- Kolor ikony cytatu: #fd335a
- Kolor tła ikony cytatu: #ffffff
Obraz
Następnie przewiń w dół do Obraz i zmień następujące ustawienia:
- Szerokość obramowania obrazu: 4 piksele
- Kolor obramowania obrazu: #000645
tekst-treść
Następnie przewiń w dół do Treść tekstu i zmień czcionkę
- Czcionka ciała: Roboto Mono
AutorTekst
Następnie przewiń w dół do AutorTekst.
- Czcionka autora: Oswald
- Grubość czcionki: pół pogrubiona
- Styl czcionki: TT
- Kolor tekstu: #fd335a
Tekst pozycji
Następnie przewiń w dół do Tekst pozycji (tytuł pracy) i zmień czcionkę.
- Czcionka pozycji: Roboto Mono
Tekst firmowy
Następnie przewiń w dół do Tekst firmowy i zmień również czcionkę.
- Czcionka firmy: Roboto Mono
Granica
Na koniec przewiń w dół do Granica i zmodyfikuj obramowanie w następujący sposób:
- Szerokość obramowania: 24px
- Kolor obramowania: #000645
Zduplikuj moduł Referencje
następnie zduplikuj moduł dwukrotnie i przeciągnij dwa sklonowane moduły do innych kolumn w rzędzie.
Dostosuj drugi moduł Referencje
Otwórz je ustawienia drugiego modułu Testimonial i modyfikacji treści.
Obraz
Następnie wybierz zakładkę desing i przewiń do Obraz. Zmień kolor obramowania.
- Kolor obramowania obrazu: #acf8f5
Granica
Na koniec przewiń w dół do Granica i zmień kolor.
- Kolor obramowania: # acf8f5
Dostosuj trzeci moduł referencji
Otwórz je ustawienia trzeciego modułu Testimonial i edytuj treść.
Obraz
Następnie przejdź do zakładki Wnętrze, przewiń do Obraz i zmień kolor obramowania.
- Kolor obramowania obrazu: #fccaa0
Granica
Na koniec przewiń w dół do Granica i zmień kolor obramowania, aby pasował do obramowania obrazu. Zamknij ustawienia modułu.
- Kolor obramowania: #fccaa0
Zduplikowana linia
następnie zduplikuj linię klikając opcję duplikatu, która pojawia się po najechaniu kursorem na linię. Ponieważ dodaliśmy 0px do górnego i dolnego wypełnienia, ta nowa linia automatycznie dotyka linii nad nią. Otworzymy każdy moduł w drugiej sekcji, aby zmienić jego zawartość i kolory.
Dostosuj czwarty moduł Testimonial
Otwórz je ustawienia drugiego modułu Testimonial i modyfikacji treści.
Obraz
Następnie przewiń w dół do Obraz i zmień kolor obramowania na #6eea9d.
- Kolor obramowania obrazu: #6eea9d
Granica
Na koniec przewiń w dół do Granica i zmień kolor obramowania na #6eea9d, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu.
- Kolor obramowania: #6eea9d
Dostosuj piąty moduł Testimonial
Otwórz je ustawienia piątego modułu Testimonial i modyfikować jego zawartość.
Obraz
Następnie przewiń w dół do Obraz i zmień kolor obramowania na #fff67f.
- Kolor obramowania obrazu: #fff67f
Granica
Na koniec przewiń w dół do Granica i zmień kolor obramowania, aby pasował do obramowania obrazu. Zamknij ustawienia modułu.
- Kolor obramowania: #fff67f
Dostosuj szósty moduł referencji
Na koniec otwórz ustawienia szóstego modułu Świadectwa i zastąp jego treść.
Obraz
Następnie przewiń w dół do Obraz i zmień kolor obramowania na #593a94.
- Kolor obrazu obramowania: #593a94
Granica
Na koniec przewiń w dół do Granica i zmień kolor, aby pasował do obramowania obrazu. Zamknij ustawienia modułu.
- Kolor obramowania: #593a94
Wynik
Oto wynik, jaki mamy do tej pory.
Projekt drugiego layoutu z Divi
Stworzona przez nas siatka referencji działa świetnie, jeśli referencje są mniej więcej tej samej wielkości.
Co by było, gdybyś miał krótkie i długie referencje? W tym celu siatka o różnych rozmiarach dla kolumn jest idealna. Możemy umieścić referencje z największą ilością informacji w dużych kolumnach.
W tym przykładzie. utworzymy nowe kolumny z tymi samymi ustawieniami odstępów i użyjemy tych samych referencji co poprzednio, ale z różną ilością tekstu.
Utwórz alternatywne linie
najpierw dodaj wiersz do 2 kolumn z kolumna 1/3 w lewo i kolumna 2/3 po prawej stronie.
Następnie otwórz ustawienia linii, przejdź do zakładki Wnętrze, przewiń do Dobór i wybierz Użyj niestandardowej szerokości rynny. Zmień szerokość rynny na 1.
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
Następnie przewiń w dół do Rozstaw.
- Dopełnienie (góra i dół): 0px
następnie, duplikować linia.
Wybierz opcje układ drugiego rzędu i wybierz układ za pomocą Pozostało 2/3 et 1/3 w prawo.
Dodaj cztery moduły referencji
Wreszcie utwórz lub przeciągnij moduły referencji do linii. Używamy tych samych modułów, co w poprzednim przykładzie, ale zawartość została zmieniona, aby utworzyć różne rozmiary.
Moduły dostosowują się do szerokości swoich kolumn, tak jak w poprzednim przykładzie, ale każdy ma inną wysokość ze względu na zawartość treści. Tworzy to niezręczne odstępy w siatce. Na szczęście łatwo to naprawić.
Otwórz ustawienia pierwszego modułu i przejdź do zakładki Wnętrze. Przewiń do Dobór i wpisz 100% dla „Wysokość”.
Powtórz to dla każdego modułu .
- Wzrost: 100%
Ostateczne wyniki
Układ siatki
Oto spojrzenie na nasz układ siatki. Działa to świetnie, jeśli referencje mają ten sam rozmiar.
Alternatywny układ
Oto alternatywny układ. Jest idealny do referencji o różnych rozmiarach.
Pobierz DIVI teraz !!!
Wnioski
Oto nasze spojrzenie na to, jak utworzyć sekcję referencji w formacie siatki za pomocą modułu Opinie od Divi. Ustawienia wiersza i modułu Divi doskonale ze sobą współpracują, tworząc siatkę wielu wierszy i kolumn.
Przykłady, które tutaj pokazaliśmy, można łatwo rozszerzyć, aby utworzyć jeszcze większe siatki. Koncepcje działają również z innymi typami modułów Divi.
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
