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 hình ảnh (Image 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 hình ảnh là gì ?
Tiện ích Băng chuyền hình ảnh (Image Carousel) trong Elementor là một công cụ mạnh mẽ để hiển thị một bộ sưu tập ảnh dưới dạng trình chiếu hoặc thư viện ảnh xoay vòng. Nó giúp bạn trình bày nhiều hình ảnh một cách gọn gàng và tương tác.
2. Các bước sử dụng tiện ích băng chuyền hình ảnh
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn chọn các hình ảnh, thiết lập chế độ trình chiếu và các điều khiển cơ bản.
1. Băng chuyền hình ảnh (Image Carousel):
- Đây là phần quan trọng nhất. Nhấp vào khu vực có hình ảnh placeholder (thường là một dấu cộng lớn hoặc biểu tượng thư viện ảnh).
- Một cửa sổ “Thêm Thư viện Media” sẽ hiện ra.
- Bạn có thể chọn nhiều hình ảnh đã có sẵn trong thư viện hoặc tải lên các hình ảnh mới từ máy tính của mình.
Sau khi chọn tất cả các ảnh mong muốn, nhấp vào nút “Tạo thư viện mới” ở góc dưới bên phải. Sau đó, nhấp vào nút “Chèn thư viện” để đưa các ảnh vào tiện ích.
2. Chiều rộng của slide được chọn (Slides to Show):
- Tùy chọn này cho phép bạn quyết định bao nhiêu hình ảnh sẽ hiển thị cùng lúc trong băng chuyền.
- Ví dụ: chọn “1” để chỉ hiển thị một ảnh mỗi lần, chọn “3” để hiển thị ba ảnh cạnh nhau.
- Bạn có thể điều chỉnh riêng cho các chế độ xem máy tính để bàn, máy tính bảng và điện thoại.
3. Độ phân giải hình ảnh (Image Resolution):
- Chọn kích thước hình ảnh sẽ được sử dụng trong băng chuyền.
- Các lựa chọn như: Thumbnail, Medium, Large, Full hoặc các kích thước tùy chỉnh khác nếu theme của bạn có. Chọn kích thước phù hợp để ảnh hiển thị rõ mà không quá lớn gây chậm trang.
4. Cuộn hình ảnh (Slides to Scroll):
- Bạn có thể thiết lập bao nhiêu hình ảnh sẽ trượt một lần khi người dùng nhấp vào mũi tên điều hướng.
- Ví dụ: chọn “1” để cuộn từng ảnh một, chọn “3” để cuộn ba ảnh một lúc.
5. Điều hướng (Navigation):
- Tùy chọn này cho phép bạn chọn loại điều khiển để người dùng có thể chuyển đổi giữa các ảnh:
- Mũi tên & Dấu chấm (Arrows & Dots): Hiển thị cả mũi tên chuyển trang (trước/sau) và các dấu chấm chỉ số slide. (Đây là lựa chọn trong hình bạn gửi).
- Mũi tên (Arrows): Chỉ hiển thị mũi tên.
- Dấu chấm (Dots): Chỉ hiển thị các dấu chấm.
- Không (None): Không hiển thị bất kỳ điều hướng nào (thường dùng với tự động phát).
6. Liên kết đến (Link To):
- Cho phép bạn đặt liên kết khi người dùng nhấp vào một hình ảnh trong băng chuyền:
- Không (None): Không có liên kết nào.
- Tệp Media (Media File): Mở hình ảnh gốc trong một cửa sổ pop-up (lightbox).
- URL Tùy chỉnh (Custom URL): Bạn có thể dán một đường link riêng cho từng hình ảnh hoặc cho toàn bộ băng chuyền.
7. Chú thích (Caption):
- Bạn có thể chọn cách hiển thị chú thích cho hình ảnh (nếu bạn đã thêm chú thích trong thư viện media):
- Không (None): Không hiển thị chú thích.
- Chú thích (Caption): Hiển thị chú thích của ảnh.
- Tên tệp đính kèm (Attachment Title): Hiển thị tiêu đề của ảnh trong thư viện media.
8. Tùy chọn bổ sung (Additional Options): (Nhấp vào mũi tên nhỏ để mở rộng)
- Tự động phát (Autoplay): Bật/tắt chế độ tự động chuyển đổi slide.
- Thời gian tạm dừng tự động phát (Autoplay Speed): Đặt thời gian (tính bằng mili giây) giữa các lần chuyển đổi slide tự động (ví dụ: 5000ms = 5 giây).
- Tạm dừng khi di chuột qua (Pause on Hover): Tạm dừng trình chiếu khi người dùng di chuột qua băng chuyền.
- Tạm dừng khi tương tác (Pause on Interaction): Tạm dừng trình chiếu khi người dùng nhấp vào mũi tên hoặc dấu chấm.
- Vô tận (Infinite Loop): Băng chuyền sẽ lặp lại không ngừng.
- Hiệu ứng chuyển đổi (Transition): Chọn hiệu ứng chuyển đổi giữa các slide (ví dụ: Slide, Fade).
- Tốc độ chuyển đổi (Transition Speed): Đặt tốc độ của hiệu ứng chuyển đổi (tính bằng mili giây).
- Hiển thị hình ảnh lười biếng (Lazy Load Images): Giúp cải thiện tốc độ tải trang bằng cách chỉ tải các hình ảnh khi chúng chuẩn bị xuất hiện trên màn hình.
- Hiệu ứng thu phóng hình ảnh (Image Zoom Effect): Thêm hiệu ứng thu phóng khi di chuột qua hình ảnh.
Bước 2. Chỉnh sửa kiểu hiển thị
Đây là nơi bạn tùy chỉnh giao diện của băng chuyền, hình ảnh và các điều khiển điều hướng.
A. Hình ảnh (Image)
- Khoảng cách (Spacing):
- Tùy chỉnh (Custom): Cho phép bạn đặt khoảng cách cụ thể giữa các hình ảnh.
- Mặc định (Default): Sử dụng khoảng cách mặc định.
- Border Type (Loại đường viền): Thêm đường viền cho từng hình ảnh trong băng chuyền.
- Border Radius (Bán kính bo tròn): Bo tròn các góc của hình ảnh.
- Box Shadow (Bóng đổ): Thêm bóng đổ cho hình ảnh.
B. Điều hướng (Navigation)
- Mũi tên (Arrows):
- Màu sắc (Color): Chọn màu cho mũi tên.
- Kích thước (Size): Điều chỉnh kích thước của mũi tên.
- Dấu chấm (Dots):
- Màu sắc (Color): Chọn màu cho các dấu chấm.
- Kích thước (Size): Điều chỉnh kích thước của dấu chấm.
- Khoảng cách (Spacing): Điều chỉnh khoảng cách giữa các dấu chấm và bản trình chiếu.
C. Chú thích (Caption)
- Căn chỉnh (Alignment): Căn chỉnh chú thích sang Trái, Giữa hoặc Phải.
- Màu sắc (Color): Chọn màu cho chú thích.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho chú thích.
Bước 3. Chỉnh sửa nâng cao
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 Băng chuyền hình ảnh.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích với các phần tử khác xung quanh.
- Padding (Khoảng đệm): Khoảng cách bên trong tiện ích, giữa đường viền của băng chuyền và nội dung hình ảnh.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ băng chuyền.
- 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 băng chuyền khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ băng chuyền 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 Băng chuyền hình ảnh.
- Đườ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 băng chuyền trên các loại thiết bị khác nhau nếu cần.
- Tùy chỉnh số lượng slide hiển thị trên từng thiết bị (ở phần “Chiều rộng của slide được chọn” trong tab Nội dung) là rất quan trọng để tối ưu hiển thị.
- 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 băng chuyền hình ảnh một cách nâng cao.
