Cách tạo bố cục dạng nhiều cột trong bài viết WordPress mà không dùng code HTML

Bố cục dạng nhiều cột thường được sử dụng để tạo sự hấp dẫn cho bài viết, hoặc trang nội dung nhằm thu hút độc giả hơn. Báo và tạp chí đã dùng cách chia bố cục thành nhiều cột trong bài viết của mình từ rất lâu. Mục tiêu ban đầu là giúp người xem dễ dàng đọc văn bản nhỏ hơn trong khi vẫn sử dụng không gian có sẵn một cách tinh tế.

Bố cục với chỉ một cột được sử dụng tương đối phổ biến trên các website hiện nay. Tuy nhiên, dạng bố cục nhiều cột vẫn hữu ích khi bạn cần làm nổi bật nội dung nào đó, vì nó giúp mắt người xem quét và đọc dễ dàng nội dung đó hơn.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách dễ dàng tạo bố cục nhiều cột trong các bài đăng WordPress mà không cần viết bất kỳ code HTML nào.

 

Cách dễ dàng nhất để thêm nhiều cột trong bố cục WordPress

Tạo 1 bố cục nhiều cột hay còn gọi là “tạo nội dung dạng lưới” trong WordPress rất đơn giản. Đây là một tính năng mặc định trong trình chỉnh sửa WordPress Block Editor Gutenberg , có thể giúp cho bạn tùy chỉnh nhiều cột một cách đơn giản.

Để 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 ‘Add” nằm ở trên cùng để thêm một Block mới.

Tiếp theo, bạn cần chọn biểu tượng Columns nằm dưới tab Layout Elements.

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

Như bạn có thể thấy trong ảnh chụp màn hình ở trên, vùng cột mới được tạo ra chỉ là một vùng trống không có nội dung. Nếu bạn di chuột qua bên trái, bạn có thể thấy đường viền khối bao quanh được tô sáng, và vùng bên phải cũng tương tự như vậy.

Khi tạo 1 cột mới trong văn bản đang được soạn thảo thì mặc định luôn luôn có hai cột . Tuy nhiên, bạn có thể tăng số lượng cột văn bản theo ý muốn, bằng cách thêm số cột bạn muốn tại vùng cài đặt cột nằm bên phải ( như hình trên) . WordPress cho phép bạn có thể có tối đa sáu cột trong một hàng.

Bắt đầu thêm nội dung bằng cách nhấp vào cột bạn muốn thêm, ngoài ra bạn có thể sử dụng phím tab trên bàn phím để chuyển sang cột tiếp theo, tương tự như cách di chuyển trong Exel.

Cách để thêm Media hoặc định dạng khác trong cột của bạn

Ngoài nội dung văn bản được mặc định dùng trong cột , bạn cũng có thể thêm hình ảnh và nhúng video (embed video) vào các cột trong WordPress.

Chỉ cần đưa con nháy chuột vào một cột thì bạn sẽ thấy hiển thị biểu tượng ‘Add new block’ , ngoài ra bạn cũng có thể thêm một Block bằng cách gõ “/” và sau đó là lựa chọn định dạng của Block đó, có thể là video, hoặc hình ảnh tùy thích.

Block với định dạng đã chọn của bạn sẽ xuất hiện bên trong cột , sau đó bạn có thể tiếp tục thêm nội dung bạn muốn.

Trong ảnh minh họa này, Block mới được tạo khi dùng theme Twenty Nineteen mặc định của WordPress. Bạn có thể thấy chúng tôi đã tạo ra 3 cột. Trong đó: 2 cột đầu có định dạng là văn bản, cột thứ 3 chúng tôi chèn 1 hình ảnh minh họa.

Có cách dễ dàng hơn nếu bạn chỉ muốn thêm 1 Media và 1 chú thích nhỏ nằm bên cạnh nó, bạn có thể sử dụng Block “Media and Text“. Block này được tạo riêng để hiển thị Media kèm với 1 nội dung văn bản.

 

Thêm nhiều cột trong Trình chỉnh sửa WordPress phiên bản cũ


Trong trường hợp bạn chưa nâng cấp WordPress của bạn lên để dùng trình chỉnh sửa Gutenberg và vẫn sử dụng Classic Editor, bạn sẽ cần phải cài đặt một plugin riêng để tạo bố cục nhiều cột.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Lightweight Grid Columns. Để được hướng dẫn chi tiết, hãy làm theo hướng dẫn từng bước của chúng tôi về cách cài đặt plugin trong WordPress.

Khi cài đặt và kích hoạt plugin xong, bạn có thể tạo một bài đăng mới hoặc chỉnh sửa một bài đăng cũ để thử nghiệm. Tại vùng soạn thảo văn bản, bạn nhấp vào nút “Add Columns” từ thanh công cụ.

Bây giờ bạn sẽ thấy một pop-up bật lên cho phép thêm cột đầu tiên của bạn. Bạn có thể chọn kích thước cho cột của bạn theo tỷ lệ % hiển thị trên máy tính để bàn, máy tính bảng và thiết bị di động.

Ví dụ: nếu bạn đặt tỷ lệ phần trăm cột trên máy tính để bàn là 50%, thì khi duyệt website bằng máy tính để bàn, cột của bạn sẽ chiếm 50% hàng nội dung.

Có rất nhiều tùy chọn để đặt độ rộng cột của bạn, từ 5% đến 100% (tăng 5% mỗi tùy chọn). Bạn có thể chọn một tùy chọn phần trăm hiển thị bằng cách nhấp vào menu thả xuống.

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

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

Bây giờ, cột đầu tiên của bạn đã được thêm vào trong bài viết. Bạn có thể lặp lại quy trình thêm cột trên để thêm nhiều cột hơn. Đối với cột cuối cùng trong hàng, hãy đánh dấu vào ô Last column in row.

Sau đó, bạn có thể lưu bài viết của mình lại và bật chế độ xem trước bài viết đó. Hình minh họa dưới đây, chúng tôi chụp ảnh màn hình với 2 cột được hiển thị bằng Theme Twenty Seventeen.

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 bài đăng WordPress mà không sử dụng code HTML. Bạn cũng có thể muốn xem hướng dẫn đơn giản nhất của chúng tôi về cách dễ dàng căn chỉnh hình ảnh trong WordPress.

Nếu bạn thích bài viết này, thì vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm nhiều video hướng dẫn. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.