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

Cách căn chỉnh các phần tử trên cùng một dòng trên Divi

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ị]

Khả năng căn chỉnh nội dung theo chiều dọc khi tạo trang web với Divi có thể là một bổ sung thiết thực cho công cụ thiết kế của bạn. Đôi khi một bố cục nhất định đòi hỏi nội dung phải được sắp xếp theo chiều dọc theo các cách khác nhau (tập trung, thấp, cao). Nhu cầu phổ biến nhất là tập trung nội dung của bạn theo chiều dọc.

Nó cung cấp một khóa khoảng cách đối xứng đẹp và thuận tiện khi sử dụng nhiều bố cục cột cho nội dung của bạn. Ngoài ra, nội dung tập trung theo chiều dọc vẫn tập trung vào các độ rộng khác nhau của trình duyệt, loại bỏ rắc rối khi áp dụng điền hoặc lề tùy chỉnh cho khả năng đáp ứng tương tự.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm một vài đoạn CSS nhỏ vào bất kỳ cột nào để căn chỉnh nội dung theo chiều dọc. Tôi sẽ sử dụng một số bố cục Divi được xác định trước cho các ví dụ về cách tiến hành. Nếu bạn không biết nhiều về CSS, bạn không phải lo lắng. Nó sẽ khá dễ dàng để áp dụng cho bố trí của riêng bạn trong vài giây.

Hiểu Flex và Divi

Thuộc tính Flex (hoặc Flexbox) chỉ đơn giản là một cách để định vị các phần tử trong các ngăn xếp ngang và / hoặc dọc (giống như một bảng). Ngoại trừ việc không giống như các bảng truyền thống, thuộc tính flex cho phép bạn tạo các hộp phù hợp với kích thước của nội dung mà nó chứa.

Divi sử dụng thuộc tính flex bất cứ khi nào bạn chọn "Cân bằng độ cao cột" làm tham số dòng. Điều này chỉ đơn giản là đảm bảo rằng kích thước các cột của bạn sẽ điều chỉnh theo kích thước của cột có nhiều nội dung nhất. Và vì Equalize Cột Heights kích hoạt flex cho vùng chứa dòng, bạn có thể dễ dàng tận dụng lợi thế của nó bằng cách thêm css vào các cột của bạn để điều chỉnh nội dung của từng cột (hoặc vùng).

Ví dụ: nếu bạn thêm "lề: tự động" vào một cột liên tiếp, nội dung của cột đó (cho dù đó là một hoặc nhiều mô-đun) sẽ trở thành trung tâm theo chiều dọc.

Ngoài ra, nếu bạn thêm "align-items: centre" vào dòng của mình, tất cả các cột của bạn (và nội dung của chúng) sẽ được căn giữa theo chiều dọc.

Tất nhiên, có nhiều cách sử dụng khác của thuộc tính Flex trong thiết kế web, cũng như CSS nâng cao hơn mà bạn có thể áp dụng cho chủ đề của mình. Nhưng đối với hướng dẫn này, tôi muốn giữ mọi thứ đơn giản.

Có thực sự cần thiết?

Về mặt kỹ thuật, không. Bạn có thể căn chỉnh theo chiều dọc nội dung / mô-đun của bạn trong một cột bằng cách sử dụng khoảng cách tùy chỉnh (điền và lề). Ví dụ: bạn có thể sử dụng các tùy chọn khoảng cách Divi để cung cấp một cột bằng với phần đệm trên cùng và dưới cùng để căn giữa (các) mô-đun theo chiều dọc trong cột. Bạn cũng có thể chỉ thêm một lần điền lớn hơn một cột để căn chỉnh nội dung thấp hơn. Tuy nhiên, bạn có thể cần điều chỉnh khoảng cách khi cập nhật trang của mình với nhiều nội dung hơn. Ngoài ra, có thể khó duy trì sự liên kết này trên các độ rộng khác nhau của trình duyệt.

Vì vậy, nếu bạn đang tìm kiếm một giải pháp để căn chỉnh nội dung theo chiều dọc mà không phải suy nghĩ về khoảng cách tùy chỉnh, tôi nghĩ bạn sẽ thấy điều đó hữu ích.

Hãy bắt đầu nào!

Tải bố cục được xác định trước trên trang của bạn

