Cách sử dụng tiện ích – Lottie

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 Lottie

Tiện ích Lottie trong Elementor cho phép bạn dễ dàng nhúng các ảnh động Lottie vào trang web của mình. Ảnh động Lottie là các ảnh động dựa trên JSON, có kích thước tệp nhỏ, có thể co giãn và hiển thị mượt mà trên mọi thiết bị, giúp trang web của bạn trở nên sống động và thu hút hơn.

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

I. Nội dung (Content)

Đây là nơi bạn tải lên tệp Lottie JSON và cấu hình các tùy chọn phát lại.

A. Lottie

• Source (Nguồn): Chọn nguồn của tệp Lottie.
  • Media File (Tệp Media): Tải lên tệp JSON từ thư viện phương tiện của bạn.
  • External URL (URL bên ngoài): Nhập URL của tệp JSON Lottie được lưu trữ ở nơi khác (ví dụ: từ LottieFiles.com).
• Upload .JSON File (Tải lên tệp .JSON): Nếu bạn chọn “Media File”, nhấp vào đây để tải lên hoặc chọn tệp JSON Lottie của bạn.
• Các chính sách (Settings): Các tùy chọn điều khiển cách ảnh động phát.
  • Autoplay (Tự động phát): Ảnh động sẽ tự động phát khi trang tải.
  • Loop (Lặp lại): Ảnh động sẽ lặp lại liên tục.
  • Count (Số lần): Nếu “Loop” không được chọn, bạn có thể đặt số lần ảnh động sẽ phát.
  • Speed (Tốc độ): Điều chỉnh tốc độ phát của ảnh động.
  • Reverse (Đảo ngược): Phát ảnh động theo chiều ngược lại.
  • Start Point (Điểm bắt đầu): Đặt điểm bắt đầu của ảnh động (ví dụ: từ khung hình 10).
  • End Point (Điểm kết thúc): Đặt điểm kết thúc của ảnh động (ví dụ: đến khung hình 50).

• Liên kết (Link):
  • Không (None): Không có liên kết nào được gắn với ảnh động.
  • URL tùy chỉnh (Custom URL): Nhập một URL mà ảnh động sẽ dẫn đến khi được nhấp vào.

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

Đây là nơi bạn tùy chỉnh giao diện của ảnh động Lottie.

A. Lottie

• Chiều rộng (Width): Điều chỉnh chiều rộng của ảnh động.
• Chiều cao (Height): Điều chỉnh chiều cao của ảnh động.
• Max Width (Chiều rộng tối đa): Đặt chiều rộng tối đa cho ảnh động.
• Max Height (Chiều cao tối đa): Đặt chiều cao tối đa cho ảnh động.
• Opacity (Độ mờ): Điều chỉnh độ trong suốt của ảnh động.
• CSS Filters (Bộ lọc CSS): Áp dụng các bộ lọc CSS như độ sáng, độ tương phản, độ bão hòa, và độ mờ.
• Căn chỉnh (Alignment): Căn chỉnh ảnh động (trái, giữa, phải).

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

1. Bố cục (Layout):

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

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