Jak stworzyć układ siatki referencji za pomocą modułu referencji Divi

Układy siatki świetnie nadają się do treści, które muszą być trzymane razem. Doskonałym przykładem są referencje. Referencje Divi 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 stworzyć układ siatki referencji za pomocą modułu referencji Divi. Zobaczymy dwa różne układy, więc możesz wybrać, który najlepiej odpowiada Twoim potrzebom.

Zacznijmy!

Zapowiedź

Oto spojrzenie na to, co zrobimy w tym samouczku. Tworzę sekcję z referencjami, używając stylów projektowych z bezpłatnego pakietu układu drukarni, który jest dostępny w Divi.

Wyniki układu siatki referencji

Wyniki alternatywnego układu referencji

Tworzenie pierwszego układu siatki

Pokażemy szczegóły obu układów, ale drugi układ użyje modułów z tego pierwszego układu.

Utwórz wiersz

Najpierw utwórz nowy wiersz i wybierz układ z trzema kolumnami .

Następnie otwórz ustawienia wiersza, klikając ikonę koła zębatego.

Wybierz kartę projektu i włącz opcję Użyj niestandardowej szerokości rynny i ustaw szerokość rynny na 1.

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

Następnie przewiń w dół do Odstępy i zmień Dopełnienie górne i dolne na 0px. Zamknij rząd. Stworzymy drugi wiersz, ale najpierw go dokończymy, a potem sklonujemy.

• Wypełnienie: 0px góra i dół

Dodaj moduł referencji

Następnie dodaj moduł referencji do lewej kolumny.

Ustawienia zawartości modułu referencji

Następnie dodaj treść referencji . Obejmuje to imię i nazwisko autora, stanowisko, nazwę firmy, treść i wizerunek osoby. W moich przykładach używam nazw pól i domyślnej zawartości treści.

• Autor: imię i nazwisko autora
• Stanowisko pracy: tytuł osoby
• Firma: nazwa firmy
• Treść ciała: referencja
• Obraz: polecany obraz

Ustawienia projektu modułu referencji

Następnie wybierz kartę projektu.

Cytat ikona

Zmień kolor ikony cytatu na #fd335a i ustaw kolor tła na biały. Kolor ikony będzie również używany jako nazwa osoby. Będzie tak samo dla wszystkich modułów.

• Kolor: #fd335a
• Kolor tła: #ffffff

Obraz

Następnie przewiń w dół do Image . Ustaw szerokość obramowania obrazu na 4px i zmień kolor obramowania na #000645. Obramowanie będzie pasować do obramowania modułu dla każdego modułu. Zmienimy je indywidualnie.

• Szerokość obramowania obrazu: 4px
• Kolor obramowania obrazu: #000645

Tekst główny

Następnie przewiń w dół do Body Text i wybierz Roboto Mono. Pozostałe ustawienia pozostaw domyślne.

• Czcionka ciała: Roboto Mono

Tekst autora

Następnie przewiń w dół do Tekst autora . Zmień czcionkę na Oswald, wybierz Semi Bold dla wagi, TT dla stylu i zmień kolor na #fd335a.

• Czcionka: Oswald
• Styl: pół pogrubiony
• Styl: TT
• Kolor tekstu: #fd335a

Tekst pozycji

Następnie przewiń do Position Text (tytuł pracy) i zmień czcionkę na Roboto Mono. Pozostałe ustawienia pozostaw domyślne.

• Czcionka pozycji: Roboto Mono

Tekst firmowy

Następnie przewiń w dół do Company Text i wybierz Roboto Mono jako czcionkę. Pozostaw ustawienia domyślne.

• Czcionka firmy: Roboto Mono

Granica

Na koniec przewiń w dół do Border . Zmień szerokość na 24px i kolor obramowania na #000645, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu. Kolor obramowania również zmieni się dla każdego modułu.

• Szerokość: 24px
• Kolor: #000645

Powiel moduł referencji

Następnie dwukrotnie zduplikuj moduł i przeciągnij dwa sklonowane moduły do ​​innych kolumn w wierszu.

Wystylizuj drugi moduł świadectwa

Otwórz ustawienia drugiego modułu referencji i zmień zawartość.

Obraz

Następnie wybierz kartę projektu i przewiń w dół do Image . Zmień kolor obramowania na #acf8f5.

• Kolor obramowania obrazu: #acf8f5

Granica

Na koniec przewiń w dół do Border . Zmień kolor obramowania na #acf8f5, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu. Zamknij ustawienia modułu.

• Kolor: #acf8f5