Để bắt đầu, tôi sẽ sử dụng bố cục của dòng sản phẩm Danh mục đầu tư của Công ty Thiết kế Nội thất. Để có bố cục này trên trang của bạn, hãy tạo một trang mới. Sau đó đưa ra một tiêu đề cho trang của bạn. Nhấp vào "Sử dụng Trình tạo Divi" và sau đó vào "Sử dụng Trình tạo hình ảnh". Sau đó chọn tùy chọn "Chọn bố cục cơ bản". Sau đó chọn Bộ công cụ bố trí công ty thiết kế nội thất trong cửa sổ bật lên Tải từ thư viện. Cuối cùng, chọn trang Danh mục đầu tư trong danh sách bố trí và nhấp vào "Sử dụng bố cục này".

mẫu chủ đề divi wordpress.png

Khi bố cục được tải trên trang của bạn, bạn đã sẵn sàng để đi.

Phương pháp 1: Cách căn chỉnh nội dung theo chiều dọc với lề và lề tự động

Mở các tham số dòng của dòng thứ hai của trang (cái trực tiếp bên dưới dòng có tiêu đề của trang). Trong các tham số thiết kế, mở nhóm tùy chọn kích thước và lưu ý rằng "Cân bằng độ cao cột" đã hoạt động. Điều này có nghĩa là dòng hiện có thuộc tính flex ("display: flex;") được thêm vào.

hài hòa chiều cao của các cột.png

Bây giờ, hãy chuyển đến cài đặt tab Nâng cao cho cùng một hàng và thêm đoạn mã css sau vào trường nhập của mục chính trong cột 2.

tỷ suất lợi nhuận: tự động;

margin tự động divi.png

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ả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Bây giờ nội dung của cột thứ hai đã được di chuyển để được tập trung theo chiều dọc.

Đặt nội dung thấp hơn phù hợp

Nếu bạn muốn căn chỉnh nội dung của mình ở phía dưới để tất cả các mô-đun xếp chồng ở cuối cột, bạn có thể điều chỉnh giá trị lề như sau:

tỷ suất lợi nhuận: tự động 0;

margin divi line.png

Căn chỉnh theo chiều dọc nội dung cho tất cả các cột trong hàng của bạn

Thay vì thêm "lề: tự động" vào từng cột riêng lẻ, bạn cũng có thể căn giữa theo chiều dọc nội dung của tất cả các cột trong hàng của mình bằng cách thêm đoạn mã sau vào thành phần chính của tham số hàng.

sắp xếp-hạng mục: Trung tâm;

căn chỉnh các yếu tố divi.png

Hoặc nếu bạn muốn tất cả nội dung của các cột được căn chỉnh ở dưới cùng, bạn có thể thêm đoạn trích này:

align-items: flex-end;

Và đừng quên rằng bạn có thể tận dụng tính năng Divi Extend Styles bằng cách nhấp chuột phải vào mục chính bằng đoạn mã CSS của bạn và nhấp vào "Mở rộng mục chính".

mở rộng phần tử chính.png

Sau đó, mở rộng phần tử css chính này cho tất cả các dòng của trang (hoặc phần) để căn giữa tất cả các nội dung của từng cột của trang.

mở rộng phong cách trên divi.png

Bây giờ mọi thứ đều tập trung theo chiều dọc.

sự xuất hiện của các thay đổi divi.png

Nhưng, bạn có thể nhận thấy rằng màu nền của cột trắng không còn bao phủ toàn bộ chiều cao của dòng. Điều này là do chúng tôi đã thêm "lề: tự động" vào cột. Để giải quyết vấn đề này, bạn có thể thay đổi màu nền của dòng trống và xóa phần điền khỏi dòng. Nhưng thay vào đó, tôi sẽ chỉ cho bạn một cách để tập trung vào nội dung của cột mà không thay đổi lề.

Phương pháp 2: Sắp xếp theo chiều dọc của nội dung bằng hướng Flex của cột

Trong phương thức đầu tiên, chúng tôi đã tận dụng thuộc tính flex được thêm vào dòng. Điều này đã làm cho mỗi cột của chúng tôi trở thành một "hộp linh hoạt" có thể được căn chỉnh theo chiều dọc bằng cách điều chỉnh lề.

