> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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.md).

# Kiểu định vị

Trong thiết kế **Landing Page**, các kiểu định vị **Mặc định (Default)**, **Pinned**, và **Sticky** có vai trò rất quan trọng để tối ưu trải nghiệm người dùng và tăng tính hiệu quả của trang. Dưới đây là cách áp dụng chúng:

<figure><img src="/files/LRzN8RhKcKvMlSW6l1yV" alt=""><figcaption></figcaption></figure>

#### 1. **Mặc định**

* **Cách hoạt động:** Các phần tử sẽ xuất hiện theo luồng tự nhiên trên trang (flow tự nhiên của HTML/CSS).
* **Ứng dụng trong Landing Page:**
  * Dùng cho các nội dung cơ bản như **văn bản**, **hình ảnh**, **khối thông tin** (text blocks, testimonials).
  * Phần lớn nội dung trên Landing Page thường dùng kiểu này để hiển thị gọn gàng và dễ quản lý.

**Ví dụ:**\
&#x20;      **-** Đoạn văn mô tả sản phẩm/dịch vụ.\
&#x20;      \- Hình ảnh giới thiệu hoặc các khối nội dung bổ sung.

#### 2. **Ghim phần tử**

* **Cách hoạt động:** Phần tử luôn cố định tại một vị trí cụ thể trên màn hình, không thay đổi khi cuộn trang.
* **Ứng dụng trong Landing Page:**
  * **Thanh menu cố định:** Thanh điều hướng (navigation bar) luôn hiển thị ở đầu hoặc cuối màn hình.
  * **CTA (Call-to-Action):** Nút kêu gọi hành động, chẳng hạn nút "Đăng ký ngay" hoặc "Mua ngay", để người dùng dễ dàng tương tác.
  * **Form liên hệ nhanh:** Một form nhỏ ở góc dưới màn hình để khách hàng dễ tiếp cận.

**Ví dụ:**\
&#x20;     **-** Nút "Đăng ký ngay" ở góc phải màn hình.\
&#x20;     \- Biểu tượng liên hệ luôn cố định.

#### 3. **Dính phần tử**

* **Cách hoạt động:**\
  Phần tử "dính" vào một vị trí khi người dùng cuộn qua, nhưng chỉ trong giới hạn của một khu vực nhất định.
* **Ứng dụng trong Landing Page:**
  * **Header Sticky:** Tiêu đề hoặc menu chính bám dính khi người dùng cuộn qua, giúp dễ dàng truy cập các phần nội dung khác.
  * **Mục lục Sticky:** Dùng để hiển thị **mục lục** khi trang có nội dung dài, cho phép người dùng nhảy đến các phần khác nhau.
  * **CTA Sticky:** Khi người dùng cuộn xuống, nút **kêu gọi hành động** (hoặc thông tin khuyến mãi) sẽ bám dính trên trang.

**Ví dụ:**\
&#x20;     \- Thanh điều hướng hiển thị khi cuộn qua phần đầu trang.\
&#x20;     \- Tiêu đề của một bảng giá cố định khi cuộn qua bảng.