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 Slides
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. Cách sử dụng tiện ích Slides
Tiện ích Slides trong Elementor là một công cụ mạnh mẽ để tạo các slideshow (trình chiếu) hình ảnh và nội dung tương tác trên trang web của bạn. Nó rất hữu ích để giới thiệu sản phẩm, dịch vụ, dự án hoặc bất kỳ thông tin nào cần được trình bày tuần tự và trực quan.
Dưới đây là hướng dẫn sử dụng tiện ích Slides, bao gồm các phần: Nội dung, Kiểu hiển thị, và Nâng cao.
Trước tiên, hãy đảm bảo bạn đã:
- Cài đặt và kích hoạt plugin Elementor.
- Đang chỉnh sửa một trang hoặc bài viết bằng Elementor.
- Đã tìm thấy và kéo Tiện ích Slides từ thanh công cụ bên trái vào khu vực bạn muốn hiển thị slideshow. (Bạn sẽ thấy một slideshow mẫu với các slide mặc định xuất hiện trên Canvas).
Bây giờ, hãy xem các tùy chọn chỉnh sửa ở bảng điều khiển bên trái:
3. Các bước sử dụng tiện ích Slides
I. Nội dung (Content)
Đây là nơi bạn thêm và chỉnh sửa từng slide, điều chỉnh chiều cao và thẻ HTML của tiêu đề/mô tả.
A. Slides (Các Slide)
- Bạn sẽ thấy một danh sách các slide hiện có (ví dụ: Slide 1, Slide 2, Slide 3).
- Thêm mục (Add Item): Nhấp vào nút này để thêm một slide mới vào slideshow của bạn.
- Chỉnh sửa Slide: Nhấp vào từng slide để mở các tùy chọn chỉnh sửa riêng cho slide đó:
- Background (Nền):
- Image (Hình ảnh): Chọn hình ảnh nền cho slide.
- Background Size (Kích thước nền): Điều chỉnh kích thước hình nền (ví dụ: Cover, Contain, Auto).
- Background Position (Vị trí nền): Đặt vị trí của hình nền.
- Content (Nội dung):
- Title (Tiêu đề): Nhập tiêu đề cho slide.
- Description (Mô tả): Nhập nội dung mô tả cho slide.
- Button Text (Văn bản nút): Nhập văn bản cho nút CTA (Call to Action) trên slide (ví dụ: “Click Here”).
- Link (Liên kết): Nhập URL mà nút sẽ dẫn đến khi nhấp.
- Style (Kiểu hiển thị):
- Text Alignment (Căn chỉnh văn bản): Căn chỉnh văn bản trong slide (Trái, Giữa, Phải).
- Horizontal Position (Vị trí ngang): Điều chỉnh vị trí ngang của nội dung.
- Vertical Position (Vị trí dọc): Điều chỉnh vị trí dọc của nội dung.
- Content Width (Chiều rộng nội dung): Đặt chiều rộng của khu vực nội dung văn bản.
- Text Color (Màu văn bản): Chọn màu chữ cho tiêu đề, mô tả và nút.
- Background (Nền):
- Chiều cao (Height): Đặt chiều cao tổng thể của slideshow.
- Tiêu đề HTML (Title HTML Tag): Chọn thẻ HTML cho tiêu đề của slide (ví dụ: H1, H2, div).
- Mô tả HTML Tag (Description HTML Tag): Chọn thẻ HTML cho mô tả của slide (ví dụ: p, div).
B. Tùy chọn Slider (Slider Options)
- Autoplay (Tự động chơi): Bật/tắt chế độ tự động chuyển slide.
- Pause On Hover (Dừng khi di chuột qua): Nếu tự động chơi được bật, tùy chọn này sẽ dừng slideshow khi người dùng di chuột qua.
- Pause On Interaction (Dừng khi tương tác): Dừng slideshow khi người dùng tương tác với nó (ví dụ: nhấp vào nút điều hướng).
- Autoplay Speed (Tốc độ tự động chơi): Đặt thời gian (tính bằng mili giây) trước khi slide tự động chuyển.
- Infinite Loop (Vòng lặp vô hạn): Cho phép slideshow lặp lại vô hạn sau khi đến slide cuối cùng.
- Transition (Chuyển tiếp): Chọn hiệu ứng chuyển động giữa các slide (ví dụ: Fade, Slide).
- Transition Speed (Tốc độ chuyển tiếp): Đặt thời gian (tính bằng mili giây) cho hiệu ứng chuyển tiếp.
- Arrows (Mũi tên): Bật/tắt hiển thị mũi tên điều hướng (trước/sau).
- Pagination (Phân trang): Chọn kiểu phân trang (ví dụ: Dots, Fraction).
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của slideshow và các yếu tố bên trong.
A. Slides (Các Slide)
- Content Width (Chiều rộng nội dung): Điều chỉnh chiều rộng của khu vực chứa tiêu đề, mô tả và nút.
- Padding (Khoảng đệm): Điều chỉnh khoảng đệm bên trong mỗi slide.
- Horizontal Position (Vị trí ngang): Căn chỉnh nội dung ngang.
- Vertical Position (Vị trí dọc): Căn chỉnh nội dung dọc.
- Text Align (Căn chỉnh văn bản): Căn chỉnh văn bản bên trong slide.
B. Title (Tiêu đề)
- Color (Màu sắc): Chọn màu chữ cho tiêu đề slide.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
C. Description (Mô tả)
- Color (Màu sắc): Chọn màu chữ cho mô tả slide.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho mô tả.
D. Button (Nút)
- Color (Màu sắc): Màu chữ của nút.
- Background Color (Màu nền): Màu nền của nút.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho nút.
- Border Type (Loại đường viền): Thêm đường viền cho nút.
- Border Radius (Bán kính bo tròn): Bo tròn góc nút.
- Padding (Khoảng đệm): Khoảng đệm bên trong nút.
E. Arrows (Mũi tên)
- Size (Kích thước): Kích thước của mũi tên điều hướng.
- Color (Màu sắc): Màu sắc của mũi tên.
F. Pagination (Phân trang)
- Size (Kích thước): Kích thước của các dấu chấm/số phân trang.
- Color (Màu sắc): Màu sắc của các dấu chấm/số phân trang.
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 Slides.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Slides 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.
- Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Slides.
- 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 Slides 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 Slides.
- Đườ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 Slides 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.
