# CHÀO MỪNG BẠN ĐẾN VỚI SHOPONE

Chào mừng bạn đến với **ShopOne!**

ShopOne là nền tảng tối ưu giúp bạn dễ dàng tạo, chỉnh sửa và cá nhân hóa Landing Page theo ý thích của mình mà không cần kỹ năng lập trình. Với những công cụ trực quan và dễ sử dụng, bạn có thể nhanh chóng thiết kế các trang giới thiệu sản phẩm, chiến dịch marketing, hay sự kiện đặc biệt, phục vụ cho mọi mục đích khác nhau.

Dù bạn là người mới bắt đầu hay là một chuyên gia trong lĩnh vực thiết kế web, ShopOne đều giúp bạn tạo ra những trang Landing Page **ấn tượng**, **chuyên nghiệp** và **tối ưu hóa trải nghiệm người dùng**.

Khám phá [**ShopOne**](https://shopone.io/) ngay hôm nay và xây dựng những trang đích độc đáo của riêng bạn!

### Bắt đầu ngay hôm nay!

<table data-view="cards"><thead><tr><th data-type="files"></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td><strong>I. TỔNG QUAN VỀ LANDING PAGE</strong></td><td></td><td><a href="/files/OvYILQz4WiyvUGGWu6PU">/files/OvYILQz4WiyvUGGWu6PU</a></td><td></td><td><a href="/pages/dqngV0wM4t5pmLg6CStt">/pages/dqngV0wM4t5pmLg6CStt</a></td></tr><tr><td></td><td><strong>II. KHỞI TẠO LANDING PAGE VỚI SHOPONE</strong></td><td></td><td><a href="/files/B98KdqLAUoWVuNnVcZvZ">/files/B98KdqLAUoWVuNnVcZvZ</a></td><td></td><td><a href="/pages/3HRibWskgr6sTVLx2Ria">/pages/3HRibWskgr6sTVLx2Ria</a></td></tr><tr><td></td><td><strong>III. CÁC CÔNG CỤ THIẾT LẬP CƠ BẢN VỚI LANDING PAGE</strong></td><td></td><td><a href="/files/FdH2BA5tgkgMQnKK1KjJ">/files/FdH2BA5tgkgMQnKK1KjJ</a></td><td></td><td><a href="/pages/GX2uII23T8GRXPFM8C1c">/pages/GX2uII23T8GRXPFM8C1c</a></td></tr><tr><td></td><td><strong>IV. CÁC PHẦN TỬ CƠ BẢN</strong></td><td></td><td><a href="/files/JMymaZeNKf9RJeAEEIyH">/files/JMymaZeNKf9RJeAEEIyH</a></td><td></td><td><a href="/pages/Ay8zF1QKHdmSsBsFX9lm">/pages/Ay8zF1QKHdmSsBsFX9lm</a></td></tr></tbody></table>


# I. TỔNG QUAN VỀ LANDING PAGE

<br>


# 1. Tổng quan

Kinh doanh online được xem là một thị trường lớn đầy tiềm năng và không thể thiếu đối với hầu hết các doanh nghiệp. Áp lực cạnh tranh giữa những người bán ngày càng cao, đòi hỏi phải tạo ra sự khác biệt so với các đối thủ còn lại trên thị trường.&#x20;

Kênh bán hàng đóng vai trò quan trọng trong chiến lược kinh doanh và chiến lược Marketing của doanh nghiệp. Việc lựa chọn và sử dụng hiệu quả các kênh này giúp cho doanh nghiệp tiếp cận được nhiều khách hàng tiềm năng, tăng doanh số và xây dựng thương hiệu mạnh mẽ.

**Landing page** là kênh bán hàng hiệu quả trong việc tiếp cận khách hàng cũng như tối ưu hóa trải nghiệm mua sắm trực tuyến cho khách hàng. Đây là một công cụ kinh doanh và Marketing không thể thiếu, nhưng vẫn chưa được nhiều doanh nghiệp khai thác và sử dụng một cách hiệu quả. Khi được tối ưu hóa đúng cách, landing page có thể tạo ra sự khác biệt lớn trong việc thu hút và chuyển đổi khách hàng tiềm năng, mang lại kết quả vượt trội cho hoạt động kinh doanh.

[**ShopOne**](https://shopone.io/) là một nền tảng thiết kế landing page hiệu quả, giúp bạn tối ưu hóa các chiến dịch Marketing trực tuyến. Với ShopOne, doanh nghiệp có thể dễ dàng tạo ra các landing page hấp dẫn, thu hút khách hàng tiềm năng và tăng tỷ lệ chuyển đổi chỉ với những thao tác kéo thả đơn giản.


# 2. Landing page là gì?

Landing page (trang đích) là một trang web độc lập được thiết kế đặc biệt cho các chiến dịch quảng cáo hoặc Marketing. Đây là trang mà người dùng truy cập tới sau khi nhấp vào một liên kết trong email, quảng cáo từ Facebook, Google, Instagram, Youtube hoặc các trang web tương tự khác. Tại đây, khách hàng có thể tiếp cận được tất cả các thông tin quan trọng như thiết kế, tính năng, điểm nổi bật, chương trình khuyến mãi… của doanh nghiệp. Tỷ lệ chuyển đổi của landing page thường được đánh giá cao cả về số lượng và chất lượng.


# 3. Sự khác nhau giữa Website và Landing page

Trong khi website cung cấp thông tin tổng quát và đa dạng về một doanh nghiệp hoặc tổ chức. Người dùng có thể tìm kiếm và truy cập các trang khác nhau.

Landing page thường chỉ là một trang duy nhất, tập trung vào một thông điệp hoặc ưu đãi cụ thể. Tập trung vào mục tiêu duy nhất là kêu gọi hành động cụ thể hoặc được thiết kế để tối đa hóa tỷ lệ chuyển đổi chuyển đổi khách hàng thông qua thuyết phục.


# 4. Phân loại Landing page

Khi tạo landing page cho doanh nghiệp, cần xác định rõ ràng mục tiêu khởi tạo landing page từ đó lựa chọn loại landing phù hợp nhất.

* **Landing page bán hàng (Sale landing page)**

Mục tiêu chính là **thúc đẩy hành vi mua hàng**. Trang này cung cấp thông tin chi tiết về sản phẩm hoặc dịch vụ, lợi ích và ưu đãi đặc biệt. Nó thường có các yếu tố thuyết phục như đánh giá khách hàng, cảm nhận thực tế và các chương trình khuyến mãi. Mục tiêu cuối cùng là khiến người dùng điền thông tin và thực hiện hành vi mua hàng ngay trên trang.

* **Landing page thu thập thông tin khách hàng (Lead generation landing)**

Mục tiêu là **thu thập thông tin liên hệ của khách hàng tiềm năng**, thường là tên, email, và số điện thoại. Đổi lại, khách hàng sẽ nhận được những giá trị như ebook, mã giảm giá, hoặc dịch vụ miễn phí. Loại trang này hữu ích trong việc xây dựng cơ sở dữ liệu khách hàng cho các chiến dịch marketing tiếp theo.

* **Landing page trung gian chuyển đổi (Click-through page)**

Mục tiêu là **dẫn dắt người dùng đến hành động tiếp theo**, thường là chuyển từ việc tìm hiểu sang thực hiện giao dịch. Loại landing page này thường có nội dung ngắn gọn, tập trung vào thuyết phục người dùng nhấp vào nút kêu gọi hành động (CTA) để chuyển đến trang mua hàng hoặc trang đăng ký chính thức.


# 5. Thiết kế một Landing page ấn tượng

Để thiết kế một **landing page ấn tượng**, cần phải chú ý đến nhiều yếu tố về cả hình thức lẫn nội dung. Dưới đây là một công thức quan trọng để tạo ra một landing page chuyên nghiệp và thu hút:

**Công thức AIDA cho trang Sales Page:**

<figure><img src="/files/sB3G9dvOWpzHqxYjYxHZ" alt=""><figcaption><p>Mô hình AIDA</p></figcaption></figure>

Đối với dạng landing page thu thập thông tin, phần giới thiệu là quan trọng nhất. Trong trường hợp này, chúng ta có thể đưa ngay ưu đãi và mẫu đăng ký lên đầu trang. Tuy nhiên, đối với landing page bán hàng, việc yêu cầu thông tin khách hàng ngay từ phần đầu tiên có thể là quá sớm. Chúng ta cần cung cấp cho họ nhiều thông tin hơn trước khi họ đưa ra quyết định.

**Mô hình AIDA** bao gồm bốn giai đoạn là viết tắt của 4 chữ **Attention (Chú ý)**, **Interest (Quan tâm)**, **Desire (Mong muốn)**, **Action (Hành động)**.

Khi áp dụng mô hình AIDA vào thiết kế landing page, nhiệm vụ của bạn là thu hút khách hàng chú ý đến thương hiệu, khơi gợi sự hứng thú đối với sản phẩm hoặc dịch vụ, sau đó khơi dậy niềm yêu thích về sản phẩm hoặc dịch vụ thương hiệu cung cấp, cuối cùng là khuyến khích họ dùng thử hoặc mua hàng.

* **Attention: Thu hút sự chú ý**

Mở đầu landing page, bạn phải tiếp cận và thu hút sự chú ý của khách hàng về nội dung mà bạn muốn truyền tải. Hãy trực tiếp thể hiện các đặc điểm gây ấn tượng với họ để khơi gợi sự tò mò khiến họ phải dừng lại để tiếp nhận và tìm hiểu thông tin. Các thông điệp được truyền tải cần được trau chuốt vì ấn tượng đọng lại của lần tiếp xúc đầu tiên đối với khách hàng là vô cùng quan trọng.

* **Interest: Tạo sự thích thú**

Sau khi khách hàng đã tiếp nhận các thông điệp mà bạn cung cấp, bạn hãy khơi gợi sự hứng thú của khách hàng bằng việc trình bày sản phẩm hoặc dịch vụ của mình thông qua hình ảnh và video minh họa tính ứng dụng thực tế của sản phẩm dịch vụ trong cuộc sống. Bạn nên liệt kê các lợi ích mà sản phẩm mang lại cho khách hàng. Nắm rõ được vấn đề của khách hàng để đưa ra những nội dung chạm đúng insight của họ.

Mục tiêu của giai đoạn tạo sự thích thú này là tiếp tục giữ chân khách hàng càng lâu càng tốt. Khi bạn có được một lượng lớn khách hàng theo dõi thông tin của bạn, dù những khách hàng này chưa tạo ra chuyển đổi nhưng bạn đã thành công trong giai đoạn này.

* **Desire: Khơi gợi niềm khao khát, mong muốn**

Ở giai đoạn này, tiếp tục cung cấp những thông tin cụ thể hơn cho khách hàng để họ thấy được những gì bạn mang tới có thể giải quyết được các vấn đề của họ một cách nhanh chóng và hiệu quả.

Khách hàng đang tìm kiếm những giải pháp tốt hơn, hiện đại hơn. Hãy mô tả những tính năng sản phẩm của mình, nêu ra công dụng của mỗi tính năng. Bạn nên đưa ra những tính năng có tác động mạnh nhất đến cảm xúc của khách hàng tiềm năng. Sau đó, hãy cho họ biết bạn có thể giải quyết vấn đề của họ tốt như thế nào và vì sao họ nên lựa chọn bạn thay vì những đối thủ cạnh tranh khác.

* **Action: Hành động**

Sau khi để người xem theo dõi toàn bộ câu chuyện bạn đưa ra, thì đây sẽ là phần mà bạn nên đặt Form đăng ký và CTA. Khi đã có đầy đủ sự quan tâm, thích thú và niềm khao khát, bạn hãy chủ động trong việc dẫn dắt khách hàng đi theo những hành động mà bạn mong muốn.

**Form đăng ký:** Cần có tiêu đề để miêu tả ý nghĩa. Bạn cần thể hiện được tính khẩn thiết và khan hiếm của sản phẩm dịch vụ hay chương trình khuyến mãi bạn đưa ra để thúc đẩy khách hàng hành động. Hãy cố gắng chỉ hỏi những thông tin cần thiết để bạn có thể chạy marketing một cách hiệu quả.

**CTA:** Phải miêu tả chính xác những gì khách hàng sẽ nhận được khi click vào nút này.


# II. HƯỚNG DẪN TẠO LẬP LANDING PAGE TỪ A-Z

**Landing page** là công cụ quan trọng trong việc thu hút khách hàng, quảng bá sản phẩm, hoặc triển khai các chiến dịch Marketing hiệu quả. Hướng dẫn này sẽ giúp bạn dễ dàng xây dựng một trang landing page từ đầu đến cuối một cách đơn giản và dễ hiểu dù bạn là người mới bắt đầu, chưa có kinh nghiệm.

#### Bước 1: Đăng ký hoặc đăng nhập tài khoản tại ShopOne để bắt đầu sử dụng dịch vụ miễn phí.

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

#### Bước 2: Lựa chọn cách tạo lập landing page.

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

* **Sử dụng mẫu:** Cho phép người dùng chọn mẫu template được cung cấp sẵn bởi ShopOne tại Thư viện mẫu.<br>

  <figure><img src="/files/upyGoQiym3VCkkKSpiQW" alt=""><figcaption></figcaption></figure>
* **Sử dụng trang trắng:** Tạo mới landing page trắng cho người dùng thiết kế theo ý thích.
* **Nhập dữ liệu:** Cho phép người dùng nhập mẫu template có sẵn từ thiết bị.

#### Bước 3: Nhập tên trang và chọn giao diện thiết kế ⇒ Tạo mới.

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

#### Bước 4: Sau khi tạo lập landing page thành công, chọn “Chỉnh sửa” để bắt đầu thiết kế.

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

#### Bước 5: Chỉnh sửa landing page, sau khi hoàn tất nhấn “Xuất bản”.

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

#### Bước 6: Nhập đầy đủ thông tin và liên kết tên miền riêng (nếu có).

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

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

#### Bước 7: Bấm “Xuất bản ngay” và hoàn thành tạo lập landing page của bạn.

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

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


# 1. Trang Dashboard

Sau khi đăng nhập thành công, màn hình sẽ chuyển tới trang [**Dashboard**](https://admin.shopone.io/dashboard/landing-pages) quản lý danh sách landing page của bạn.

* Nếu bạn là người dùng mới, giao diện sẽ chưa có landing page nào. Việc của bạn là tạo landing page mới và tiến hành chỉnh sửa.

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

* Nếu bạn đã từng tạo landing page trên ShopOne, giao diện sẽ hiện lên danh sách các landing page bạn đã tạo từ trước.

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


# 1.1. Chuyển đổi không gian làm việc

Chức năng C**huyển đổi không gian làm việc** cho phép bạn chuyển đổi giữa các không gian làm việc khác nhau. Việc chuyển đổi giữa các không gian làm việc này cho phép bạn dễ dàng quản lý các dự án cá nhân và dự án nhóm của mình một cách hiệu quả.

Tại trang Dashboard, nhấp chuột vào biểu tượng không gian làm việc của bạn ở góc bên phải của trang web, một danh sách các không gian làm việc sẽ xuất hiện, hãy lựa chọn không gian bạn muốn chuyển đổi.

* **Tài khoản của bạn:** Đây là không gian làm việc cá nhân, nơi bạn quản lý các dự án riêng của mình
* **Team của bạn:** Đây là không gian làm việc nhóm, nơi bạn và các thành viên khác trong nhóm có thể cộng tác trên cùng một dự án

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


# 1.2. Thông báo

Chức năng T**hông báo** giúp cho bạn nhận được những cập nhật quan trọng từ hệ thống và các hoạt động liên quan.

Bạn di chuyển chuột lên góc trên cùng bên phải, nhấp vào biểu tượng thông báo, một menu thả xuống sẽ xuất hiện danh sách các thông báo của bạn bao gồm thông báo chung và thông báo của nhóm.

<figure><img src="/files/6dDBzl9o7DH7Kbg9lenn" alt=""><figcaption></figcaption></figure>


# 1.3. Ngôn ngữ

Chức năng **Chuyển đổi ngôn ngữ** giúp bạn dễ dàng thay đổi ngôn ngữ hiển thị của website theo ý muốn của bạn.

Bạn nhấp chuột vào biểu tượng ngôn ngữ phía trên cùng bên phải, sau đó lựa chọn ngôn ngữ phù hợp của bạn.

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


# 1.4. Tạo trang landing page mới

Để **tạo 1 landing page** mới, trên màn hình Dashboard, bạn nhấp vào **Tạo mới**

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

### Có 3 cách để tạo landing page trên ShopOne:

#### **Cách 1:**  Tạo landing page trắng.&#x20;

* Sau khi nhấp vào **Tạo mới**, bạn lựa chọn **Sử dụng trang trắng** để tạo trang landing page trắng.

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

* Nhập tên bạn muốn đặt cho landing page. Sau đó lựa chọn loại giao diện landing page, bạn có thể lựa chọn kiểu thiết kế **Máy tính và điện thoại** để giao diện tương thích với mọi thiết bị, hoặc lựa chọn **Chỉ dành cho điện thoại** để giao diện chỉ hiển thị chuẩn trên thiết bị di động.

<figure><img src="/files/4EW9BhtQ8XlV9bcU2WiS" alt=""><figcaption></figcaption></figure>

#### **Cách 2:** Sử dụng hệ thống template landing page có sẵn của ShopOne để chỉnh sửa.&#x20;

Bạn có thể chọn **Sử dụng mẫu** sau khi nhấp **Tạo mới** hoặc nhấp vào **Thư viện mẫu** của thanh công cụ bên trái. Sau đó lựa chọn mẫu landing page phù hợp với mục đích của bạn.

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

<figure><img src="/files/6t4Qn0FWgB34zwmSXzwK" alt=""><figcaption></figcaption></figure>

#### **Cách 3:** Bạn có thể tải lên và chỉnh sửa một landing page có sẵn trên ShopOne.&#x20;

Sau khi nhấp vào **Tạo mới**, chọn **Nhập dữ liệu** và tải file landing page từ máy tính của bạn lên website.

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


# 1.5. Tìm kiếm landing page

Chức năng **Tìm kiếm** giúp bạn dễ dàng tìm thấy landing page mong muốn một cách dễ dàng. Kết hợp với việc sử dụng bộ lọc trạng thái, thành viên giúp thu hẹp kết quả tìm kiếm theo các tiêu chí cụ thể giúp tiết kiệm thời gian.

Nhập từ khóa hoặc cụm từ bạn muốn tìm kiếm vào thanh tìm kiếm, sau đó thay đổi các tiêu chí tìm kiếm tại bộ lọc tìm kiếm bên phải.

* **Không gian làm việc cá nhân:**

Nhập tên landing page bạn muốn tìm kiếm

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

Lựa chọn trạng thái của landing page để tìm kiếm dễ dàng hơn bao gồm các trạng thái lưu nháp, đã xuất bản, dừng xuất bản

<figure><img src="/files/9gw28D4gN62TiAeyYE1a" alt=""><figcaption></figcaption></figure>

* **Không gian làm việc team:**

Nhập tên landing page bạn muốn tìm kiếm

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

Lọc landing page theo trạng thái và thành viên tạo landing page

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


# 2. Các thao tác với landing page


# 2.1. Xem chi tiết landing page

Trang **Chi tiết báo cáo landing page** giúp bạn hiểu rõ hiệu suất của trang landing page của bạn trong chiến dịch marketing hoặc quảng cáo.

Để xem chi tiết báo cáo landing page, bạn có thể nhấp chuột vào **tên trang landing page** hoặc nhấp vào **Báo cáo**.

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

**Trang chi tiết landing page:**

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

* **Thời gian:** Bạn có thể lọc báo cáo theo thời gian để phân tích hiệu suất của trang trong các khoảng thời gian cụ thể.
* **Phiên đăng nhập:** Cho biết số lần người dùng truy cập vào trang landing page page. Đây là chỉ số quan trọng để đo lường mức độ quan tâm và sự tương tác của người dùng với trang.
* **Khách:** Cho biết số người truy cập vào trang landing page trong khoảng thời gian cụ thể.
* **Lượt submit form:** cho biết số người gửi thông tin qua biểu mẫu trên trang landing page. Đây là chỉ số quan trọng để đánh giá hiệu quả của trang landing page trong việc chuyển đổi người truy cập thành khách hàng tiềm năng.
* **Lưu lượng truy cập:** biểu đồ tổng quan lưu lượng truy cập của khách hàng theo thời gian.
* **Nguồn lưu lượng hàng đầu:** cung cấp thông tin về các nguồn lưu lượng truy cập chính (ví dụ Blog, Facebook, Tiktok, Zalo, Gmail…). Điều này giúp bạn biết được khách hàng đến từ kênh nào và đánh giá hiệu quả của các kênh.
* **Thiết bị:** cho biết các loại thiết bị mà người dùng sử dụng để truy cập trang landing page ví dụ như máy tính, điện thoại. Điều này giúp bạn tối ưu hóa trang landing page cho các thiết bị khác nhau.


# 2.2. Sao lưu dữ liệu

**Sao lưu dữ liệu** landing page là một bước quan trọng để bảo vệ thông tin quan trọng và đảm bảo rằng bạn có thể khôi phục dữ liệu trong trường hợp xảy ra sự cố.

Tại landing page bạn muốn sao lưu, di chuyển và nhấp chuột vào **Sao lưu dữ liệu.**

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


# 2.3. Trang chỉnh sửa landing page

**Trang Chỉnh sửa landing page** là trang thiết lập giao diện cho landing page.

Bạn có thể truy cập trang chỉnh sửa bằng cách:

* Tại trang Dashboard, nhấp vào phần **Chỉnh sửa** của trang landing page cần thiết lập giao diện.

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

* Khi bạn lựa chọn landing page mẫu trong hệ thống landing page, nhấp vào **Sử dụng**  sẽ dẫn bạn sang trang thiết lập giao diện của landing page đó.

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

**Trang chỉnh sửa landing page:**

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

Nhấp vào Quay lại Dashboard nếu bạn muốn thoát khỏi trang chỉnh sửa của ShopOne

Nhấp Log Out để đăng xuất khỏi tài khoản

<figure><img src="/files/3poucsQxIqOIr0DeUX1J" alt=""><figcaption></figcaption></figure>


# 2.4. Sửa tên

Chức năng **Sửa tên** cho phép bạn đổi tên landing page để dễ dàng nhận biết và phân biệt với các landing page khác.

Tại trang landing page bạn muốn đổi tên, nhấp chuột vào biểu tượng xem thêm sau đó lựa chọn **Sửa tên** và nhập tên bạn muốn thay thế.

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

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


# 2.5. Nhân bản

Chức năng **nhân bản** cho phép bạn tạo ra 1 bản sao của landing page hiện có trên trang web. Điều này rất hữu ích khi bạn muốn tạo ra nhiều phiên bản của một sản phẩm với các biến thể khác nhau mà không cần phải nhập thông tin từ đầu.

Nhấp vào biểu tượng xem thêm của landing page cần nhân bản, sau đó nhấp vào **Nhân bản** để nhân bản landing page.

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

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

Sau khi nhân bản landing page, bạn có thể chỉnh sửa 1 landing page với giao diện y hệt landing page được nhân bản.

<figure><img src="/files/9ssDJnETBR60HD44IiKZ" alt=""><figcaption></figcaption></figure>


# 2.6. Xuất file

Chức năng **Xuất file** landing page cho phép bạn xuất các landing page dưới các định dạng phổ biến, giúp bạn lưu trữ, chia sẻ hoặc sử dụng lại các trang đích này một cách dễ dàng.

Nhấp vào biểu tượng xem thêm của landing page cần xuất file, sau đó nhấp vào **Xuất file** để xuất landing page.

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

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


# 2.7. Xóa

Chức năng **Xóa** giúp bạn loại bỏ các landing page không còn cần thiết hoặc không sử dụng đến. Việc loại bỏ landing page giúp bạn quản lý danh sách landing page một cách gọn gàng, dễ dàng tìm kiếm và cập nhật.

Nhấp vào biểu tượng xem thêm của landing page cần xóa, sau đó nhấp vào **Xóa** để xóa landing page.

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

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


# 3. Các tính năng trong Dashboard


# 3.1. Thư viện mẫu

**Thư viện mẫu** là hệ thống giao diện mẫu của ShopOne với đa dạng chủ đề và ngành nghề cho phép người dùng tham khảo và sử dụng các landing page có sẵn để dễ dàng tạo và tùy chỉnh landing page cho dự án của mình.

Tại đây, bạn có thể tìm kiếm landing page theo từ khóa bạn mong muốn, hoặc thông qua gợi ý của ShopOne. Bạn có thể sử dụng landing page bằng việc nhấp vào **Sử dụng** để truy cập vào trang chỉnh sửa và bắt đầu chỉnh sửa, hoặc nhấp vào **Xem trước** để xem toàn bộ landing page trước khi sử dụng.

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


# 3.2. Dữ liệu biểu mẫu

**Dữ liệu biểu mẫu** cho phép bạn quản lý và xử lý thông tin thu thập được từ khách hàng khi họ nhập vào từ các biểu mẫu trên landing page.

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

**Các thao tác với dữ liệu biểu mẫu:**

<figure><img src="/files/0TsvfhFH5vIMhZ1yK9X7" alt=""><figcaption></figcaption></figure>

* **Chi tiết:**

Bạn có thể xem **chi tiết** những thông tin khách hàng đã điền biểu mẫu tại phần này. Các trường thông tin cần thiết như: thông tin form mặc định, thông tin form mở rộng, thông tin vận chuyển.

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

* **Trạng thái:**

Chức năng **trạng thái** cho phép bạn quản lý trạng thái các dữ liệu của landing page. Các trạng thái bao gồm Đã xử lý, Hủy, Chi tiết và Xóa.

* **Thẻ khách hàng:**

**Thẻ khách hàng** là các thuộc tính được gán cho các dữ liệu biểu mẫu của khách hàng để phân loại và lọc thông tin một cách hiệu quả. Các thẻ khách hàng bao gồm: thành viên (theo thành viên trong workspace tạo landing page), landing page, trạng thái (theo trạng thái xử lý dữ liệu khách hàng)

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

* **Xuất file**

Tính năng **xuất file** cho phép bạn tải xuống dữ liệu thu thập được từ các biểu mẫu trên landing page của mình dưới dạng Excel để dễ dàng phân tích, lưu trữ hoặc chia sẻ.&#x20;

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

* **Nhập file**

Tính năng **nhập file** cho phép bạn đưa dữ liệu vào biểu mẫu từ các nguồn bên ngoài như file Excel, để tự động điền hoặc cập nhật thông tin trên hệ thống của bạn. Đây là cách nhanh chóng và hiệu quả để xử lý dữ liệu từ các nguồn khác.

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

Bạn cần nhập file với tên các cột trong file excel đúng với tên trường trong dữ liệu khách hàng để dữ liệu được nhập lên hệ thống một cách chính xác nhất.

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

**Trong đó:**

\+ Name: tên khách hàng

\+ Phone: số điện thoại

\+ Address: địa chỉ

\+ Status: tình trạng

\+ Created: thời gian tạo

\+ Created ID: số ID người tạo

\+ Updated: thời gian cập nhật

\+ Updated ID: số ID người cập nhật&#x20;

\+ Workspace ID: số ID không gian làm việc

\+ Site ID: số ID trang

* **Thời gian:**

Phần **thời gian** giúp bạn lọc dữ liệu theo một khoảng thời gian cụ thể.

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

* **Thêm dữ liệu**

Chức năng **Thêm dữ liệu** giúp bạn thêm mới các dữ liệu của landing page.

Tại màn hình của Dữ liệu biểu mẫu, nhấp chuột vào biểu tượng Thêm dữ liệu, sau đó điền các thông tin cần thiết để tạo dữ liệu biểu mẫu cho landing page.

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

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


# 3.3. Tên miền

Cài đặt T**ên miền** riêng của bạn để kết nối với các landing page trước khi xuất bản.

Tại màn hình của Tên miền, nhấp chuột vào biểu tượng **Liên kết tên miền** sau đó điền thông tin tên miền để thêm tên miền

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

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

**Các hoạt động đối với tên miền:** Chỉnh sửa, xác minh, xóa

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

* **Chỉnh sửa tên miền:** cho phép người dùng thay đổi tên miền liên kết với landing page

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

* **Kiểm tra xác minh:** cho phép xác nhận rằng tên miền đã được đăng ký và sử dụng cho landing page một cách chính xác

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

* **Xóa tên miền:** giúp bạn loại bỏ hoặc ngừng sử dụng một tên miền đã đăng ký.

<figure><img src="/files/6CmUWmcW3tcCafBI8uO6" alt=""><figcaption></figcaption></figure>


# 3.4. Cài đặt

Phần **cài đặt** chỉ có ở giao diện không gian làm việc của team, gồm có phần **Thành viên** để Xem và quản lý danh sách các thành viên của từng landing page

* **Quản trị viên:** Quản lý toàn bộ hệ thống, bao gồm tạo và xóa người dùng, thay đổi cài đặt, quản lý nội dung, xem báo cáo, và thực hiện mọi tác vụ quản trị khác.
* **Quản lý:** Quản lý nhân viên, phê duyệt nội dung, xem và chỉnh sửa landing page, theo dõi hiệu suất và báo cáo.
* **Nhân viên:** Tạo và chỉnh sửa nội dung landing page, quản lý khách hàng, hỗ trợ dự án, nhưng không có quyền phê duyệt hoặc truy cập các cài đặt quan trọng.
* **Nhân viên bán hàng:** Truy cập và quản lý thông tin khách hàng, tạo báo giá, theo dõi trạng thái đơn hàng và khách hàng tiềm năng, nhưng không có quyền chỉnh sửa nội dung landing page.

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

**Thêm thành viên mới:** cho phép bạn mời thành viên vào nhóm hay dự án làm việc của mình.

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

**Xóa hoặc chỉnh sửa thành viên:** cho phép bạn cập nhật thông tin thành viên hoặc xóa thành viên khỏi hệ thống

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


# 3.5. Tài khoản

**Tài khoản** là nơi cho phép bạn quản lý các thông tin và cài đặt liên quan đến tài khoản của bạn.

Nhấp vào biểu tượng **Tài khoản** trên thanh điều hướng bên trái để thực hiện các thao tác với tài khoản của bạn.

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

* **Cài đặt tài khoản:** cho phép người dùng quản lý các thông tin cá nhân và cài đặt liên quan đến tài khoản của họ.

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

* **Mật khẩu:** Chức năng này cho phép người dùng cập nhật mật khẩu mới để tăng cường bảo mật tài khoản.

<figure><img src="/files/8iSvXtijZE3wyqQIGuDu" alt=""><figcaption></figcaption></figure>

* **Đăng xuất:** Cho phép người dùng thoát khỏi tài khoản của mình một cách an toàn.

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


# 1. Khái niệm về tên miền

### Tên miền là gì? <a href="#id-1.-ten-mien-la-gi" id="id-1.-ten-mien-la-gi"></a>

**Tên miền** chính là tên của một trang web hoạt động trên internet, là địa chỉ cho mỗi website. Tên miền giúp cho người dùng dễ dàng nhận biết và nhớ đến trang web của bạn. Có thể hình dung tên miền giống như địa chỉ nhà hay mã zipcode để định vị. Nhờ vào đó mà người dùng có thể tìm đến được website của bạn. Mỗi một tên miền là độc nhất, nếu người khác đã sở hữu tên miền đó thì bạn sẽ không thể mua nữa.

### Ý nghĩa của một số đuôi tên miền phổ biến. <a href="#id-2.-y-nghia-cua-mot-so-duoi-ten-mien-pho-bien" id="id-2.-y-nghia-cua-mot-so-duoi-ten-mien-pho-bien"></a>

Bạn có thể tham khảo ý nghĩa của một số đuôi tên miền phổ biến ở dưới đây:

* .vn Tên miền quốc gia Việt Nam
* .com (Communication - Dành cho mọi đối tượng, cá nhân, doanh nghiệp)
* .net (Network - Dành cho các nhà cung cấp dịch vụ web, net)
* .org (Organization - Các tổ chức phi chính phủ hoặc phi lợi nhuận)
* .biz (Business - Dùng cho các trang thương mại)
* .gov (Government - Dành cho các tổ chức chính phủ)
* .edu (Education - Dành cho các tổ chức giáo dục đào tạo)
* .info (Information - Website về lĩnh vực thông tin)
* .name (Name - Sử dụng cho trang cá nhân, blog, website cá nhân)

### Một số nhà cung cấp tên miền phổ biến. <a href="#id-3.-mot-so-nha-cung-cap-ten-mien-pho-bien" id="id-3.-mot-so-nha-cung-cap-ten-mien-pho-bien"></a>

* [https://nhanhoa.com/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://www.pavietnam.vn/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://www.matbao.net/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://tenten.vn/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://hostvn.net/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://vn.godaddy.com/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://name.com/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://www.namecheap.com/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)
* [https://www.cloudflare.com/](https://nhanhoa.com/https://www.pavietnam.vn/https://www.matbao.net/https://tenten.vn/https://hostvn.net/https://vn.godaddy.com/https://name.com/https://www.namecheap.com/https://www.cloudflare.com/)

Sau khi đã mua tên miền, bạn sẽ cần trỏ tên miền này về hosting của ShopOne, sau đó sẽ liên kết đến các trang Landing Page mà bạn đã tạo. Một tên miền sau khi mua bạn có thể tạo ra nhiều tên miền phụ (Subdomain):

Ví dụ: Tên miền của bạn: **tenmien.vn**. Bạn có thể tạo ra nhiều tên miền phụ: **tintuc.tenmien.vn, san-pham.tenmien.vn, blog.tenmien.vn...**

Sau khi trỏ tên miền về hệ thộng của ShopOne bạn cũng sẽ tạo têm được nhiều thư mục con và trỏ về từng LandingPage: **tenmien.vn/sanpham1, tenmien.vn/san-pham, tenmien.vn/gioi-thieu...**

{% hint style="info" %}
***Lưu ý:** Sau khi trỏ tên miền bạn sẽ cần đợi nhà cung cấp tên miền cập nhật, thời gian có thể lên tới 24h. Thời gian cập nhật cũng có thể nhanh hơn (thường ít hơn 2h tùy vào nhà cung cấp tên miền bạn đăng ký).*
{% endhint %}


# 2. Liên kết tên miền tại ShopOne


# 2.1. Liên kết tên miền với nền tảng ShopOne Cloud DNS

**Để liên kết tên miền riêng của bạn tại ShopOne, bạn hãy thực hiện theo các bước sau:**&#x20;

**Bước 1: Truy cập vào mục "Tên miền" -> nhấn nút "Liên kết tên miền".**

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

**Bước 2: Chọn nền tảng ShopOne Cloud DNS -> Nhập tên miền của bạn và nhấn nút "Thêm".**

* **Cách 1: Liên kết bằng tên miền chính**\
  \
  Giả sử, bạn có tên miền riêng **tenmiencuaban.com**. Để liên kết bằng tên miền chính, bạn nhập tên miền theo hình ảnh hướng dẫn sau:

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

{% hint style="info" %}
***Lưu ý:** Nếu bạn sử dụng tên miền chính, bạn cần phải nhập tiền tố **"www".***
{% endhint %}

* **Cách 2: Liên kết bằng tên miền phụ**\
  \
  Giả sử, bạn có tên miền riêng **tenmiencuaban.com**. Để liên kết bằng tên miền phụ, bạn nhập tên miền theo hình ảnh hướng dẫn sau:

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

**Bước 3: Xác minh tên miền.**

Tại hộp thoại **Kiểm tra xác minh**, bạn cần lấy thông tin để thực hiện trỏ tên miền ở nơi bạn mua tên miền riêng.

* Đối với liên kết tên miền chính, bạn cần cấu hình 2 bản ghi sau:

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

* Đối với liên kết tên miền phụ, bạn cần cấu hình bản ghi sau:&#x20;

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

Sau khi trỏ tên miên, bạn ấn nút **Kiểm tra** để hệ thống tiến hành quá trình xác minh.

* Nếu xác minh thành công, bản ghi sẽ hiển thị trạng thái **"Đã xác minh"**.<br>

  <figure><img src="/files/gJ5u7ybnUNYnSbZirPLf" alt=""><figcaption></figcaption></figure>
* Nếu xác minh thất bại, hệ thống sẽ hiển thị thông báo yêu cầu kiểm tra lại DNS của bạn.<br>

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

**Bước 4: Bật bảo mật SSL cho tên miền.**

**SSL (Secure Sockets Layer)** là tiêu chuẩn của công nghệ bảo mật, truyền thông mã hoá giữa máy chủ Web server và trình duyệt (browser). Chúng tôi khuyến khích bạn bật SSL để bảo vệ thông tin cá nhân và đảm bảo sự an toàn trong giao tiếp trên mạng. Để tìm hiểu chi tiết về chứng chỉ bảo mật SSL, bạn có thể tham khảo [**tại đây.**](https://wiki.matbao.net/ssl-la-gi-tong-quan-ve-ssl/)

**Cách bật SSL trong ShopOne:**&#x20;

Sau khi kết nối và xác thực tên miền thành công, bạn nhấn chọn nút **Tùy chọn** và chon **"Bật SSL tên miền non-www".**

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

Hệ thống sẽ tiến hành khời tạo và cập nhật trạng thái sau khi thành công.

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


# 2.2. Liên kết tên miền với nền tảng Wordpress

Để liên kết tên miền với nền tảng WordPress bạn cần thực hiện theo hai phần sau đây:

### Phần 1: Cài đặt Plugin ShopOne trong Wordpress. <a href="#phan-1-cai-dat-plugin-ladipage-trong-wordpress" id="phan-1-cai-dat-plugin-ladipage-trong-wordpress"></a>

**Bước 1:** Đăng nhập trang quản trị website WordPress của bạn với **quyền Admin.**

**Bước 2:** Tại menu **Plugins** chọn **Add New Plugin** để cài đặt plugins mới.

**Bước 3:** Chọn Tệp file plugin ShopOne để cài đặt plugin vào Wordpress

{% hint style="danger" %}
Tải tệp cài đặt ứng dụng plugin ShopOne [tại đây.](https://shopone.io/plugins/shopone.zip)
{% endhint %}

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

{% hint style="danger" %}
**Lưu ý:** Trong trường hợp tải file báo lỗi, vui lòng kiểm tra lại thông tin hosting, xem cấp quyền tải file không.
{% endhint %}

**Bước 4:** Bấm chọn ShopOne Page vừa cài, sau đó sao chép lại nội dung trong 2 ô **API KEY** và **Website URL (Lưu ý: bấm Save Changes sau khi lấy API).**

<figure><img src="/files/7A25HKRqR9gmOjUWP3P9" alt=""><figcaption></figcaption></figure>

### Phần 2: Liên kết tên miền với nền tảng Wordpress. <a href="#phan-2-xuat-ban-landing-page-thanh-thu-muc-con-tren-wordpress" id="phan-2-xuat-ban-landing-page-thanh-thu-muc-con-tren-wordpress"></a>

**Bước 1: Truy cập vào mục "Tên miền" -> nhấn nút "Liên kết tên miền".**

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

**Bước 2: Chọn nền tảng Wordpress -> Nhập Store URL + API KEY và nhấn nút "Thêm".**

Sau đó hệ thống sẽ tiến hành xác thực thông tin với plugin ShopOne trong Wordpress.

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


# 3. Trỏ tên miền về ShopOne


# 3.1. Trỏ tên miền về ShopOne

### Trỏ tên miền chính (Domain)

Người dùng vào phần quản trị tên miền ở nơi bạn mua tên miền và cấu hình 2 bản ghi sau để điều hướng tên miền đó trỏ về địa chỉ của ShopOne: &#x20;

<img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfH5EIGUdp6SalLIZ0zWHnVsdr1J0IykZrR5nej4n8-ubUuy7NhBmHY59Ir6bE3ZYQ6c3QgKfacUiNYEzOWqQJ2XbPyJrlX09ZN7QwLY3GsL4Rs_XK-acrATfgzIGPw7l-4Jc764w?key=esCSHIze93gbmIh433_vf-YE" alt="" data-size="original">

và

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeBL6xnDFUtaPizi1kx63m8No8AmE-eZZjAPHI6zRv0AIj3i5raU3ajCslb0H4nq9t5H3g-QpQsbYL5xUUfVWJ86jSsBXfxB0JrD4Jvxubw9sz_c4H6Gb4WgA41WOSMLHd1A2ABNA?key=esCSHIze93gbmIh433_vf-YE)

{% hint style="info" %}
***Lưu ý:** Khi sử dụng và lên chiến dịch nếu dùng tên miền chính, mọi người nên dùng kèm tiền tố "**www".***
{% endhint %}

### Trỏ tên miền con (Subdomain)

Giả sử tên miền chính của bạn là[ ](http://tenmien.com)**tenmiencuaban.com**, và bạn muốn tạo một tên miền phụ là[ ](http://dangky.tenmien.com)**sanpham.tenmiencuaban.com** thì:&#x20;

Chọn tên miền chính mà bạn muốn cài đặt, sau đó tạo một bản ghi mới và điền các giá trị như sau:

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcpeqgZU2ja1rvCfSfw0vHVO-v1BjC14C19byUIKXg4m-KN6fbB0rZ3TV0iNNA9yCJ7WkAcjbtwhUB6RZPm9wreudttp_ip2fUOJTKIibnb7xL8TaIQvlOY13I2AWgjhvNCQ1pUHw?key=esCSHIze93gbmIh433_vf-YE)


# 3.2. Kiểm tra DNS

Để kiểm tra DNS đã được cấu hình đúng chưa, truy cập:[ https://dns.google.com/](https://dns.google.com/)  và dán tên miền của bạn vào để kiểm tra:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXchXegvoTjqM5cWRl_kn-zqMMQuFQHpvbyoMHDduhlzLO1_iJoYwsrenH463zjLCHRs2h4TrLV81AVKM-7OBQEclqg5cXtXBnhdLhBqpRr98_jkecipr0il7xwHqKakJGhaGZLm?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Màn hình sẽ hiện lên thông tin tên miền của bạn, kiểm tra:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdLONBj6THaHR2RMS9cwqKJsb-9SRM6BnhVNoIp1PWVQ3F3GEwuAA1JpKK2Hk-GCgnDdXpIMiAw4iLQhsRx2K2B1y20oBtk86bm31L8n9ThnVjEM9LrN5G5sjrtC5ridTFPp3pdaw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4. Trỏ tên miền từ một số nhà cung cấp phổ biến


# 4.1. Trỏ tên miền từ Godaddy

#### Bước 1: Truy cập vào trang quản lý tên miền của Godaddy và nhập thông tin tài khoản: <https://sso.godaddy.com/>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfV_dgksBsQPsmkv9e9FBDz8sfGK91Fc8YMIty1W-K2DkDqOxpG_MkByJAz3r2Iu0urMQYZMhBpX1hVxpp2KN_yHYG3Gyegd-mVf1EiN3ClRFtrLQRE7NVHodL8-XVNWOS3YF9ZQg?key=esCSHIze93gbmIh433_vf-YE" alt="" width="563"><figcaption></figcaption></figure>

#### Bước 2: Vào trang My Products để đến trang quản lý các tên miền đã mua -> Chọn tên miền bạn muốn sử dụng.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcK9r4dK_77cQePebRCdbVzH0vr6S1dpQxIFSAfUs1m2JzDPYwsnTxLJMPb43VMro7ExgbMNtJB3_N7tKRn3az3D4SZWdYQAKyhWPFr-v91UMQqOsNS7xxMgIq6l7FMo_SqNxlWqQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe--rckv1PlDeFBVMAdqht2asliSaBoDP9pIUpeAs2uRDoNKLpn5TWhCeb8DL3eSOQFre9mOw7ijwWbotk5z3odlbChF6_3Y1QIOIGbwd1pcKcv6XzDPVJGiHGlRBrwRv5Mh-hd?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Cài đặt: Chọn Domain -> Manage DNS -> Add New Record.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXchfrUpjH7F5IfNSPoBDq2bDcxrq1zUGIBE5W0-xSBSCkOXqIgWbbga3yWkn_-zXhalGvMsIKKWqLEtOvT4gdmam-AAtCzIWEZCYAIl4o4UgIoHfOd0AT67kFh5OzHdfaAOIAgJsQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXevU9CuOEZaQojkQ7Rxj90pqr5eYQvDSIuF5eY5dw7W6ydcRFE9HWR93pNft_3ebPOiarLNtl8Otjy_qpV7Q11S5EeJmqToOf6xRnKZAPcah1UcM3ZWQbPvFdLNmk1OdC3GfmkV?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXccheIh7YQwJeurSHj5ob6iALGHft_kF9EmIyKcFBMVvXl8j4CUiA9KnWV-NidDniBw5eFTi57lcE-n-JymIGLd7R3hppONUk2TMVz3vVDdHmNrt6GoodfaQ1JOZLFjUiBdtUJxgw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 4: Trỏ tên miền.

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản ghi như sau:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcV_jveTqK-v5q481QtTbmO3AWN-FYDCLGWpqKuY-MeMDgJjWKLQGVwouxa-E-El3GfZ9ntN4gKs8qYhSUeCJ6wbbfD9ofJ7veex8Sd8uQUalWG7Fd7sOfMJ5DzdMw2G1eFouMgRw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcCpwjMXgenzLUfnOJsg5G22XmUByrOHyQyJwASgjT4dW_fDBRy2xXxbajpSuw5sKTRZCRr1wd1mMH8ZYo9xz3IzIim48lEMLKr6W3BDnLTdGs7x9aj2TSW50xi1Ho5klF6tCt7?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**

Giả sử bạn có tên miền **tenmien.vn,** bạn muốn tạo và sử dụng một tên miền phụ:

Ví dụ 1: **sanpham.tenmien.vn**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfY6x7mjPvrZaFRODHKoNdD9dZg1WYeyn-MkD3qL7PGjuIW35CgpiHHDY3zF5-b9o9m5wiDZISMc1F1QwdT4lTqCG95e5_PoLmw0-LCnhtzEZf3JE4-xIB5qoUTG89sm_72nt7E2Q?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Ví dụ 2: **san-pham.tenmien.vn**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGiZM4WPdoxmZTntcHMcUDdLJLN6psA7S_j_nUVB6s5Ic4U9houTuXq28bOr89wNuELpd-mnmGwiZB3LbXFCZBucnVpcAjK3SxmqpBDBpniKZEO5su_XbcuYWOkpYGDc235ImXpw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.2. Trỏ tên miền từ PA Việt Nam

#### Bước 1: Truy cập trang quản lý tên miền của PA Việt Nam và nhập thông tin tài khoản <https://access.pavietnam.vn/login.php>&#x20;

Nhập thông tin tài khoản mà nhà cung cấp đã gửi cho bạn sau khi kích hoạt thành công tên miền.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe0MxEIB5Hvgn5fmLo9ngzMMcGVtGt_b5xyZzmyhu1LlCPYk3se0oDr5LCxzc3xAqToGu_fRzzsbUsSlWqxIuRUMylqmi0c7SXOSWYK_-AtqAple1QwFfmDvPQcDumqC6PaeUPwjg?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Trỏ tên miền.

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản  ghi như sau:

1. Host: www\
   Loại: CNAME\
   Địa chỉ: dns.shopone.io<br>
2. Host: @\
   Loại: URL REDIRECT\
   Địa chỉ: <http://www.tenmien.vn>

{% hint style="info" %}
***Lưu ý:** bạn cần thay **tenmien.vn** thành tên miền của bạn ví dụ* [*http://www.sanphamtot.vn*](http://www.sanphamtot.vn)  ***sanphamtot.vn** là tên miền bạn đang cài đặt.*
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfCckzPOnJOMZCrWFEnMLGx72eZmDIiwmf2tKM7zeozM8tVvoPkLXk0bOa1lHH4olkYYqMW7nlGWiitTSAU8IkvMPWeeYojSMjlqG45dkDb4MmKIICBO7isR7bTskPqML9IbsG3?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmien.vn** và bạn muốn tạo và sử dụng một tên miền phụ.

Ví dụ : **sanpham.tenmien.vn**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcV_KinDjKtfeACB-A8xxDoCqPWqG8afl2iQgZgFUiRsEF9soL-Ulg7I93VtyXmgPbnd1MD09Ycm3Xmt_mFydXipLzN6umL9rEDlD2XcOs9hnUGiG7tYynHTCu8SsFiMYdmZhfrwA?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.3. Trỏ tên miền từ Nhân Hòa

#### Bước 1: Truy cập trang quản lý tên miền của Nhân Hòa và nhập thông tin tài khoản:[ https://zonedns.vn/](https://zonedns.vn/)

Dùng thông tin tài khoản và mật khẩu Nhân Hòa cung cấp sau khi kích hoạt tên miền. Thông tin được gửi vào email bạn đã đăng ký

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfj5qtXAsR4VRAdE1CWqvL2wOUwrYGJAjEKgvbHIKra4v6LlkFg0Jbc3DcrcmWAFLtjp25xsZUDWyiF0dF-d20feU7t93aeK1nhrfyI0Zik8oOmC5tJYdCH6XU6pRvst1vM5_P9?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Trỏ tên miền

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản ghi như sau:

1. Tên record: @

   Loại record: URL REDIRECT

   Giá trị record : <http://www.tenmiencuaban.vn>

{% hint style="info" %}
***Lưu ý:** bạn cần thay \[**tenmiencuaban.vn**] thành tên miền bạn đang cài đặt ví dụ* [*http://www.sanphamtot.vn*](http://www.sanphamtot.vn)  ***sanphamtot.vn** là tên miền bạn đang cài đặt.*
{% endhint %}

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcd85b1DOywPMgSV_rBJH-QQZNXyJwcBRPiVZhiu-NnJ5PV0oqgTrPE4T2NsLRV-plgtGO-K6ke7cYcUD-SAWLdVm3XY-vehrUu-aCdCOeYs_3KgXp2ny83ylwZQ8z7ebYfrIhtZw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

2. Tên record: www

   Loại record: CNAME

   Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf7dsN_NllYfaGM53LihYt35HDYSe_cKc_FpTpP-WEAirc6qUkTKsfgVMrrGZnsyQ7UuGPUHgfqOQlnLtSOTLM6jIP_K-5__RNub_TFW1NgUrz4axD8K3wi6kwKyyOTDSYlTvKr3Q?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmiencuaban.vn**, bạn muốn tạo và sử dụng một tên miền phụ   **sanpham.tenmiencuaban.vn,** bạn cần thêm bản ghi như sau:

Tên record: sanpham\
Loại record: CNAME\
Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdEGapirEUX2oQ_ez5f5qR92DGzU5plBZNSvD9LrRhKRP4Ebnjc7ckCVyzsAD3alO7V_JNrFiUkToP1KuJ-WTwrclj-50wtcAQd6UvoOqWsanB6iB8Zql3LFPVZm-qYf3tdiwWgMw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.4. Trỏ tên miền từ NameCheap

#### Bước 1: Truy cập trang quản lý tên miền của NameChip và nhập thông tin tài khoản: <https://www.namecheap.com/myaccount/login/>

Dùng thông tin tài khoản và mật khẩu nhà cung cấp tên miền gửi cho bạn sau khi kích hoạt tên miền. Thông tin thường được gửi vào email bạn đã đăng ký.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdR2f8yPTeG-bLZpgjEj6Zq1yvAV-Pl1PhFrRCqjEnCbgcTckPpHh1DIrfAnjLH0GfqAkXVJbU8ghQ7CnNaoAeWh3VoAo_aQSFSexiyuV83nVeHm3_TPVQUVDMT2mxXVi5qLZHfWw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Tại mục Tài khoản (Account) -> Chọn danh sách tên miền của bạn (Domain List).

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdfj83uNdyHr0kF-7SNNeriw986ymEae9xavL1ImMAM2mK2vpY31Fwb1UCAqkZHtcsIYw04S9fLybitF0nzLy8QQt7k5U2i24myWC8FXsWuQxrhjY5NQWyj3HBz_XN-tIpE3HoD7Q?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Chọn Quản lý (Manage) tên miền mà bạn muốn sử dụng -> Chọn Advance DNS.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXetfaeFEJq67jiGxiEoG9hMCHfPLks-H2qbPXAhgOthFbHz6U3pCJz5UDrDgVRs4I7qCWlFq5y6s2Fte-fRitoxiv14MEByVIVaxLQzQ-UC8qAx2umUvZWv7iKSQd6ZYzfF7ixlwQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcY4GC-MhEM1V2xVmGwC4p5TkNFiVS-nFsJUYrbnXKAQn_ltUwc9l3k-wcZ0gRA3jj_F9im4Kv-wkMlDBHqrKO0G1ZmSSsHhL9vGiP5-EbczBbH23oF7NFBxHVCK5EkY_23R8sbbg?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Trỏ tên miền.

* **Để trỏ tên miền chính,** bạn chọn **Add New Record** và thêm 2 bản ghi như sau:

1. Type: CNAME\
   Host: @\
   Value  : dns.shopone.io<br>
2. Type: CNAME\
   Host: www\
   Value  : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcwyIECk9JrHqR6yIESZiQ0Kcl2UHdQfimuqaAZodX8fQDMB47njmzc79Yelqu-Z0uh9Xjut3yq7tgapJZMrsus1RwTNLw3y7qp_cRAe7Q1pjzmVSbScAGxERMbSdiP1MK3Pjtt7g?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmiencuaban.vn** và bạn muốn tạo và sử dụng một tên miền phụ  **sanpham.tenmiencuaban.vn,** bạn cần thêm bản ghi như sau:

Tên record: sanpham\
Loại record: CNAME\
Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeyG1kbd2rBChspe-L9lnL87tsDygDBNBDZzNXSfm182tKaSGTuERNYcTO0MRGyX-3BudITwoUKl9ZAO8i8oI6T6iiab08r9d54t3Acyo5YQ4vbFvNlP1zcByOIHDNe29pVcneS1g?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.5. Trỏ tên miền từ Mắt bão

#### Bước 1: Truy cập trang quản lý tên miền của Mắt Bão và nhập thông tin tài khoản:[ ](https://zonedns.vn/)<https://www.matbao.net/>

Dùng thông tin tài khoản và mật khẩu nhà cung cấp tên miền gửi cho bạn sau khi kích hoạt tên miền. Thông tin thường được gửi vào email bạn đã đăng ký.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdwt6kjR_C9x54boPYO984IOokoVMkT3iu6mIJAfJlRBVlqrOXjBrbrcEz5XcJs6dtNNdPF_hARoFUlttZKM6ohOpdXQoNmoOHavgAVK-cRUXUyKeMjqUTQAsxf2jmjpZLNYucTkA?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Vào trang Quản lý tên miền -> Chọn vào tên miền bạn muốn cài đặt -> Chọn Bản ghi DNS.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcqT00HdsOdWxO8WiLZ14PmAGZ_i0XbWhZRrTt2RUtafEtzGG78tfvWiv-VG19tJV6jAw5jMnjyJTaalAxd8gscHM7zMvqOlO17e8nvktD5SNaPd69duu1dElJ0eeCYOXjZcmL1?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeljuaIzrd3qMkUMjztUcb_bW7py7LCkMD50iebUWeoYIMaaZzhl5EtC0MLfSHbkh6iIFFD6esR-9N5j72-At93JYbkVPDutn8DTj-b6E7uKo_i-pB9p7hLEa6P3yw5_1b6558l?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdAI_ALzskoM0XONT5PZNS_vkyNeTTmqOzA2DDIUUtvhO1LiDnBnYHD1sxNBCaREj43BQmSWJN--Ms3Kqb4MwiVU40qfGeRQtwNNLbjrNKWVsDDHu_EheVwc21ROVF5Sen6sq7y?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Trỏ tên miền.

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản ghi như sau:

1. Tên record: @\
   Loại record: URL REDIRECT\
   Giá trị record : <http://www.tenmiencuaban.vn><br>

   <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdoIFG2bHbJD-XXZdq1Pz_mKZrK6-Cl__7pQexKcZbprh4LG2FTv3tAj1XupP5c6idGcby_iwF8xxO7UyKcwwKk7Wv-gWK7BAwva3Dot0xSK2Kfug7U2ULcwZHKWQDGvSIOH5LQhA?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>
2. Tên record: www\
   Loại record: CNAME\
   Giá trị record : dns.shopone.io<br>

   <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcRLd-vLVT5L0bTXNPpPA0Jwh2xK6oJmxwWkK5WNWSn3r7o0ic__wVLF8MTpMt0wLNVRf01K0XB0oigzR5Vc33P7J1UrcnIXvYQUAlhqcGOKVmcj39JVPlIMxBkTbj2MVoEytO4Wg?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmiencuaban.vn** và bạn muốn tạo và sử dụng một tên miền phụ   **sanpham.tenmiencuaban.vn,** bạn cần thêm bản ghi như sau:

Tên record: sanpham\
Loại record: CNAME\
Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcoE5_9Q75O1QeSJUXFWf13WM15sbM5ZqadsXMsre5amuVZlW75IViqbJX-8IU0xm9hT0HY1TgshnoQpH4we_gUn7EgC-R5nr-KbRaq4gbAugjucdr_p0Z1rcH9EH3XbA-0GBjm?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.6. Trỏ tên miền từ Name.Com

#### Bước 1: Truy cập trang quản lý tên miền của Name.Com và nhập thông tin tài khoản:[ ](https://zonedns.vn/)<https://www.name.com/account/login>

Dùng thông tin tài khoản và mật khẩu nhà cung cấp tên miền gửi cho bạn sau khi kích hoạt tên miền. Thông tin thường được gửi vào email bạn đã đăng ký.

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

#### Bước 2: Truy cập vào  My Domain để xem danh sách domain bạn đã mua.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfjRRHGL6hsEqX4PRtTU4AzftB6pQ2QjOne3S5Z8XUnYpiKJreVooMQF1TRmPcBHTUqBsppSTxr1E1QnUtUHlJFYvOD0fE7zd1W837SWTwT3Vh-HcYKHhtIO8b9eyD-wxyS6aT8ZQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Chọn **Manage DNS Records** bạn muốn cài đặt:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeoIkXqbS7LAXvYLaSOgUBm_5gwrbBgZRUZs180VlfuTyNpF1oSSvIFp6GjhUTAL9N_wyZrngZ4yj5Crbr7pnuAMjGA3yLf7DHnnSSg_WDxe3uagbxS4GlxNRMj3wrfVvOnxa_YIA?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Trỏ tên miền

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản  ghi như sau:

1. TYPE: A\
   HOST: @\
   ANSWER : 45.32.102.55<br>
2. TYPE: CNAME\
   HOST: www\
   ANSWER  : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfWap3iH70CDJeZGls_wqe53TFjbi3OwNbYBX4ej3iCnXo-f-B_8O1dr6qVE2w-HGMwTrc0vqd38EwNNdn1qriYQylHsl1-pPQ0sCv-7Ft6alkrskbhgSy49sg5pTYd4GJtXY59?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmiencuaban.vn** và bạn muốn tạo và sử dụng một tên miền phụ  **sanpham.tenmiencuaban.vn,** bạn cần thêm bản ghi như sau:

Tên record: sanpham\
Loại record: CNAME\
Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdB5vl2QjGUppVqDZH_GhHvmqCkWT0TXSFpkLZgIIr9Mqki7hJvUzkzJbaFiRolf54Egq0Qfafa7H8sBV0B41CVVe22BMGs3dqcl4s27jDKh5YpmrKJcj4zXoXlpVNg2KdlLqEWLA?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 4.7. Thêm tên miền vào CloudFlare

Trong trường hợp bạn chưa có tài khoản CloudFlare, bạn thực hiện các bước sau để đăng ký để tạo tài khoản:

#### Bước 1: Đăng ký tài khoản tại[ ](https://www.cloudflare.com/)<https://dash.cloudflare.com/login>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfuSQYBR2fedW2iQfqsUvq6ARYN76579fkkUQyYZK3amWAR8oPUFFeqOyVC72Cy_ERCCHpirVowvtY-Sv1kPqaZ4MiTrzlS9JYjvR0L2S8cMDdEGMffq6idhWQcuYxr_WAn_aESxg?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Sau khi đăng nhập vào tài khoản chọn Add a domain

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeF5lYk-7_wAw9Z2mCVvjKqh_bllB41lKIWjeX-m7JqOVZ9C71mBRvgqyJiPvmDRbemErO9DIP89hArwhu4u7B557QF5Z7AE64W9NmB34TF0fYDfl6iu737XIlXsXPr9DVIGIrI?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Sau đó nhập tên domain bạn cần thêm.

* Chọn quick scan for DNS records CloudFlare sẽ quét các bản ghi từ nơi quản lý tên miền bạn đang sử dụng.
* Manually enter DNS record để thêm mới từ đầu.
* Upload a DNS zone file để upload từ file.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcXCC5WPFupH-5HGjctSxbWGJfteaYJSNSLrs8Hd_dveUPWi4qSlrlVGqjwONkWFmldfAPFaKKU8pWzwUk9AwphtJ_lrEsblJWiJStJ4goajLgoPEcVKZThsg2d7kw9PzCgYwjvGw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Chọn gói bạn muốn sử dụng rồi bấm Tiếp tục.&#x20;

Ở đây mình đang chọn gói **Free**.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcWXL2Qt8zOaFpJDS5YZv2Z3sya4TwaJEBCjl93cQXqStil_teiUOrJ2TguviG1U-5huLWAufIPADic-vFGQNcPATUAD4rnb_psBofmKB88QJCnvrnreUUGva80Ob2CZ6HSOsq9?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

CloudFlare sẽ chuyển đến màn các danh sách các bản ghi DNS . Ở đây bạn cũng có thể thêm mới hoặc chỉnh sửa bản ghi hiện có sau đó bấm chọn **Continue to activation.**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeUm3lmHh98aflL4-WKDCq6KtkmXOIQabGVuQ_9gYLkNPY1vPBH32vf2PCVYzUw8jMX9hidzictqrs1_I7tchgjmPQJTTZMupwNZfR_hJulgLHEV7mndzg6UOsHuTyuWxtTC-DkHw?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

CloudFlare cung cấp 2 bản ghi Name servers, bạn sao chép 02 Namesever này thay thế cho 02 Nameserver của bên cung cấp tên miền. Trong trường hợp bạn không biết thao tác thay đổi nameserver trong quản trị tên miền, xin vui lòng liên hệ với bên cung cấp tên miền, nhờ hỗ trợ thay đổi Nameserver về 2 bản ghi Name server của CloudFlare.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcBEIwjvgvC1mN6YH-i4B-J_8pE596Cbtglph8dBFr_kvq0Ms2XgTC6XzzvZJ3VTUB5wC1L-11cvOkWMCqbciOMzZbVbHHaLr1l2eCrT9-98UTMV8VEVQC0sInwQNNz0iUEWASCUQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
***Lưu ý:** Khi đã trỏ Nameserver về CloudFlare, cấu hình các bản ghi trong quản trị tên miền sẽ không còn hiệu lực. Tât cả các bản ghi sẽ được tạo/cập nhật trong tài khoản CloudFlare.*
{% endhint %}


# 4.8. Trỏ tên miền từ CloudFlare

#### Bước 1: Đăng nhập vào tài khoản CloudFlare và click chọn vào 1 tên miền bạn muốn cài đặt:

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc6bi5w2lArpNJBxqhx55NbAgNL1gKYbnTxvhC42nQBpJdweYCl-r3wY3LED8LQM92VUWHquYKSq0TKopr3--nGlfaCseIaS4pXTHLh8sPDN-hqWxXcG2VMF-VIevU9h_DL8pMB5Q?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 2: Chọn DNS&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd8FBn5KR-yvTe6m8Ci9Mk59LEHM0ntT0VAF-dpZNbdNjrpwNe7f3eYuuANYG56bRWXhYoj342J5WTxCimtYw0sOlqrS3uXMa4VULxFKeW5O8dqUcoMr1d7G5BZRQ7g6wm8D8VJRQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

#### Bước 3: Trỏ tên miền

* **Để trỏ tên miền chính,** bạn cần thêm 2 bản  ghi như sau: \
  (**Lưu ý:** cần tắt hình đám mây).

1. TYPE : A\
   Name: @\
   IPv4 address: 45.32.102.55<br>
2. TYPE: CNAME\
   NAME: www\
   TARGER: dns.shopone.io<br>

   <figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXc6Si3TzSRneKz2iCSUZAE_KBHDCYk5jpO7nZB4RgqQBI5R_MoOabNL4ckWX-KYVv9pP7YcGKLOdZ_1alU1F7M7YWCgmxKu5IAXz4WZqncIBSIRgABlxMsOdJkLYcr55k_OyHYgDQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

* **Để trỏ tên miền phụ:**&#x20;

Giả sử bạn có tên miền **tenmiencuaban.vn**, bạn muốn tạo và sử dụng một tên miền phụ  **sanpham.tenmiencuaban.vn,** bạn cần thêm bản ghi như sau:

Tên record: sanpham\
Loại record: CNAME\
Giá trị record : dns.shopone.io

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfGqaZ8KJyU2rvQDmohLp0D93m3HsLv57D3cTK_pJKACcH5z10AVODQXSh6liaotlXeM2lxZKXBkl8oz3_bWBFlmStgK2F6x-uBcPRtsMLNVUqWlrcWHu4fO5V01Qn5LmzfFXrp?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

### **Thủ thuật Page Rule điều hướng**&#x20;

Chuyển từ không có "www" (<https://tenmiencuaban.vn>) sang có "www" (<https://www.tenmiencuaban.vn>)

Vào **Dashboad** của CloudFlare -> chọn **Page Rules** -> **Create Page Rule**.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfPriEUsCdOjzSY-hhhew6d6Sd22IDpH53jDVNdA8qanmhbbGnToQMo0x_gLa690r12MkI0-c94q1-MSaKBy4XMAa4Wnx0Mc_TGQienh1ceJ-KPJr2si_lt6becPvRoYL0jloPPJQ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>

Điền các thông tin lần lượt như sau:

* Điền URL **không có "www".**
* Chọn Settings: **Fowarding URL + 301 - Permanent Redirect.**
* Điền URL **có "www".**

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeP-LbWnV-aK0JeY2Owk-SYvJgJdpVfqhpJ-qqMry1K47f8qw3a_xEf9B18pRbj3wp51_m_mUupQ4Gje-XVeXKobTTPVaOPXf5k52pUh9yitHFP692zpddSxyh4Skk--A-uwaeJ?key=esCSHIze93gbmIh433_vf-YE" alt=""><figcaption></figcaption></figure>


# 1. Thanh Top bar

Thanh topbar là một phần quan trọng trong việc thiết kế landing page, giúp cải thiện trải nghiệm người dùng và hướng dẫn họ tới các hành động mong muốn. Thanh topbar thường nằm ở phía trên cùng của trang landing page. Đây là khu vực quan trọng để điều hướng người dùng và hiển thị thông tin cần thiết như logo, lưu landing page, xuất bản, xem trước landing page, khôi phục và hoàn tác, lựa chọn giao diện thiết kế.

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


# 1.1. Lưu landing page

Thường xuyên bấm **Lưu** ở góc bên phải màn hình để đảm bảo không mất bất kỳ phiên bản chỉnh sửa nào. Lưu ý rằng những thay đổi đã được lưu sẽ không hiển thị trên trang landing page của bạn cho đến khi bạn nhấp vào Xuất bản.

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


# 1.2. Xem trước

**Xem trước** giúp bạn có thể kiểm tra và điều chỉnh các thành phần của landing page trước khi xuất bản chính thức. Điều này đảm bảo rằng trang của bạn hiển thị đúng cách và có trải nghiệm người dùng tốt.

Nhấp vào biểu tượng **Xem trước**, trang sẽ chuyển sang chế độ xem trước, hiển thị cách mà landing page của bạn sẽ trông như thế nào khi được xuất bản.

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


# 1.3. Xuất bản

**Xuất bản** là công cụ quan trọng để đưa trang landing page của bạn từ trạng thái chỉnh sửa lên trạng thái công khai. Khi bạn sử dụng chức năng này, tất cả các thay đổi và cập nhật mà bạn đã thực hiện sẽ được áp dụng và hiển thị trên trang landing page chính thức.

Nhấp vào **Xuất bản** ở góc trên cùng bên phải khi bạn đã sẵn sàng đưa trang landing page của mình đi vào hoạt động.

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

**Tại popup Xuất bản Landing page:**

* **Tên:** đây là phần bạn nhập tên cho landing page của mình. Tên này sẽ được hiển thị trên thanh tiêu đề của trình duyệt và có thể giúp bạn dễ dàng quản lý các landing page khác nhau.
* **Mô tả landing page:** giúp hiểu rõ hơn về nội dung chính của trang
* **Favicon của bạn:** Favicon là biểu tượng nhỏ hiển thị trên tab của trình duyệt khi người dùng truy cập vào trang landing page của bạn. Bạn có thể tải lên favicon tùy chỉnh để làm nổi bật thương hiệu của mình.
* **Trang của bạn:** liên kết URL trang landing page của bạn theo định dạng của sẵn của ShopOne

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

Bạn có thể sử dụng tên miền riêng cho landing page của bạn bằng việc chọn tên miền đã liên kết từ trước và nhập đường dẫn (nếu có).

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


# 1.4. Trợ giúp: Hỗ trợ và các phím tắt

Chức năng **Hỗ trợ và các phím tắt** giúp người dùng làm việc hiệu quả hơn trong trình chỉnh sửa Landing Page. Tính năng này cung cấp danh sách các tổ hợp phím tắt giúp thực hiện nhanh các thao tác chỉnh sửa, tiết kiệm thời gian và nâng cao trải nghiệm làm việc.

### Để mở bảng danh sách phím tắt:

1. Trên giao diện chỉnh sửa Landing Page, nhấn vào biểu tượng <img src="/files/kyaCGnFZUyef0gLe6ob6" alt="" data-size="line"> nằm ở góc trên bên phải của thanh công cụ.
2. Nhấn vào biểu tượng để mở mục **Hỗ trợ và các phím tắt**.
3. Một cửa sổ mới sẽ xuất hiện hiển thị danh sách các phím tắt hỗ trợ cho cả hai hệ điều hành **MacOS** và **Windows**.

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

### Lợi ích của việc sử dụng phím tắt

* **Tăng tốc độ làm việc:** Các tổ hợp phím cho phép bạn hoàn thành nhiều thao tác chỉ trong vài giây.
* **Tránh sai sót:** Việc sử dụng phím tắt giúp thao tác trực tiếp trên bàn phím, giảm thiểu lỗi khi di chuyển chuột.
* **Tối ưu quy trình thiết kế:** Hỗ trợ người dùng tập trung vào nội dung, ít phụ thuộc vào việc di chuyển qua lại giữa các công cụ.


# 1.5. Hoàn tác và thực hiện lại

Chức năng **hoàn tác và thực hiện lại** là công cụ quan trọng giúp bạn dễ dàng quay lại các bước chỉnh sửa trước đó hoặc phục hồi những thay đổi bạn đã lưu trước đó trên landing page của mình.

* **Chức năng hoàn tác:**

Chức năng **hoàn tác** cho phép bạn quay lại bước chỉnh sửa trước đó ngay lập tức, giúp bạn dễ dàng sửa lỗi hoặc thay đổi quyết định mà không cần phải làm lại từ đầu.

Nhấp vào biểu tượng **hoàn tác** trên thanh công cụ chỉnh sửa để quay lại bước chỉnh sửa trước đó. Bạn có thể nhấp nhiều lần để hoàn tác nhiều bước trước đó.

* **Chức năng thực hiện lại:**

Chức năng **thực hiện lại** cho phép bạn tiến tới bước chỉnh sửa tiếp theo nếu bạn đã sử dụng chức năng hoàn tác trước đó. Điều này giúp bạn linh hoạt điều chỉnh landing page mà không mất công sức.

Nhấp vào biểu tượng **thực hiện lại** để tiến tới bước chỉnh sửa tiếp theo mà bạn đã hoàn tác trước đó.

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


# 1.6. Lựa chọn giao diện

ShopOne cho phép bạn chuyển đổi giữa hai giao diện máy tính và điện thoại để tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau.

Nhấp vào biểu tượng **máy tính** hoặc **điện thoại** trên thanh công cụ để chuyển đổi giao diện chỉnh sửa phù hợp với bạn.

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


# 2. Thanh Sidebar

Thanh sidebar là công cụ hữu ích để cải thiện khả năng điều hướng và cung cấp thêm thông tin cho người dùng. Thanh sidebar là khu vực nằm bên trái của trang web, cho phép người dùng truy cập nhanh chóng các chức năng giúp tạo nên một trang landing page.

Thanh sidebar bao gồm:

* Lớp&#x20;
* Popups
* Tiện ích
* Section
* Nền trang
* Cài đặt

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


# 2.1. Lớp

**Lớp** là tính năng quan trọng trong thiết kế landing page, giúp người dùng quản lý và chỉnh sửa các thành phần trên trang một cách dễ dàng và trực quan. Tính năng này cho phép bạn kiểm soát từng phần tử như: hình ảnh, văn bản, nút bấm, hộp chứa, và các phần nội dung khác.

<figure><img src="/files/4YJmytLJsbKm0DwxTPM1" alt=""><figcaption></figcaption></figure>

Với tính năng này, người thiết kế có thể:

* **Xem trước và ẩn/hiện** section và từng phần tử trong một section.
* **Di chuyển** các section và các phần tử bằng cách kéo thả.
* **Tinh chỉnh** chính xác từng lớp để đảm bảo giao diện chuyên nghiệp và đúng ý tưởng.

Lợi ích của việc sử dụng tính năng **Lớp** trong thiết kế Landing Page:

* **Quản lý dễ dàng**: Hiển thị tất cả thành phần trong một bảng điều khiển.
* **Tiết kiệm thời gian**: Tìm và chỉnh sửa từng phần tử mà không cần thao tác phức tạp.
* **Tăng hiệu suất thiết kế**: Sắp xếp nội dung khoa học và linh hoạt hơn.
* **Chuyên nghiệp hóa landing page**: Tạo ra những giao diện rõ ràng, gọn gàng và nổi bật.

Tính năng "**Lớp**" trong thiết kế landing page mang đến sự tiện lợi và chuyên nghiệp cho người dùng. Dù bạn là người mới bắt đầu hay nhà thiết kế dày dạn kinh nghiệm, **"Lớp"** sẽ là công cụ không thể thiếu để tạo nên các trang landing page ấn tượng và tối ưu.

Chỉ cần vài thao tác đơn giản, bạn đã có thể quản lý, chỉnh sửa và hoàn thiện thiết kế của mình một cách dễ dàng!


# 2.2. Popup

**Popup** là các cửa sổ nổi bật xuất hiện trên trang landing page của bạn để thu hút sự chú ý của người dùng. Chúng có thể được sử dụng để hiển thị thông báo, khuyến mãi, hoặc các biểu mẫu thu thập thông tin. Trên trình chỉnh sửa landing page, popup có thể được quản lý từ thanh Sidebar để dễ dàng tạo và tùy chỉnh.

Bạn có thể lựa chọn các mẫu popups có sẵn do ShopOne cung cấp, giúp bạn dễ dàng chọn lựa và tùy chỉnh theo nhu cầu. Bạn có thể chọn một mẫu phù hợp với mục đích của mình như thu thập email, thông báo giảm giá, hoặc kêu gọi hành động (CTA). Việc chọn popups mẫu sẽ giúp bạn tiết kiệm thời gian và đảm bảo tính thẩm mỹ, tối ưu hóa sẵn.

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

Nếu bạn muốn tạo ra popup độc đáo hoặc phù hợp hoàn toàn với chiến lược tiếp thị của mình, bạn có thể tự tạo popup từ đầu. Điều này cho phép bạn kiểm soát toàn bộ thiết kế và trải nghiệm người dùng.

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

**Tùy chỉnh nội dung popup:**

* **Tiêu đề:** Đây là phần quan trọng nhất, thu hút sự chú ý của người dùng. Hãy viết tiêu đề ngắn gọn, rõ ràng và hấp dẫn.
* **Nội dung:** Cung cấp thông tin cần thiết, như mô tả ngắn về ưu đãi, thông tin liên hệ, hoặc bất kỳ thông điệp quan trọng nào bạn muốn truyền tải.
* **Hình ảnh và Media:** Thêm hình ảnh hoặc video để làm nổi bật nội dung của bạn.
* **Form Nhập Liệu:** Nếu bạn thu thập thông tin từ người dùng (như email), hãy thêm các trường nhập liệu và nút gửi.

**Thiết lập hành động sau khi gửi:**

* Sau khi người dùng hoàn tất và gửi form, bạn có thể thiết lập hành động tiếp theo như chuyển hướng đến một trang cảm ơn, hiển thị một thông điệp xác nhận, hoặc gửi một email tự động.

**Xem trước và Kiểm tra popups:**

* Trước khi xuất bản popup, hãy sử dụng chức năng Preview để kiểm tra xem nó có hoạt động đúng như bạn mong đợi không.
* Đảm bảo popup không ảnh hưởng đến trải nghiệm người dùng, tránh làm phiền họ quá mức.


# 2.3. Tiện ích

**Tiện ích** là các thành phần có thể kéo thả vào landing page của bạn để thêm các yếu tố nội dung và tính năng tạo nên một landing page có tính tương tác và dễ sử dụng nâng cao trải nghiệm người dùng trên trang.

Trên thanh Sidebar, nhấp vào biểu tượng **Tiện ích**. Tại đây, bạn có thể sử dụng các phần tử mẫu có sẵn cho thiết kế của mình.

**Danh sách tiện ích có sẵn:**

* **Cơ bản:** bao gồm tiện ích Text, Nút, Container.
* **Phương tiện:** bao gồm tiện ích Hình ảnh, Trình chiếu, Thư viện, Video, Shape.
* **Kinh doanh:** bao gồm tiện ích Biểu mẫu, Số tự động.
* **Nâng cao:** bao gồm tiện ích Accordion, Tabs, Đếm ngược, Mã HTML, Vòng quay may mắn, Thông báo.

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


# 2.4. Section

**Section** là các khu vực riêng biệt trên landing page mà bạn có thể sử dụng để sắp xếp và tổ chức nội dung. Mỗi section có thể chứa nhiều loại nội dung khác nhau, chẳng hạn như văn bản, hình ảnh, video, biểu mẫu và nhiều hơn nữa.

Nhấp vào biểu tượng **Section** trên thanh Sidebar, sau đó chọn loại section bạn muốn thêm từ danh sách các section có sẵn.

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

**Danh sách section có sẵn:**

* **Trắng:** Tạo khu vực tùy chỉnh hoàn toàn theo ý muốn.
* **Chào mừng:** Giới thiệu ngắn gọn và thu hút sự chú ý của khách hàng.
* **Giới thiệu:** Cung cấp thông tin về bạn hoặc doanh nghiệp.
* **Đội ngũ:** Giới thiệu các thành viên trong đội ngũ của bạn.
* **Liên lạc:** Cung cấp thông tin liên lạc và biểu mẫu liên hệ.
* **Khuyến mãi:** Quảng bá các chương trình khuyến mãi hoặc ưu đãi đặc biệt.
* **Đăng ký:** Khuyến khích khách hàng đăng ký nhận bản tin hoặc thông tin mới.
* **Đánh giá:** Hiển thị nhận xét và đánh giá từ khách hàng.
* **Khách hàng:** Trưng bày logo hoặc tên các khách hàng đã sử dụng dịch vụ của bạn.
* **Cửa hàng:** Trưng bày sản phẩm và dịch vụ bạn đang bán.
* **Cơ bản:** Các bố cục đơn giản cho nội dung chung.
* **Text:** Thêm các đoạn văn bản chi tiết.
* **Danh Sách:** Tạo danh sách các mục, sản phẩm hoặc dịch vụ.
* **Biểu Mẫu:** Thêm biểu mẫu liên hệ hoặc đăng ký.


# 2.5. Nền trang

**Nền trang** là công cụ để tùy chỉnh thiết kế và giao diện tổng thể của landing page. Bạn có thể áp dụng màu, ảnh hoặc video để làm nền trang landing page của mình.

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

* **Màu sắc:** Bạn có thể thay đổi chủ đề màu cho toàn bộ trang landing page bằng cách nhấp vào Color và chọn màu nền phù hợp
* **Hình ảnh:** Nhấp vào Image và chọn ảnh nền cho toàn bộ landing page
* **Video:** Nhấp vào Video và chọn video nền cho toàn bộ landing page

Khi nhấp vào **Hình ảnh**, **Video**, một popup **Quản lý phương tiện** sẽ hiện lên cho phép bạn quản lý video, hình ảnh:

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

* **Cập nhật phương tiện:** Cho phép bạn tải lên hình ảnh từ máy tính của mình.
* **Tập tin:** Truy cập vào thư viện hình ảnh đã tải lên trước đó trên trang web của bạn.
* **Phương tiện từ ShopOne:** Truy cập vào các hình ảnh có sẵn từ các thư viện hoặc các kho lưu trữ như ShopOne.
* **Ảnh Unsplash:** Sử dụng hình ảnh miễn phí từ Unsplash, một nguồn cung cấp hình ảnh chất lượng cao.
* **Thùng rác:** Xem và quản lý các tệp đã bị xóa.


# 2.6. Cài đặt

Phần **Cài đặt** cho phép bạn quản lý và tùy chỉnh các cài đặt cơ bản cho landing page của mình.

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

* **Tiêu đề trang:**&#x20;

Đây là tên chính của trang landing page, xuất hiện trên tab của trình duyệt và thường là tiêu đề mặc định cho các công cụ tìm kiếm khi hiển thị trang landing page của bạn trong kết quả tìm kiếm.&#x20;

Trong phần **Tiêu đề trang**, nhập tên trang landing page hoặc tên thương hiệu của bạn. Hãy chọn một tiêu đề ngắn gọn, dễ nhớ và có thể chứa từ khóa chính của bạn để cải thiện SEO.

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

* **Ngôn ngữ trang:**&#x20;

Cài đặt ngôn ngữ cho trang web giúp xác định ngôn ngữ chính mà nội dung trên trang sẽ được hiển thị. Điều này cũng giúp công cụ tìm kiếm hiểu được nội dung trang và hiển thị kết quả phù hợp cho người dùng.

Trong phần **Ngôn ngữ trang**, chọn ngôn ngữ chính của trang landing page từ danh sách thả xuống. Đảm bảo rằng bạn chọn đúng ngôn ngữ, vì điều này có thể ảnh hưởng đến SEO và trải nghiệm người dùng.

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

* **Từ khóa:**&#x20;

Các từ khóa là những thuật ngữ mà bạn muốn trang landing page của mình xuất hiện khi người dùng tìm kiếm chúng trên các công cụ tìm kiếm như Google.

Trong phần **Từ khóa**, nhập các từ khóa liên quan đến nội dung và mục tiêu của trang landing page. Sử dụng dấu phẩy để tách các từ khóa. Hãy chọn các từ khóa có liên quan và không quá cạnh tranh để dễ dàng xếp hạng cao hơn trên kết quả tìm kiếm.

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

* **Mô tả trang:**&#x20;

Mô tả trang landing page là một đoạn văn ngắn cung cấp cái nhìn tổng quan về nội dung và mục đích của trang. Đây cũng là đoạn văn xuất hiện dưới tiêu đề của bạn trên các công cụ tìm kiếm.

Trong phần **Mô tả trang**, viết một mô tả ngắn gọn, hấp dẫn về trang landing page của bạn. Bao gồm các từ khóa chính để tối ưu hóa cho SEO. Giới hạn độ dài của mô tả vào khoảng 150-160 ký tự để đảm bảo hiển thị đầy đủ trên kết quả tìm kiếm.

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

* **Xem trước:** &#x20;

Tính năng **Xem trước** cho phép bạn xem trước cách thể URL của trang landing page trên tab trình duyệt sau khi áp dụng các thay đổi. Đây là các tùy chọn mà bạn cần phải thận trọng khi sử dụng vì chúng có thể ảnh hưởng trực tiếp đến việc trang landing page của bạn có thể truy cập được hay không.

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

* **Trạng thái landing page:**&#x20;

Đây là khu vực chứa các tùy chọn có thể gây ra thay đổi lớn đến trạng thái của landing page.&#x20;

**Xuất bản landing page từ tất cả các tên miền:** Tùy chọn này sẽ xuất bản trang landing page của bạn trên tất cả các tên miền đã được liên kết. Điều này có nghĩa là sau khi nhấn vào nút này, trang landing page của bạn sẽ được công khai trên internet và có thể được truy cập từ bất kỳ tên miền nào mà bạn đã thiết lập.

**Gỡ landing page khỏi tất cả các tên miền:** Tùy chọn này sẽ hủy xuất bản trang landing page của bạn, nghĩa là trang landing page sẽ không còn được công khai trên internet. Bất kỳ ai cố gắng truy cập trang landing page của bạn từ các tên miền liên kết sẽ không thể xem được nội dung.

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

* **Site Image:** Hình ảnh trang landing page

**Favicon** là biểu tượng nhỏ xuất hiện trên tab trình duyệt bên cạnh tiêu đề trang landing page. Nó cũng có thể xuất hiện trong danh sách đánh dấu của người dùng.

Trong phần **Favicon**, bạn có thể tải lên một biểu tượng nhỏ, thường là logo của trang landing page. Đảm bảo hình ảnh có kích thước phù hợp, thường là 16x16 pixel, 32x32 pixel, hoặc 64x64 pixel. Hình ảnh này giúp nhận diện thương hiệu tốt hơn và làm cho trang landing page của bạn chuyên nghiệp hơn.

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

* **Hình ảnh trên mạng xã hội:**&#x20;

Đây là hình ảnh mặc định sẽ xuất hiện khi người dùng chia sẻ trang web của bạn trên các mạng xã hội như Facebook, Twitter, LinkedIn,... Trong phần Social Image, chọn hoặc tải lên một hình ảnh đại diện cho trang landing page khi được chia sẻ trên mạng xã hội. Hình ảnh nên có kích thước lớn và chất lượng cao (thường là 1200x630 pixel) để hiển thị tốt trên các nền tảng xã hội. Hình ảnh này nên chứa logo hoặc thông điệp thương hiệu của bạn để tăng cường nhận diện thương hiệu khi được chia sẻ.

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


# 3. Thanh thiết lập nhanh

**Thanh thiết lập nhanh** cho các section hoặc tiện ích là một công cụ mạnh mẽ giúp bạn dễ dàng quản lý và tùy chỉnh nội dung trang landing page. Nó bao gồm các chức năng thiết yếu cho việc chỉnh sửa và quản lý nội dung. Với giao diện trực quan, thanh thiết lập nhanh cho phép người dùng tương tác trực tiếp với nội dung mà không cần phải điều hướng qua nhiều bước phức tạp. Dưới đây là một số chức năng về cách thanh thiết lập nhanh hỗ trợ bạn trong việc tối ưu hóa nội dung và thiết kế trang landing page:

* Trình chỉnh sửa nội dung
* Trình chỉnh sửa thiết kế
* Trình chỉnh sửa nâng cao
* Nhân bản
* Di chuyển
* Xóa
* Trợ giúp

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


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

Mỗi tiện ích trên trang web đóng một vai trò riêng biệt, chẳng hạn như hiển thị văn bản, hình ảnh, nút, biểu mẫu, hoặc video. Chính vì vậy, **Trình chỉnh sửa nội dung** của mỗi loại tiện ích sẽ có những tính năng và cách thức hoạt động khác nhau, nhằm phục vụ đúng mục đích của từng loại.&#x20;

**Trình chỉnh sửa nội dung** của mỗi tiện ích sẽ cho phép bạn thực hiện các thao tác chỉnh sửa nhanh chóng, từ việc thay đổi văn bản, cập nhật hình ảnh, đến chèn liên kết cho nút bấm, hoặc điều chỉnh cài đặt cho video. Nhờ đó, quá trình xây dựng và tối ưu hóa trang landing page trở nên linh hoạt, giúp bạn dễ dàng làm chủ nội dung mà không cần phải thao tác phức tạp.

Khi bạn nhấp vào mục **Nội dung** trên thanh thiết lập nhanh, bạn sẽ mở ra trình chỉnh sửa phù hợp với loại widget mà bạn đang làm việc. Điều này giúp bạn tùy chỉnh nội dung một cách dễ dàng và trực quan, đảm bảo từng tiện ích được tối ưu hóa theo yêu cầu cụ thể của bạn.

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


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

Hầu hết các tiện ích trong trình chỉnh sửa đều có các tùy chọn thiết kế cho phép bạn tùy chỉnh giao diện của tiện ích trên landing page của mình. Những tùy chọn này giúp bạn tạo ra một tiện ích hoàn hảo phù hợp với phong cách của trang landing page, hoặc làm cho nó nổi bật và thu hút sự chú ý của khách truy cập. Không phải tất cả các tiện ích đều có cùng các tùy chọn thiết kế. Ví dụ, một số tiện ích không cho phép chỉnh sửa khoảng cách bên trong, trong khi các tiện ích khác không cho phép thay đổi khoảng cách bên ngoài.

Để mở **Trình Chỉnh Sửa Thiết Kế** của một widget trên trang landing page của bạn, nhấp chuột vào tiện ích để mở menu ngữ cảnh và sau đó nhấp vào **Thiết Kế**.

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


# ID CSS

**ID CSS** là một cách để áp dụng các kiểu CSS cụ thể cho một phần tử duy nhất trong tài liệu HTML. Mỗi ID trong một trang HTML phải là duy nhất, nghĩa là chỉ có một phần tử có thể có một ID nhất định.

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


# Căn chỉnh

Khi xây dựng hoặc chỉnh sửa giao diện landing page, việc căn chỉnh các phần tử như văn bản, hình ảnh, nút bấm,... là một phần quan trọng để đảm bảo bố cục trang web được sắp xếp gọn gàng và chuyên nghiệp. **Căn chỉnh** sẽ giúp bạn căn chỉnh phần từ theo khung chứa.

<figure><img src="/files/6iN0qBwaIiIWeETO8E9U" alt=""><figcaption></figcaption></figure>

**Dưới đây là hướng dẫn chi tiết về cách sử dụng tùy chọn Căn chỉnh:**

* **Căn trái:** Căn phần tử sang phía bên trái của phần tử chứa.
* **Căn giữa theo chiều ngang:** Đặt phần tử vào giữa theo chiều ngang của phần tử chứa.
* **Căn phải:** Căn phần tử sát lề phải của phần tử chứa.
* **Căn trên:** Đưa phần tử lên phía trên cùng của phần tử chứa.
* **Căn giữa theo chiều dọc:** Đưa phần tử vào giữa theo chiều dọc của phần tử chứa.
* **Căn dưới:** Đưa phần tử xuống phía dưới cùng của phần tử chứa.


# Kích thước

Tùy chọn **Kích thước** cho phép bạn điều chỉnh vị trí của phần tử như văn bản, hình ảnh, nút bấm, hay bất kỳ tiện ích nào trên landing page so với khung chứa theo hướng bên trên và bên trái. Bạn cũng có thể điều chỉnh kích thước của phần tử để cải thiện tính thẩm mỹ và sự sắp xếp bố cục của trang, giúp tạo ra giao diện hài hòa và thu hút.&#x20;

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

Dưới đây là hướng dẫn chi tiết về cách sử dụng tùy chọn **Kích thước:**

* **Bên trên:** Điều chỉnh khoảng cách phần tử so với cạnh trên của khung chứa. Nhập giá trị để thay đổi vị trí phần tử theo chiều dọc.
* **Bên trái:** Điều chỉnh khoảng cách phần tử so với cạnh trái của khung chứa. Nhập giá trị để thay đổi vị trí phần tử theo chiều ngang.
* **Chiều rộng:** Thay đổi độ rộng của phần tử. Nhập giá trị để tăng hoặc giảm chiều rộng.
* **Chiều cao:** Điều chỉnh chiều cao của phần tử. Nhập giá trị để điều chỉnh độ cao của phần tử theo mong muốn.


# Hiển thị

Tùy chọn **Hiển thị** cho phép bạn kiểm soát việc hiển thị các phần tử tiện ích trên các thiết bị khác nhau như **máy tính**, và **điện thoại**. Điều này rất quan trọng khi bạn muốn tối ưu hóa trang web cho mọi loại thiết bị, đảm bảo rằng nội dung hiển thị đẹp mắt và dễ sử dụng trên tất cả các kích thước màn hình.

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


# Thiết kế

Tùy chọn **Thiết kế** giúp bạn điều chỉnh và tùy biến giao diện của các phần tử trên trang web, bao gồm văn bản, hình ảnh, nút bấm, biểu mẫu, và nhiều loại widget khác. Thông qua **Thiết kế**, bạn có thể thay đổi các thuộc tính như màu sắc, kiểu chữ, viền, khoảng cách, và các hiệu ứng khác để phù hợp với thiết kế tổng thể của landing page.

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

**Dưới đây là hướng dẫn chi tiết về cách sử dụng tùy chọn Thiết kế:**

* **Màu nền:** Tùy chọn Màu nền cho phép bạn thiết lập màu nền cho phần tử được chọn trên trang.

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

* **Overflow:** Khi nội dung bên trong của một section/ hộp vượt quá kích thước của nó, bạn có thể điều chỉnh cách phần section/ hình khối xử lý phần nội dung tràn ra bằng các sử dụng Kiểu nội dung.
  * **Mặc định:** Trong một số trình duyệt hoặc tình huống nhất định, `visible` sẽ được coi là giá trị mặc định default. Điều này có nghĩa là nếu bạn không chỉ định overflow content, trình duyệt sẽ coi như giá trị là `visible`.
  * **Ẩn:** Nội dung vượt quá kích thước của phần tử sẽ bị cắt bỏ và không hiển thị ra ngoài biên của phần tử.
  * **Hiện:** Nội dung vượt quá kích thước của phần tử sẽ được hiển thị đầy đủ, ngay cả khi nó tràn ra ngoài biên của phần tử đó. Đây là giá trị mặc định trong nhiều trường hợp.

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

* **Box shadow:** Tùy chọn Box shadow cho phép bạn tạo hiệu ứng bóng đổ cho các phần tử, giúp chúng nổi bật và có chiều sâu hơn. Bạn có thể tùy chỉnh loại bóng, vị trí, màu sắc, độ mờ, và kích thước của bóng.

  <figure><img src="/files/8q9neZBjEVlkJdjt2Q8e" alt=""><figcaption></figcaption></figure>

  * **Kiểu hiển thị:**&#x20;
    * **Box:** Đây là loại bóng tiêu chuẩn, tạo ra bóng đổ xung quanh toàn bộ phần tử.
    * **Realistic:** Loại bóng này tạo hiệu ứng bóng đổ thực tế hơn, với độ mờ và độ dày khác nhau.
  * **Vị trí:**
    * **Bên ngoài:** Bóng đổ nằm bên ngoài phần tử, tạo cảm giác phần tử nổi lên khỏi nền.
    * **Bên trong:** Bóng đổ nằm bên trong phần tử, tạo cảm giác như phần tử bị lõm vào hoặc bị chìm xuống.
  * **Màu sắc:** Bạn có thể chọn màu cho bóng đổ bằng cách sử dụng bộ chọn màu. Màu sắc của bóng có thể ảnh hưởng lớn đến cảm giác về chiều sâu.
    * **X:** Xác định mức độ bóng lệch sang trái hoặc phải so với phần tử.
    * **Y:** Xác định mức độ bóng lệch lên trên hoặc xuống dưới so với phần tử.
    * **Làm mờ:** Điều chỉnh độ mờ của bóng. Giá trị lớn hơn sẽ làm bóng mờ hơn và trông mềm mại hơn.
    * **Lan truyền:** Điều chỉnh kích thước của bóng đổ. Giá trị dương sẽ làm bóng lan rộng hơn, giá trị âm sẽ làm bóng thu hẹp lại.


# Kiểu chữ

Tùy chọn **Kiểu chữ** cho phép bạn tùy chỉnh các thuộc tính của văn bản trên landing page, bao gồm kiểu chữ, kích thước, màu sắc, khoảng cách và các thuộc tính khác. Việc điều chỉnh **Kiểu chữ** giúp đảm bảo rằng văn bản trên landing page không chỉ dễ đọc mà còn phù hợp với thiết kế tổng thể.

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

**Dưới đây là hướng dẫn chi tiết về cách sử dụng tùy chọn Kiểu chữ:**

* **Font chữ:** Xác định loại phông chữ mà văn bản sẽ sử dụng. Chọn từ danh sách các phông chữ có sẵn hoặc nhập tên phông chữ tùy chỉnh.
* **Căn chỉnh văn bản:** Xác định cách văn bản được căn chỉnh trong phần tử.
  * **Căn trái:** Văn bản được căn chỉnh sát lề trái của trang hoặc khung chứa.
  * **Căn giữa:** Văn bản được căn chỉnh vào giữa theo chiều ngang của trang hoặc khung chứa.
  * **Căn phải:** Văn bản được căn chỉnh sát lề phải của trang hoặc khung chứa.
  * **Căn đều:** Văn bản được căn chỉnh đều ở cả hai bên lề trái và phải, tạo thành các dòng văn bản bằng nhau về chiều dài.
* **Thê loại:** Xác định các hiệu ứng trang trí như mặc định, gạch chân, gạch trên, gạch giữa, không.
* **Màu sắc:** Xác định màu sắc của văn bản.
* **Độ đậm font chữ:** Xác định độ dày của phông chữ.
* **Kiểu chữ:** Xác định kiểu của phông chữ như mặc định, bình thường, in nghiêng, hơi nghiêng
* **Chuyển đổi chữ:** Xác định cách văn bản sẽ được chuyển đổi về mặc định, viết hoa chữ đầu, viết hoa tất cả, viết thường hoặc không.
* **Kích thước chữ:** Xác định kích thước của văn bản.
* **Khoảng cách giữa chữ:** Xác định khoảng cách giữa các ký tự trong văn bản: mặc định, tự động, hẹp, rộng, tùy chỉnh.
* **Khoảng cách dòng:** Xác định khoảng cách giữa các dòng văn bản: mặc định, single, 1.5, nhân đôi, tùy chỉnh.
* **Text shadow**: Tạo bóng cho văn bản để tăng hiệu ứng thị giác.
  * **Màu sắc:** Màu sắc của bóng.
  * **X:** Khoảng cách bóng theo chiều ngang.
  * **Y:** Khoảng cách bóng theo chiều dọc
  * **Làm mờ:** Độ mờ của bóng.


# Đường viền

Tùy chọn **Đường viền** cho phép bạn thêm và điều chỉnh viền cho các phần tử trên trang landing page như văn bản, hình ảnh, nút, hoặc các khối nội dung. Viền giúp tạo sự phân tách rõ ràng giữa các phần tử và có thể được sử dụng để làm nổi bật hoặc trang trí các phần tử trên trang web.

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

**Dưới đây là hướng dẫn chi tiết về cách sử dụng tùy chọn Đường viền:**

* **Đường viền:** Điều chỉnh độ dày của đường viền bằng cách nhập giá trị, giá trị lớn hơn sẽ làm viền dày hơn. **Nút khóa** cho phép bạn quyết định liệu các giá trị của viền sẽ được áp dụng đồng đều cho tất cả các cạnh của section hay riêng biệt cho từng cạnh.
  * **Default:** Kiểu viền mặc định của trình chỉnh sửa hoặc trình duyệt, thường là không có viền hoặc viền liền cơ bản.
  * **Solid:** Viền liền một màu, là kiểu viền cơ bản và thường được sử dụng.
  * **Dotted:** Viền được tạo thành từ các chấm nhỏ liên tục.
  * **Dashed:** Viền được tạo thành từ các đoạn ngắn liên tục.
  * **Double:** Viền kép, gồm hai đường viền song song.
  * **Groove:** Viền tạo cảm giác sâu vào bên trong phần tử, thường dùng để tạo hiệu ứng nổi.
  * **Ridge:** Viền tạo cảm giác nổi lên, đối lập với kiểu Groove.
  * **Inset:** Viền tạo cảm giác phần tử bị lõm vào bên trong, dùng cho các hiệu ứng nội bộ.
  * **Outset:** Viền tạo cảm giác phần tử nổi lên ngoài phần tử chứa.

<figure><img src="/files/08FZLiZ7QStstfQmPrq1" alt=""><figcaption></figcaption></figure>

* **Bo góc:** Tùy chọn **Bo góc** cho phép bạn điều chỉnh độ cong của các góc của phần tử. Điều này giúp phần tử có các góc bo tròn thay vì góc vuông. **Nút khóa** cho phép bạn quyết định liệu các giá trị của bo góc sẽ được áp dụng đồng đều cho tất cả các góc của section hay riêng biệt cho từng góc.

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


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

**Trình chỉnh sửa nâng cao** trong thanh thiết lập nhanh cung cấp các công cụ và cài đặt nâng cao để tinh chỉnh chi tiết các phần tử trên trang web. Đây là nơi bạn có thể thực hiện các điều chỉnh tinh vi và cấu hình chi tiết hơn cho các widget, cho phép bạn kiểm soát sự hiển thị và hành vi của các phần tử một cách chính xác hơn.

Nhấp vào **Nâng cao** trên thanh thiết lập nhanh để truy cập trình chỉnh sửa nâng cao.

<figure><img src="/files/0k2PFvvBNRqHGNC8iwrH" alt=""><figcaption></figcaption></figure>


# Sự kiện

**Sự kiện** cho phép bạn thêm các sự kiện tương tác vào các thành phần trên trang như nút bấm, hình ảnh, các khối văn bản… Những sự kiện này có thể làm cho trang của bạn trở nên sống động và hấp dẫn hơn, đồng thời cải thiện trải nghiệm người dùng.

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

#### 1. Chọn sự kiện:

* **Nhấp chuột:** sự kiện xảy ra khi người dùng nhấp chuột vào phần tử.
* **Di chuột:** sự kiện xảy ra khi người dùng di chuyển con trỏ chuột qua phần tử.

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

#### 2. Thiết lập hành động khi xảy ra sự kiện

<figure><img src="/files/6DVqqvWJrAZEGulVXVY9" alt=""><figcaption></figcaption></figure>

* **Thay đổi màu sắc:** thay đổi màu sắc của phần tử khi thực hiện sự kiện.
  * **Mục tiêu:** lựa chọn thay đổi màu sắc của màu chữ, màu nền, màu viền.
* **Mở popup**: hiển thị một cửa sổ popup với thông tin hoặc biểu mẫu.
  * **Mục tiêu:** lựa chọn popup và hiệu ứng popup xuất hiện.
* **Đóng popup**: đóng một cửa sổ popup hiện đang mở.
  * **Mục tiêu:** lựa chọn popup và hiệu ứng popup đóng lại.
* **Cuộn:** tự động cuộn trang đến một phần tử cụ thể.
  * **Mục tiêu:** lựa chọn section sẽ cuộn tới.
* **Mở liên kết**: mở một liên kết cụ thể khi người dùng tương tác với phần tử
  * **Mục tiêu:** lựa chọn liên kết mục tiêu và lựa chọn cách hiển thị: trong trang hoặc cửa sổ mới.
* **Ẩn/Hiện phần tử:** ẩn/ hiện phần tử được chỉ định.
  * **Mục tiêu:** nhập ID phần tử được ẩn đi hoặc hiện lên khi thực hiện sự kiện.


# Hiệu ứng

**Hiệu ứng** cho phép bạn thêm các hiệu ứng động cho phần tử trên landing page để tạo sự thu hút và sinh động hơn. Việc sử dụng các hiệu ứng này giúp tăng tính tương tác và thu hút sự chú ý của người dùng.

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

* **Thể loại:**
  * Đây là tên của hiệu ứng động mà bạn muốn áp dụng cho phần tử trên trang. Mỗi hiệu ứng sẽ tạo ra một kiểu chuyển động hoặc biến đổi khác nhau cho phần tử.
  * Tìm và chọn hiệu ứng từ danh sách thả xuống. Bạn có thể thử các hiệu ứng khác nhau để chọn hiệu ứng phù hợp với phong cách của trang landing page.
* **Thời gian chạy:**
  * Đây là thời gian mà hiệu ứng sẽ diễn ra, tính bằng giây (seconds). Thời gian ngắn hơn sẽ làm cho hiệu ứng diễn ra nhanh hơn, trong khi thời gian dài hơn sẽ làm cho hiệu ứng chậm hơn.
  * Trong phần **Thời gian chạy**, nhập hoặc chọn thời gian bạn muốn cho hiệu ứng. Điều chỉnh thời gian sao cho phù hợp với mục đích và thẩm mỹ của trang landing page. Một hiệu ứng quá nhanh hoặc quá chậm có thể ảnh hưởng đến trải nghiệm người dùng.
* **Thời gian chờ:**
  * Độ trễ là khoảng thời gian trước khi hiệu ứng bắt đầu, tính từ lúc phần tử xuất hiện trên màn hình. Điều này cho phép bạn kiểm soát khi nào hiệu ứng sẽ bắt đầu diễn ra.
  * Trong phần **Thời gian chờ**, nhập hoặc chọn thời gian trễ mong muốn. Thời gian chờ có thể được sử dụng để tạo ra hiệu ứng nối tiếp hoặc đồng bộ giữa các phần tử khác nhau trên trang.
* **Lặp lại:**
  * Tùy chọn **Lặp lại** cho phép bạn quyết định liệu hiệu ứng sẽ lặp lại liên tục hay chỉ diễn ra một lần. Trong phần **Lặp lại**, nhập số lần bạn muốn hiệu ứng lặp lại.


# Đồng bộ thiết kế Máy tính/Điện thoại

Chức năng **"Đồng bộ thiết kế Máy tính/Điện thoại"** cho phép điều chỉnh hiển thị của một thành phần (như nút, hình ảnh, văn bản) trên cả hai phiên bản giao diện: **máy tính** và **điện thoại**. Người dùng có thể chọn **đồng bộ** hoặc **không đồng bộ** thiết kế để đáp ứng nhu cầu thiết kế giao diện phù hợp với từng thiết bị.

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

**Các tùy chọn chính**

* **Đồng bộ**: Khi bật tính năng này, mọi thay đổi về vị trí, kích thước, màu sắc, kiểu chữ,... của thành phần sẽ được áp dụng đồng nhất trên cả giao diện máy tính và điện thoại.
  * **Ưu điểm:**
    * Đảm bảo tính nhất quán trong thiết kế.
    * Tiết kiệm thời gian khi chỉ cần chỉnh sửa một lần.
* **Không đồng bộ**: Khi chọn tùy chọn này, người dùng có thể thiết kế riêng biệt cho giao diện máy tính và điện thoại.
  * **Ưu điểm:**
    * Tối ưu hóa giao diện cho từng loại thiết bị (ví dụ: giảm kích thước hình ảnh trên điện thoại để tăng tốc độ tải trang).
    * Tăng khả năng tùy biến và mang lại trải nghiệm tốt hơn cho người dùng cuối.

**Lưu ý khi sử dụng**

* Nếu chọn **"Không đồng bộ"**, cần kiểm tra kỹ giao diện trên cả hai phiên bản để tránh lỗi hiển thị.
* Sử dụng tính năng đồng bộ nếu thành phần không yêu cầu tùy biến lớn giữa các thiết bị để tiết kiệm thời gian.


# 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.


# Tùy chỉnh nâng cao

Tính năng **"Tùy chỉnh nâng cao"** cho phép người dùng tùy biến giao diện và hành vi của thành phần (component) thông qua các lớp CSS và mã CSS tùy chỉnh. Đây là một tính năng mạnh mẽ dành cho lập trình viên hoặc nhà thiết kế web muốn tùy chỉnh chi tiết theo nhu cầu.

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

#### 1. **Class tùy chỉnh**

* **Mục đích:** Người dùng có thể thêm các **class CSS** để áp dụng các quy tắc định dạng (styles) đã được định nghĩa trong tệp CSS của dự án.
* **Cách sử dụng:**
  * Nhập tên class (cách nhau bởi dấu phẩy nếu thêm nhiều class, ví dụ: `class1, class2`).
  * Các class này sẽ được thêm vào thành phần và sẽ kích hoạt các style tương ứng.

#### 2. **CSS tùy chỉnh**

* **Mục đích:** Cho phép người dùng viết mã CSS trực tiếp để thay đổi các thuộc tính cụ thể của thành phần, mà không cần chỉnh sửa tệp CSS gốc.
* **Cách sử dụng:**
  * Viết mã CSS vào ô, ví dụ:

    ```css
    overflow: hidden;
    display: block;
    background-color: #f3f3f3;
    ```
  * Các quy tắc CSS này sẽ chỉ áp dụng cho thành phần được chọn.

#### 3. **Lợi ích của tùy chỉnh nâng cao**

* Cho phép nhà phát triển tạo ra giao diện riêng biệt mà không cần chỉnh sửa cấu trúc mặc định.
* Có thể điều chỉnh thành phần để phù hợp với phong cách thiết kế cụ thể.
* Dễ dàng kiểm tra các thay đổi mà không cần thay đổi toàn bộ mã nguồn CSS.

{% hint style="warning" %}
**Lưu ý:**&#x20;

* Sử dụng tính năng này đòi hỏi kiến thức cơ bản về CSS.
* Tránh xung đột với các class hoặc quy tắc CSS hiện có.
* Đảm bảo kiểm tra trên nhiều thiết bị để các thay đổi hoạt động ổn định.
  {% endhint %}


# 3.4. Nhân bản

**Nhân bản** giúp bạn nhanh chóng tạo bản sao của một phần tử hiện có trên landing page của bạn. Nhấp vào biểu tượng **Nhân bản** trên thanh thiết lập để tạo một bản sao của phần tử được chọn. Một bản sao của phần tử sẽ được tạo ra ngay lập tức và xuất hiện trên trang.

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


# 3.5. Di chuyển

**Di chuyển lên** cho phép bạn thay đổi thứ tự của phần tử bằng cách di chuyển nó lên một vị trí phía trên trong danh sách phần tử. Nhấp vào biểu tượng **Di chuyển lên** trên thanh thiết lập nhanh, sau đó di chuyển phần tử lên vị trí phía trên phù hợp với bố cục trang.

**Di chuyển xuống** cho phép bạn thay đổi thứ tự của phần tử bằng cách di chuyển nó xuống một vị trí phía dưới trong danh sách phần tử. Nhấp vào biểu tượng **Di chuyển xuống** trên thanh thiết lập nhanh, sau đó di chuyển phần tử xuống vị trí phía dưới phù hợp với bố cục trang.

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


# 3.6. Xóa

**Xóa** cho phép bạn xóa phần tử khỏi trang landing page. Nhấp vào biểu tượng **Xóa** trên thanh thiết lập để xóa thành phần được chọn.

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


# 3.7. Trợ giúp

**Trợ giúp** cung cấp tài liệu trợ giúp và hỗ trợ thêm khi bạn gặp vấn đề hoặc có câu hỏi. Nhấp vào biểu tượng **Trợ giúp** trên thanh thiết lập nhanh để xem tài liệu hướng dẫn hoặc câu hỏi thường gặp để giải quyết các vấn đề.

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


# 1. Section

**Section** là một trong những thành phần quan trọng trong quá trình thiết kế landing page. Mỗi section là một khối nội dung riêng biệt và giúp việc tổ chức bố cục trang một cách trực quan và hợp lý.

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

## **1. Thêm Section vào landing page**

Để thêm section mới vào trang langding page, bạn có thể thực thiện theo một trong hai cách sau:

* **Cách 1:** Thêm section từ thanh sidebar.

  * Trong thanh Sidebar, nhấp vào biểu tượng **Section**, sau đó lựa chọn **Section** trắng hoặc mẫu section phù hợp.

  <figure><img src="/files/0LIdMGotU7BTEavPUvnL" alt=""><figcaption></figcaption></figure>
* **Cách 2:** Thêm section từ màn hình chỉnh sửa:

  * Tại màn hình chỉnh sửa, chọn section có vị trí trước section muốn thêm.
  * Nhấn nút **+ Thêm mới Section** để thêm mới section trắng.

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

{% hint style="info" %}
**Lưu ý:** Bạn có thể điều chỉnh chiều cao section bằng cách nhấn và kéo thả nút **mũi tên** bên cạnh nút **Thêm mới Section**.
{% endhint %}

## **2. Trình chỉnh sửa Section**

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

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Section** 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="/files/1nzGLbMJmsBtXFnMpFr0" alt=""><figcaption></figcaption></figure>

* **ID CSS:** định danh của phần tử section
* **Hiển thị:** Xác định các thiết bị mà section 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 [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-sidebar/thiet-ke).
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của section, bạn cũng có thể điều chỉnh độ bo tròn của viề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-thiet-ke/duong-vien).

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

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Section** 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="/files/JP6ny9blUJ9HViytShlL" alt=""><figcaption></figcaption></figure>

* **Dính phần tử:** Cho phép bạn sử dụng cách định vị phần tử 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).
* **Thiết kế đồng bộ 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).


# 2. Tiện ích Cơ bản


# 2.1. Text

Trong thiết kế landing page, việc sử dụng **text** một cách hiệu quả là rất quan trọng trong việc truyền tải thông tin rõ ràng và hấp dẫn đến người xem.

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

## **1. Thêm Text vào trang landing page**

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

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

* Bạn có thể lựa chọn **Heading, Tiêu đề, Đoạn văn bản** cho phù hợp với landing page của mình.
  * **Heading:** Đây là phần text quan trọng nhất, thường là tiêu đề chính của một đoạn hoặc trang. Nó được sử dụng để thu hút sự chú ý của người đọc.
    * Sử dụng **H1** (Tiêu đề chính) cho tiêu đề chính của trang, mỗi trang chỉ nên có một H1 để xác định rõ ràng chủ đề chính của trang.&#x20;
    * Sử dụng **H2** (Tiêu đề phụ) cho các phần chính trong nội dung, giúp chia nội dung thành các phần dễ quản lý.
    * Sử dụng **H3-H6** (Tiêu đề con) để chia nhỏ nữa các phần trong nội dung nếu cần thiết.
  * **Tiêu đề:** Là các tiêu đề phụ hoặc các phần quan trọng khác, giúp chia nhỏ nội dung thành các phần dễ đọc hơn.
  * **Đoạn văn bản:** Đây là nội dung chính của trang, bao gồm các đoạn văn bản để truyền đạt thông tin chi tiết.

## **2. Trình chỉnh sửa Text**

Bạn có thể chỉnh sửa nội dung text của các phần tử như tiêu đề, đoạn văn, nút bấm, hoặc bất kỳ thành phần text nào khác trên landing page của bạn.&#x20;

### 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 **Text** 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.

* Nhập hoặc chỉnh sửa nội dung text: Thay đổi nội dung, phông chữ, kích thước, màu sắc, và định dạng văn bản

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

* Sử dụng các công cụ định dạng: Căn lề, in đậm, in nghiêng, gạch chân…
  * **Độ đậm chữ:** Cho phép bạn điều chỉnh độ dày của phông chữ, từ kiểu chữ mỏng nhất đến kiểu chữ đậm nhất.
  * **Chuyển đổi chữ:** Sử dụng để thay đổi kiểu hiển thị văn bản, như chuyển tất cả thành chữ in hoa, in thường, hoặc chỉ viết hoa chữ cái đầu tiên.
  * **Text shadow:** Tạo hiệu ứng bóng cho chữ, giúp văn bản nổi bật và có chiều sâu hơn.
  * **Kiểu chữ:** Điều chỉnh trạng thái của chữ giữa kiểu chữ nghiêng và kiểu chữ bình thường.
  * **Thể loại:** Thêm các trang trí cho văn bản như gạch chân, gạch ngang, hoặc không có trang trí
  * **Font chữ:** Chọn font chữ cho văn bản từ danh sách các phông chữ có sẵn.
  * **Kích cỡ chữ:** Điều chỉnh kích thước văn bản theo pixel hoặc cm.
  * **Màu sắc:** Chọn màu cho văn bản.
  * **Căn chỉnh:** Căn chỉnh vị trí văn bản theo các hướng như trái, phải, giữa, hoặc đều hai bên.
  * **Khoảng cách giữa chữ:** Điều chỉnh khoảng cách giữa các chữ cái trong văn bản.
  * **Khoảng cách dòng:** Điều chỉnh khoảng cách giữa các dòng trong cùng một đoạn văn.
  * **Thứ tự:** Tạo danh sách có thứ tự, các mục trong danh sách sẽ được đánh số.
  * **Dấu đầu dòng:** Tạo danh sách không thứ tự, các mục trong danh sách sẽ có dấu đầu dòng.
  * **Chiều văn bản:** Thiết lập hướng hiển thị văn bản từ trái sang phải hoặc từ phải sang trái.
  * **Thụt đầu dòng:** Tạo khoảng cách thụt vào đầu đoạn văn.
  * **Nhô đầu dòng:** Giảm khoảng cách thụt đầu đoạn văn.
  * **Tiêu đề:** Chọn các cấp độ tiêu đề từ H1 đến H6 để sử dụng cho đoạn văn.

### 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 **Biểu mẫu** 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="/files/csZiTny7Pyo2bLRV1tGj" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Căn chỉnh toàn bộ nội dung văn bản theo trái, phải, giữa hoặc đều hai bên của phần tử chứa. Xem thêm thông tin, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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 phần tử chứa văn bản, bao gồm chiều rộng và chiều cao. Xem thêm thông tin, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà văn bản sẽ được hiển thị máy tính và điện thoại.
* **Thiết kế:** cho phép bạn thay đổi màu nền của văn bản đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).

### 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 văn bản 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="/files/qwiNrlHXBDjaJWpyvfyP" 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).
* **Thiết kế đồng bộ Desktop/Mobile:** 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).


# 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="/files/Y6TOKrWHi7H9ebKebQzq" 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="/files/0asxnV6Nx51TUCcT6zZu" 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="/files/xhvLWQqb6SGxEZGFv11b" 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="/files/OAOqof51qWUpfRXTBE56" 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="/files/brJ7VCVh1KgvaVtzXju8" 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="/files/uZdSSGx63RQLI0IQkaPN" 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="/files/bs8xgKz0vUSdbPXVguzd" 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="/files/AbfqNv9rFFUYsMqPyJcg" 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>](/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>](/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>](/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>](/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>](/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="/files/37yhzeRDM2x6HO1KUnMW" 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).


# 2.3. Container

Tiện ích **Container** là một công cụ hữu ích giúp bạn tạo các khối hộp nội dung trên landing page một cách dễ dàng. Bạn có thể tạo ra các khung chứa văn bản, hình ảnh, video, hoặc bất kỳ thành phần nào khác mà bạn muốn làm nổi bật trên trang.

## **1. Thêm Container vào trang landing page**

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

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

## **2. Trình chỉnh sửa Container**

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

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Container** 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="/files/mPTe4NazEPn9q03GKMPP" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh **Container** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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 **Container**, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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à **Container** 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, overflow và hiệu ứng đổ bóng của **Container** đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của **Container**, 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>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).

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

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Container** 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="/files/H91pfz69oODrc38Ficvh" 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).


# 3. Tiện ích Phương tiện


# 3.1. Hình ảnh

Tiện ích **Hình ảnh** cho phép bạn chèn và tùy chỉnh hình ảnh trên landing page, giúp tăng tính thẩm mỹ và thu hút sự chú ý của người dùng. Bạn có thể sử dụng hình ảnh để giới thiệu sản phẩm, dịch vụ, hoặc tạo điểm nhấn cho các phần nội dung khác trên trang.

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

## **1. Thêm Hình ảnh vào landing page**

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

<figure><img src="/files/9V8Za16SDssnvJwcq2HW" alt=""><figcaption></figcaption></figure>

**Lưu ý:**

* Các loại tệp hình ảnh được hỗ trợ bao gồm: PNG, JPG, JPEG, GIF, SVG, SVG+XML, ICO, X-ICON, WEBP
* Mỗi trang landing page có thể chứa tối đa 15.000 tệp phương tiện, bao gồm hình ảnh, âm thanh và các tệp khác. Nếu vượt quá giới hạn này, sẽ có thông báo lỗi. Giới hạn kích thước cho mỗi tệp là 200MB.
* Tệp hình ảnh không nên chứa khoảng trắng hoặc ký tự đặc biệt.
* Khi tải ảnh lên để sử dụng trên trang landing page của bạn, hãy đảm bảo rằng bạn đã nhận được sự cho phép từ các nhiếp ảnh gia, doanh nghiệp hoặc các bên thứ ba khác.
* Việc sử dụng tiện ích hình ảnh không thay đổi hình nền của trang. Thay vào đó, nó thêm một hình ảnh vào một hàng hoặc cột.&#x20;

## **2. Trình chỉnh sửa ảnh**

### 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 **Hình ảnh** 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="/files/vfi9A5Ie602MGC0ea1NI" alt=""><figcaption></figcaption></figure>

* **Thay đổi hình ảnh:** Cho phép người dùng thay đổi hình ảnh theo ý thích bằng cách nhấn vào biểu tượng <img src="/files/lcLncsFY8bjIHoutKonx" alt="" data-size="line">.
* **Xóa:** Khi thực hiện xóa hình ảnh, nội dung thay thế sẽ được hiển thị.
* **Nội dung thay thế:** Văn bản thay thế sẽ được hiển thị trong trường hợp hình ảnh tải bị lỗi.

### 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 **Hình ảnh** 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="/files/HpK4W7LAy9QsosqFffHe" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh **Hình ảnh** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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:** trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** cho phép bạn kiểm soát việc hiển thị **Hình ảnh** trên các thiết bị khác nhau 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 **Hình ảnh** đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của **Hình ảnh,** 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>](/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 **Hình ảnh** 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="/files/M7TZs09TSbQvdUIao3Jp" 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).


# 3.2. Slider

Tiện ích **Slider** là một công cụ cho phép hiển thị một loạt các hình ảnh, video, hoặc nội dung theo dạng trượt ngang, dọc. Đây là một cách hiệu quả để thu hút sự chú ý của người dùng và trình bày nhiều thông tin trong một không gian hạn chế.

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

## **1. Thêm Slider vào landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Slider** trong mục **Phương tiện.**
* Chọn phần tử **Slider** và kéo vào trang landing page.

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

## **2. Trình chỉnh sửa Slider**

### 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 **Slider** 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="/files/EG72UXFf19qiSdq3fkZM" alt=""><figcaption></figcaption></figure>

* Nhấn **+ Thêm** để thêm phần tử slider mới.
* Nhấn và kéo thả để di chuyển các phần tử slider.
* Nhấn vào biểu tượng <img src="/files/UIclvhBMl64Kt0DkPKNe" alt="" data-size="line"> của từng slide để thiết lập cài đặt: Nhân bản, Đặt làm mặc định, Đổi tên, Nội dung, Xóa.<br>

  <figure><img src="/files/TDYgiyNCHDFvza3uMYcO" 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 **Slider** 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="/files/xXGlGQ0SMwq5yM7o2HaO" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Giúp bạn căn chỉnh **Slider** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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:** Giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** Cho phép bạn kiểm soát việc hiển thị **Slider** trên các thiết bị khác nhau bao gồm Máy tính và Điện thoại
* **Thiết kế:** Tùy chỉnh màu nền và hiệu ứng đổ bóng cho toàn bộ **Slider** hoặc các slide cụ thể bên trong nó, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của **Slider**, 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>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).&#x20;
* **Cài đặt slider:** Cho phép bạn tùy chỉnh các thiết lập liên quan đến cách thức hiển thị và hoạt động của slider.
  * **Hướng chuyển tiếp:** Xác định hướng di chuyển của các slide khi chuyển đổi: trái sang phải, phải sang trái, dưới lên trên, trên xuống dưới
  * **Thời gian chuyển động:** Điều chỉnh thời gian diễn ra hiệu ứng chuyển đổi giữa các slide.
  * **Số lượng slide:** Xác định số lượng slide hiển thị đồng thời trong khung nhìn của trang chỉnh chiếu.
  * **Khoảng trống:** Điều chỉnh khoảng cách giữa các slide.
  * **Vòng lặp:** Cho phép slider tự động lặp lại khi nó hiển thị slide cuối cùng.
  * **Tự động phát:** Tự động chạy trang chỉnh chiếu mà không cần người dùng tương tác.
  * **Thời gian mỗi slide hiển thị:** Thiết lập thời gian hiển thị của mỗi slide trước khi chuyển sang slide tiếp theo (chỉ áp dụng khi Autoplay bật).&#x20;
  * **Gap:**  thiết lập khoảng cách giữa các slide trong trang.

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

* **Thumbnails:** Hiển thị các hình ảnh thu nhỏ ở dưới hoặc bên cạnh slider mặc định, cho phép người dùng xem trước và chọn slide họ muốn xem.
  * **Bật:** hiển thị hình ảnh thu nhỏ trong trang chỉnh chiếu.
  * **Số lượng slide:** Xác định số lượng hình ảnh thu nhỏ hiển thị đồng thời trong khu vực hình thu nhỏ.
  * **Chiều dọc:** Chọn hướng hiển thị của hình ảnh thu nhỏ (dọc hoặc ngang).
  * **Vòng lặp:** Cho phép các hình ảnh thu nhỏ lặp lại khi người dùng cuộn hoặc di chuyển qua chúng.
  * **Khoảng trống:**  Điều chỉnh khoảng cách giữa các hình ảnh thu nhỏ.
  * **Chiều rộng:** Điều chỉnh chiều rộngcủa hình ảnh thu nhỏ.

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

* **Ký hiệu chấm tròn:** Giúp người dùng nhận biết số lượng slide hiện có và slide nào đang được hiển thị trong **Slider**.
  * **Bật / Tắt:** Cho phép bật hoặc tắt ký hiệu chấm tròn trên Slider. Khi tắt, các chấm tròn sẽ không hiển thị.
  * **Cơ bản:** Cho phép tùy chỉnh các cài đặt chung cho ký hiệu chấm tròn cơ bản, chưa được chọn.
    * **Chiều rộng:** Điều chỉnh độ rộng của chấm tròn (đơn vị: px). Tăng hoặc giảm kích thước để phù hợp với thiết kế.
    * **Chiều cao:**  Điều chỉnh độ cao của chấm tròn (đơn vị: px), giúp chấm tròn cân đối với giao diện Slider.
    * **Nền:** Chọn màu nền cho chấm tròn. Có thể sử dụng bảng màu hoặc nhập mã màu tùy chỉnh.
    * **Đường viền:** Tùy chỉnh đường viền và độ bo góc cho chấm tròn.
  * **Đã chọn:** Cho phép tùy chỉnh các cài đặt chung cho ký hiệu chấm đang được chọn.
    * **Nền:** Chọn màu nền cho chấm tròn. Có thể sử dụng bảng màu hoặc nhập mã màu tùy chỉnh.
    * **Đường viền:** Tùy chỉnh đường viền và độ bo góc cho chấm tròn.

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

* **Nút:** Bật / Tắt và tùy chỉnh các nút điều hướng (trái/phải) cho slider.

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

### 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 slider 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="/files/Qvx3fHQfGWcMipSNGqJf" alt=""><figcaption></figcaption></figure>

* **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).
* **Thiết kế đồng bộ Desktop/Mobile:** 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).