Wystylizuj trzeci moduł świadectwa

Otwórz ustawienia trzeciego modułu referencji i zmień zawartość.

Obraz

Następnie przejdź do karty projektowania, przewiń w dół do Obraz i zmień kolor obramowania na #fccaa0.

• Kolor obramowania obrazu: #fccaa0

Granica

Na koniec przewiń w dół do obramowania i koloru obramowania do #fccaa0, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu.

• Kolor: #fccaa0

Powiel wiersz

Następnie zduplikuj wiersz , klikając opcję duplikacji, która pojawia się po najechaniu kursorem na wiersz. Ponieważ dodaliśmy 0 pikseli do górnego i dolnego wypełnienia, ten nowy wiersz automatycznie dotyka wiersza nad nim. W drugiej sekcji otworzymy każdy moduł, aby zmienić jego zawartość i kolory.

Stylizacja czwartego modułu świadectwa

Otwórz ustawienia drugiego modułu referencji i zmień zawartość.

Obraz

Następnie przewiń w dół do opcji Obraz i zmień kolor obramowania na #6eea9d.

• Kolor obramowania obrazu: #6eea9d

Granica

Na koniec przewiń w dół do Border i zmień kolor obramowania na #6eea9d, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu.

• Kolor: #6eea9d

Wystylizuj piąty moduł referencji

Otwórz ustawienia piątego modułu referencji i dodaj 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 obramowania i koloru obramowania do #fccaa0, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu.

• Kolor: #fff67f

Nadaj styl szóstemu modułowi referencji

Na koniec otwórz ustawienia dla szóstego modułu referencji i zastąp treść referencji.

Obraz

Następnie przewiń w dół do Obraz i zmień kolor obramowania na #593a94.

• Kolor obramowania obrazu: #593a94

Granica

Na koniec przewiń w dół do Obramowania i Koloru obramowania do #593a94, aby dopasować obramowanie obrazu. Zamknij ustawienia modułu.

• Kolor: #593a94

Alternatywny układ referencji

Siatka referencji, którą stworzyliśmy, działa świetnie, jeśli referencje są mniej więcej tego samego rozmiaru. Co jeśli masz kilka małych i kilka dużych referencji? W tym celu idealna jest siatka o różnych rozmiarach kolumn. Możemy umieścić referencje z największą ilością informacji w większych 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 wiersze

Najpierw dodaj 2-kolumnowy wiersz , który ma 1/3 kolumny po lewej stronie i 2/3 kolumny po prawej stronie.

Następnie otwórz ustawienia wiersza, przejdź do karty projektu, przewiń w dół do opcji Rozmiar i wybierz opcję Użyj niestandardowej szerokości rynny. Zmień szerokość rynny na 1.

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

Następnie przewiń do Odstępy . Wprowadź 0px dla dopełnienia górnego i dolnego. Zamknij ustawienia wiersza.

• Wypełnienie: 0px góra, dół

Następnie zduplikuj wiersz.

Wybierz opcje układu drugiego rzędu i wybierz układ z 2/3 po lewej i 1/3 po prawej stronie.

Dodaj cztery moduły referencji

Na koniec utwórz lub przeciągnij swoje moduły referencji do wierszy. Używam tych samych modułów, co w poprzednim przykładzie, ale zmieniłem zawartość treści, aby utworzyć różne rozmiary.

Moduły pasują 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 jest to łatwe do naprawienia. Działa to również w przypadku zwykłej siatki, jeśli treść opinii ma różne rozmiary.

Otwórz ustawienia dla pierwszego modułu i przejdź do zakładki projekt. Przewiń w dół do rozmiaru i wprowadź 100% dla wysokości. Powtórz to dla każdego modułu .

• Wzrost: 100%

Wyniki

Wyniki układu siatki referencji

Oto spojrzenie na nasz układ siatki. Działa to świetnie, jeśli referencje mają ten sam rozmiar.

Wyniki alternatywnego układu referencji

Oto alternatywny układ. Idealnie nadaje się do treści w wielu rozmiarach.

Końcowe myśli

Oto nasze spojrzenie na to, jak stworzyć układ siatki referencji za pomocą modułu referencji Divi. Ustawienia wierszy i modułów Divi świetnie współgrają ze sobą, tworząc siatkę z wieloma wierszami i liczbami 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.

Chcemy usłyszeć od Ciebie. Czy stworzyłeś siatkę referencji przy użyciu metody, którą tutaj omawialiśmy? Daj nam znać o swoim doświadczeniu w komentarzach.