Bạn có quen với việc tạo các trang web tuyệt đẹp bằng Divi không? Bạn có thể nên biết rằng bố cục lưới là một tính năng cốt lõi của Divi Builder. Thông thường, bạn bắt đầu bằng cách tạo một hàng và chọn tạo nhiều cột cho hàng đó. Với cột ở vị trí, đó là nơi bạn sẽ thêm các mô-đun. Chúng tôi có thể làm cho mọi thứ tiến xa hơn, bằng cách thêm nhiều lưới hơn cho các mô-đun đó.
Trong suốt hướng dẫn này, chúng ta sẽ khám phá cách mở rộng bố cục lưới của Divi bằng cách tạo bố cục lưới CSS cho các mô-đun Divi với một cột duy nhất. Lưới CSS (sử dụng CSS Flex ) rất phổ biến để tạo lưới đáp ứng cho nội dung chỉ với một vài dòng CSS. Sau đó, chúng tôi có thể tổ chức tất cả các mô-đun của chúng tôi để đáp ứng. Hãy coi đây là một bố cục bổ sung cho các mô-đun mà bạn có thể thêm vào cột Divi. Điểm tốt ở đây là tất cả các mô-đun lồng nhau của chúng tôi sẽ có cùng chiều cao và chiều rộng mà không cần đặt giá trị đệm và chiều cao.
Xem trước kết quả cuối cùng
Trước khi bắt đầu, hãy xem những gì bạn sẽ có thể đạt được vào cuối hướng dẫn này.
Tạo bố cục lưới CSS tùy chỉnh cho mô-đun Divi
Phần 1: Thêm mô-đun vào cột Divi
Một trong những điều đầu tiên chúng ta cần làm là sắp xếp các mô-đun của chúng ta thành các bố cục dạng lưới. Chúng tôi sẽ thêm tất cả các mô-đun mà chúng tôi muốn sử dụng vào cột của mình. Hãy bắt đầu bằng cách tạo một hàng một cột mới cho phần thông thường mặc định.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờ
Tạo mô-đun
Trong các cột, chúng tôi sẽ thêm mô-đun văn bản. Sau đó, chúng tôi sẽ thay đổi cài đặt nội dung như sau:
- Thêm tiêu đề H2 phía trên văn bản đoạn văn
- Màu nền: # 444444
Chúng tôi cũng sẽ cập nhật các cài đặt thiết kế như sau:
- Phông chữ văn bản: Poppins
- Màu văn bản: Ánh sáng
- Chọn tab H2 bên dưới Văn bản tiêu đề
- Tiêu đề 2 Kiểu phông chữ: TT
- Phần đệm: 10% trên cùng, 10% dưới cùng, 10% bên trái 10% bên phải
LƯU Ý : Để làm cho nó rất đơn giản, chúng tôi sẽ tiếp tục sử dụng nhiều mô-đun văn bản với nhiều màu nền khác nhau để thể hiện sự khác biệt giữa từng mô-đun.
Chuyển sang chế độ xem lớp và tạo mô-đun văn bản tiếp theo như sau:
- Sao chép mô-đun văn bản.
- Mở cài đặt văn bản cho mô-đun trùng lặp.
- Cập nhật màu nền
- Màu nền: # 4c6085
Bạn có thể lặp lại quá trình này để tạo mô-đun văn bản thứ ba như sau:
- Sao chép mô-đun văn bản trước đó.
- Mở cài đặt văn bản cho mô-đun trùng lặp.
- Cập nhật màu nền
- Màu nền: # 39a0ed
Chúng tôi sẽ lặp lại quy trình một lần nữa để tạo mô-đun văn bản thứ tư như sau:
- Sao chép mô-đun văn bản trước đó.
- Mở cài đặt văn bản cho mô-đun trùng lặp.
- Cập nhật màu nền
- Màu nền: # 13c4a3
Để tạo bốn mô-đun tiếp theo, hãy sử dụng tính năng đa chọn để chọn tất cả bốn mô-đun. Sau đó, sao chép và dán các mô-đun trong cùng một cột để tạo tổng cộng tám mô-đun văn bản.
Phần 2: Hãy tạo Bố cục Lưới CSS cho các Mô-đun
Bây giờ tất cả các mô-đun của chúng tôi đã được thêm vào, hãy tạo một lưới cho những mô-đun đó.
Cài đặt hàng
Đối với ví dụ này, chúng tôi đang sử dụng bố cục một cột để chúng tôi có thể hiển thị lưới mô-đun của mình trong một bố cục toàn chiều rộng. Bây giờ, chúng tôi sẽ cần cập nhật cài đặt hàng để đảm bảo hàng chiếm toàn bộ chiều rộng của trang. Chúng tôi cũng sẽ cần loại bỏ chiều rộng máng xối mặc định để không có biên bổ sung nào được thêm vào các mô-đun của chúng tôi.
Mở cài đặt hàng và cập nhật những thứ sau:
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Thêm CSS Grid vào Column để xây dựng Grid Layout cho các mô-đun
Đây là một bước quan trọng trong hướng dẫn tạo bố cục cho các mô-đun bằng cách sử dụng thuộc tính CSS Grid.
Để làm điều này, chúng tôi sẽ thêm ba dòng CSS vào Cột sẽ xác định bố cục của các mô-đun của chúng tôi.
Mở cài đặt cột và trong tab nâng cao, dán CSS sau vào trong Phần tử chính:
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
Dòng đầu tiên của CSS trình bày nội dung (hoặc các mô-đun) theo mô-đun lưới CSS .
hiển thị: lưới
Trên dòng thứ hai của CSS, chúng ta sẽ xác định mẫu cột của lưới. Trong trường hợp này, lưới của chúng tôi sẽ có bốn cột có chiều rộng 25%.
lưới-mẫu-cột: 25% 25% 25% 25%
Dòng thứ ba đề cập đến các hàng sẽ được tạo tự động. Điều này có nghĩa là chiều cao của mỗi hàng sẽ được xác định bởi chiều cao dọc của nội dung (hoặc mô-đun) trong hàng.
lưới-tự động-hàng: tự động
Điều chỉnh bố cục lưới trên thiết bị di động
Bây giờ, chúng tôi cũng sẽ cần điều chỉnh bố cục lưới trên thiết bị di động nếu cần.
Để có thể làm điều đó, chúng tôi sẽ chỉ cần thêm một số CSS vào cả máy tính bảng và thiết bị di động để thay đổi số lượng cột và chiều rộng của mỗi cột.
Trong ví dụ này, chúng tôi sẽ thay đổi bố cục lưới cho các mô-đun trên máy tính bảng thành hai cột có chiều rộng mỗi cột là 50%.
Hãy mở các tùy chọn đáp ứng và chọn tab máy tính bảng bên dưới phần tử chính và dán CSS sau:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Đối với màn hình điện thoại, chúng tôi muốn bố cục một cột. Để tạo điều này, hãy dán CSS sau vào Phần tử chính của tab Điện thoại:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Phần 3: Thực hiện thay đổi đối với mô-đun lưới
Thêm một mô-đun mới vào lưới và cách nó phản ứng
Bây giờ chúng ta đã có từng mô-đun vào Grid, nếu chúng tôi thêm nhiều mô-đun hơn, mô-đun kia sẽ được đẩy sang bên phải và các hàng mới sẽ được tạo. Vì dù sao chúng ta cũng cần thêm một mô-đun cho bố cục này, hãy sao chép mô-đun văn bản đầu tiên để xem cách các mô-đun khác điều chỉnh trong lưới.
Cách lưới phản ứng với các mô-đun có lượng nội dung khác nhau
Trong khi đó, tất cả các mô-đun đều có cùng một lượng nội dung, vì vậy chúng tôi không thể thực sự thấy lưới sẽ xử lý các mô-đun có chiều cao khác nhau như thế nào. Để xem cách này hoạt động như thế nào, hãy thay đổi số lượng đoạn văn bản trong mỗi mô-đun. Lưu ý rằng các mô-đun sẽ giữ nguyên chiều cao như mô-đun có hầu hết nội dung trong cùng một hàng. Từ bây giờ chiều cao của hàng cũng sẽ được xác định bởi mô-đun có nhiều nội dung nhất (hoặc chiều cao theo chiều dọc).
Thay đổi vị trí của các mô-đun trên lưới
Các mục của lưới CSS có thể được định vị bằng cách sử dụng hệ thống đánh số tích hợp trên mô-đun lưới. Mỗi dòng trên lưới đại diện cho một số. Đối với các cột, số dòng bắt đầu từ 1 và tiếp tục theo chiều ngang. Mỗi số dòng nằm ở đầu và cuối mỗi cột. Vì vậy, đối với cấu trúc cột của chúng tôi, số dòng bắt đầu từ 1 ở bên trái của cột đầu tiên và kết thúc ở 5 ở bên phải của cột thứ tư. Và, vì chúng ta có ba hàng, số dòng cho các hàng bắt đầu từ 1 ở đầu hàng đầu tiên và cho đến 4 ở cuối hàng thứ ba.
Nếu chúng ta muốn thay đổi vị trí của một mô-đun (hoặc mục lưới) trong CSS Grid, chúng ta có thể đặt xác định nơi chúng ta muốn một mô-đun nhất định được đặt trong lưới. Làm điều này sẽ ghi đè vị trí mặc định của mô-đun trong lưới.
Đối với ví dụ này, chúng tôi sẽ di chuyển mô-đun văn bản đầu tiên sang một vị trí khác. Để làm được điều đó, chúng ta chỉ cần thêm hai dòng CSS vào mô-đun.
Mở cài đặt cho mô-đun văn bản đầu tiên và dán CSS tùy chỉnh sau vào phần tử chính:
grid-column: 2/4;grid-row: 2/3;
Dòng đầu tiên của CSS xác định vị trí của mô-đun theo chiều ngang bằng cách yêu cầu mô-đun bắt đầu trên dòng cột 2 và kết thúc trên dòng cột 4.
cột lưới: 2/4
Dòng thứ hai của CSS xác định vị trí của mô-đun (hoặc mục lưới) theo chiều dọc bằng cách yêu cầu mô-đun bắt đầu ở dòng 2 và kết thúc ở dòng 3.
lưới-hàng: 2/3
Đối với màn hình máy tính bảng và điện thoại, chúng tôi sẽ đưa mô-đun trở lại vị trí ban đầu. Điều này rất hữu ích để giữ tiêu đề chính của bạn ở đầu trang.
Vì vậy, để làm điều đó, hãy chọn tab máy tính bảng trong tùy chọn đáp ứng cho phần tử chính và dán CSS sau:
grid-column: auto;grid-row: auto;
Bây giờ vị trí của mô-đun sẽ quay trở lại luồng ban đầu (tự động) của các mục lưới.
Hãy tiếp tục và định vị thêm một vài mô-đun (hoặc các mục lưới) bằng cách sử dụng phương pháp này.
Bây giờ chúng ta sẽ định vị mô-đun văn bản thứ ba (bây giờ ở cột thứ hai của hàng trên cùng) tại một vị trí đặt mới trong lưới. Vị trí mới này sẽ bắt đầu ở dòng 1 và kết thúc ở dòng 2 và cũng bắt đầu ở dòng 2 và kết thúc ở dòng 4.
Để thực hiện việc này, hãy mở cài đặt cho mô-đun văn bản thứ ba và dán CSS tùy chỉnh sau vào phần tử chính:
grid-column: 1/2;grid-row: 2/4;
Giờ đây, chúng tôi có thể thay đổi vị trí cho thiết bị di động bằng cách thêm CSS sau cho máy tính bảng:
grid-column: auto;grid-row: auto;
Đối với lần sửa đổi cuối cùng của chúng tôi, chúng tôi sẽ định vị mô-đun thứ bảy tại một vị trí đặt mới trong lưới. Vị trí mới này sẽ bắt đầu ở cột dòng 4 và kết thúc ở cột dòng 5 và cũng bắt đầu ở dòng 2 và kết thúc ở dòng 4.
Đối với điều đó, hãy mở cài đặt cho mô-đun văn bản thứ bảy và dán CSS tùy chỉnh sau vào phần tử chính:
grid-column: 4/5;grid-row: 2/4;
Bây giờ dán CSS sau cho màn hình máy tính bảng.
grid-column: auto;grid-row: auto;Căn chỉnh nội dung Mô-đun (hoặc Mục lưới) vào giữa
Có thể bạn đã quá mệt mỏi với việc hướng dẫn, nhưng nếu chúng ta dừng lại ở đây, chúng ta sẽ bỏ lỡ một cách hữu ích để căn chỉnh (hoặc căn giữa) nội dung mô-đun của chúng ta theo chiều dọc. Có nội dung mô-đun căn giữa theo chiều dọc là một tính năng hay của bố cục lưới vì nó làm cho mọi thứ trở nên đối xứng và thẩm mỹ hơn.
Vì vậy, chúng ta có thể thêm một đoạn CSS sử dụng thuộc tính flex CSS để căn chỉnh và căn chỉnh nội dung vào trung tâm. Chúng tôi cần thêm đoạn mã này vào từng mô-đun. Chúng tôi có thể sử dụng đa lựa chọn để chọn tất cả các mô-đun (hoặc các mục lưới) chưa có CSS tùy chỉnh cho phần tử chính (vì chúng tôi không muốn ghi đè các mô-đun đó bằng các vị trí tùy chỉnh). Sau đó, mở cài đặt phần tử bằng cách mở cài đặt cho một trong các mô-đun đã chọn. Trong tab Nâng cao, dán CSS sau vào Phần tử Chính:
display:flex;flex-direction:column;align-items:center;justify-content:center;
Bây giờ chúng ta có thể quay lại ba mô-đun khác của mình (mô-đun # 1, # 3 và # 7) riêng lẻ và thêm cùng một đoạn CSS ngoài CSS đã được sử dụng để cung cấp cho mô-đun một vị trí tùy chỉnh trên lưới. Đảm bảo thêm đoạn mã CSS dưới CSS hiện có cho cả máy tính để bàn và máy tính bảng.
Kết quả cuối cùng
Đây là những gì chúng tôi đã làm cho đến nay trông như thế nào.
Bạn có thể nhận thấy cách các mô-đun (hoặc các mục lưới) điều chỉnh trơn tru trên các độ rộng trình duyệt khác nhau để có một thiết kế đáp ứng đẹp mắt.
Ví dụ thực tế sử dụng các mô-đun và kiểu dáng khác nhau
Nếu bạn muốn xem một ví dụ thực tế bằng cách sử dụng hệ thống lưới này, thì bạn có thể sử dụng các mô-đun khác nhau. Đây là những gì bạn có thể tạo bằng cách sử dụng kỹ thuật đó. Điều này có sẵn trên Gói Bố trí Phòng tập Thể dục.
Trong tất cả của bạn bây giờ
Trong hướng dẫn này, chúng tôi đang làm việc để tạo bố cục lưới CSS cho các mô-đun Divi. Mặc dù quy trình dựa vào một số CSS tùy chỉnh, nhưng điều đáng ngạc nhiên là không nhiều lắm, nếu xét đến những kết quả mạnh mẽ mà chúng tôi có thể có từ nó. Thật tuyệt khi có thể kiểm soát bố cục của tất cả các mô-đun của bạn ở cấp cột khi cần thiết để có các bố cục Divi độc đáo hơn. Nếu bạn là một người nghiện CSS và muốn đi sâu hơn nữa, bạn nên xem hướng dẫn đầy đủ này  để xem xét thêm các khả năng.
Chúng tôi sẽ rất vui khi thấy bạn thành công như thế nào trên phần nhận xét.