# 3.3. Thư viện

Tiện ích **Thư viện** cho phép bạn hiển thị một tập hợp hình ảnh theo cách hấp dẫn và có tổ chức trên landing page. Bạn có thể sử dụng gallery để giới thiệu danh mục sản phẩm, bộ sưu tập ảnh, hoặc các hình ảnh liên quan đến dịch vụ mà bạn cung cấp.

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

## **1. Thêm Thư viện vào landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Thư viện** trong mục **Phương tiện.**
* Chọn phần tử **Thư viện** và kéo vào trang landing page.

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

## **2. Trình chỉnh sửa Thư viện**

### 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 **Thư viện** 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. Tại đây, bạn có thể thêm hoặc đổi hình ảnh cho phù hợp với landing page của mình.

<figure><img src="/files/zLnIv8EZVsDvf4UqfrDE" 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 **Thư viện** 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="/files/QJUvk5bX7dO7oXrz9gLc" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Giúp bạn căn chỉnh **Thư viện** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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:** Trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** Cho phép bạn kiểm soát việc hiển thị **Thư viện** trên các thiết bị khác nhau 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 **Thư viện** đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của **Thư viện**, 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>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).
* **Bố cục thư viện:** Cấu hình các thiết lập chung cho **Thư viện**, bao gồm cách hiển thị hình ảnh, số lượng cột, khoảng cách giữa các hình ảnh, và các tùy chọn liên quan khác.
  * **Grid:** là một cách tổ chức nội dung theo dạng lưới, giúp sắp xếp các phần tử (như hình ảnh, văn bản, hoặc các widget) một cách ngăn nắp và dễ quản lý. <br>

    <figure><img src="/files/bjeV0M4EPLvUspizwrCh" alt=""><figcaption></figcaption></figure>
  * **Masonry:** là một kiểu bố trí lưới cho phép các phần tử (như hình ảnh) được sắp xếp theo cách không đồng đều để tối ưu hóa không gian và tạo ra một giao diện trực quan.<br>

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

