Landing Page - Carousel

Carousel là tính năng cho phép bạn tạo hiệu ứng chạy xoay vòng các đối tượng để hiển thị dưới dạng slide hoặc danh sách sản phẩm.

Để tạo Carousel, tại màn hình cấu hình landing page, bạn click chọn đối tượng Carousel như hình bên dưới:

Sau khi tạo Carousel, bạn có thể thiết kế bằng các chức năng sau: 

1. Thêm/bớt đối tượng trong Carousel

Bạn click vào đối tượng >> Chỉnh sửa >> Bạn bấm dấu + để thêm đối tượng, - để bớt đối tượng, dấu   để di chuyển sang trái hoặc phải để xem thêm đối tượng >> bấm Xong để hoàn tất.

2. Tạo đối tượng trong Carousel

Để thay đổi hình ảnh, click vào Carousel >> Chỉnh sửa >> kích đúp chuột vào đối tượng hình ảnh >> tick chọn ảnh trong album >> Sử dụng

Để thay đổi đối tượng khác, bạn xóa hình ảnh và tạo thêm đối tượng khác như Tiêu đề, Văn bản, Video, ... và di chuyển đối tượng vào trong khung của Carousel 

3. Điều chỉnh kích thước Carousel

Bạn có thể điều chỉnh kích thước khung Carousel bằng cách co kéo các góc khung hoặc thay đổi thông số trong ô kích thước.

4. Điều chỉnh màu & Hình nền

Khung Carourel bạn có thể cài đặt màu đơn sắc, hình ảnh hoặc gradient làm nền cho khung Carousel.

Bạn click vào khung Carousel >> Cài đặt >> Chọn màu khung >> Click chuột ra khoảng trắng ngoài màn hình để lưu lại thao tác 

Ngoài ra, bạn có thể tạo thêm một hoặc nhiều màu đè lên màu hoặc hình nền khung tại mục Overlay.

5. Cài đặt viền & bo góc khung 

Bạn có thể điều chỉnh sử dụng viền cho khung Carousel hoặc không sử dụng cũng như thông số độ dày viền, màu viền, bo góc viền cho khung.

6. Thiết kế đối tượng trong Carousel

Với mỗi đối tượng trong Carousel, bạn có thể điều chỉnh và thiết kế đối tượng bằng cách click vào khung Carousel >> Chỉnh sửa >> Click vào đối tượng >> Cài đặt >> Thiết kế sau đó điều chỉnh các thông số bên thanh công cụ bên phải tương tự thiết kế riêng đối tượng đó độc lập trong landing page.

7. Cài đặt hiệu ứng cho đối tượng trong Carousel

Bạn click vào khung Carousel >> Chỉnh sửa >> Click vào đối tượng >> >> Hiệu ứng

Tại đây bạn có thể cài đặt đổ bóng và hiệu ứng cho các đối tượng trong Carousel

8. Tạo sự kiện cho đối tượng trong Carousel

Bạn có thể tạo sự kiện cho mỗi đối tượng trong Carousel khi khách click/di chuyển chuột tới đối tượng.

Bạn click vào khung Carousel >> Chỉnh sửa >> Click vào đối tượng >> Cài đặt >> Sự kiện >> Thêm 

Tại đây, bạn cấu hình các chi tiết sau: 

- Action: hành động của khách hàng đối với đối tượng: click hoặc Hover (di chuột)

- Event: sự kiện xảy ra khi khách hàng thực hiện hành động

  • Scroll: cuộn trang đến block được chọn ở dưới
  • Link: mở link sang trang mới
  • Open popup: mở popup được chọn ở dưới
  • Close popup: đóng popup được chọn ở dưới

- Block: Chọn đối tượng khi diễn ra sự kiện. 

Sau khi cài đặt xong, bạn bấm nút Lưu để hoàn tất.

9. Ghim đối tượng trên trang

Chức năng này giúp bạn ghim 1 đối tượng trong Carousel ở vị trí cố định, đối tượng này sẽ không di chuyển khi các đối tượng cuộn lại.

Để cấu hình, bạn click vào khung Carousel >> Chỉnh sửa >> Click vào đối tượng >> Cài đặt >> Nâng cao >> Bật nút Ghim phần tử >> chọn vị trí ghim 

Chúc bạn thành công!