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 danh sách giá – Price List
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 danh sách giá là gì ?
Tiện ích Danh sách giá (Price List) trong Elementor (thường là một tính năng của Elementor Pro) là một công cụ tuyệt vời để hiển thị các mặt hàng, dịch vụ hoặc sản phẩm cùng với giá cả và mô tả chi tiết, thường được sử dụng cho menu nhà hàng, danh sách dịch vụ hoặc bảng giá sản phẩm.
3. Các bước sử dụng tiện ích danh sách giá
I. Nội dung (Content)
Đây là nơi bạn thêm và chỉnh sửa từng mục trong danh sách giá.
A. List Items (Các mục trong danh sách)
- Bạn sẽ thấy một danh sách các mục hiện có (ví dụ: “First item on the list”, “Second item on the list”, “Third item on the list”).
- Thêm mục (Add Item): Nhấp vào nút này để thêm một mục mới vào danh sách giá của bạn.
- Chỉnh sửa Mục: Nhấp vào từng mục để mở các tùy chọn chỉnh sửa riêng cho mục đó:
- Title (Tiêu đề): Nhập tên của mặt hàng/dịch vụ (ví dụ: “First item on the list”).
- Description (Mô tả): Nhập mô tả chi tiết về mặt hàng/dịch vụ.
- Price (Giá): Nhập giá của mặt hàng/dịch vụ (ví dụ: “$20”).
- Image (Hình ảnh): Tùy chọn thêm hình ảnh cho mục này.
- Link (Liên kết): Nhập URL mà mục này sẽ dẫn đến khi nhấp.
- Tiêu đề HTML (Title HTML Tag): Chọn thẻ HTML cho tiêu đề của các mục (ví dụ: H1, H2, span, v.v.).
- Mô tả HTML Tag (Description HTML Tag): Chọn thẻ HTML cho mô tả của các mục (ví dụ: p, div).
- Độ phân giải hình ảnh (Image Resolution): Chọn kích thước hiển thị của hình ảnh (ví dụ: Thumbnail – 80×80).
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của danh sách giá.
A. List (Danh sách)
- Space Between (Khoảng cách giữa): Điều chỉnh khoảng cách giữa các mục trong danh sách.
- Vertical Align (Căn chỉnh dọc): Căn chỉnh nội dung dọc trong mỗi mục.
- Border Style (Kiểu đường viền): Chọn kiểu đường viền (ví dụ: Solid, Dashed, Dotted) cho đường phân cách giữa tiêu đề và giá.
- Border Weight (Độ dày đường viền): Điều chỉnh độ dày của đường viền.
- Border Color (Màu đường viền): Chọn màu cho đường viền.
B. Image (Hình ảnh)
- Size (Kích thước): Điều chỉnh kích thước của hình ảnh.
- Border Radius (Bán kính bo tròn): Bo tròn góc của hình ảnh.
- Spacing (Khoảng cách): Khoảng cách giữa hình ảnh và văn bản.
C. Title (Tiêu đề)
- Color (Màu sắc): Màu chữ cho tiêu đề của các mục.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
D. Price (Giá)
- Color (Màu sắc): Màu chữ cho giá.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho giá.
E. Description (Mô tả)
- Color (Màu sắc): Màu chữ cho mô tả.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho mô 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 Danh sách giá.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Danh sách 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.
- Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Danh sách 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 toàn bộ tiện ích Danh sách 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ộ 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.
- 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 Danh sách 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 tiện ích Danh sách 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 tiện ích một cách nâng cao.