### 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 **Thư viện** 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="/files/Jj22WpnzKOe9P0e2wMKe" alt=""><figcaption></figcaption></figure>

* **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).
* **Thiết kế đồng bộ Desktop/Mobile:** 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).


# 3.4. Video

Tiện ích **Video** cho phép bạn chèn video trực tiếp vào landing page của mình. Video có thể giúp truyền tải thông điệp mạnh mẽ, giải thích chi tiết sản phẩm/dịch vụ, hoặc tạo ra sự thu hút với khách hàng. Bạn có thể sử dụng video từ nhiều nguồn khác nhau, như tải lên trực tiếp hoặc nhúng từ các nền tảng chia sẻ video.

<figure><img src="/files/7ThhLfswcBI7jRuH7mMk" alt=""><figcaption></figcaption></figure>

## **1. Thêm video vào trang landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Video** trong mục **Phương tiện.**
* Chọn phần tử **Video** và kéo vào trang landing page.

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

## **2. Trình chỉnh sửa video**

### 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 **Video** 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="/files/cdT31eqDfpRVHtXitprF" alt=""><figcaption></figcaption></figure>

* Bạn có thể thiết lập nội dung trên video:
  * **Hiển thị thanh công cụ:** Bật hoặc tắt các điều khiển video như nút phát/tạm dừng, thanh tiến trình, âm lượng,... cho người dùng.
  * **Vòng lặp video:** Khi bật tùy chọn này, video sẽ tự động phát lại từ đầu khi kết thúc, tạo ra một vòng lặp vô tận.
  * **Tự động phát video:** Bật tùy chọn này để video tự động bắt đầu phát khi trang tải xong, mà không cần người dùng nhấn nút "Phát".
  * **Phát âm thanh:** Quyết định có cho phép âm thanh của video phát khi video chạy hay không.

