Bỏ qua đến nội dung chính

Cách cấu hình các dòng trên Divi Builder

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Các dòng là bố trí cột khác nhau có thể được đặt bên trong các phần. Giống như các mô-đun, các dòng có các tham số khác nhau có thể truy cập bằng cách nhấp vào biểu tượng cài đặt ở phía trên bên trái của dòng. Trong hướng dẫn này, chúng tôi sẽ xem xét một số tính năng và cách chúng có thể được sử dụng để tạo bố cục rất độc đáo. Đặc biệt, cài đặt dòng có thể được sử dụng để tăng đáng kể tính đa dạng của bố cục được tạo bằng Divi Builder vì chúng tạo cấu trúc trong đó các mô-đun của bạn được lưu trữ.

dòng mô-đun divi builder.png

thông số cài đặt dòng divi.png

Cài đặt nội dung

Màu nền

Hình nền có thể được áp dụng cho toàn bộ dò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ộ dòng.

Video nền MP4

Video nền có thể được áp dụng cho các dòng. Nếu bạn muốn áp dụng một video nền, bạn cần tải xuống một video MP4 và WEBM và lấy các video ở đây.

Video nền web

Video nền có thể được áp dụng cho các dòng. Nếu bạn muốn áp dụng một video nền, bạn cần tải xuống một video MP4 và WEBM và lấy các video ở đây.

Chiều rộng 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 rộng của video vào đây. Nó phải bằng với chiều rộng thực tế 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 vào đây. Nó phải bằng với chiều cao thực tế 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 được nhấp, hãy bật tùy chọn này.

Màu nền cột

Đối với mỗi cột liên tiếp, bạn có thể gán một màu nền đơn.

Hình nền cột

Đối với mỗi cột liên tiếp, bạn có thể chỉ định một hình nền đơn.

Nhãn quản trị

Điều này sẽ thay đổi thẻ của mô-đun trong trình tạo để dễ nhận biết. Khi sử dụng khung nhìn 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 Builder.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

seciton design divi builder.png

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 của dòng, bạn có thể kích hoạt tại đây và sau đó chọn phương pháp thị sai mong muốn.

Hiệu ứng thị sai cột

Ở đây bạn có thể chọn có hay không sử dụng hiệu ứng thị sai cho hình nền của một cột cụ thể trong dò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ẽ trải rộng toàn bộ chiều rộng của cửa sổ trình duyệt (tương tự như một phần chiều rộng đầy đủ). Đây là một cách tuyệt vời để tạo bố cục cột có chiều rộng đầy đủ.

Sử dụng chiều rộng tùy chỉnh

Bạn cũng có thể gán 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à thu phóng một dòng cho phần 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 điều chỉnh khoảng cách giữa các cột. Có 4 kích thước máng xối, bắt đầu từ 0. Việc đặt chiều rộng máng xối trên 1 sẽ không dẫn đến bất kỳ khoảng trống nào giữa các cột. Khi kết hợp với tùy chọn Full Width, điều này có thể tạo ra các hiệu ứng tương tự như mô-đun Danh mục toàn màn hình.

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 sẽ buộc tất cả các cột trong hàng có cùng giá trị độ 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.

Lề 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.

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

Tải xuống các plugin và chủ đề WordPress tốt nhất từ ​​Envato và dễ dàng tạo trang web của bạn. Đã có hơn 49.720.000 lượt tải xuống. [ĐỘC QUYỀN]

Đệm cột tùy chỉnh

Nếu bạn muốn điều chỉnh điền vào một cột cụ thể trong dòng của bạn, bạn có thể làm điều đó ở đâ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 dòng của bạn, bạn có thể làm điều đó ở đây.

cột tùy chọn nâng cao divi.png

Cài đặt nâng cao

ID CSS

Bạn có thể gán một ID CSS cho dòng nếu bạn muốn nhắm mục tiêu nó trong bảng định kiểu của bạn hoặc với các liên kết anchor.

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 bảng định kiểu của bạn.

ID cột CSS

Bạn có thể gán một ID CSS cho một cột cụ thể trong hàng của bạn nếu bạn muốn nhắm mục tiêu nó trong bảng định kiểu của bạn hoặc với các liên kết anchor.

Cột lớp CSS

Bạn có thể gán một lớp CSS cho một cột cụ thể trong hàng của bạn nếu bạn muốn nhắm mục tiêu nó trong bảng định kiểu của bạn.

Avant

Mục nhập CSS tại đây để áp dụng: trước div dòng chính.

Yếu tố chính

Nhập CSS tại đây để áp dụng cho div dòng chính.

sau

Nhập CSS vào đâ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.

Yếu tố cột chính

Nhập CSS tại đây để áp dụng cho cột div được chỉ định.

Cột sau

Mục nhập CSS tại đâ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. Bạn có thể chọn tắt 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 rất hữu ích nếu bạn muốn sử dụng các mô-đun 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ỏ các yếu tố nhất định của trang.

Đưa hướng dẫn vào thực tế

Bây giờ chúng tôi đã xem xét tất cả các tham số, hãy kiểm tra một số thông số để hiển thị cho bạn những gì có thể khi mỗi tham số được sử dụng một cách sáng tạo. Trong ví dụ này, tôi sẽ tiếp cận cài đặt Dòng màn hình đầy đủ dưới dạng phần giới thiệu. Tùy chọn tạo dòng "Toàn màn hình" là một trong những tùy chọn linh hoạt nhất trong tập hợp. Điều này sẽ mở rộng chiều rộng của đường tới cạnh của trình duyệt, như đối với phần toàn màn hình (hoặc FullWidth). Tuy nhiên, không giống như phần Fullwidth, các dò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 tại các cột 4 và thêm một hình vuông vào mỗi cột. Sau đó, tôi bật "Bỏ qua dòng này ở chế độ toàn màn hình" để mở rộng đường thẳng đến các cạnh của cửa sổ trình duyệt.

Dễ dàng tạo cửa hàng trực tuyến của bạn

Tải xuống WooC Commerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Khuyến nghị]

ví dụ thiết kế divi.jpg

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 của dòng.

loại bỏ khoảng cách giữa các cột divi.jpg

Cuối cùng, tôi đã xóa phần điền ở trên và bên dưới dòng bằng cách thay đổi giá trị trên cùng và dưới cùng bằng tùy chọn "Tùy chỉnh điền" trên "0".
sửa đổi của filling.jpg

Kết quả là một biến đổi hoàn chỉnh của hàng, chuyển đổi hàng hình ảnh 4 bình thường thành một thư viện hình ảnh đầy đủ, đầy đủ trông thật tuyệt vời so với phần màu lục 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à mô-đun dựa trên văn bản. Các khả năng là vô tận!

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

Trở lại đầu trang
6 cổ phiếu
cổ phiếu2
tweet1
Enregistrer3