Jak stworzyć układ schematu blokowego w Divi

Wiedza o tym, jak stworzyć układ schematu blokowego w Divi, otwiera wiele możliwości komunikowania procesów i pomysłów na stronie internetowej. W niektórych przypadkach schematy blokowe mogą służyć do wyjaśniania niezwykle złożonych pomysłów obejmujących dużą liczbę elementów. Jednak na stronie internetowej te bardziej złożone schematy blokowe mogą być trudne do osiągnięcia, zwłaszcza jeśli chcesz, aby była responsywna.

W tym samouczku pokażemy Ci, jak stworzyć praktyczny układ schematu blokowego, którego możesz użyć w swojej witrynie, który jest prosty, skuteczny i responsywny. Zasadniczo zamierzamy wykazać się kreatywnością dzięki obramowaniu Divi, podziałom, notatkom i opcjom przekształcania, aby stworzyć układ schematu blokowego, który można łatwo dostosować do własnych potrzeb. Ponadto do jego utworzenia użyjemy tylko wbudowanych opcji Divi, więc nie musisz się martwić o dodanie niestandardowego kodu lub wtyczek.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt schematu blokowego, który zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Jak stworzyć układ schematu blokowego w Divi

Krok 1: Tworzenie wiersza z wyśrodkowanym Blurb

Aby rozpocząć tworzenie układu schematu blokowego w Divi, zaczniemy od utworzenia wiersza zawierającego wyśrodkowaną notkę. Będzie to pierwsza pozycja na schemacie blokowym.

Wypełnienie sekcji

Najpierw otwórz ustawienia sekcji dla sekcji domyślnej i ustaw dolną wyściółkę na 0px.

Rząd

Wewnątrz sekcji dodaj jednokolumnowy wiersz.

Otwórz ustawienia wiersza i zaktualizuj następujące ustawienia projektu:

• Szerokość rynny: 1
• Padding: 0px na górze, 0px na dole

Te dwa ustawienia projektowe będą używane dla wszystkich rzędów w tym układzie schematu blokowego, aby mieć pewność, że między modułami i rzędami nie zostanie dodana dodatkowa przestrzeń.

Projekt modułu Blurb

Aby stworzyć nasz pierwszy element schematu blokowego, użyjemy modułu notki.

Dodaj nowy moduł notki do wiersza.

Ustawienia rozmycia

Otwórz ustawienia notki. Na karcie treści możesz zachować domyślny tekst tytułu i treści.

Następnie zaktualizuj obraz za pomocą małego obrazu ikony lub użyj jednej z wbudowanych ikon Divi. W tym samouczku będę używał ikon z pakietu Crowdfunding Layout Pack.

Następnie nadaj notce kolor tła:

• Kolor tła: #f8f8f8

Na karcie projekt zaktualizuj następujące elementy:

• Wyrównanie tekstu: do środka
• Maksymalna szerokość: 400px (komputer i tablet), 90% (telefon)
• Wyrównanie modułu: Środek
• Wypełnienie: 6% u góry, 6% u dołu, 3% w lewo, 3% w prawo

UWAGA: Ten rozmiar notki będzie wspólny dla wszystkich notek w układzie schematu blokowego. Ten rozmiar działa dla tego układu, ponieważ schemat blokowy nigdy nie będzie zawierał więcej niż dwóch sąsiadujących (obok siebie) notek. Dzięki temu projekt jest responsywny i świetnie wygląda również na tablecie i telefonie.

Następnie nadaj notce obramowanie w następujący sposób:

• Szerokość obramowania: 2px

Krok 2: Tworzenie wiersza łącznika z pionową linią i strzałką

W następnej części naszego układu schematu blokowego utworzymy wiersz łącznika z wyśrodkowaną pionową linią i strzałką. Ten wiersz będzie używany do łączenia wierszy treści schematu blokowego, które muszą być kontynuowane w dół strony.

W tym przypadku chcemy rozpocząć schemat blokowy, dodając linię i strzałkę poniżej poprzedniego wiersza z wyśrodkowanym modułem notki.

Utwórz nowy wiersz i skopiuj/wklej style wierszy z poprzedniego wiersza

Aby to zrobić, dodaj nowy jednokolumnowy wiersz pod poprzednim wierszem.

Korzystając z menu „Więcej opcji” (lub opcji po kliknięciu prawym przyciskiem myszy), skopiuj style wierszy z poprzedniego wiersza powyżej i wklej je do nowego wiersza.

Tworzenie pionowego dzielnika linii

Aby utworzyć pionowy dzielnik linii, dodaj nowy moduł dzielnika do rzędu.

W ustawieniach rozdzielacza zaktualizuj ustawienia projektu w następujący sposób:

• Kolor linii: #333333
• Pozycja linii: dół
• Waga dzielnika: 150px
• Szerokość: 2px
• Wyrównanie modułu: Środek
• Margines: -1px dół

W zakładce Zaawansowane ukryj przepełnienie w następujący sposób:

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Tworzenie strzałki za pomocą modułu Blurb