### 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 **Video** 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="/files/T0BU8W0fYISE5UqDikGi" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Giúp bạn căn chỉnh **Video** theo khung chứa, 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-thiet-ke/can-chinh).
* **Kích thước:** Trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của **Video** trên trang landing page, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Cho phép bạn kiểm soát việc hiển thị **Video** trên các thiết bị khác nhau 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 **Video** đã chọ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-thiet-ke/thiet-ke).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của **Video**, bạn cũng có thể điều chỉnh độ bo tròn của viề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-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 **Video** 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="/files/i4nHnaSzpe23NW0q8OEw" alt=""><figcaption></figcaption></figure>

* **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).
* **Thiết kế đồng bộ Desktop/Mobile:** 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).


# 3.5. Biểu tượng

Tiện ích **Biểu tượng** cho phép bạn thêm các biểu tượng đồ họa vào landing page của bạn để làm nổi bật thông tin, cải thiện thiết kế, hoặc trang trí. Các biểu tượng có thể được sử dụng để chỉ dẫn, làm điểm nhấn cho các dịch vụ, hoặc đơn giản là để tạo sự hấp dẫn cho giao diện của trang.

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

## **1 Thêm Biểu tượng vào trang**

* Trong thanh sidebar, nhấp vào **Tiện ích**, sau đó chọn **Biểu tượng**
* Nhấp và kéo tiện ích Biểu tượng vào trang landing page của bạn

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

