Chcesz stworzyć schemat organizacyjny w Divi?
Dowiedz się, jak stworzyć układ schematu blokowego w Divi otwiera wiele możliwości komunikowania procesów i pomysłów na Witryna internetowa. 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.
Na a Witryna internetowa, jednak te bardziej złożone schematy blokowe mogą być trudne do osiągnięcia, zwłaszcza jeśli chcesz, aby były responsywne.
W tym samouczku pokażemy, jak utworzyć przydatny układ schematu blokowego, którego możesz użyć na swoim komputerze Witryna internetowa, prosty, skuteczny i responsywny.
Ponadto do jego utworzenia użyjemy wyłącznie wbudowanych opcji Divi, więc nie musisz się martwić o dodanie niestandardowego kodu lub wtyczek.
Zacznijmy!
badanie
Oto krótkie spojrzenie na projekt schematu blokowego, który będziemy tworzyć w tym samouczku.
Utwórz nową stronę za pomocą Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
Następnie kliknij przycisk Rozpocznij budowę (Twórz 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: Utwórz wiersz z wyśrodkowaną notką
Aby rozpocząć tworzenie układu schematu blokowego w Divi, zaczniemy od utworzenia wiersza zawierającego wyśrodkowaną notkę. To będzie pierwszy element schematu blokowego.
Wypełnienie sekcji
Najpierw otwórz ustawienia sekcji dla sekcji domyślnej i ustaw dolną wyściółkę na 0px.
- Wypełnienie (dół): 0px
Linia
Wewnątrz sekcji dodaj wiersz do kolumny.
Otwórz ustawienia linii i zaktualizuj następujące ustawienia projektu:
- Szerokość rynny: 1
- Dopełnienie (góra i dół): 0px
Projekt modów Blurb
Aby stworzyć nasz pierwszy element schematu blokowego, użyjemy modułu Blurb.
Wstaw wbudowany moduł Blurb.
Parametry modułu
Otwórz ustawienia modułu Blurb. Pod zakładką Treść, możesz zachować domyślny tytuł i treść.
Następnie zaktualizuj obraz za pomocą małego obrazu ikony lub użyj jednej z wbudowanych ikon Divi. W tym samouczku używamy ikon z Pakiet układu finansowania społecznościowego .
Następnie nadaj modułowi kolor tła:
- Tło: #f8f8f8
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Wyrównanie tekstu: wyśrodkowane
- Maksymalna szerokość: 400px (komputer stacjonarny i tablet), 90% (telefon)
- Moduł wyrównania: Środek
- Wyściółka: 6% (góra i dół), 3% (lewy i prawy)
Następnie nadaj modułowi Blurb ramkę w następujący sposób:
- Szerokość obramowania: 2px
Krok 2: Tworzenie linii łączącej z pionową linią i strzałką
W następnej części naszego schematu blokowego utworzymy rząd łączników z wyśrodkowaną pionową linią i strzałką. Linia ta będzie używana do łączenia linii treść schematu organizacyjnego, który powinien być kontynuowany w dół strony.
W tym przypadku chcemy rozpocząć schemat blokowy, dodając linię i strzałkę poniżej poprzedniej linii z wyśrodkowanym modułem Blurbn.
Utwórz nową linię i skopiuj/wklej style z poprzedniej linii
Aby to zrobić, dodaj nowy wiersz do kolumny poniżej poprzedniego wiersza.
Używając " Inne ustawienia modułu (lub kliknij prawym przyciskiem myszy opcje), skopiuj style z poprzedniego wiersza powyżej i wklej je do nowego wiersza.
Tworzenie pionowego separatora linii
Aby utworzyć pionowy separator linii, dodaj nowy moduł rozdzielacza do linii.
W ustawieniach rozdzielacza zaktualizuj ustawienia projektu w następujący sposób:
- Kolor linii: #333333
- Pozycja linii: dół
- Waga dzielnika: 150px
- Szerokość: 2 piksele
- Moduł wyrównania: Środek
- Margines: -1px (dół)
Pod zakładką Zaawansowane, ukryj przepełnienie w następujący sposób:
- Przepełnienie poziome: ukryte
- Przepełnienie pionowe: ukryte
Utwórz strzałkę za pomocą modułu Blurb
Następnie utworzymy ikonę strzałki, która będzie znajdować się nad linią podziału za pomocą modułu prezentacji.
Aby utworzyć strzałkę, dodaj nowy moduł Blurb poniżej przegrody.
Ustawienia modów Blurb
W ustawieniach modułu usuń domyślny tytuł i treść, a następnie kliknij Użyj ikony, następnie wybierz ikonę strzałki (patrz zrzut ekranu).
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Kolor ikony: #bbbbbb
- Wyrównanie obrazu/ikony: środek
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 50px (komputer), 40px (tablet i telefon)
- Maksymalna szerokość: 50%
- Moduł wyrównania: środek
- Wysokość: 50px (komputer), 40px (tablet i telefon)
Pod zakładką Zaawansowane, dodaj następujący kod CSS do Rozmycie obrazu :
margin-bottom: 0px;
background: #ffffff;
Aby umieścić strzałkę nad linią, zaktualizuj następujące elementy:
- Pozycja: bezwzględna
- Lokalizacja: Centrum
- Indeks Z: 10
Krok 3: Tworzenie linii dla sąsiednich części schematu blokowego
Gdy rząd złącz będzie gotowy, dodamy kolejny rząd kilku sąsiednich modułów Blurb, aby kontynuować projekt schematu blokowego.
Aby dodać linię, po prostu skopiuj i wklej pierwszą linię (linię z wyśrodkowaną notką, którą utworzyliśmy na górze układu) poniżej linii łącznika.
Otwórz ustawienia linii i zaktualizuj następujące elementy:
- Maksymalna szerokość: 50%
- Szerokość obramowania: 2px
Lewa strona schematu blokowego
Teraz, gdy nasze obramowanie zostało dodane do linii, umieścimy moduł Blurb nad lewą linią obramowania.
Aby to zrobić, zaktualizuj następujące ustawienia projektu:
- Moduł wyrównania: lewy
- Margines: 70px (góra i dół)
- Przekształć Przesuń oś X: -50%
Jest to kluczowe, aby moduł Blurb był wyśrodkowany poziomo nad linią graniczną.
Prawa strona schematu blokowego
Aby dodać kolejny moduł Blurb na prawej linii granicznej, zduplikuj istniejącą notkę.
Aby umieścić notkę na prawej linii obramowania, przejdź do zakładki Zaawansowane i nadaj mu absolutną pozycję:
- Pozycja: bezwzględna
- Lokalizacja: Centrum po prawej
Następnie zaktualizuj następujące opcje:
- Marże: brak
- Przekształć Przesuń oś Y: -50%
- Przekształć Przesuń oś X: 50%
Dodano strzałki w rogach każdej linii granicznej
Aby schemat blokowy był bardziej przejrzysty w kierunku postępu wierszy, dodamy dodatkowe ikony strzałek w rzędach granicznych wierszy.
Strzałka w lewym górnym rogu
Aby dodać strzałkę do lewego górnego rzędu obramowania, zduplikuj moduł strzałki Blurb, który utworzyliśmy w rzędzie złącza i przeciągnij go do wiersza zawierającego sąsiednie moduły Blurb.
Otwórz moduł Duplicate Arrow Blurb i zmień ikonę na strzałkę skierowaną w lewo.
Następnie zaktualizuj lokalizację pozycji modułu:
- Lokalizacja: u góry po lewej
Na koniec zaktualizuj opcję tłumaczenia transformacji w następujący sposób:
- Przekształć Przesuń oś Y: -50%
Strzałka w prawym górnym rogu
Aby utworzyć strzałkę znajdującą się w prawym górnym rogu, zduplikuj strzałkę „ w lewym górnym rogu które właśnie stworzyliśmy. Następnie otwórz ustawienia i zmień lokalizację pozycji:
- Lokalizacja: w prawym górnym rogu
Zaktualizuj również ikonę strzałki strzałką skierowaną w prawo.
Strzałka w dół w lewo
Aby utworzyć strzałkę znajdującą się w lewym dolnym rogu, zduplikuj strzałkę „ w prawym górnym rogu które właśnie stworzyliśmy.
Następnie otwórz ustawienia i zmień lokalizację pozycji:
- Lokalizacja: dolny lewy
Następnie zaktualizuj opcję Przekształć Tłumacz:
- Przekształć Przesuń oś Y: 50%
Strzałka w dół w prawo
Aby utworzyć strzałkę, która znajduje się na dolnej prawej linii granicznej, zduplikuj strzałkę „ w lewym dolnym rogu które właśnie stworzyliśmy.
Następnie otwórz ustawienia i zmień lokalizację pozycji:
- Lokalizacja: dolny prawy
Zaktualizuj również ikonę strzałki za pomocą strzałki skierowanej w lewo.
Po umieszczeniu wszystkich strzałek możesz zaktualizować etykiety dla każdej z nich, używając widok warstwy .
Krok 4: Dodawanie kolejnej linii łącznika
Po uzupełnieniu linii z dwiema sąsiednimi częściami schematu blokowego i wszystkimi strzałkami, możemy kontynuować schemat blokowy, dodając kolejną linię łącznika.
Aby to zrobić, zduplikuj linię złącza, którą utworzyliśmy powyżej i wklej ją poniżej linii zawierającej moduły Blurb z sąsiedniej części schematu blokowego.
Krok 5: Dostosowywanie przepływu za pomocą łącznika linii prostej krawędzi
W istniejącym projekcie schematu blokowego przepływ rozpoczyna się od górnego elementu, następnie rozgałęzia się na prawo i lewo sąsiednie elementy, a następnie powraca do środka i przechodzi do następnego środkowego elementu.
Aby dostosować przepływ, zduplikujemy sekcję, aby dostosować schemat blokowy tak, aby zatrzymywał się na sąsiednich elementach prezentacji po lewej stronie i kontynuował od elementu prezentacji po prawej stronie.
Zduplikowana sekcja
Aby to zrobić, najpierw zduplikuj całą sekcję zawierającą schemat blokowy.
Dodaj kolejny lewy moduł Blubb
W sekcji duplikatów (na dole) znajdź lewy moduł Blurb w rzędzie zawierającym dwa sąsiednie moduły. Następnie skopiuj notkę po lewej, aby utworzyć nową bezpośrednio poniżej.
Usuń dolne strzałki i obramowanie
Następnie usuń lewą dolną strzałkę i prawą dolną strzałkę.
Otwórz ustawienia linii dla linii zawierającej wiele notek i usuń dolną ramkę:
- Szerokość dolnej krawędzi: 0px
Utwórz linię z prostym łącznikiem linii granicznej
Teraz chcemy dostosować projekt schematu blokowego za pomocą prawego łącznika linii obramowania, który połączy prawą linię obramowania linii z linią łącznika poniżej.
Aby to zrobić, utworzymy kolejną linię i dodamy niestandardową linię podziału i strzałkę konturu po prawej stronie.
Dodaj nowy wiersz o jedną kolumnę poniżej istniejącego wiersza z trzema układami.
Zaktualizuj ustawienia wiersza w następujący sposób, pod zakładką Wnętrze :
- Szerokość rynny: 1
- Maksymalna szerokość: 50%
- Wypełnienie: 0px (góra i dół)
Następnie dodaj prostą ramkę do linii.
- Szerokość prawego obramowania: 2px
Następnie dodaj moduł rozdzielacza do linii.
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 położenie separatora:
- Pozycja: bezwzględna
- Lokalizacja: dolny prawy
Po umieszczeniu dzielnika skopiuj moduł Blurb z prawej dolnej strzałki trzeciego rzędu pierwszej sekcji i wklej go w rzędzie z prawą linią podziału.
Otwórz ustawienia modułu Blurb strzałki, którą właśnie zduplikowałeś i przeniosłeś, i zaktualizuj następujące elementy:
- Pozycja: domyślna
- Moduł wyrównania: prawy
Zatrzymanie przepływu lewej linii granicznej
Obecnie część lewej krawędzi jest wyeksponowana poniżej notki w lewym dolnym rogu. Aby to ukryć, po prostu usuń dolny margines tego dolnego notatek.
Krok 6: Aktualizacja linii za pomocą złącza lewej krawędzi linii
Twój schemat blokowy może również wymagać łącznika lewej linii granicznej. Aby go utworzyć, możemy zaktualizować linię za pomocą prawego łącznika linii granicznej w następujący sposób:
- Szerokość lewego boku: 2px
- Szerokość prawego obramowania: 0
Zaktualizuj separator wewnątrz linii o nową lokalizację:
- Lokalizacja: dolny lewy
Następnie zaktualizuj wyrównanie strzałki:
- Moduł wyrównania: lewy
I zmień ikonę na strzałkę w prawo.
Ostateczny wynik
Sprawdź efekt końcowy.
Pobierz DIVI teraz !!!
Wnioski
W tym samouczku stworzyliśmy przydatny układ schematu blokowego, którego każdy może używać do komunikowania procesów i pomysłów odwiedzający z oszałamiającym responsywnym projektem.
Użyj go, aby zaprezentować usługi lub proces projektowania, stworzyć infografikę lub poprowadzić klientów przez proces treść w nowy sposób.
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.
...
