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 đánh giá – Testimonial
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 đánh giá là gì ?
Tiện ích Đánh giá (Testimonial) trong Elementor là một công cụ tuyệt vời để hiển thị các lời chứng thực, nhận xét hoặc đánh giá từ khách hàng của bạn. Điều này giúp tăng độ tin cậy và uy tín cho doanh nghiệp hoặc sản phẩm/dịch vụ của bạn.
3. Các bước sử dụng tiện ích đánh giá
Bước 1. Chỉnh sửa nội dung
Đây là nơi bạn nhập nội dung đánh giá, tải ảnh khách hàng và điền thông tin người đánh giá.
1. Mô tả (Description):
- Nhập nội dung chi tiết của lời đánh giá hoặc nhận xét vào ô này. Đây là phần chính của testimonial.
- Trong hình bạn cung cấp, mô tả đang là “Thêm một đoạn văn bản ở đây. Nhấp vào ô văn bản để tùy chỉnh nội dung, phong cách phông chữ và màu sắc của đoạn văn bản của bạn.”
2. Tên (Name):
- Nhập tên của người đưa ra lời đánh giá.
- Trong hình bạn cung cấp, tên đang là “Nhập tên của bạn”.
3. Tiêu đề (Title):
- Nhập chức danh, vai trò hoặc một mô tả ngắn về người đánh giá (ví dụ: “Nhà thiết kế web”, “Giám đốc công ty X”, “Khách hàng thân thiết”).
- Trong hình bạn cung cấp, tiêu đề đang là “Nhà thiết kế web”.
4. Liên kết (Link):
- Đây là nơi bạn dán đường link (URL) mà bạn muốn người dùng được chuyển hướng đến khi họ nhấp vào hình ảnh hoặc tên của người đánh giá. Điều này có thể là link đến website của khách hàng, hồ sơ mạng xã hội, hoặc một dự án mà họ liên quan.
- Trong hình bạn cung cấp, ô này đang là “Nhấp hoặc dán URL của bạn”.
5. Chọn ảnh (Choose Image):
- Nhấp vào ô hình ảnh placeholder. Một cửa sổ Thư viện Media của WordPress sẽ hiện ra.
- Bạn có thể chọn một hình ảnh đại diện của người đánh giá (ảnh chân dung, logo công ty) đã có sẵn trong thư viện hoặc tải lên một hình ảnh mới.
- Sau khi chọn, nhấp vào nút “Chèn” hoặc “Insert Media”.
6. Độ phân giải hình ảnh (Image Size):
- Sau khi chọn ảnh, bạn có thể chọn kích thước hiển thị của ảnh đại diện.
- Nhấp vào hộp chọn để xem các tùy chọn như: Thumbnail, Medium, Large, Full hoặc các kích thước tùy chỉnh khác. Chọn kích thước phù hợp (thường là Thumbnail hoặc Medium) để ảnh hiển thị rõ mà không quá lớn.
7. Vị trí hình ảnh (Image Position):
- Tùy chọn này xác định vị trí của hình ảnh đại diện so với nội dung đánh giá:
- Bên trên (Top): Hình ảnh ở trên cùng, sau đó là văn bản và tên.
- Bên trái (Left): Hình ảnh ở bên trái, văn bản và tên ở bên phải. (Đây là lựa chọn phổ biến và đang được chọn trong hình bạn gửi).
- Bên phải (Right): Hình ảnh ở bên phải, văn bản và tên ở bên trái.
8. Căn chỉnh (Alignment):
- Cho phép bạn căn chỉnh toàn bộ nội dung của tiện ích Đánh giá (văn bản, tên, tiêu đề) sang Trái (Left), Giữa (Center) hoặc Phải (Right) trong cột chứa nó.
- Trong hình bạn cung cấp, căn chỉnh đang là “Trái”.
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 nội dung đánh giá, hình ảnh và thông tin người đánh giá.
A. Nội dung (Content)
- Màu sắc (Color): Chọn màu cho nội dung đánh giá.
- 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 văn bản đánh giá.
B. Hình ảnh (Image)
- Kích thước (Size): Điều chỉnh kích thước (chiều rộng) của ảnh đại diện.
- Border Type (Loại đường viền): Thêm đường viền cho ảnh đại diện.
- Border Radius (Bán kính bo tròn): Bo tròn các góc của ảnh đại diện (thường dùng để tạo ảnh tròn).
- Khoảng cách (Spacing): Điều chỉnh khoảng cách giữa ảnh và nội dung đánh giá (nếu ảnh ở trên cùng) hoặc giữa ảnh và văn bản (nếu ảnh ở bên trái/phải).
C. Tên (Name)
- Màu sắc (Color): Chọn màu cho tên người đánh giá.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tên.
D. Tiêu đề (Title)
- Màu sắc (Color): Chọn màu cho chức danh/tiêu đề của người đánh giá.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho chức danh/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 Đánh giá.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Đánh giá 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.
- Width (Chiều rộng): Bạn có thể đặt chiều rộng của toàn bộ tiện ích Đánh giá.
- 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 đánh giá khi trang được tải.
- Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ đánh giá 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 Đánh giá.
- Đườ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 đánh giá 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 đánh giá một cách nâng cao.