## **2. Trình chỉnh sửa Biểu tượng**

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

* Nhấp chuột vào tiện ích **Biểu tượng** và chọn **Nội dung** trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Biểu tượng

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

* Nhấp vào **Chọn biểu tượng** để chọn biểu tượng có sẵn hoặc nhấp vào **Tải tệp SVG lên**.
* Để liên kết biểu tượng, hãy nhấp vào Biểu tượng liên kết và chọn trang bạn muốn liên kết biểu tượng.

**+ Nội dung thay thế:** Nhập Văn bản thay thế cho biểu tượng để tạo văn bản thay thế. Văn bản thay thế cho phép công cụ tìm kiếm nhận dạng nội dung hình ảnh. Sử dụng văn bản mô tả rõ ràng hình ảnh.

**+ Chú thích:** Nhập Chú giải công cụ cho biểu tượng. Văn bản chú giải công cụ sẽ hiển thị khi người dùng di chuột qua hình ảnh.

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

* Nhấp chuột vào tiện ích **Biểu tượng** và chọn **Thiết kế** trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Icon

<figure><img src="/files/5HzQnRWi05dkj1PB8V5c" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh biểu tượng theo khung chứa. Xem thêm thông tin, xem [<mark style="color:red;">**Căn chỉnh**</mark>](/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:** trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang web. Xem thêm thông tin, xem [<mark style="color:red;">**Kích thước**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** cho phép bạn kiểm soát việc hiển thị Icon trên các thiết bị khác nhau bao gồm Desktop và Mobile
* **Thiết kế:** cho phép bạn thay đổi màu nền và hiệu ứng đổ bóng của Icon đã chọn. Xem thêm thông tin, xem [<mark style="color:red;">**Thiết kế**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).&#x20;
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của Icon, bạn cũng có thể điều chỉnh độ bo tròn của viền. Xem thêm thông tin, xem [<mark style="color:red;">**Đường viền**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).


# 3.5. Shape

Tiện ích **Shape** là công cụ đa năng hỗ trợ người dùng trong việc thiết kế, trình bày nội dung một cách sáng tạo và trực quan. Với các tính năng đa dạng như **Social logo, Pattern, Background, Arrow**s và **Icons**, tiện ích này giúp bạn tạo ra các sản phẩm thiết kế chuyên nghiệp và bắt mắt.

## 1. Thêm Shape vào landing page

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Shape** trong mục **Phương tiện.**
* Chọn phần tử **Shape** và kéo vào trang landing page.

<figure><img src="/files/7TEg2s9rykmMTr1jchkW" alt=""><figcaption></figcaption></figure>

## 2. Trình chỉnh sửa Shape

### 2.1. Thay đổi Shape

Để thay đổi **Shape** cho phù hợp với thiết kế của bạn, click vào **Shape** muốn chỉnh sửa trên màn hình ⇒ Chọn **Thay đổi Shape** trên thanh thiết lập nhanh.

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

Sau đó, popup **Quản lý Shape** sẽ được hiển thị trên màn hình với đa dạng các mẫu shape:

* **Socials:** Cung cấp bộ sưu tập các biểu tượng của các nền tảng mạng xã hội như Facebook, Instagram, LinkedIn, Messenger, YouTube, Zalo, Spotify, Telegram, và nhiều nền tảng khác.
* **Pattern:** Cung cấp bộ sưu tập các họa tiết, đường nét và hình khối trang trí, giúp tạo điểm nhấn cho thiết kế.
* **Background**: Cung cấp bộ sưu tập các họa tiết trang trí nền được thiết kế đơn giản và đẹp mắt, giúp tạo không gian riêng cho các nội dung chính.
* **Arrows:** Cung cấp các biểu tượng mũi tên với nhiều kiểu dáng, giúp điều hướng hoặc nhấn mạnh các nội dung cụ thể.
* **Icons:** Cung cấp các biểu tượng minh họa nhỏ giúp truyền tải thông tin một cách nhanh chóng và trực quan.

<figure><img src="/files/6iC0HNeO9DmVXP6W4tHL" alt=""><figcaption></figcaption></figure>

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

Để mở trình chỉnh sửa **Nội dung,** bạn click vào **Shape** 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="/files/Y9sJLwRekmU2kjes6uc2" alt=""><figcaption></figcaption></figure>

Tính năng **Tùy chỉnh Shape** cho phép người dùng chỉnh sửa chi tiết **Shape** bằng cách sử dụng mã SVG (Scalable Vector Graphics). Điều này giúp nâng cao khả năng thiết kế, hỗ trợ tạo ra các hình dạng độc đáo, phù hợp với yêu cầu và ý tưởng sáng tạo của bạn.

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

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Shape** 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="/files/wybqTRTG9enkRQvNgo3p" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Giúp bạn căn chỉnh **Shape** theo khung chứa, 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-thiet-ke/can-chinh).
* **Kích thước:** Trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của **Shape** trên trang landing page, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Cho phép bạn kiểm soát việc hiển thị **Shape** trên các thiết bị khác nhau 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 **Shape** đã chọ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-thiet-ke/thiet-ke).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của **Shape**, bạn cũng có thể điều chỉnh độ bo tròn của viề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-thiet-ke/duong-vien).

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

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Shape** 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="/files/80I7UGEMEJRwImllKSIE" 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).


