Hàng là các sắp xếp cột khác nhau có thể được đặt bên trong các phần. Giống như mô-đun, các hàng có nhiều cài đặt khác nhau có thể được truy cập bằng cách nhấp vào biểu tượng cài đặt ở trên cùng bên trái của hàng. Trong hướng dẫn này, chúng ta sẽ xem xét một số tính năng và cách chúng có thể được sử dụng để tạo một số bố cục rất độc đáo. Cài đặt đường đặc biệt có thể được sử dụng để tăng đáng kể sự đa dạng của bố cục được tạo bằng Divi Builder, bởi vì họ tạo ra cấu trúc trong đó các mô-đun của bạn được lưu trữ.
Cài đặt nội dung
Màu nền
Hình nền có thể được áp dụng cho toàn bộ hàng. Theo mặc định, các đường có màu nền trong suốt.
Hình nền
Hình nền có thể được áp dụng cho toàn bộ hàng.
Video nền MP4
Les video nền có thể được áp dụng cho các dòng. Nếu bạn muốn áp dụng video nền, bạn cần tải lên video MP4 và WEBM và nhập video ici.
Video nền web
Les video nền có thể được áp dụng cho các dòng. Nếu muốn áp dụng video nền, bạn cần tải xuống video MP4 và WEBM rồi nhập video vào đây.
Chiều rộng video nền
Khi video của bạn được tải lên, bạn cần nhập chiều rộng của video vào đây. Nó phải bằng chiều rộng thực của video, nếu không vị trí của nền sẽ không chính xác.
Chiều cao của video nền
Sau khi video của bạn được tải lên, bạn cần nhập chiều cao của video tại đây. Nó phải bằng chiều cao thực của video, nếu không, vị trí nền sẽ không chính xác.
Tạm dừng video
Nếu bạn muốn video tạm dừng khi nhấp, hãy bật tùy chọn này.
Màu nền của cột
Đối với mỗi cột trong một hàng, bạn có thể chỉ định một màu nền duy nhất.
Hình nền cột
Đối với mỗi cột trong một hàng, bạn có thể chỉ định một hình nền duy nhất.
Nhãn quản trị
Điều này sẽ thay đổi nhãn mô-đun trong bộ tạo để dễ dàng nhận biết. Khi sử dụng dạng xem WireFrame trong Visual Builder, các nhãn này sẽ xuất hiện trong khối mô-đun của giao diện Divi Người xây dựng.
Thông số thiết kế
Sử dụng hiệu ứng thị sai
Nếu bạn muốn sử dụng hiệu ứng thị sai cho hình nền đường của mình, bạn có thể bật ở đây, sau đó chọn phương pháp thị sai bạn muốn.
Hiệu ứng thị sai cột
Tại đây, bạn có thể chọn sử dụng hoặc không sử dụng hiệu ứng thị sai cho hình nền của một cột cụ thể trong hàng của bạn.
Làm cho chiều rộng toàn bộ dòng này
Nếu tùy chọn này được bật, dòng sẽ kéo dài toàn bộ chiều rộng của cửa sổ trình duyệt (tương tự như phần chiều rộng đầy đủ). Đây là một cách tuyệt vời để tạo một số bố cục cột có chiều rộng đầy đủ thú vị.
Sử dụng chiều rộng tùy chỉnh
Bạn cũng có thể chỉ định chiều rộng tùy chỉnh cho một dòng. Ví dụ: nếu bạn muốn thêm biến thể vào nguồn cấp dữ liệu trang và làm cho một hàng lớn hơn các hàng còn lại, bạn có thể nhập giá trị chiều rộng tùy chỉnh tại đây
Sử dụng chiều rộng máng xối tùy chỉnh
Chiều rộng của máng xối đặt khoảng cách giữa các cột. Có 4 kích cỡ máng xối, bắt đầu từ 0. Định nghĩa đặt chiều rộng máng xối thành 1 sẽ dẫn đến không có khoảng cách giữa các cột. Khi được kết hợp với tùy chọn Chiều rộng đầy đủ, điều này có thể tạo ra các hiệu ứng tương tự như mô-đun Toàn màn hình danh mục đầu tư.
Cân bằng chiều cao cột
Đây là một tùy chọn tuyệt vời, đặc biệt hữu ích khi bạn đã áp dụng màu nền cho các cột riêng lẻ. Bật tùy chọn này buộc tất cả các cột trong hàng có cùng giá trị chiều cao.
Đệm tùy chỉnh
Nếu bạn muốn điều chỉnh điền vào dòng, bạn có thể làm điều đó ở đây.
Ký quỹ tùy chỉnh
Nếu bạn muốn điều chỉnh lề của dòng, bạn có thể làm điều đó ở đây.
Đệm cột tùy chỉnh
Nếu bạn muốn điều chỉnh phần đệm của một cột cụ thể trong hàng của mình, bạn có thể thực hiện tại đây.
Lề cột tùy chỉnh
Nếu bạn muốn điều chỉnh lề của một cột cụ thể trong hàng của mình, bạn có thể thực hiện tại đây.
Cài đặt nâng cao
ID CSS
Bạn có thể gán một ID CSS cho hàng nếu bạn muốn nhắm mục tiêu nó trong biểu định kiểu của mình hoặc với các liên kết cố định.
Lớp CSS
Bạn có thể gán một lớp CSS cho dòng nếu bạn muốn nhắm mục tiêu nó trong biểu định kiểu của bạn.
ID cột CSS
Bạn có thể chỉ định ID CSS cho một cột cụ thể trong hàng của mình nếu bạn muốn nhắm mục tiêu nó trong biểu định kiểu của mình hoặc với các liên kết cố định.
Cột lớp CSS
Bạn có thể chỉ định một lớp CSS cho một cột cụ thể trong hàng của mình nếu bạn muốn nhắm mục tiêu nó trong biểu định kiểu của mình.
Avant
Mục CSS ở đây để áp dụng: trước div dòng chính.
Yếu tố chính
Mục CSS ở đây để áp dụng cho div dòng chính.
Sau khi
Mục CSS ở đây để áp dụng: sau div dòng chính.
Cột trước
Nhập CSS tại đây để áp dụng: trước div cột được chỉ định.
Phần tử cột chính
Nhập CSS tại đây để áp dụng cho cột div đã chỉ định.
Cột sau
Mục CSS ở đây để áp dụng: sau cột div được chỉ định.
tầm nhìn
Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun dòng của bạn xuất hiện trên đó. Bạn có thể chọn tắt từng mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này hữu ích nếu bạn muốn sử dụng các mod khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ một số yếu tố nhất định khỏi trang.
Đưa hướng dẫn vào thực tế
Bây giờ chúng ta đã xem qua tất cả các cài đặt, hãy thử nghiệm một vài cài đặt để cho bạn thấy những gì có thể khi mỗi cài đặt được sử dụng một cách sáng tạo. Trong ví dụ này, tôi sẽ giới thiệu cài đặt Hàng toàn màn hình dưới dạng phần giới thiệu. Tùy chọn tạo hàng "Toàn màn hình" là một trong những tùy chọn linh hoạt nhất của bộ. Thao tác này sẽ mở rộng chiều rộng của dòng đến cạnh của trình duyệt, giống như phần Toàn màn hình (hoặc Toàn màn hình). Tuy nhiên, không giống như phần Fullwidth, các hàng FullWidth có thể có cấu trúc cột và có thể chứa bất kỳ mô-đun nào! Trong ví dụ dưới đây, tôi đã tạo một hàng 4 cột và thêm một hình ảnh vuông vào mỗi cột. Tiếp theo, tôi đã kích hoạt "Tạo cho dòng này có chiều rộng đầy đủ" để kéo dài dòng ra các cạnh của cửa sổ trình duyệt.
Sau đó, tôi giảm kích thước "Gutter" thành "1" để loại bỏ khoảng cách giữa các cột trong hàng.
Cuối cùng, tôi đã loại bỏ phần tô ở trên và dưới dòng bằng cách thay đổi giá trị trên cùng và dưới cùng với tùy chọn "Tô tùy chỉnh" thành "0".
Kết quả là một sự chuyển đổi hàng hoàn toàn, biến hàng 4 cột hình ảnh bình thường của chúng ta thành một thư viện hình ảnh tràn toàn bộ chiều rộng, trông tuyệt đẹp so với phần màu xanh lá cây bên dưới. Hiệu ứng tương tự này cũng có thể được tạo bằng cách sử dụng màu nền cột tùy chỉnh và các mod dựa trên văn bản. Khả năng là vô hạn!
