Cách sử dụng tiện ích Video Playlist

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 Video Playlist là gì ?

Tiện ích Video Playlist (Danh sách phát Video) trong Elementor là một công cụ mạnh mẽ cho phép bạn tạo và hiển thị một danh sách các video trên trang web của mình. Điều này rất hữu ích cho các trang web giáo dục, giải trí, hoặc bất kỳ trang nào muốn trình bày nhiều video một cách có tổ chức.

3. Các bước sử dụng tiện ích Video Playlist

I. Nội dung (Content)

Đây là nơi bạn thêm và quản lý các video trong danh sách phát của mình.

A. Playlist (Danh sách phát)

• Playlist Name (Tên danh sách phát): Nhập tên cho danh sách phát video của bạn.
• The HTML (HTML): Thẻ HTML sẽ được sử dụng cho tiêu đề của danh sách phát (ví dụ: H2).
• Playlist Items (Các mục danh sách phát): Đây là khu vực bạn thêm từng video vào danh sách.
  • Sample Video (Video mẫu): Bạn có thể thấy các mục video mẫu đã được thêm vào.
  • Để thêm video mới, nhấp vào nút “+ Thêm mục”.
  • Đối với mỗi mục video, bạn sẽ cần nhập URL của video (thường là từ YouTube hoặc Vimeo).
  • Bạn cũng có thể có các tùy chọn để thêm tiêu đề, mô tả hoặc ảnh thumbnail cho từng video riêng lẻ.

B. Tabs (Các tab)

• Phần này có thể liên quan đến việc hiển thị các video dưới dạng tab hoặc cung cấp tùy chọn điều hướng giữa các video trong danh sách phát.

C. Image Overlay (Lớp phủ hình ảnh)

• Choose your video (Chọn video của bạn): Có thể đây là tùy chọn để chọn một video cụ thể làm ảnh bìa hoặc video mặc định hiển thị khi tải trang.
• Watch on Youtube (Xem trên Youtube): Một nút hoặc liên kết để đưa người dùng đến video gốc trên YouTube.

D. Additional Options (Tùy chọn bổ sung)

• Click to try (Nhấp để thử): Nút này có thể là một cách để kiểm tra cấu hình hoặc xem trước cách danh sách phát sẽ hoạt động.

II. Kiểu hiển thị (Style)

Phần này cho phép bạn tùy chỉnh giao diện của trình phát video và danh sách phát. Các tùy chọn ở đây sẽ phụ thuộc vào thiết kế của tiện ích, nhưng thường bao gồm:

• Video Player:

• Kích thước (Size): Chiều rộng và chiều cao của trình phát video.
• Border (Đường viền): Loại, độ dày và màu sắc của đường viền quanh trình phát.
• Box Shadow (Bóng đổ): Hiệu ứng bóng đổ cho trình phát.

• Playlist Items (Mục danh sách phát):
  • Typography (Phông chữ): Tùy chỉnh phông chữ cho tiêu đề và mô tả của các mục video.
  • Color (Màu sắc): Màu sắc của tiêu đề, mô tả, và các trạng thái (ví dụ: khi di chuột qua, khi video đang phát).
  • Spacing (Khoảng cách): Khoảng cách giữa các mục video.
• Navigation (Điều hướng):
  • Màu sắc của các nút điều khiển danh sách phát (ví dụ: nút “tiếp theo”, “trước đó”).
  • Kích thước của các nút.

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 Video Playlist.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Video Playlist 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 Video Playlist.
• 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.

2. 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.

3. 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 Video Playlist 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.

4. 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 Video Playlist.

5. Đườ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.

6. 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.

7. 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 Video Playlist trên các loại thiết bị khác nhau nếu cần.

8. 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.

9. 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.