# 4. Tiện ích Kinh doanh


# 4.1. Biểu mẫu

**Biểu mẫu** giúp bạn tạo và quản lý các biểu mẫu trên landing page của bạn. Biểu mẫu có thể được sử dụng để thu thập thông tin quan trọng từ người dùng, như thông tin liên hệ, đăng ký nhận bản tin, hoặc phản hồi từ khách hàng.

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

## 1. Thêm Biểu mẫu vào trang landing page <a href="#de-them-accordion-vao-trang-landing-page" id="de-them-accordion-vao-trang-landing-page"></a>

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Biểu mẫu** trong mục **Kinh doanh.**
* Chọn phần tử **Biểu mẫu** và kéo vào trang landing page.

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

## 2. Trình chỉnh sửa Biểu mẫu

### 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 **Biểu mẫu** 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="/files/7mT3p1VS3c8nHrxO7xwv" alt=""><figcaption></figcaption></figure>

* **Thông tin cơ bản**: chỉnh sửa các trường thông tin để thu thập dữ liệu.
* **Thêm trường:** Thêm các trường dữ liệu mới vào biểu mẫu.
* **Tiêu đề biểu mẫu:** Tên của biểu mẫu.
* **Tiêu đề nút:** Tên nút gửi.

### 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 **Biểu mẫu** 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="/files/AVWFNvMPNTinmp1V4hWq" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh biểu mẫu theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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:** giúp bạn điều chỉnh kích thước và vị trí của biểu mẫu trên trang landing page, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** cho phép bạn kiểm soát việc hiển thị biểu mẫu trên các thiết bị khác nhau 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 biểu mẫu đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke).
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của biểu mẫu, 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>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien).
* **Cài đặt biểu mẫu:** Căn chỉnh biểu mẫu, màu sắc background, cách hiển thị văn bản của biểu mẫu trên landing page.
  * **Khoảng cách giữa tiêu đề và trường:** Điều chỉnh khoảng cách giữa các tiêu đề và các trường nhập liệu.
  * **Khoảng trống:** Điều chỉnh khoảng cách tổng thể giữa các phần tử trong biểu mẫu.
  * **Chiều dọc:** Điều chỉnh khoảng cách dọc giữa các trường hoặc các dòng trong biểu mẫu.
  * **Chiều ngang:** Điều chỉnh khoảng cách ngang giữa các phần tử trong biểu mẫu.
  * **Căn chỉnh biểu mẫu:** Căn chỉnh toàn bộ biểu mẫu trên trang.
  * **Cài đặt trường input:** Tùy chỉnh nền và viền của các trường nhập liệu.\
    \- Nền: Đặt màu nền cho các trường nhập liệu.\
    \- Đường viền: Tùy chỉnh viền của các trường nhập liệu.\
    \- Bo góc: Tùy chỉnh độ bo tròn đường viền của các trường nhập liệu.
  * **Trường văn bản:** Điều chỉnh các thiết lập văn bản bên trong các trường nhập liệu.\
    \- Ký hiệu: Tùy chỉnh văn bản nhãn của biểu mẫu.\
    \- Nhập: Tùy chỉnh văn bản nhập vào các trường.\
    \- Placeholder: Tùy chỉnh văn bản gợi ý trong các trường nhập liệu.
  * **Khoảng cách trong input:** \
    \- MARGIN: Điều chỉnh khoảng cách bên ngoài của các trường nhập liệu so với các phần tử khác trong biểu mẫu.\
    \- PADDING: điều chỉnh khoảng cách bên trong các trường nhập liệu, tức là khoảng cách từ biên của trường đến nội dung văn bản bên trong.

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

