# 2.2. Nút

Tiện ích **Nút** cho phép bạn thêm và tùy chỉnh các button trên trang landing page của bạn, giúp người dùng thực hiện các hành động như gửi biểu mẫu, truy cập liên kết, hoặc tương tác với các phần khác của trang web.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2F6IdIS7RJVCv0ACNJ7tI9%2Fimage.png?alt=media&#x26;token=9e7ad554-a492-48b5-9c44-e28f92caee3a" alt=""><figcaption></figcaption></figure>

* Đặt **Nút** ở các vị trí chiến lược, chẳng hạn như đầu trang, cuối trang hoặc gần các nội dung chính để thu hút sự chú ý
* Sử dụng các màu sắc nổi bật và rõ ràng để **Nút** dễ nhìn thấy.
* Đảm bảo **Nút** có kích thước đủ lớn để dễ dàng nhấn, đặc biệt trên thiết bị di động.
* Gắn nhãn nút bằng các từ ngữ rõ ràng và khuyến khích hành động như “Đăng ký”, “Mua ngay”, “Tìm hiểu thêm”.

## **1. Thêm Nút vào trang landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Nút** trong mục **Cơ bản.**
* Chọn phần tử **Nút** và kéo vào trang landing page.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FzEbEsZVrngbnhuj1Nefc%2Fimage.png?alt=media&#x26;token=853ee8b0-d199-45e5-b306-ca0d59032217" alt=""><figcaption></figcaption></figure>

## **2. Trình chỉnh sửa Nút**

### **2.1.** Trình chỉnh sửa nội dung

Để mở trình chỉnh sửa **Nội dung,** bạn click vào **Nút** muốn chỉnh sửa trên màn hình ⇒ Chọn **Nội dung** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FvsIIquW5zWLK4pCKH8AM%2Fimage.png?alt=media&#x26;token=420c1ca0-b7ac-4431-a442-af87dadbcdf4" alt=""><figcaption></figcaption></figure>

* **Thay đổi hiển thị:**
  * **Nội dung và biểu tượng:** Nút được hiển thị cả nội dung và biểu tượng, bạn có thể tùy chỉnh nội dung, thay đổi biểu tượng, hướng hiển thị và khoảng cách giữa các phần tử.<br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FTLGClKBaJCKp5YhvucRz%2Fimage.png?alt=media&#x26;token=1e0658cd-ceba-4579-a1bb-e9f188ac4413" alt=""><figcaption></figcaption></figure>
  * **Chỉ biểu tượng:** Nút chỉ hiển thị biểu tượng, bạn có thể thay đổi biểu tượng theo ý thích.<br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FiksX4uxOvl5iTadUwNx5%2Fimage.png?alt=media&#x26;token=3edc6b3c-bd50-40b2-b33c-a6454854d655" alt=""><figcaption></figcaption></figure>
  * **Chỉ nội dung:** Nút chỉ hiển thị nội dung, bạn có thể thay đổi nội dung phù hợp.<br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FGmwldesuLqlDiJ5h1M9z%2Fimage.png?alt=media&#x26;token=083a5664-7bf2-4510-bafb-48631f109b3b" alt=""><figcaption></figcaption></figure>
  * **Để trống:** Nút không hiển thị nội dung hay biểu tượng nào.<br>

    <figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FwTkYsRj97BI5oFK6dUNc%2Fimage.png?alt=media&#x26;token=62cae770-d677-4619-b7a3-c9c80d0aa316" alt=""><figcaption></figcaption></figure>

### 2.2. Trình chỉnh sửa thiết kế

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Nút** muốn chỉnh sửa trên màn hình ⇒ Chọn **Thiết kế** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FFzwAawtmUuo0YXiW0UiX%2Fimage.png?alt=media&#x26;token=b1d21955-f7de-43e2-ac49-65d32becea22" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh nút theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây.**</mark>](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/can-chinh)
* **Kích thước:** Điều chỉnh kích thước của nút, chi tiết [<mark style="color:blue;">**tại đây**</mark>](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** Xác định các thiết bị mà nút sẽ được hiển thị bao gồm Máy tính và Điện thoại
* **Thiết kế:** cho phép bạn thay đổi màu nền và hiệu ứng đổ bóng của nút đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-sidebar/thiet-ke).
* **Kiểu chữ:** tùy chỉnh cách hiển thị của văn bản trên nút như phông chữ, kích thước chữ, chiều cao dòng, khoảng cách giữa các ký tự, trọng lượng chữ, phong cách, chi tiết [<mark style="color:blue;">**tại đây**</mark>](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kieu-chu)<mark style="color:blue;">**.**</mark>
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của nút, bạn cũng có thể điều chỉnh độ bo tròn của viền, chi tiết [<mark style="color:blue;">**tại đây**</mark>](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).

### 2.3. Trình chỉnh sửa nâng cao

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Nút** muốn chỉnh sửa trên màn hình ⇒ Chọn **Nâng cao** trên thanh thiết lập nhanh.

<figure><img src="https://2305753878-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuirRnKaniWtkmyJdKYX4%2Fuploads%2FXNTMev9bnfDo3hYIugzZ%2Fimage.png?alt=media&#x26;token=65e67210-b15c-49a7-968f-879eb16fb1a3" alt=""><figcaption></figcaption></figure>

* **Sự kiện:** Cho phép bạn thiết lập sự kiện cho hành động khi nhấp chuột hoặc hover vào tiện ích, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/su-kien).
* **Hiệu ứng:** Cho phép bạn thêm các hiệu ứng động cho tiện ích trên landing page để tạo sự thu hút và sinh động hơn, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/hieu-ung).
* **Đồng bộ thiết kế Máy tính/ Điện thoại:** Cho phép bạn cài đặt tùy chọn đồng bộ thiết kế giữa máy tính và điện thoại, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/dong-bo-thiet-ke-may-tinh-dien-thoai).
* **Kiểu định vị:** Cho phép bạn lựa chọn kiểu định vị phù hợp để tối ưu hóa trang web và mang lại trải nghiệm tốt nhất cho khách hàng, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/kieu-dinh-vi).
* **Tùy chỉnh nâng cao:** Cho phép bạn tùy biến giao diện và hành vi của thành phần thông qua các lớp CSS và mã CSS tùy chỉnh, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/tuy-chinh-nang-cao).