Następnie utworzymy ikonę strzałki, aby usiąść nad linią podziału za pomocą modułu notki.

Aby utworzyć strzałkę, dodaj nowy moduł notki pod separatorem.

Ustawienia rozmycia strzałek

W ustawieniach notki usuń domyślny tytuł i treść, a następnie kliknij, aby użyć dolnej ikony strzałki (patrz zrzut ekranu).

Na karcie projekt zaktualizuj następujące elementy:

• Kolor ikony: #bbbbbb
• Wyrównanie obrazu/ikony: środek
• Rozmiar czcionki ikony: 50px (komputer), 40px (tablet i telefon)

• Maksymalna szerokość: 50%
• Wyrównanie modułu: środek
• Wysokość: 50px (komputer), 40px (tablet i telefon)

W zakładce Zaawansowane dodaj następujący kod CSS do obrazu Blurb:

margin-bottom: 0px;
background: #ffffff;

Spowoduje to usunięcie domyślnego marginesu notki i dodanie białego tła, aby stworzyć wrażenie przestrzeni między ikoną a linią po umieszczeniu ikony na górze linii.

Aby umieścić strzałkę na górze linii, zaktualizuj następujące elementy:

• Pozycja: bezwzględna
• Lokalizacja: Centrum
• Indeks Z: 10

Krok 3: Tworzenie wiersza z sąsiednimi fragmentami schematu blokowego i strzałkami

Gdy wiersz łącznika będzie gotowy, dodamy kolejny wiersz wielu sąsiednich notatek, aby kontynuować projektowanie schematu blokowego.

Aby dodać wiersz, po prostu skopiuj i wklej pierwszy wiersz (wiersz z wyśrodkowaną notką, którą utworzyliśmy u góry układu) pod wierszem łącznika.

Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Maksymalna szerokość: 50%
• Szerokość obramowania: 2px

50% maksymalnej szerokości jest ważne, aby układ działał responsywnie. Zapewni to, że notki przepełnione po prawej i lewej stronie wiersza nie przekroczą szerokości przeglądarki.

Tworzenie rozmycia schematu blokowego na lewej linii granicznej

Teraz, gdy nasza ramka została dodana do wiersza, umieścimy notatkę na górze lewej linii granicznej.

Aby to zrobić, zaktualizuj następujące ustawienia projektu:

• Wyrównanie modułu: do lewej
• Margines: 70px góra, 70px dół

• Przekształć Przesuń oś X: -50%

To jest klucz do tego, aby notka znajdowała się poziomo wyśrodkowana na górze linii granicznej.

Tworzenie sąsiedniego schematu blokowego na prawej linii granicznej

Aby dodać kolejną notkę na prawej linii obramowania, zduplikuj istniejącą notatkę.

Aby umieścić notkę na prawej linii obramowania, przejdź do zakładki Zaawansowane i nadaj jej pozycję bezwzględną:

• Pozycja: bezwzględna
• Lokalizacja: Prawy środek

Następnie zaktualizuj margines i przekształć opcje tłumaczenia w następujący sposób:

• Marża: brak
• Przekształć Przesuń oś Y: -50%
• Przekształć Przesuń oś X: 50%

Dodawanie plamek strzałek do rogów na każdej linii granicznej

Aby schemat blokowy był bardziej przejrzysty w kierunku, w którym poruszają się linie, dodamy dodatkowe ikony strzałek na liniach granicznych rzędu.

Górna strzałka w lewo

Aby dodać strzałkę do górnej lewej linii obramowania, zduplikuj notatkę ze strzałką, którą utworzyliśmy w rzędzie łącznika i przeciągnij ją do wiersza zawierającego sąsiednie notki.

Otwórz zduplikowaną notatkę ze strzałką i zmień ikonę na strzałkę w lewo.

Następnie zaktualizuj lokalizację położenia strzałki:

• Lokalizacja: górny lewy

Na koniec zaktualizuj opcję tłumaczenia transformacji w następujący sposób:

• Przekształć Przesuń oś Y: -50%

Górna strzałka w prawo

Aby utworzyć strzałkę, która znajduje się w prawym górnym rogu linii granicznej, zduplikuj właśnie utworzoną strzałkę „górną lewą”. Następnie otwórz ustawienia i zmień lokalizację pozycji:

• Lokalizacja: u góry po prawej

Zaktualizuj również ikonę strzałki strzałką w prawo.

Lewa dolna strzałka

Aby utworzyć strzałkę, która znajduje się na dolnej lewej linii granicznej, zduplikuj właśnie utworzoną strzałkę „w prawym górnym rogu”.

Następnie otwórz ustawienia i zmień lokalizację pozycji:

• Lokalizacja: dolny lewy

Następnie zaktualizuj opcję tłumaczenia transformacji:

• Przekształć Przesuń oś Y: 50%

Prawa dolna strzałka

Aby utworzyć strzałkę, która znajduje się w prawym dolnym rogu, zduplikuj właśnie utworzoną strzałkę „dolna lewa”.

Następnie otwórz ustawienia i zmień lokalizację pozycji:

• Lokalizacja: dolny prawy