* **Tiêu đề biểu mẫu:** tùy chỉnh cách hiển thị văn bản của Biểu mẫu trên landing page.
  * **Khoảng trống:**\
    **-** MARGIN: Điều chỉnh khoảng cách bên ngoài của tiêu đề so với các phần tử xung quanh.\
    \- PADDING: Điều chỉnh khoảng cách bên trong tiêu đề, tức là khoảng cách từ biên của vùng chứa tiêu đề đến nội dung văn bản bên trong.
  * **Điều chỉnh các cài đặt text:** Font chữ, Căn chỉnh văn bản, Kiểu chữ, Thể loại,...

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

* **Nút CTA:** tùy chỉnh giao diện nút gửi
  * **Khoảng trống:** \
    **-** MARGIN: Điều chỉnh khoảng cách bên ngoài của nút gửi so với các phần tử xung quanh\
    \- PADDING: Điều chỉnh khoảng cách bên trong nút gửi, tức là khoảng cách từ biên của nút đến nội dung văn bản bên trong.
  * **Khoảng cách giữa các trường và nút:** Điều chỉnh khoảng cách giữa các trường dữ liệu và nút gửi trong biểu mẫu.
  * **Căn chỉnh nút:** Căn chỉnh nút gửi trong vùng chứa của nó.\
    \- Điều chỉnh chiều rộng của nút gửi.\
    \- Điều chỉnh chiều cao của nút gửi.
  * **Điều chỉnh các cài đặt nút và text:** Nền, Font chữ, Căn chỉnh văn bản…

<figure><img src="/files/3ngKwophenhFMAtvxzoP" alt=""><figcaption></figcaption></figure>

### 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 biểu mẫu 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="/files/U1tCVyEE0GAnmyxYOuNo" alt=""><figcaption></figcaption></figure>

* **Cài đặt sự kiện gửi biểu mẫu:** Cho phép bạn thiết lập sự kiện cho hành động nhấn nút gửi biểu mẫu, 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).


# 4.2. Số tự động

**Số tự động** là một tiện ích đặc biệt giúp hiển thị hiệu ứng đếm số từ một giá trị bắt đầu đến một giá trị kết thúc trong một khoảng thời gian nhất định. Tính năng này thường được sử dụng để tạo hiệu ứng nổi bật cho các số liệu quan trọng trên landing page như doanh số, số lượng khách hàng, lượt tải ứng dụng, hoặc các thống kê ấn tượng.

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

## 1. Thêm Số tự động vào trang landing page <a href="#de-them-accordion-vao-trang-landing-page" id="de-them-accordion-vao-trang-landing-page"></a>

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Số tự động** trong mục **Biểu mẫu.**
* Chọn phần tử **Số tự động** và kéo vào trang landing page.

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

## 2. Trình chỉnh sửa Số tự động <a href="#adding-and-managing-accordion-items" id="adding-and-managing-accordion-items"></a>

### 2.1. Trình chỉnh sửa Nội dung <a href="#adding-and-managing-accordion-items" id="adding-and-managing-accordion-items"></a>

Để mở trình chỉnh sửa **Nội dung,** bạn click vào **Số tự động** 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.

Tại đây bạn có thể thiết lập một giá trị bắt đầu đến một giá trị kết thúc trong một khoảng thời gian nhất định.

<figure><img src="/files/rQ4ni6CS83ACcEWHgHGh" 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 **Số tự động** 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="/files/KedeVTLiO9xVe1NgXpBO" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Cho phép bạn căn chỉnh tiện ích theo khung chứa, 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-thiet-ke/can-chinh).
* **Kích thước:** Điều chỉnh kích thước của tiện ích, bao gồm chiều rộng, chiều cao và khoảng cách từ tiện ích đến lề của section, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà tiện ích sẽ được hiển thị (Máy tính, Điện thoại).
* **Thiết kế:** Cho phép bạn thêm nền và đổ bóng cho 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-thiet-ke/thiet-ke).
* **Kiểu chữ:** Cho phép bạn tùy chỉnh các thuộc tính của nội dung trong 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-thiet-ke/kieu-chu).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của tiện ích, bạn cũng có thể điều chỉnh độ bo tròn của đường viề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-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 **Số tự động** 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="/files/ptDyp1N4ru46sPMmbMpU" 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).


# 4.3. Đếm ngược

Tiện ích **Đếm ngược** cho phép bạn dễ dàng tạo một đồng hồ đếm ngược trên landing page của mình. Đồng hồ này có thể đếm thời gian còn lại cho các sự kiện, khuyến mãi, hoặc deadline quan trọng, giúp người dùng cảm thấy cấp bách và tăng cường động lực hành động.

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

## **1. Thêm Đếm ngược vào trang**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Đếm ngược** trong mục **Kinh doanh.**
* Chọn phần tử **Đếm ngược** và kéo vào trang landing page.

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

## **2. Trình chỉnh sửa Đếm ngược**

### 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 tiện ích **Đếm ngược** 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="/files/fsNcmThca01bVkVTsvkT" alt=""><figcaption></figcaption></figure>

* **Kiểu thiết kế:** Chọn kiểu hiển thị cho đồng hồ đếm ngược
  * **Mặc định:** Đây là kiểu hiển thị mặc định của đồng hồ đếm ngược, thường là một thiết kế cơ bản với các mục đếm ngược hiển thị theo cách đơn giản.
  * **Vòng tròn:** Hiển thị đồng hồ đếm ngược dưới dạng hình tròn, với các phần tử (ngày, giờ, phút, giây) được bao quanh bởi vòng tròn. Đây là một lựa chọn đẹp mắt và hiện đại.
  * **Cùng dòng:** Hiển thị đồng hồ đếm ngược dưới dạng một dải nằm ngang hoặc dọc, với các mục đếm ngược được sắp xếp theo hàng hoặc cột.

<figure><img src="/files/8oNhlL1MhBEzcFk4hqIe" alt=""><figcaption></figcaption></figure>

* **Kiểu hiển thị:** Chọn kiểu đồng hồ đếm ngược mà bạn muốn sử dụng
  * **Phút:** đếm ngược theo số phút cụ thể từ thời điểm hiện tại&#x20;
  * **Hàng ngày:** đếm ngược đến một thời điểm cụ thể trong ngày
  * **Thời lượng:** đếm ngược theo một khoảng thời gian cụ thể

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

* **Thời gian:** Nhập thời gian cụ thể mà đồng hồ sẽ đếm ngược đến. Đây có thể là số phút, giờ, hoặc ngày tùy thuộc vào loại đếm ngược bạn chọn.
* **Lặp lại:** Quyết định xem đồng hồ đếm ngược có nên lặp lại sau khi kết thúc không. Khi bật tùy chọn này, đồng hồ đếm ngược sẽ bắt đầu lại từ đầu sau khi kết thúc.
* **Ẩn khi hết thời gian:** Bật tính năng này để tự động ẩn đồng hồ đếm ngược khi thời gian đếm ngược kết thúc. Điều này có thể giúp giữ cho giao diện trang web của bạn gọn gàng và sạch sẽ sau khi đồng hồ hoàn tất.
* Bật tắt các phần tử của đếm ngược và chỉnh sửa tên nhãn.

<figure><img src="/files/34JnesWZ3sNFR6YzwOCJ" 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 tiện ích **Đếm ngược** 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="/files/6H0h3qgaqCs0JvjzHTsK" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Cho phép bạn căn chỉnh tiện ích theo khung chứa, 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-thiet-ke/can-chinh).
* **Kích thước:** Điều chỉnh kích thước của tiện ích, bao gồm chiều rộng, chiều cao và khoảng cách từ tiện ích đến lề của section, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà tiện ích sẽ được hiển thị (Máy tính, Điện thoại).
* **Thiết kế:** Cho phép bạn thêm nền và đổ bóng cho 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-thiet-ke/thiet-ke).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của tiện ích, bạn cũng có thể điều chỉnh độ bo tròn của đường viề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-thiet-ke/duong-vien).
* **Phần tử:** Cho phép bạn thiết lập định dạng nhóm phần tử label và chữ số.
* **Label:** Cho phép bạn thiết lập định dạng cho tên nhãn chú thích thời gian.
* **Chữ số:** Cho phép bạn thiết lập định dạng cho phần chữ số hiển thị.
* **Thời gian kết thúc:**&#x20;
* **Kiểu đếm ngược:** Cho phép bạn thiết lập định dạng cho phần giao diện kiểu đếm ngược.