Nhưng cũng có một cách hướng linh hoạt để căn chỉnh nội dung của cột của chúng tôi mà không làm mất hiệu ứng "Cân bằng chiều cao cột" giữ cho các cột của chúng tôi (và nền của các cột) có cùng kích thước. Để làm điều này, chúng tôi chỉ cần thêm một vài dòng CSS vào cột của chúng tôi để tất cả các mô-đun trong cột được xếp theo chiều dọc và sau đó được căn giữa.

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

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

Hãy quay trở lại dòng của chúng tôi trong ví dụ trước. Mở cài đặt dòng và xóa bất kỳ css tùy chỉnh nào bạn có thể có bằng cách nhấp chuột phải vào CSS tùy chỉnh và nhấp vào "Đặt lại kiểu CSS tùy chỉnh".

Sau đó thêm CSS sau vào cột 2, phần tử chính:

hiển thị: flex; flex-direction: cột; justify-content: center;

Chỉ đạo flex-column.png

Hoặc, nếu tôi muốn căn chỉnh nội dung ở phía dưới, chỉ cần thay thế "Justify the content: centre" bằng "justify the content: flex-end".

flex alignment end.png

Điều tuyệt vời với thiết lập này là nếu nội dung của tôi được căn giữa theo chiều dọc và chiều rộng của dòng đạt được, nội dung sẽ nằm ở giữa.

sự xuất hiện của boxes.png

Tạo các vệt mờ (Tóm tắt) với số lượng văn bản được sắp xếp theo chiều dọc khác nhau

Làm cho nội dung cột của bạn được căn giữa theo chiều dọc cũng có thể hữu ích cho các vệt mờ. Như bạn đã biết, không phải tất cả các vệt mờ sẽ chứa chính xác số lượng văn bản được sử dụng để mô tả chức năng hoặc dịch vụ. Căn giữa những vệt mờ này theo chiều dọc có thể tạo ra một thiết kế đẹp cho bố cục của bạn.

Trong ví dụ này, tôi sẽ căn chỉnh theo chiều dọc trên bố cục của trang chủ Thanh toán kỹ thuật số.

Trước tiên tôi sẽ thêm số lượng văn bản cơ thể khác nhau vào các vệt mờ để thể hiện chân thực hơn về diện mạo của một trang web.

liên kết blorbds.png

Bây giờ tôi phải đi đến cài đặt dòng và "Hài hòa chiều cao cột".

hài hòa cột.png

Bây giờ tôi có thể thêm đoạn mã CSS của mình để căn chỉnh nội dung của mình và sửa đổi thiết kế.

Trên tab Nâng cao của cài đặt hàng của bạn, chúng tôi có thể căn giữa theo chiều dọc nội dung của các cột bằng cách thêm phần sau vào Phần tử chính:

sắp xếp-hạng mục: Trung tâm;

Sửa đổi liên kết nội dung divi.png

Hoặc thay đổi nó bằng cách làm theo để xếp chúng xuống.

align-items: flex-end;

căn chỉnh ở đáy divi.png

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

Tải xuống miễn phí WooCommerce, 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. [Đề xuất]

Bạn cũng có thể đặt lại các kiểu CSS tùy chỉnh của mình và thêm các lề tùy chỉnh sau để căn chỉnh đáy cột đầu tiên và đỉnh cột được căn chỉnh thứ ba.

Phần tử chính CSS cột 1:

tỷ suất lợi nhuận: tự động tự động 0;

Phần tử chính CSS cột 3:

tỷ suất lợi nhuận: 0 tự động tự động;

tùy chỉnh sự liên kết của tóm tắt divi.png

Còn bố trí một cột thì sao?

Về mặt kỹ thuật, bạn không cần đoạn trích CSS hoặc flex để căn giữa theo chiều dọc nội dung cột của bạn. Tất cả những gì bạn cần làm là đảm bảo rằng bạn có khoảng cách bằng nhau ở trên và bên dưới nội dung (hoặc mô-đun) của bạn. Hầu hết thời gian, người dùng cần nội dung dọc tập trung vào các mô hình nhiều cột vì họ muốn nội dung liền kề được căn chỉnh hoàn hảo.

Đó là hướng dẫn này cho bạn thấy cách căn chỉnh các yếu tố trên cùng một dòng trên Divi.

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 đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
4 cổ phiếu
cổ phiếu2
tweet
Enregistrer2