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ộ đếm
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ộ đếm là gì ?
Tiện ích Bộ đếm (Counter) trong Elementor là một công cụ thú vị cho phép bạn hiển thị các con số thống kê hoặc thành tựu của mình dưới dạng hiệu ứng đếm ngược hoặc đếm lên động. Điều này giúp thu hút sự chú ý và làm cho dữ liệu trở nên ấn tượng hơn.
3. Các bước sử dụng tiện ích bộ đếm
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn thiết lập các con số, tốc độ đếm và văn bản đi kèm.
1. Số bắt đầu (Number Prefix):
- Nhập một số hoặc ký tự sẽ xuất hiện trước số đếm (ví dụ: “$”, “Số lượng: “).
- Trong hình bạn cung cấp, ô này trống, nghĩa là không có tiền tố.
2. Số kết thúc (Number Suffix):
- Nhập một số hoặc ký tự sẽ xuất hiện sau số đếm (ví dụ: “%”, “+”, “khách hàng”).
- Trong hình bạn cung cấp, ô này trống, nghĩa là không có hậu tố.
3. Số từ (Number From):
- Nhập số bắt đầu của hiệu ứng đếm. Thường là 0.
4. Số đến (Number To):
- Nhập số cuối cùng mà bộ đếm sẽ dừng lại.
- Trong hình bạn cung cấp, số này là 50.
5. Thời lượng hiệu ứng động (Animation Duration (ms)):
- Điều chỉnh thời gian (tính bằng mili giây) mà hiệu ứng đếm sẽ diễn ra.
- Giá trị càng lớn, thời gian đếm càng lâu.
- Ví dụ: 2000 (như trong hình bạn gửi) = 2 giây.
6. Dấu phân cách (Thousand Separator):
- Bật/tắt tùy chọn này để hiển thị hoặc ẩn dấu phân cách hàng nghìn (ví dụ: 1,000,000 thay vì 1000000).
- Gạt nút sang phải để bật, sang trái để tắt.
7. Dấu gạch dưới (Delimiter):
- Nếu bạn bật “Dấu phân cách”, tùy chọn này cho phép bạn chọn ký tự sẽ được sử dụng làm dấu phân cách (ví dụ: dấu phẩy “,”, dấu chấm “.”).
- Nhấp vào hộp chọn để xem các tùy chọn.
8. Tiêu đề (Title):
- Nhập tiêu đề hoặc mô tả ngắn gọn cho con số đếm này. Tiêu đề này sẽ xuất hiện bên dưới số đếm.
- Trong hình bạn cung cấp, tiêu đề đang là “Cool Number”.
9. Tiêu đề thẻ HTML (Title HTML Tag):
- Bạn có thể chọn loại thẻ HTML cho tiêu đề của mình (ví dụ: H1, H2, H3, H4, H5, H6, div, span, p).
- Lựa chọn này quan trọng cho SEO. Thường sử dụng H3 hoặc H4 cho tiêu đề này.
Bước 2. Chỉnh sửa kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của các con số và tiêu đề.
A. Number (Số)
- Text Color (Màu văn bản): Chọn màu cho con số đếm.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho con số.
B. Title (Tiêu đề)
- Text Color (Màu văn bản): Chọn màu cho tiêu đề bên dưới con số.
- Typography (Phông chữ): Nhấp vào biểu tượng bút chì để tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
Bước 3. Chỉnh sửa 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 Bộ đếm.
- Bố cục (Layout):
- Căn chỉnh (Alignment): Căn chỉnh tiện ích Bộ đếm sang Trái, Giữa hoặc Phải trong cột chứa nó.
- 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 hộp và nội dung (số và tiêu đề).
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Bộ đếm.
- 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ộ đếm khi trang được tải (rất hay dùng để bộ đếm chỉ bắt đầu chạy khi người dùng cuộn đến).
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho bộ đếm 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ộ đếm.
- Đườ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ộ đếm 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 bộ đếm một cách nâng cao.
