Bạn có muốn tạo sơ đồ tổ chức trong Divi không?
Biết cách tạo bố cục lưu đồ trong Divi mở ra nhiều cơ hội để truyền đạt các quy trình và ý tưởng về một Website. Trong một số trường hợp, sơ đồ có thể được sử dụng để giải thích những ý tưởng cực kỳ phức tạp liên quan đến một số lượng lớn các yếu tố.
Trên một Websitetuy nhiên, những lưu đồ phức tạp hơn này có thể khó đạt được, đặc biệt nếu bạn muốn nó đáp ứng được.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo một bố cục sơ đồ tiện dụng mà bạn có thể sử dụng trên Website, đơn giản, hiệu quả và đáp ứng.
Ngoài ra, chúng tôi sẽ chỉ sử dụng các tùy chọn tích hợp của Divi để tạo nó, vì vậy bạn không phải lo lắng về việc thêm mã hoặc plugin tùy chỉnh.
Hãy bắt đầu!
khảo sát
Dưới đây là một cái nhìn nhanh về thiết kế lưu đồ mà chúng tôi sẽ tạo trong hướng dẫn này.
Tạo một trang mới với Divi Builder
Để bắt đầu, bạn cần thực hiện những việc sau:
Từ bảng điều khiển WordPress, hãy chuyển đến Trang> Thêm mới để tạo một trang mới.
Đặt cho nó một tiêu đề có ý nghĩa đối với bạn và nhấp vào Sử dụng Divi Builder
sau đó bấm Bắt đầu xây dựng (Xây dựng từ đầu)
Sau đó, bạn sẽ có một khung vẽ trống để bắt đầu thiết kế trong Divi.
Cách tạo bố cục lưu đồ trong Divi
Bước 1: Tạo một hàng với màu nổi ở giữa
Để bắt đầu tạo bố cục lưu đồ trong Divi, chúng ta sẽ bắt đầu bằng cách tạo một hàng có chứa vùng trung tâm. Đây sẽ là phần tử đầu tiên của lưu đồ.
Phần đệm
Đầu tiên, mở cài đặt phần cho phần mặc định và đặt phần đệm dưới cùng thành 0px.
- Phần đệm (Dưới cùng): 0px
Hàng
Bên trong phần, thêm một hàng vào một cột.
Mở cài đặt dòng và cập nhật cài đặt thiết kế sau:
- Gutterwidth: 1
- Đệm (Trên và Dưới): 0px
Thiết kế bản sửa đổi Blurb
Để tạo phần tử lưu đồ đầu tiên của chúng tôi, chúng tôi sẽ sử dụng mô-đun Blurb.
Chèn nội tuyến mô-đun Blurb.
Cài đặt mô-đun
Mở cài đặt mô-đun Blurb. Dưới tab Nội dung, bạn có thể giữ tiêu đề và nội dung mặc định.
Sau đó, cập nhật hình ảnh bằng hình ảnh biểu tượng nhỏ hoặc sử dụng một trong các biểu tượng Divi tích hợp sẵn. Đối với hướng dẫn này, chúng tôi sử dụng các biểu tượng từ Gói bố cục huy động vốn cộng đồng .
Sau đó, cung cấp cho mô-đun một màu nền:
- Nền: # f8f8f8
Dưới tab Thiết kế, cập nhật những điều sau:
- Căn chỉnh văn bản: Căn giữa
- Chiều rộng tối đa: 400px (Máy tính để bàn và máy tính bảng), 90% (Điện thoại)
- Mô-đun căn chỉnh: Trung tâm
- Phần đệm: 6% (Trên và Dưới), 3% (Trái và Phải)
Tiếp theo, cung cấp cho Mô-đun Blurb một đường viền như sau:
- Chiều rộng đường viền: 2px
Bước 2: Tạo đường kết nối bằng một đường thẳng đứng và một mũi tên
Đối với phần tiếp theo của bố cục lưu đồ, chúng ta sẽ tạo một hàng đường kết nối có đường thẳng đứng và mũi tên ở giữa. Đường dây này sẽ được sử dụng để kết nối các đường dây của nội dung của sơ đồ tổ chức sẽ tiếp tục ở cuối trang.
Trong trường hợp này, chúng tôi muốn bắt đầu lưu đồ bằng cách thêm một dòng và một mũi tên bên dưới dòng trước với mô-đun Blurbn được căn giữa.
Tạo một dòng mới và sao chép / dán các kiểu từ dòng trước đó
Để thực hiện việc này, hãy thêm một hàng mới vào một cột bên dưới hàng trước đó.
Sử dụng " Cài đặt mô-đun khác (hoặc các tùy chọn nhấp chuột phải), sao chép các kiểu từ hàng trước ở trên và dán chúng vào hàng mới.
Tạo dấu phân cách đường thẳng đứng
Để tạo dải phân cách theo chiều dọc, hãy thêm mô-đun Dải phân cách mới vào đường.
Trong cài đặt dải phân cách, hãy cập nhật cài đặt thiết kế như sau:
- Màu dòng: # 333333
- Vị trí dòng: Dưới cùng
- Trọng lượng dải phân cách: 150px
- Chiều rộng: 2px
- Mô-đun căn chỉnh: Trung tâm
- Lề: -1px (Dưới cùng)
Dưới tab Nâng cao, ẩn phần tràn như sau:
- Tràn ngang: Ẩn
- Tràn dọc: Ẩn
Tạo mũi tên bằng mô-đun Blurb
Tiếp theo, chúng ta sẽ tạo một biểu tượng mũi tên nằm phía trên đường phân cách bằng cách sử dụng một mô-đun trình bày.
Để tạo mũi tên, hãy thêm một mô-đun Blurb mới bên dưới dải phân cách.
Cài đặt Blurb Mod
Trong cài đặt mô-đun, hãy xóa tiêu đề và nội dung mặc định và nhấp vào Sử dụng biểu tượng, sau đó chọn biểu tượng mũi tên (xem ảnh chụp màn hình).
Dưới tab Thiết kế, cập nhật những điều sau:
- Màu biểu tượng: #bbbbbb
- Căn chỉnh hình ảnh / biểu tượng: trung tâm
- Sử dụng Kích thước Phông chữ Biểu tượng: CÓ
- Kích thước Phông chữ Biểu tượng: 50px (Máy tính để bàn), 40px (Máy tính bảng và Điện thoại)
- Chiều rộng tối đa: 50%
- Mô-đun căn chỉnh: trung tâm
- Chiều cao: 50px (Máy tính để bàn), 40px (Máy tính bảng và Điện thoại)
Dưới tab Nâng cao, thêm CSS sau vào Hình ảnh nổi bật :
margin-bottom: 0px;
background: #ffffff;
Để định vị mũi tên phía trên dòng, hãy cập nhật thông tin sau:
- Chức vụ: Tuyệt đối
- Vị trí: Trung tâm
- Chỉ số Z: 10
Bước 3: Tạo đường cho các phần liền kề của lưu đồ
Khi hàng trình kết nối hoàn tất, chúng tôi sẽ thêm một hàng khác gồm một số mô-đun Blurb liền kề để tiếp tục thiết kế lưu đồ.
Để thêm dòng, chỉ cần sao chép và dán dòng đầu tiên (dòng có ô tô chính giữa mà chúng tôi đã tạo ở đầu bố cục) bên dưới dòng trình kết nối.
Mở Cài đặt Dòng và cập nhật những điều sau:
- Chiều rộng tối đa: 50%
- Chiều rộng đường viền: 2px
Bên trái của lưu đồ
Bây giờ đường viền của chúng ta đã được thêm vào đường kẻ, chúng ta sẽ đặt mô-đun Blurb phía trên đường viền bên trái.
Để thực hiện việc này, hãy cập nhật các cài đặt thiết kế sau:
- Mô-đun căn chỉnh: trái
- Lề: 70px (Trên và dưới)
- Chuyển đổi Dịch trục X: -50%
Đây là chìa khóa để mô-đun Blurb được căn giữa theo chiều ngang trên đường viền.
Bên phải của lưu đồ
Để thêm Mô-đun làm nổi bật khác trên đường viền bên phải, hãy sao chép mô-đun nổi bật hiện có.
Để định vị phần tô màu trên đường viền bên phải, hãy chuyển đến tab Nâng cao và cung cấp cho nó một vị trí tuyệt đối:
- Chức vụ: Tuyệt đối
- Vị trí: Trung tâm bên phải
Tiếp theo, cập nhật các tùy chọn sau:
- Lề: không có
- Chuyển đổi Dịch trục Y: -50%
- Chuyển đổi Dịch trục X: 50%
Đã thêm mũi tên vào các góc của mỗi đường viền
Để làm cho lưu đồ rõ ràng hơn về hướng các hàng đang tiến triển, chúng tôi sẽ thêm các biểu tượng mũi tên bổ sung trên các hàng đường viền hàng.
Mũi tên trên cùng bên trái
Để thêm mũi tên vào hàng viền trên cùng bên trái, hãy sao chép mô-đun Blurb mũi tên mà chúng tôi đã tạo trong hàng trình kết nối và kéo nó vào hàng chứa các mô-đun Blurb liền kề.
Mở mô-đun Duplicate Arrow Blurb và thay đổi biểu tượng thành mũi tên trỏ sang trái.
Tiếp theo, cập nhật vị trí của vị trí mô-đun:
- Vị trí: Trên cùng bên trái
Cuối cùng, cập nhật tùy chọn dịch chuyển đổi như sau:
- Chuyển đổi Dịch trục Y: -50%
Mũi tên trên cùng bên phải
Để tạo một mũi tên nằm trên đường viền phía trên bên phải, hãy sao chép mũi tên " ở góc trên cùng bên trái mà chúng tôi vừa tạo. Sau đó, mở cài đặt và thay đổi vị trí vị trí:
- Vị trí: Trên cùng bên phải
Đồng thời cập nhật biểu tượng mũi tên bằng mũi tên chỉ sang phải.
Mũi tên xuống bên trái
Để tạo một mũi tên nằm trên đường viền dưới cùng bên trái, hãy sao chép mũi tên " trên cùng bên phải mà chúng tôi vừa tạo.
Sau đó, mở cài đặt và thay đổi vị trí vị trí:
- Vị trí: dưới cùng bên trái
Tiếp theo, cập nhật tùy chọn Transform Translate:
- Chuyển đổi Dịch trục Y: 50%
Mũi tên xuống bên phải
Để tạo một mũi tên nằm trên đường viền dưới bên phải, hãy sao chép mũi tên " ở dưới cùng bên trái mà chúng tôi vừa tạo.
Sau đó, mở cài đặt và thay đổi vị trí vị trí:
- Vị trí: Dưới cùng bên phải
Đồng thời cập nhật biểu tượng mũi tên bằng mũi tên trỏ sang trái.
Khi tất cả các mũi tên được đặt, bạn có thể cập nhật nhãn cho từng mũi tên bằng cách sử dụng xem lớp .
Bước 4: Thêm một đường kết nối khác
Khi chúng ta đã hoàn thành dòng với hai phần liền kề của lưu đồ và tất cả các mũi tên, chúng ta có thể tiếp tục lưu đồ bằng cách thêm một đường nối khác.
Để thực hiện việc này, hãy nhân đôi dòng trình kết nối mà chúng tôi đã tạo ở trên và dán nó bên dưới dòng chứa các mô-đun Blurb từ phần liền kề của lưu đồ.
Bước 5: Tùy chỉnh dòng chảy bằng đầu nối đường thẳng cạnh
Trong thiết kế lưu đồ hiện có, quy trình bắt đầu với phần tử trên cùng, sau đó rẽ nhánh sang các phần tử liền kề bên phải và bên trái, sau đó quay trở lại phần giữa và chuyển đến phần tử ở giữa tiếp theo.
Để tùy chỉnh quy trình, chúng tôi sẽ sao chép phần để chúng tôi có thể tùy chỉnh lưu đồ dừng lại ở (các) phần tử bản trình bày liền kề ở bên trái và tiếp tục từ phần tử bản trình bày ở bên phải.
Phần trùng lặp
Để thực hiện việc này, trước tiên hãy sao chép toàn bộ phần có chứa lưu đồ.
Thêm một mô-đun làm nổi bật bên trái khác
Trong phần trùng lặp (dưới cùng), định vị mô-đun Blurb bên trái trong hàng có chứa hai mô-đun liền kề. Sau đó, sao chép hình nền ở bên trái để tạo một hình mới ngay bên dưới.
Loại bỏ các mũi tên và đường viền dưới cùng
Tiếp theo, xóa mũi tên dưới cùng bên trái và mũi tên dưới cùng bên phải.
Mở cài đặt đường kẻ cho đường có nhiều vết mờ và xóa đường viền dưới cùng:
- Chiều rộng đường viền dưới cùng: 0px
Tạo đường bằng đầu nối đường viền thẳng
Bây giờ chúng ta muốn tùy chỉnh thiết kế lưu đồ với đầu nối đường viền bên phải sẽ kết nối đường viền bên phải của đường với đường kết nối bên dưới.
Để làm điều này, chúng tôi sẽ tạo một đường khác và thêm một đường phân chia tùy chỉnh và một mũi tên phác thảo ở phía bên phải.
Thêm một hàng mới một cột bên dưới hàng hiện có với ba bố cục.
Cập nhật cài đặt hàng như sau, trong tab Thiết kế :
- Chiều rộng máng xối: 1
- Chiều rộng tối đa: 50%
- Padding: 0px (Trên và dưới)
Tiếp theo, thêm một đường viền thẳng cho đường thẳng.
- Chiều rộng đường viền phải: 2px
Sau đó, thêm mô-đun Dải phân cách vào dòng.
Cập nhật cài đặt dải phân cách như sau:
- Màu dòng: # 333333
- Vị trí dòng: Dưới cùng
- Trọng lượng dải phân cách: 2px
- Chiều rộng: 50%
- Lề: -2px (Dưới cùng)
Trong tab nâng cao, hãy cập nhật vị trí của dấu phân tách:
- Chức vụ: Tuyệt đối
- Vị trí: Dưới cùng bên phải
Với dải phân cách tại chỗ, hãy sao chép mô-đun Blurb từ mũi tên dưới cùng bên phải của hàng thứ ba của phần đầu tiên và dán nó vào hàng có vạch chia bên phải.
Mở cài đặt mô-đun Blurb của mũi tên bạn vừa sao chép và di chuyển và cập nhật các mục sau:
- Chức vụ: Mặc định
- Mô-đun căn chỉnh: phải
Dòng đường biên giới bên trái dừng lại
Hiện tại, một phần của đường viền bên trái được hiển thị bên dưới vùng viền ở phía dưới bên trái. Để ẩn nó, chỉ cần loại bỏ lề dưới cùng của vùng dưới cùng này.
Bước 6: Cập nhật đường với đầu nối cạnh trái
Lưu đồ của bạn cũng có thể cần một đầu nối đường viền bên trái. Để tạo nó, chúng ta có thể cập nhật đường với đầu nối đường viền bên phải như sau:
- Chiều rộng Boprder bên trái: 2px
- Chiều rộng đường viền phải: 0
Cập nhật dấu phân cách bên trong đường với vị trí mới:
- Vị trí: dưới cùng bên trái
Tiếp theo, cập nhật căn chỉnh mũi tên:
- Mô-đun căn chỉnh: trái
Và thay đổi biểu tượng thành một mũi tên phải.
Kết quả cuối cùng
Kiểm tra kết quả cuối cùng.
Tải DIVI ngay bây giờ !!!
Kết luận
Trong hướng dẫn này, chúng tôi đã tạo một bố cục lưu đồ hữu ích mà bất kỳ ai cũng có thể sử dụng để truyền đạt quy trình và ý tưởng tới khách với một thiết kế đáp ứng tuyệt đẹp.
Sử dụng nó để giới thiệu các dịch vụ hoặc quy trình thiết kế, tạo đồ họa thông tin hoặc hướng dẫn khách hàng thông qua nội dung theo một cách mới.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
