3.2. Slider
Last updated
Last updated
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ế.
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.
Để 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.
Để 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.
Căn chỉnh: Giúp bạn căn chỉnh Trình chiếu theo khung chứa, chi tiết tại đây.
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 tại đây.
Hiển thị: Cho phép bạn kiểm soát việc hiển thị Trình chiế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ế: Tùy chỉnh màu nền và hiệu ứng đổ bóng cho toàn bộ Trình chiếu hoặc các slide cụ thể bên trong nó, chi tiết tại đây.
Đường viền: Cho phép bạn thêm và tùy chỉnh viền xung quanh của Trình chiếu, bạn cũng có thể điều chỉnh độ bo tròn của viền, chi tiết tại đây.
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.
Để 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.
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.
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.
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.
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.
Nhấn vào biểu tượng 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.