---
title: "Sử dụng content box, color button và highlight menu"
author: "Trung Hiếu"
date: "2017-02-15"
lastmod: "2023-10-10"
url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/content-box-color-button-highlight-menu-trong-theme-paradise.html"
---

# Sử dụng content box, color button và highlight menu

Hướng dẫn sử dụng content box, color button và highlight menu trong theme Paradise.

![tinh-nang-content-box-color-button-highlight-menu-trong-theme-paradise](https://wpcanban.com/wp-content/uploads/2017/02/su-dung-colored-boxes-color-buttons-highlight-menu-trong-paradise-child-theme.jpg)

Như đã thông báo trong changelog của phiên bản 4.2.4, chúng tôi đã bổ sung thêm các tính năng mới bao gồm content box (hộp màu nội dung), color button (nút bấm màu) và highlight menu (làm nổi bật những mục nhất định trên menu) vào theme [Paradise](https://wpcanban.com/tag/paradise-child-theme/) để giúp các bạn làm nổi bật các nội dung quan trọng một cách dễ dàng hơn. Bài viết hôm nay sẽ giới thiệu qua về các màu sắc được hỗ trợ cũng như hướng dẫn các bạn cách sử dụng chúng sao cho đúng.

Tham khảo thêm:

- [Các tính năng của theme Paradise tích hợp trong Customizer](https://wpcanban.com/thong-bao/tinh-nang-cua-theme-paradise-trong-customizer.html)
- [Tại sao bạn nên chọn theme Paradise cho website WordPress?](https://wpcanban.com/wordpress/wordpress-themes/tai-sao-ban-nen-chon-genesis-framework-va-paradise.html)

## Content box, color button và highlight menu là gì?

- Content box: là những hộp chứa nội dung với nhiều màu sắc khác nhau, cho phép bạn tùy chỉnh nội dung bên trong. Các màu được hỗ trợ bao gồm: blue (xanh dương), gray (xám), green (xanh lá), purple (tím), red (đỏ) và yellow (vàng).

![paradise-content-box](https://wpcanban.com/wp-content/uploads/2017/02/genesis-colored-boxes-demo.png)

- Color button: là những nút bấm với nhiều màu sắc khác nhau. Các màu được hỗ trợ cũng tương tự như content box.

![](https://wpcanban.com/wp-content/uploads/2017/02/genesis-color-button-demo.png)

- Highlight menu: làm nổi bật một hoặc một số mục bất kỳ trên menu của bạn.

![paradise-highlight-menu](https://wpcanban.com/wp-content/uploads/2017/02/genesis-highlight-menu-demo.png)

## Sử dụng content box, color button và highlight menu

Kể từ phiên bản 5.5.9 (phát hành ngày 09/06/2022), các bạn có thể tạo content box và color button một cách nhanh chóng ngay trong trình soạn thảo Visual (Trực quan):

![tao-content-box-va-color-button-trong-theme-paradise](https://wpcanban.com/wp-content/uploads/2017/02/tao-content-box-va-color-button-trong-theme-paradise.png)

- Content box: chọn phần nội dung mà bạn muốn đóng khung => click vào nút *Formats* (*Định dạng*) => Chọn một trong các mục bắt đầu bằng *Content box…* (màu sắc tùy bạn lựa chọn).
- Color button: chọn liên kết (text đã chèn link) mà bạn muốn tạo thành nút bấm => click vào nút *Formats* (*Định dạng*) => Chọn một trong các mục bắt đầu bằng *Button…* (màu sắc tùy bạn lựa chọn).

Kể từ phiên bản 6.2 (phát hành ngày 22/07/2022), các bạn sẽ phải kích hoạt tính năng *Sử dụng content box và color button* trong *Giao diện* => *Tùy biến* => *Thiết lập giao diện* => *Tối ưu trải nghiệm* trước khi có thể dùng chúng trong trình soạn thảo.

![kich-hoat-tinh-nang-content-box-va-color-button](https://wpcanban.com/wp-content/uploads/2017/02/kich-hoat-tinh-nang-content-box-va-color-button.png)

Nếu bạn đang sử dụng theme Paradise phiên bản cũ hơn (5.5.8 trở về trước) thì ngay bên dưới là hướng dẫn chi tiết:

### Conten box

Để tạo content box, các bạn cần phải chuyển [trình soạn thảo WordPress](https://wpcanban.com/tag/trinh-soan-thao-wordpress) sang chế độ Text (Văn bản). Sau đó, sử dụng cấu trúc HTML dưới đây:

```
<div class="content-box-blue">Nhập nội dung của bạn vào đây.</div>
```

Thay `blue` bằng tên màu sắc được hỗ trợ trong danh sách bên trên để tạo box với màu sắc khác nhau.

### Color button

Cách sử dụng gần giống với content box, chỉ khác ở chỗ các bạn cần dùng code HTML sau:

```
<a class="button-blue" href="https://domain.com">Nội dung hiển thị trong nút bấm</a>
```

Thay `https://domain.com` bằng link của trang bạn muốn dẫn tới. Các bạn cũng có thể thay `blue` bằng một trong các tên màu sắc được hỗ trợ.

### Highlight menu

1. Nếu muốn làm nổi bật một mục nào đó trên menu, các bạn có thể truy cập vào *Appearance* => *Menus* => chọn đúng menu cần chỉnh sửa => click vào nút *Screen Options* (*Tùy chọn hiển thị*) ở góc trên bên phải màn hình và tick vào mục *CSS Classes*.

![tick-vao-muc-css-classes](https://wpcanban.com/wp-content/uploads/2017/02/tick-vao-muc-css-classes.png)

2. Chọn mục muốn làm nổi bật và thêm thẻ `highlight` vào khung *CSS Classes* tương ứng với mục đó.

![dien-highlight-vao-muc-css-classes](https://wpcanban.com/wp-content/uploads/2017/02/highlight-menu-genesis.png)

Click vào nút *Save Menu* để lưu lại và xem kết quả.

Thật đơn giản phải không nào? Chúc các bạn thành công!

Mọi thắc mắc và góp ý về theme Paradise, xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp. Nếu bạn thích có giao diện giống hệt [WP Căn bản](https://wpcanban.com) thì còn chần chừ gì nữa mà không đặt mua ngay bởi vì nó chỉ có giá từ 599.000 VNĐ đến 799.000 VNĐ tùy theo số site được phép cài đặt. Theme hỗ trợ update tự động ngay khi có phiên bản mới với lịch trình update thường xuyên (xem [changelog](https://shop.wpcanban.com/update/changelog.html)).

![mua-paradise-child-theme](https://wpcanban.com/wp-content/uploads/2016/05/nut-dang-ky-tham-gia-mua-chung.png)

*Nếu bạn thích bài viết này, hãy theo dõi blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất nhé. Cảm ơn rất nhiều.* :)
