ShopOne
Vietnamese
Vietnamese
  • CHÀO MỪNG BẠN ĐẾN VỚI SHOPONE
  • I. TỔNG QUAN VỀ LANDING PAGE
    • 1. Tổng quan
    • 2. Landing page là gì?
    • 3. Sự khác nhau giữa Website và Landing page
    • 4. Phân loại Landing page
    • 5. Thiết kế một Landing page ấn tượng
  • II. HƯỚNG DẪN TẠO LẬP LANDING PAGE TỪ A-Z
  • III. KHỞI TẠO LANDING PAGE VỚI SHOPONE
    • 1. Trang Dashboard
      • 1.1. Chuyển đổi không gian làm việc
      • 1.2. Thông báo
      • 1.3. Ngôn ngữ
      • 1.4. Tạo trang landing page mới
      • 1.5. Tìm kiếm landing page
    • 2. Các thao tác với landing page
      • 2.1. Xem chi tiết landing page
      • 2.2. Sao lưu dữ liệu
      • 2.3. Trang chỉnh sửa landing page
      • 2.4. Sửa tên
      • 2.5. Nhân bản
      • 2.6. Xuất file
      • 2.7. Xóa
    • 3. Các tính năng trong Dashboard
      • 3.1. Thư viện mẫu
      • 3.2. Dữ liệu biểu mẫu
      • 3.3. Tên miền
      • 3.4. Cài đặt
      • 3.5. Tài khoản
  • IV. Cài đặt tên miền
    • 1. Khái niệm về tên miền
    • 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
      • 2.2. Liên kết tên miền với nền tảng Wordpress
    • 3. Trỏ tên miền về ShopOne
      • 3.1. Trỏ tên miền về ShopOne
      • 3.2. Kiểm tra DNS
    • 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
      • 4.2. Trỏ tên miền từ PA Việt Nam
      • 4.3. Trỏ tên miền từ Nhân Hòa
      • 4.4. Trỏ tên miền từ NameCheap
      • 4.5. Trỏ tên miền từ Mắt bão
      • 4.6. Trỏ tên miền từ Name.Com
      • 4.7. Thêm tên miền vào CloudFlare
      • 4.8. Trỏ tên miền từ CloudFlare
  • V. CÁC CÔNG CỤ THIẾT LẬP CƠ BẢN VỚI LANDING PAGE
    • 1. Thanh Top bar
      • 1.1. Lưu landing page
      • 1.2. Xem trước
      • 1.3. Xuất bản
      • 1.4. Trợ giúp: Hỗ trợ và các phím tắt
      • 1.5. Hoàn tác và thực hiện lại
      • 1.6. Lựa chọn giao diện
    • 2. Thanh Sidebar
      • 2.1. Lớp
      • 2.2. Popup
      • 2.3. Tiện ích
      • 2.4. Section
      • 2.5. Nền trang
      • 2.6. Cài đặt
    • 3. Thanh thiết lập nhanh
      • 3.1. Trình chỉnh sửa nội dung
      • 3.2. Trình chỉnh sửa thiết kế
        • ID CSS
        • Căn chỉnh
        • Kích thước
        • Hiển thị
        • Thiết kế
        • Kiểu chữ
        • Đường viền
      • 3.3. Trình chỉnh sửa nâng cao
        • Sự kiện
        • Hiệu ứng
        • Đồng bộ thiết kế Máy tính/Điện thoại
        • Kiểu định vị
        • Tùy chỉnh nâng cao
      • 3.4. Nhân bản
      • 3.5. Di chuyển
      • 3.6. Xóa
      • 3.7. Trợ giúp
  • VI. CÁC PHẦN TỬ CƠ BẢN
    • 1. Section
    • 2. Tiện ích Cơ bản
      • 2.1. Text
      • 2.2. Nút
      • 2.3. Container
    • 3. Tiện ích Phương tiện
      • 3.1. Hình ảnh
      • 3.2. Slider
      • 3.3. Thư viện
      • 3.4. Video
      • 3.5. Shape
    • 4. Tiện ích Kinh doanh
      • 4.1. Biểu mẫu
      • 4.2. Số tự động
      • 4.3. Đếm ngược
      • 4.4. Vòng quay may mắn
      • 4.5. Thông báo
    • 5. Tiện ích Nâng cao
      • 5.1. Accordion
      • 5.2. Tabs
      • 5.4. Mã HTML
  • VII. THEO DÕI VÀ ĐO LƯỜNG LANDING PAGE
    • 1. Cài đặt mô tả trang SEO & Social
    • 2. Mã theo dõi và chuyển đổi
      • 2.1. Hướng dẫn cài đặt Facebook Pixel trên Landing Page
      • 2.2. Hướng dẫn cài đặt Tiktok pixel
      • 2.3. Hướng dẫn cài đặt Google Analytics trên Landing Page
      • 2.4. Hướng dẫn cài đặt mã Google Ads trên Landing Page
      • 2.5. Hướng dẫn gắn mã Google Tag Manager trên Landing Page
  • VIII. CÁC TÍNH NĂNG MỞ RỘNG
    • 1. Hướng dẫn tạo nút "Gọi ngay" hoặc mở liên kết tới trang liên hệ
    • 2. Hướng dẫn chuyển đổi chế độ thiết kế Landing page từ Mobile Only sang Responsive
    • 3. Hiệu ứng toàn trang
      • 3.1. Hiệu ứng tuyết rơi
      • 3.2. Hiệu ứng pháo hoa
Powered by GitBook
On this page
  1. V. CÁC CÔNG CỤ THIẾT LẬP CƠ BẢN VỚI LANDING PAGE
  2. 3. Thanh thiết lập nhanh
  3. 3.3. Trình chỉnh sửa nâng cao

Kiểu định vị

PreviousĐồng bộ thiết kế Máy tính/Điện thoạiNextTùy chỉnh nâng cao

Last updated 3 months ago

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:

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ụ: - Đoạn văn mô tả sản phẩm/dịch vụ. - 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ụ: - Nút "Đăng ký ngay" ở góc phải màn hình. - 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ụ: - Thanh điều hướng hiển thị khi cuộn qua phần đầu trang. - Tiêu đề của một bảng giá cố định khi cuộn qua bảng.