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. Thêm Accordion vào trang landing page
  • 2. Trình chỉnh sửa Accordion
  • 2.1. Trình chỉnh sửa Nội dung
  • 2.2. Trình chỉnh sửa Thiết kế
  • 2.3. Trình chỉnh sửa Nâng cao
  1. VI. CÁC PHẦN TỬ CƠ BẢN
  2. 5. Tiện ích Nâng cao

5.1. Accordion

Previous5. Tiện ích Nâng caoNext5.2. Tabs

Last updated 4 months ago

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

  • Nhấn vào Tiện ích ở thanh sidebar của trình chỉnh sửa.

  • Chọn Accordion trong mục Nâng cao

  • Chọn phần tử Accordion và kéo vào trang landing page.

2. Trình chỉnh sửa Accordion

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

Để 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.

Để 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. 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.

Để 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:

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

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.

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ế

Hướng dẫn chi tiết các phần trong popup Thiết kế:

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.

Di chuột qua mục cần thao tác và nhấn vào biểu tượng Cài đặt.

Căn chỉnh: giúp bạn căn chỉnh phần tử Accordion theo khung chứa, chi tiết .

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 .

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

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.

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...). - Collapse: cho phép bạn tùy chỉnh màu nền của phần nội dung hiển thị.

Đườ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 .

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 .

Đồ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 .

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ù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
tại đây
tại đây
tại đây
tại đây
tại đây
tại đây