Gửi ticket
Khuyến mại
Kiến thức
Quản lý dịch vụ
Cách sử dụng tiện ích băng chuyền vòng lặp – Media Carousel
1. Các tiện ích Widgets trong Elementor
Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.
Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:
- Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
- Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
- Advanced (Nâng cao): Các tùy chọn nâng cao như:
- Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
- Z-index: Thứ tự hiển thị của các lớp phần tử.
- CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
- Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
- Background: Màu nền, hình ảnh nền, gradient.
- Border: Đường viền.
- Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
- Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
- Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.
2. Tiện ích băng chuyền vòng lặp là gì ?
Tiện ích Loop Carousel (Băng chuyền Vòng lặp) trong Elementor (thường là tính năng của Elementor Pro và là một tiện ích rất mạnh mẽ) cho phép bạn tạo ra các băng chuyền động tùy chỉnh với bất kỳ loại nội dung nào được tạo bằng Loop Template (Mẫu vòng lặp). Điều này đặc biệt hữu ích cho việc hiển thị các bài đăng blog, sản phẩm, portfolio, hoặc bất kỳ loại bài đăng tùy chỉnh nào trong một định dạng băng chuyền rất linh hoạt.
3. Các bước sử dụng tiện ích băng chuyền vòng lặp
I. Nội dung (Content)
Đây là nơi bạn chọn mẫu vòng lặp, định cấu hình truy vấn nội dung và các cài đặt băng chuyền.
A. Layout (Bố cục)
- Choose template type (Chọn loại mẫu): Chọn loại mẫu bạn muốn sử dụng cho mỗi slide trong băng chuyền của bạn.
- Posts (Bài viết): Thường dùng để hiển thị các bài đăng blog.
- Custom Post Type (Loại bài đăng tùy chỉnh): Nếu bạn có các loại bài đăng tùy chỉnh (ví dụ: Sản phẩm, Portfolio), bạn có thể chọn ở đây.
- Choose a template (Chọn một mẫu): Chọn một Loop Template bạn đã tạo trước đó từ danh sách thả xuống. Nếu chưa có, bạn sẽ thấy tùy chọn “Create a template” (Tạo một mẫu) hoặc “Start typing its name” (Bắt đầu nhập tên của nó) để tìm kiếm.
- Tạo mẫu (Create template): Nút này sẽ đưa bạn đến giao diện tạo Loop Template mới trong Elementor Theme Builder.
B. Query (Truy vấn)
Phần này cho phép bạn xác định nội dung nào sẽ được hiển thị trong băng chuyền.
- Source (Nguồn): Chọn nguồn nội dung (ví dụ: Posts, Pages, Products, Manual Selection, Related Posts, v.v.).
- Include/Exclude (Bao gồm/Loại trừ): Thêm hoặc loại trừ các bài viết/sản phẩm cụ thể theo ID, danh mục, thẻ, v.v.
- Term (Thuật ngữ): Lọc theo các thuật ngữ phân loại (ví dụ: hiển thị bài đăng chỉ từ một danh mục cụ thể).
- Author (Tác giả): Lọc theo tác giả.
- Date (Ngày): Lọc bài đăng theo khoảng thời gian (ví dụ: Từ hôm nay, Tháng trước, Năm trước, Tùy chỉnh).
- Order By (Sắp xếp theo): Sắp xếp các mục theo (Ngày, ID, Tiêu đề, Ngẫu nhiên, v.v.).
- Order (Thứ tự): Sắp xếp tăng dần (ASC) hoặc giảm dần (DESC).
- Offset (Độ lệch): Bỏ qua một số lượng bài đăng nhất định từ đầu kết quả truy vấn.
- Posts Per Page (Số bài viết mỗi trang): Số lượng bài viết hiển thị trên mỗi “trang” (slide) của băng chuyền.
- Ignore Sticky Posts (Bỏ qua bài viết dính): Bỏ qua các bài viết được đánh dấu là “dính”.
- Query ID: Đặt ID truy vấn để sử dụng trong các trường hợp nâng cao (ví dụ: khi có nhiều truy vấn trên cùng một trang).
C. Settings (Cài đặt)
Phần này cấu hình hành vi của băng chuyền.
- Slides Per View (Số slide hiển thị): Chọn số lượng slide hiển thị cùng lúc trên băng chuyền. Bạn có thể điều chỉnh cho các thiết bị khác nhau (desktop, tablet, mobile).
- Slides to Scroll (Số slide cuộn): Đặt số lượng slide sẽ cuộn mỗi lần chuyển động.
- Navigation (Điều hướng): Chọn loại điều hướng (Mũi tên & Dấu chấm, Mũi tên, Dấu chấm, Không).
- Autoplay (Tự động phát): Bật/tắt chế độ tự động chuyển slide.
- Autoplay Speed (Tốc độ tự động phát): Đặt thời gian (ms) giữa các lần chuyển slide tự động.
- Infinite Loop (Vòng lặp vô hạn): Bật/tắt chế độ lặp lại vô hạn của băng chuyền.
- Pause On Hover (Tạm dừng khi di chuột): Tạm dừng tự động phát khi di chuột qua băng chuyền.
- Animation Speed (Tốc độ hoạt ảnh): Điều chỉnh tốc độ chuyển động giữa các slide (tính bằng ms).
- Direction (Hướng): Chọn hướng của băng chuyền (ví dụ: Left to Right, Right to Left – để hỗ trợ RTL).
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của băng chuyền vòng lặp và các thành phần điều hướng.
A. Navigation (Điều hướng)
- Arrows (Mũi tên):
- Color (Màu sắc): Màu của các mũi tên điều hướng.
- Size (Kích thước): Kích thước của các mũi tên.
- Pagination (Phân trang – Dấu chấm):
- Color (Màu sắc): Màu của các dấu chấm phân trang.
- Spacing (Khoảng cách): Khoảng cách giữa các dấu chấm.
B. Slide (Slide)
- Spacing (Khoảng cách): Điều chỉnh khoảng cách giữa các slide trong băng chuyền.
(Lưu ý: Các tùy chọn kiểu hiển thị cho nội dung bên trong mỗi slide (ví dụ: phông chữ, màu sắc của tiêu đề, mô tả) sẽ được kiểm soát trong Loop Template mà bạn đã tạo.)
III. Nâng cao (Advanced)
Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Loop Carousel.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Loop Carousel với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
- Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Loop Carousel.
- Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
- Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.
- CSS ID & CSS Classes:
- Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.
- Hiệu ứng chuyển động (Motion Effects):
- Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Loop Carousel khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
- Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
- Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.
- Nền (Background):
- Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Loop Carousel.
- Đường viền (Border):
- Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.
- Mặt nạ (Mask):
- Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.
- Khả năng đáp ứng (Responsive):
- Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Loop Carousel trên các loại thiết bị khác nhau nếu cần.
- Thuộc tính (Attributes):
- Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.
- CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):
- Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.
