Hướng dẫn xây dựng nội dung thành các cột trong 1 trang website WordPress

Kiến thức hosting

Bạn có muốn thêm nội dung nhiều cột trong bài đăng WordPress của mình không? Cột có thể được sử dụng để tạo bố cục hấp dẫn cho bài viết và trang của bạn.

Phương tiện in truyền thống, như báo và tạp chí, đã sử dụng bố cục nhiều cột kể từ những ngày đầu in. Mục tiêu của họ là giúp người dùng dễ dàng đọc văn bản nhỏ hơn trong khi sử dụng không gian có sẵn một cách kinh tế.

Bố trí cột đơn được sử dụng phổ biến hơn trên web. Tuy nhiên, lưới nhiều cột vẫn hữu ích để làm nổi bật nội dung và giúp quét và đọc dễ dàng hơn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm nội dung nhiều cột trong các bài đăng WordPress của bạn mà không cần viết bất kỳ mã HTML nào.

addmulti-columncontentinwordpress

Thêm nội dung nhiều cột trong WordPress

Tạo nội dung nhiều cột hay còn gọi là nội dung cột lưới trong WordPress giờ đây trở nên dễ dàng vì đây là một tính năng mặc định. Trình chỉnh sửa khối WordPress mới Gutenberg bao gồm một khối cột.

Để thêm bố cục nhiều cột, bạn cần tạo một bài đăng mới hoặc chỉnh sửa bài hiện có. Khi bạn đang ở trong khu vực chỉnh sửa bài đăng, hãy nhấp vào biểu tượng ‘Thêm’ ở trên cùng để thêm một khối.

Tiếp theo, bạn cần chọn khối ‘Cột’ nằm trong tab ‘Các thành phần bố cục’.

addcolumnsblockinwordpress

Bây giờ bạn sẽ thấy con trỏ chuột nhảy trên cột bên trái và một trình giữ chỗ văn bản sẽ xuất hiện trên cột bên phải.

columnsblockinwordpress

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, khối Cột có vẻ chỉ là một vùng trống lúc đầu. Nếu bạn di chuột qua bên trái, bạn có thể thấy đường viền khối được tô sáng.

Bạn cũng sẽ có thể thấy các cài đặt khối trên cột bên phải của màn hình chỉnh sửa bài.

columnsblockwordpress2columns

Theo mặc định, khối cột sẽ thêm hai cột. Bạn có thể tăng số lượng cột bạn muốn thêm từ cài đặt khối bên phải. Nó cho phép bạn thêm tối đa sáu cột trong một hàng.

addmorecolumnstowordpress

Chỉ cần nhấp vào một cột và bắt đầu nhập để thêm nội dung. Bạn có thể sử dụng phím tab trên bàn phím để chuyển sang cột tiếp theo.

addtextinyourcolumns

Thêm phương tiện và nội dung khác trong các cột của bạn

Ngoài nội dung văn bản, bạn cũng có thể thêm hình ảnh và video nhúng vào các cột WordPress.

Khối cột cho phép bạn thêm các khối bên trong mỗi cột. Chỉ cần đưa chuột vào một cột và bạn sẽ thấy biểu tượng ‘Thêm khối mới’ bên trong nó. Bạn cũng có thể thêm một khối bằng cách gõ / và sau đó là tên khối.

addblockincolumnswordpress

Khối đã chọn của bạn sẽ xuất hiện bên trong cột. Bây giờ bạn có thể tiếp tục và thêm nội dung vào nó.

imageblockaddedtowpcolumns

Đây là cách cột mới của bạn có thể trông trong chủ đề Twenty Nineteen mặc định. Trong ví dụ này, chúng tôi đang sử dụng ba cột và cột cuối cùng chứa một hình ảnh.

columnsinwppreview

Nếu bạn chỉ muốn thêm một hình ảnh và một số văn bản bên cạnh nó, thì bạn cũng có thể sử dụng khối ‘Phương tiện và Văn bản’ thay vì các cột. Khối đặc biệt này được tạo riêng để hiển thị phương tiện như hình ảnh và video bên cạnh một số văn bản.

addmediaandtextblockwordpress

Thêm nhiều cột trong Trình chỉnh sửa WordPress cổ điển cũ

Trong trường hợp bạn chưa nâng cấp WordPress của mình lên Gutenberg và vẫn sử dụng Trình chỉnh sửa cổ điển , thì bạn sẽ cần cài đặt một plugin riêng để tạo bố cục cột lưới.

Đầu tiên, cài đặt và kích hoạt plugin Lightweight Grid Columns .

Khi kích hoạt, bạn có thể tạo một bài đăng mới hoặc mở một bài đăng cũ để chỉnh sửa. Tiếp theo, nhấp vào nút ‘Thêm cột’ từ thanh công cụ soạn thảo trực quan.

addcolumnsicon-lightweightgridcolumnsplugin

Bây giờ bạn sẽ thấy một cửa sổ bật lên để thêm cột đầu tiên của bạn. Bạn có thể chọn diện tích mà cột của bạn có thể bao phủ, trong máy tính để bàn, máy tính bảng và thiết bị di động khác nhau.

Ví dụ: nếu bạn đặt tỷ lệ phần trăm lưới máy tính để bàn 50%, cột của bạn sẽ bao phủ nửa hàng.

desktop-tab-mobile-grid-percentage-columns

Có rất nhiều tùy chọn để đặt chiều rộng cột của bạn, từ 5% đến 100% trong khoảng 5. Bạn có thể chọn một bằng cách nhấp vào menu thả xuống.

colums-percentages

Sau đó, bạn cần thêm nội dung cột của mình vào ô ‘Nội dung’ và sau đó nhấp vào nút OK để chèn nó vào bài đăng của bạn.

addcontenttogridcolumn

Bây giờ các plugin sẽ tạo ra shortcode cần thiết với nội dung của bạn và thêm nó vào trình chỉnh sửa bài đăng của bạn.

shortcodecontentaddedtowpcolumn

Bây giờ cột đầu tiên của bạn được thêm vào, bạn có thể lặp lại quy trình để thêm nhiều cột hơn. Đối với cột cuối cùng trong hàng, đừng quên chọn hộp ‘Cột cuối cùng trong hàng’.

shortcodecontentaddedto2columns

Sau đó, bạn có thể lưu bài viết của mình và xem trước nó. Đây là giao diện của chúng tôi trên trang thử nghiệm của chúng tôi bằng chủ đề Twenty Seventeen.

twocolumns-wptwentyseventeentheme

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm các cột trong các bài đăng và trang WordPress của bạn. Bạn cũng có thể muốn xem hướng dẫn đơn giản của chúng tôi về cách dễ dàng căn chỉnh hình ảnh trong các bài đăng WordPress .

Leave a Reply

Your email address will not be published. Required fields are marked *