3.2. Slider

Last updated 4 months ago

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

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.

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.

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.

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.

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
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).
- Gap: thiết lập khoảng cách giữa các slide trong trang.

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

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.

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.

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.

Previous3.1. Hình ảnh Next3.3. Thư viện

Last updated 4 months ago