Zaktualizuj również ikonę strzałki strzałką w lewo.

Po umieszczeniu wszystkich strzałek można zaktualizować etykiety każdej z nich, korzystając z widoku warstw.

Krok 4: Dodawanie kolejnego wiersza łącznika

Po wypełnieniu wiersza dwoma sąsiednimi notatkami schematu blokowego i wszystkimi strzałkami możemy kontynuować schemat blokowy, dodając kolejny wiersz łącznika.

Aby to zrobić, zduplikuj wiersz łącznika, który utworzyliśmy powyżej, i wklej go poniżej wiersza zawierającego sąsiednie notki schematu blokowego.

Krok 5: Dostosowywanie przepływu za pomocą prawego złącza linii granicznej

W istniejącym projekcie schematu blokowego przepływ rozpoczyna się od górnego elementu, a następnie rozgałęzia się na sąsiednie elementy z prawej i lewej strony, a następnie wraca do środka i przechodzi do następnego elementu wyśrodkowanego. Aby dostosować przepływ, zamierzamy zduplikować sekcję, aby dostosować schemat blokowy, aby zatrzymał się na lewym sąsiednim elemencie notek i kontynuował od prawego elementu notki.

Zduplikowana sekcja

Aby to zrobić, najpierw zduplikuj całą sekcję zawartości schematu blokowego.

Dodaj kolejny element po lewej stronie

W sekcji duplikatów (na dole) znajdź lewą notkę w wierszu zawierającym dwie sąsiadujące notki. Następnie zduplikuj lewą notkę, aby utworzyć nową bezpośrednio pod nią.

Usuń dolne strzałki i obramowanie

Następnie usuń skróty strzałek w lewym dolnym rogu i strzałek w prawym dolnym rogu.

Otwórz ustawienia wiersza dla wiersza zawierającego wiele notek i usuń dolną ramkę:

• Szerokość dolnej krawędzi: 0px

Utwórz wiersz z prawym łącznikiem linii granicznej

Teraz chcemy dostosować projekt schematu blokowego za pomocą prawego łącznika linii granicznej, który połączy prawą linię graniczną rzędu z rzędem łączników poniżej.

Aby to zrobić, utworzymy kolejny wiersz i dodamy niestandardową linię podziału i notatkę ze strzałką po prawej stronie.

Dodaj nowy wiersz z jedną kolumną poniżej istniejącego wiersza z trzema notatkami.

Zaktualizuj ustawienia projektu wiersza w następujący sposób:

• Szerokość rynny: 1
• Maksymalna szerokość: 50%
• Padding: 0px na górze, 0px na dole

Następnie dodaj prawą ramkę do rzędu.

• Szerokość prawego obramowania: 2px

Następnie dodaj moduł rozdzielający do rzędu.

Zaktualizuj ustawienia rozdzielacza w następujący sposób:

• Kolor linii: #333333
• Pozycja linii: dół
• Waga dzielnika: 2px
• Szerokość: 50%
• Margines: -2px dół

W zakładce Zaawansowane zaktualizuj pozycję dzielnika:

• Pozycja: bezwzględna
• Lokalizacja: dolny prawy

Po umieszczeniu dzielnika skopiuj notatkę ze strzałką w prawym dolnym rogu z trzeciego rzędu w pierwszej sekcji i wklej ją w rzędzie z prawą linią podziału.

Otwórz ustawienia strzałki, którą właśnie zduplikowałeś i przeniosłeś, i zaktualizuj następujące elementy:

• Pozycja: domyślna

• Wyrównanie modułu: prawo

Zatrzymanie przepływu lewej linii granicznej

W tej chwili pod lewą dolną notką widoczna jest część lewej linii granicznej. Aby to ukryć, po prostu usuń dolny margines tego dolnego notatek.

Krok 6: Aktualizacja rzędu za pomocą lewego łącznika linii granicznej

Twój schemat blokowy może również wymagać połączenia z lewą linią graniczną. Aby go utworzyć, możemy zaktualizować wiersz z prawym łącznikiem linii granicznej w następujący sposób:

• Szerokość lewej krawędzi: 2px
• Szerokość prawego obramowania: 0

Zaktualizuj dzielnik w rzędzie o nową lokalizację:

• Lokalizacja: dolny lewy

Następnie zaktualizuj wyrównanie notki strzałki:

• Wyrównanie modułu: do lewej

I zmień ikonę na strzałkę w prawo.

Ostateczny wynik

Sprawdź efekt końcowy. Poszedłem do przodu i zduplikowałem drugą sekcję i dodałem do niej lewy łącznik linii granicznej, aby można było zobaczyć oba.

Końcowe przemyślenia

W tym samouczku stworzyliśmy przydatny układ schematu blokowego, którego każdy może użyć do komunikowania odwiedzającym procesu i pomysłów za pomocą oszałamiającego, responsywnego projektu. Użyj go, aby zaprezentować proces świadczenia usług lub projektowania, stworzyć infografikę lub poprowadzić klientów przez treść w nowy sposób. Mamy nadzieję, że przyda się przy następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!