### 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 tiện ích **Đếm ngược** 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="/files/KiUfHtTvSHiu1ta5Omdk" alt=""><figcaption></figcaption></figure>

* **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).
* **Thiết kế đồng bộ Desktop/Mobile:** 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).


# 4.4. Vòng quay may mắn

Tiện ích **Vòng quay may mắn** là một công cụ hấp dẫn giúp tăng cường tương tác với khách hàng, mang lại trải nghiệm thú vị và sáng tạo. Bạn có thể dễ dàng kéo thả hoặc nhấn chọn để thêm vào trang chỉnh sửa, phù hợp cho các chiến dịch khuyến mãi, sự kiện hoặc chương trình tri ân khách hàng.

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

## 1. Thêm Vòng quay may mắn vào trang landing page

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Vòng quay may mắn** trong mục **Kinh doanh.**
* Chọn phần tử **Vòng quay may mắn** và kéo vào trang landing page.

<figure><img src="/files/8kcKMzaLDXwWCUyfOudK" alt=""><figcaption></figcaption></figure>

## 2. Trình chỉnh sửa Vòng quay may mắn&#x20;

Để thiết lập **Vòng quay may mắn**, bạn click vào vòng quay muốn chỉnh sửa trên màn hình và chọn các tùy chọn thích hợp trên thanh thiết lập nhanh để chỉnh sửa các nội dung và cài đặt vòng quay.

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

#### 2.1.1. Danh sách kết quả

Để thiết lập **Danh sách kết quả**, bạn thực hiện theo các bước sau:

* **Bước 1:** Click vào vòng quay muốn chỉnh sửa trên màn hình ⇒ Chọn trình chỉnh sửa **Nội dung** trên thanh thiết lập nhanh.
* **Bước 2:** Chọn **Thêm trường** ⇒ Click vào trường **New coupon** vừa thêm.
* **Bước 3:** Sau khi hiển thị popup **Cài đặt các trường**, bạn chỉnh sửa thông tin như sau:
  * **Tên coupon:** nội dung sẽ hiển thị ở vòng quay may mắn.
  * **Mã coupon:** mã giảm giá khách hàng nhận được sau khi quay vòng quay.
  * **Xác suất %:** tỉ lệ quay vào các ô trên vòng quay.

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

{% hint style="warning" %}
**Lưu ý:** Khi thêm trường mới, hệ thống sẽ tự động sinh ra tên và mã coupon bất kỳ, bạn hoàn toàn có thể chỉnh sửa lại theo ý muốn của mình.
{% endhint %}

#### 2.1.2. Thông báo kết quả và lượt quay

Hệ thống sẽ dùng popup mặc định để hiển thị nội dung thông báo. Để chỉnh sửa nội dung thông báo bạn cần lưu ý các giá trị động:&#x20;

* {{coupon\_text}} sẽ được thay thế bằng nội dung thực tế của tên coupon.
* {{coupon\_code}} sẽ được thay thế bằng mã coupon cụ thể.
* {{spin\_turn\_left}} sẽ hiển thị số lượt quay còn lại.

Các giá trị động này sẽ được thay thế bằng dữ liệu thực tế khi ứng dụng hoạt động. Bạn có thể theo dõi hình ảnh sau:&#x20;

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

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

Ngoài ra, bạn có thể chỉnh sửa số lượt quay mà mỗi khách hàng có thể sử dụng trên vòng quay may mắn của bạn. Khi hết lượt quay, hệ thống sẽ hiển thị thông báo tương ứng với nội dung thông báo bạn thiết lập.

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

#### 2.1.3. Hình nền và nút bấm

Bạn có thể tùy chỉnh lại phần hình nền và nút bấm theo mong muốn sử dụng.

<figure><img src="/files/ZiO2e19inCz3PZEQomYs" 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 vòng quay 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="/files/ULNUa5fVJbQqGEuwqDY4" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Cho phép bạn căn chỉnh tiện ích vòng quay theo phía trên, dưới, trái, phải, giữa hoặc đều hai bê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-thiet-ke/can-chinh).
* **Kích thước:** Điều chỉnh kích thước của tiện ích, bao gồm chiều rộng, chiều cao và khoảng cách từ tiện ích đến lề của section, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà tiện ích sẽ được hiển thị (Máy tính, Điện thoại).
* **Kiểu chữ:** Cho phép bạn tùy chỉnh các thuộc tính của nội dung trên tiện ích vòng quay, 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-thiet-ke/kieu-chu).

### 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 vòng quay 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="/files/osotUw8CxZvyBHfhh79m" alt=""><figcaption></figcaption></figure>

* **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).


# 4.5. Thông báo

**Thông báo** là một tiện ích độc đáo giúp hiển thị các thông báo ngắn, cung cấp thông tin nhanh chóng và dễ hiểu cho người dùng trên Landing Page. Tính năng này giúp tăng sự tương tác và xây dựng niềm tin của khách hàng thông qua các thông tin như: "Đã có người mua hàng", "Ai đó vừa đăng ký", hoặc "Khuyến mãi chỉ còn lại vài giờ"...

## 1. Thêm **Thông báo** vào trang langding page:

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Thông báo** trong mục **Nâng cao.**
* Chọn phần tử **Thông báo** và kéo vào trang landing page.

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

{% hint style="info" %}
Nguyên lý của tính năng **Thông báo**: hiển thị những nội dung được chuẩn bị sẵn trong nguồn dữ liệu mặc định hoặc Google Sheet.
{% endhint %}

## 2. Trình chỉnh sửa Thông báo

### 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 tiện ích **Thông báo** 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="/files/N1z5XEKZimwXRSBkwQx6" alt=""><figcaption></figcaption></figure>

* **Kiểu dữ liệu:** Là nguồn dữ liệu đầu vào chứa danh sách nội dung hiển thị trên Thông báo.
  * **Mặc định:** Cho phép bạn tạo, thêm mới và chỉnh sửa nội dung một cách thủ công.<br>

    <figure><img src="/files/2UE1g35B0a1GwfEd2WRy" alt=""><figcaption></figcaption></figure>
  * **Google sheet:** Cho phép bạn nhập nhiều nội dung cùng lúc bằng file Google sheet khi bạn nhập đúng thông tin **Google Sheet ID** và **Sheet Name.** <br>

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

{% hint style="info" %}
Xem hướng dẫn chi tiết cách tạo nội dung bằng Google Sheet [tại đây](https://docs.shopone.io/cac-phan-tu-co-ban/tien-ich-nang-cao/thong-bao#cach-tao-noi-dung-tu-google-sheet).
{% endhint %}

* **Thời gian chạy:** Là khoảng thời gian Thông báo hiển thị trên màn hình.
* **Thời gian chờ:** Là khoảng thời gian chờ để hiển thị thông báo tiếp theo.

### 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 tiện ích **Thông báo** 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="/files/r9DY2B93boSeFBPBmBEs" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** Cho phép bạn căn chỉnh tiện ích theo khung chứa, 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-thiet-ke/can-chinh).
* **Kích thước:** Điều chỉnh kích thước của tiện ích, bao gồm chiều rộng, chiều cao và khoảng cách từ tiện ích đến lề của section, 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-thiet-ke/kich-thuoc).
* **Hiển thị:** Chọn các thiết bị mà tiện ích sẽ được hiển thị (Máy tính, Điện thoại).
* **Thiết kế:** Cho phép bạn thêm nền và đổ bóng cho 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-thiet-ke/thiet-ke).
* **Kiểu chữ:** Cho phép bạn tùy chỉnh các thuộc tính của nội dung trong tiện ích (bao gồm: tiêu đề, nội dung và thời gian), 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-thiet-ke/kieu-chu).
* **Đường viền:** Cho phép bạn thêm và tùy chỉnh viền xung quanh của tiện ích, bạn cũng có thể điều chỉnh độ bo tròn của đường viề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-thiet-ke/duong-vien).
* **Thiết kế ảnh:** Cho phép bạn điều chỉnh độ bo tròn của hình ảnh hiển thị trên tiện ích.

### 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 tiện ích **Notify** 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="/files/DHZVUU4vs6O6Vol6AolD" 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).

## 3. Cách tạo nội dung từ Google Sheet

**- Bước 1:** Tạo một Google Sheet với 4 cột nội dung chính với các tiêu đề : **Title, Content, Time, Image** và bạn điền tạo nội dung các cột. **Trang tính tạo nội dung, phải là nằm ở vị trí đầu tiên trên Bảng tính của bạn:**

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

**- Bước 2:** Xuất bản Google Sheet lên web.

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

Bạn có thể lựa chọn xuất bản với toàn bộ tài liệu hoặc sheet chứa nội dung:

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

**- Bước 3:** Quay trở lại đường link trang tính lúc đầu

* Copy ID của Google Sheet và dán vào mục Google Sheet ID trình chỉnh sửa Nội dung.
* Copy tên của sheet và dán vào mục Sheet name.

<figure><img src="/files/0KH9rRs6M7dI8Egr6LqI" alt=""><figcaption></figcaption></figure>

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

{% hint style="warning" %}
**Lưu ý:** Lấy ID của google sheet gốc, không phải ID của đường link sau khi đã xuất bản ở bước 2.
{% endhint %}

**- Bước 4:** Bật chế độ CÔNG KHAI cho sheet của bạn.

Để có thể hiện thị nội dung từ Google sheet lên Thông báo, bạn vui lòng bật chế độ Công khai theo hướng dẫn:

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

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


# 5. Tiện ích Nâng cao


# 5.1. Accordion

**Accordion** là một **tiện ích nâng cao** trong thiết kế landing page, cho phép bạn sắp xếp nội dung theo dạng **mở rộng/thu gọn**. Tính năng này giúp người dùng có thể xem thông tin một cách dễ dàng và gọn gàng mà không làm rối giao diện.

## 1. Thêm Accordion vào trang landing page&#x20;

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.&#x20;
* Chọn **Accordion** trong mục **Nâng cao**
* &#x20;Chọn phần tử **Accordion** và kéo vào trang landing page.&#x20;

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

## 2. Trình chỉnh sửa Accordion <a href="#adding-and-managing-accordion-items" id="adding-and-managing-accordion-items"></a>

### 2.1. Trình chỉnh sửa Nội dung <a href="#adding-and-managing-accordion-items" id="adding-and-managing-accordion-items"></a>

**Để thêm nội dung vào các mục Accordion:**

1. Chọn phần tử Accordion.
2. Nhấn vào **Nội dung** trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
3. Nhấn vào mục cần thêm nội dung, sau đó kéo các phần từ cần thêm như Text, Image, Button... vào phần nội dung trong phần tử Accordion.

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

**Để quản lý và thêm các mục trong Accordion:**

1. Chọn phần tử Accordion.
2. Nhấn vào **Nội dung** trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
3. Di chuột qua mục cần thao tác và nhấn vào biểu tượng **Cài đặt**.<img src="/files/vlzjpzmrQ4Sn7eHmo3Ql" alt="" data-size="line">
4. Chọn hành động cần thực hiện với mục Accordion: **Collapse, Nhân bản**, **Đổi tên** hoặc **Xóa**.

**Mẹo:**

* Nhấn **+Thêm** ở cuối danh sách Accordion để thêm một mục trống mới.
* Bạn có thể thay đổi thứ tự của các mục. Nhấn và giữ mục cần di chuyển, sau đó kéo nó đến vị trí mong muốn.

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

**Để chọn cách Accordion mở và đóng:**

1. Chọn phần tử Accordion.
2. Nhấn vào **Nội dung** trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Accordion.
3. Chọn một tùy chọn trong mục **Chọn trạng thái mặc định**:
   * **Đóng tất cả các mục:** Khách truy cập sẽ thấy các mục của Accordion đóng lại ban đầu và chọn mục họ muốn mở để xem thêm.
   * **Mở mục đầu tiên:** Khách truy cập sẽ thấy nội dung của mục đầu tiên, trong khi các mục khác vẫn đóng.
   * **Mở tất cả các mục:** Khách truy cập sẽ thấy nội dung của tất cả các mục ngay khi trang tải.
4. Nhấn vào nút chuyển đổi **Cho phép mở nhiều mục cùng lúc**:
   * **Bật:** Khách truy cập có thể mở nhiều mục cùng lúc.
   * **Tắt:** Khách truy cập chỉ có thể mở một mục tại một thời điểm.
5. **Áp dụng hiệu ứng chuyển tiếp:**&#x20;
   * **Có:** Khách truy cập có thể thấy hiệu ứng chuyển tiếp (nhanh/chậm) khi bấm chọn các mục khác nhau.
   * **Không:** Hiệu ứng mặc định của hệ thống được thiết lập.

{% hint style="warning" %}
**Lưu ý:** Tùy chọn cho phép mở nhiều mục trong Accordion sẽ không khả dụng nếu bạn chọn **Mở tất cả các mục** làm trạng thái mặc định.
{% endhint %}

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

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

Bạn có thể tùy chỉnh mọi phần của Accordion để phù hợp với giao diện của trang. Tùy chỉnh tiêu đề các mục, khung chứa nội dung của từng mục hoặc toàn bộ không gian của một mục (bao gồm cả tiêu đề và khung chứa).

**Để thiết kế Accordion:**

1. Chọn phần tử Accordion.
2. Nhấn vào **Thiết kế** trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Accordion.
3. Chỉnh sửa Accordion theo ý của bạn trong popup Thiết kế

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

**Hướng dẫn chi tiết các phần trong popup Thiết kế:**

1. **Căn chỉnh:** giúp bạn căn chỉnh phần tử Accordion theo khung chứa, 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-thiet-ke/can-chinh).\
   ![](/files/uM4ELfxoS036t8EFnrE2)
2. **Kích thước:** giúp bạn điều chỉnh kích thước của phần tử Accordion trên trang web, 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-thiet-ke/kich-thuoc).\
   ![](/files/lRvkrcYLSq6LyfkwDWuR)
3. **Hiển thị:** cho phép bạn kiểm soát việc hiển thị phần tử Accordion trên các thiết bị khác nhau (Máy tính và Điện thoại).\ <img src="/files/AxgATvO5rzADqbxk0LCJ" alt="" data-size="original">
4. **Thiết kế**\
   \- **Nền:** cho phép bạn tùy chỉnh màu nền của phần tử Accordion theo ý thích.\
   \- **Box shadow:** cho phép bạn thêm bóng đổ xung quanh phần tử Accordion.\
   ![](/files/tOKjHUJtdhZAcuAFNGt9)
5. **Cài đặt chung**\
   **- Header:** cho phép bạn tùy chỉnh màu nền của phần tiêu đề các mục của phần tử Accordion, tùy chỉnh biểu tượng (phân loại, vị trí, màu sắc, kích thước...) và tiêu đề (font chữ, màu chữ, kích thước...).\
   ![](/files/Utq13bYjg4BSx3h73COj)![](/files/XDa2ptZ7m9BH48EiZQUj)\
   \
   **- Collapse:** cho phép bạn tùy chỉnh màu nền của phần nội dung hiển thị.\
   ![](/files/TfQ0K1H5OE8wNGT7Isy2)
6. **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của Accordion, bạn cũng có thể điều chỉnh độ bo tròn của viề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-thiet-ke/duong-vien).

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

Bạn có thể thiết lập các tính năng nâng cao cho Accordion để tạo ra trải nghiệm độc đáo, phù hợp với nhu cầu cụ thể của từng dự án.

**Để thiết lập nâng cao Accordion:**

1. Chọn phần tử Accordion.
2. Nhấn vào **Nâng cao** trên thanh thiết lập nhanh để mở trình chỉnh sửa Nâng cao Accordion.
3. Thiết lập Accordion theo ý của bạn trong popup Nâng cao.

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

* **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).


# 5.2. Tabs

Tiện ích **Tabs** cho phép bạn tạo các tab chuyển đổi nội dung trên landing page, giúp tối ưu hóa không gian hiển thị và cung cấp cho người dùng một trải nghiệm mượt mà. Người xem có thể nhấp vào các thẻ này thay vì cuộn qua văn bản để xem nội dung liên quan. Mỗi tab có thể chứa các loại nội dung khác nhau như văn bản, hình ảnh, video, biểu đồ, và nhiều hơn nữa.

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

## **1. Thêm Tabs vào trang**

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

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

## **2. Trình chỉnh sửa Tabs**

### 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 tiện ích **Tabs** 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="/files/4rbInGmQDA5ohFH8y18G" alt=""><figcaption></figcaption></figure>

* Để thêm một thẻ mới, nhấn vào **+Thêm** trong popup chỉnh sửa nội dung.
* Nhấn vào biểu tượng cài đặt <img src="/files/BRNRITYh1VDmgE08DDNt" alt="" data-size="line"> của từng thẻ để thiết lập cài đặt cho từng thẻ trên Tabs: Nhân bản, Đặt làm mặc định, Đổi tên, Xóa.

<figure><img src="/files/Dmz3ke2pJVy1pTeVcKa6" 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 tiện ích **Tabs** 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="/files/WkFb0vDDjjfgbka21Kih" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh Tabs theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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:** trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước của các phần tử trên trang web, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** cho phép bạn kiểm soát việc hiển thị section trên các thiết bị khác nhau bao gồm Máy tính và Điện thoại.
* **Thiết kế:**

  * **Tab Container:**
    * Tab container là một thành phần bao gồm cả **Tabs** và nội dung **Containers** bên trong, giúp nhóm các nội dung theo từng tab để hiển thị một cách gọn gàng.
    * Thiết kế Tab container cho phép người dùng tùy chỉnh cài đặt chung như: Căn chỉnh, Gap, Hướng hiển thị, Nền, Box shadow.

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

  * **Tabs:**&#x20;
    * Tabs là thanh điều hướng phía trên (hoặc bên cạnh) hiển thị các lựa chọn. Mỗi tab sẽ liên kết với một Container riêng biệt để hiển thị nội dung tương ứng
    * Thiết kế Tabs cho phép người dùng tùy chỉnh cài đặt chung cho từng loại Tabs trong các trạng thái như: Bình thường, Di chuột, Đã chọn.&#x20;

  <figure><img src="/files/1pTVoQBRTJb7tSimKn2k" alt=""><figcaption></figcaption></figure>

  * **Containers:**&#x20;
    * Containers là các khối chứa nội dung cụ thể bên trong mỗi tab. Mỗi container có thể tùy chỉnh để chứa văn bản, hình ảnh, hoặc các thành phần khác.&#x20;
    * Thiết kế Containers cho phép người dùng tùy chỉnh cài đặt chung cho vùng khối chứa nội dung như: Nền, Box shadow.

  <figure><img src="/files/k7rJtgedz04RcUHVOQym" alt=""><figcaption></figcaption></figure>
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của Tabs, 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>](/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 tiện ích **Tabs** 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="/files/t8060UuhgAdfW4gjr3Xs" alt=""><figcaption></figcaption></figure>

* **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 [<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-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 [<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-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 [<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-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 [<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-nang-cao/tuy-chinh-nang-cao).


# 5.4. Mã HTML

Tiện ích **Mã HTML** cho phép bạn chèn và hiển thị mã HTML tùy chỉnh trực tiếp vào trang web của bạn. Điều này rất hữu ích để thêm các yếu tố không được cung cấp sẵn trong trình chỉnh sửa, như mã nhúng, các đoạn mã HTML tùy chỉnh, hoặc các thành phần tương tác.

Việc sử dụng mã HTML mang lại khả năng tùy chỉnh cao, nhưng cũng đi kèm với mức độ phức tạp, đòi hỏi người dùng có kiến thức cơ bản về mã HTML để sử dụng hiệu quả. Nếu bạn chưa quen với mã hóa, hãy bắt đầu với các tính năng kéo thả và từng bước học hỏi để khai thác tối đa công cụ thiết kế Landing Page của mình.

## **1. Thêm Mã HTML vào landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Mã HTML** trong mục **Nâng cao**
* Chọn phần tử **Mã HTML** và kéo vào trang landing page.

<figure><img src="/files/6cZhRFFT4RB8jMxapsvc" alt=""><figcaption></figcaption></figure>

## **2. Trình chỉnh sửa Mã HTML**

### 2.1. Chỉnh sửa HTML

Để mở trình chỉnh sửa **Nội dung,** bạn click vào tiện ích **Mã HTML** 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="/files/5ReWZyc85PjtDKiTVuLc" alt=""><figcaption></figcaption></figure>

Sau đó, popup **Chỉnh sửa HTML** sẽ được hiển thị trên màn hình cho phép bạn nhập mã thiết kế theo mong muốn.

<figure><img src="/files/V2FzKs4cGAxFoQqiTlNL" 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 tiện ích **Mã HTML** 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="/files/C0i1hABPINFAmB0d9iaV" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh **Mã HTML** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/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** trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên landing page, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc).
* **Hiển thị:** cho phép bạn kiểm soát việc hiển thị **Mã HTML** trên các thiết bị khác nhau bao gồm Máy tính và Điện thoại




---

[Next Page](/llms-full.txt/1)