Cách sử dụng tiện ích theo dõi tiến độ – Progress Tracker

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 theo dõi tiến độ là gì ?

3. Các bước sử dụng tiện ích theo dõi tiến độ

I. Nội dung (Content)

Tiện ích Progress Tracker (Theo dõi tiến độ) trong Elementor là một công cụ giúp hiển thị tiến độ cuộn trang cho người dùng. Điều này đặc biệt hữu ích cho các bài viết dài, trang tài liệu hoặc landing page để người đọc biết họ đang ở đâu trên trang và còn bao nhiêu nội dung nữa để đọc.

Đây là nơi bạn chọn kiểu theo dõi và cách tiến độ được tính toán.

A. Progress Tracker (Theo dõi tiến độ)

• Tracker Type (Loại theo dõi): Chọn hình dạng của trình theo dõi tiến độ. Trong hình ảnh bạn cung cấp, tùy chọn đang hiển thị là Circular (Hình tròn). Các tùy chọn khác có thể là Linear (Dạng thanh) hoặc các kiểu khác tùy thuộc vào phiên bản Elementor của bạn.
• Progress relative to (Tiến độ liên quan đến): Chọn phạm vi mà tiến độ được tính toán:
  • Entire Page (Toàn bộ trang): Tiến độ sẽ được tính dựa trên toàn bộ nội dung của trang hiện tại.
  • Specific Selector (Bộ chọn cụ thể): Bạn có thể nhập một bộ chọn CSS (CSS Selector) để giới hạn tính toán tiến độ trong một phần tử cụ thể của trang (ví dụ: #my-article-section). Điều này hữu ích nếu bạn chỉ muốn theo dõi tiến độ đọc của một phần nội dung nhất định.
• Direction (Hướng): Xác định hướng mà tiến độ sẽ được hiển thị hoặc điền đầy (ví dụ: Từ trên xuống dưới, Từ trái sang phải, v.v.). Tùy chọn này thường áp dụng cho loại Circular hoặc Linear.
• Percentage (Phần trăm): Nút gạt “Hiển thị” cho phép bạn bật/tắt hiển thị số phần trăm tiến độ ngay trên trình theo dõi.
  • (Bạn thấy nút gạt “Hiển thị” trong hình).

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

Đây là nơi bạn tùy chỉnh giao diện của trình theo dõi tiến độ. Các tùy chọn ở đây sẽ phụ thuộc vào Tracker Type bạn chọn.

A. Progress Tracker (Theo dõi tiến độ)

Nếu bạn chọn Circular (Hình tròn):

• Size (Kích thước): Điều chỉnh kích thước tổng thể của vòng tròn tiến độ.
• Stroke Width (Độ dày nét): Điều chỉnh độ dày của đường viền (nét) của vòng tròn tiến độ.
• Colors (Màu sắc):
  • Track Color (Màu nền): Màu của phần vòng tròn đã cuộn qua hoặc phần nền của trình theo dõi.
  • Progress Color (Màu tiến độ): Màu của phần vòng tròn chưa cuộn qua hoặc màu biểu thị tiến độ hiện tại.
• Text (Văn bản – nếu bật Percentage):
  • Text Color (Màu chữ): Màu của số phần trăm.
  • Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho số phần trăm.
• Alignment (Căn chỉnh): Căn chỉnh tiện ích trong cột (trái, giữa, phải).

Nếu bạn chọn Linear (Dạng thanh) (nếu có):

• Height (Chiều cao): Điều chỉnh chiều cao của thanh tiến độ.
• Colors (Màu sắc): Tương tự như trên, có màu nền và màu tiến độ.
• Border Radius (Bán kính bo tròn): Bo tròn góc của thanh tiến độ.

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 Progress Tracker.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Progress Tracker 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 Progress Tracker.
• Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao). Đối với Progress Tracker, vị trí Fixed thường được sử dụng để nó luôn hiển thị trên màn hình khi người dùng cuộn.
• 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 Progress Tracker khi trang được tải.
• 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 Progress Tracker.

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 Progress Tracker 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.