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ảng giá – Price Table
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ảng giá là gì ?
Tiện ích Bảng giá (Price Table) trong Elementor (thường là một tính năng của Elementor Pro) là một công cụ mạnh mẽ để tạo các bảng giá so sánh hấp dẫn cho các gói dịch vụ, sản phẩm hoặc cấp độ thành viên khác nhau. Nó giúp bạn trình bày thông tin giá cả một cách rõ ràng, nổi bật các tính năng và khuyến khích người dùng chọn gói phù hợp.
3. Các bước sử dụng tiện ích bảng giá
I. Nội dung (Content)
Đây là nơi bạn thiết lập nội dung cho từng phần của bảng giá.
A. Header (Tiêu đề)
- Title (Tiêu đề): Nhập tiêu đề chính của gói (ví dụ: “Nhập tiêu đề của bạn”).
- Description (Mô tả): Nhập mô tả ngắn gọn cho gói (ví dụ: “Nhập mô tả của bạn”).
- Tiêu đề HTML (HTML Tag): Chọn thẻ HTML cho tiêu đề (ví dụ: H1, H2, H3, H4, H5, H6, div, span).
B. Pricing (Giá cả)
- Currency Symbol (Ký hiệu tiền tệ): Chọn ký hiệu tiền tệ (ví dụ: $, €).
- Price (Giá): Nhập giá số (ví dụ: “39”).
- Sale (Giảm giá): Gạt nút sang phải nếu có giá giảm giá và nhập giá gốc vào trường Original Price.
- Ký hiệu thập phân (Decimal Point): Chọn cách hiển thị phần thập phân của giá.
- Đơn vị (Period): Nhập đơn vị thời gian (ví dụ: “Monthly”, “Yearly”, “Per User”).
C. Features (Các tính năng)
- Đây là nơi bạn liệt kê các tính năng hoặc lợi ích của gói.
- Thêm mục (Add Item): Nhấp vào nút này để thêm một tính năng mới.
- Chỉnh sửa Mục: Nhấp vào từng mục để chỉnh sửa:
- Text (Văn bản): Nhập mô tả tính năng (ví dụ: “Mục danh sách #1”).
- Icon (Biểu tượng): Chọn biểu tượng cho tính năng (ví dụ: dấu tích, dấu X).
- Apply Color (Áp dụng màu): Tùy chỉnh màu sắc cho biểu tượng này.
- Chỉ hiển thị biểu tượng (Show Icon): Gạt nút sang phải để hiển thị biểu tượng.
D. Footer (Chân trang)
- Button Text (Văn bản nút): Nhập văn bản hiển thị trên nút (ví dụ: “Click Here”).
- Link (Liên kết): Nhập URL mà nút sẽ dẫn đến khi nhấp.
- Additional Info (Thông tin bổ sung): Nhập bất kỳ văn bản hoặc thông tin bổ sung nào cần hiển thị dưới nút (ví dụ: “This is text element”).
E. Ribbon (Ruy băng)
- Show Ribbon (Hiển thị ruy băng): Gạt nút sang phải để hiển thị ruy băng nổi bật (thường dùng cho gói “Phổ biến nhất” hoặc “Khuyến nghị”).
- Text (Văn bản): Nhập văn bản cho ruy băng (ví dụ: “PHỔ BIẾN”).
- Position (Vị trí): Chọn vị trí của ruy băng (Trái, Phải).
II. Kiểu hiển thị (Style)
Đây là nơi bạn tùy chỉnh giao diện của bảng giá.
A. Table (Bảng)
- Background Color (Màu nền): Màu nền của toàn bộ bảng giá.
- Border Type (Loại đường viền): Kiểu đường viền cho bảng.
- Border Width (Độ dày đường viền): Độ dày của đường viền.
- Border Color (Màu đường viền): Màu của đường viền.
- Border Radius (Bán kính bo tròn): Bo tròn góc của bảng.
B. Header (Tiêu đề)
- Background Color (Màu nền): Màu nền của phần tiêu đề.
- Padding (Khoảng đệm): Khoảng đệm bên trong phần tiêu đề.
- Title (Tiêu đề):
- Color (Màu sắc): Màu chữ cho tiêu đề gói.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho tiêu đề.
- Description (Mô tả):
- Color (Màu sắc): Màu chữ cho mô tả gói.
- Typography (Phông chữ): Tùy chỉnh phông chữ, kích thước, độ đậm, v.v. cho mô tả.
C. Pricing (Giá cả)
- Background Color (Màu nền): Màu nền của phần giá.
- Padding (Khoảng đệm): Khoảng đệm bên trong phần giá.
- Price Color (Màu giá): Màu chữ cho số giá.
- Currency Symbol (Ký hiệu tiền tệ):
- Color (Màu sắc): Màu của ký hiệu tiền tệ.
- Size (Kích thước): Kích thước của ký hiệu tiền tệ.
- Vertical Position (Vị trí dọc): Vị trí dọc của ký hiệu tiền tệ.
- Fractional Part (Phần thập phân):
- Size (Kích thước): Kích thước của phần thập phân.
- Period (Đơn vị):
- Color (Màu sắc): Màu của văn bản đơn vị (ví dụ: Monthly).
- Typography (Phông chữ): Tùy chỉnh phông chữ cho đơn vị.
D. Features (Các tính năng)
- Background Color (Màu nền): Màu nền của phần tính năng.
- Padding (Khoảng đệm): Khoảng đệm bên trong phần tính năng.
- Color (Màu sắc): Màu chữ cho văn bản tính năng.
- Typography (Phông chữ): Tùy chỉnh phông chữ cho văn bản tính năng.
- Icon Color (Màu biểu tượng): Màu của biểu tượng tính năng.
- Icon Size (Kích thước biểu tượng): Kích thước của biểu tượng.
- Divider (Dấu phân cách): Thêm đường phân cách giữa các tính năng.
E. Footer (Chân trang)
- Background Color (Màu nền): Màu nền của phần chân trang.
- Padding (Khoảng đệm): Khoảng đệm bên trong phần chân trang.
- Button (Nút): Tùy chỉnh màu sắc, nền, phông chữ, đường viền, bo tròn góc cho nút.
- Additional Info (Thông tin bổ sung):
- Color (Màu sắc): Màu chữ cho thông tin bổ sung.
- Typography (Phông chữ): Tùy chỉnh phông chữ cho thông tin bổ sung.
F. Ribbon (Ruy băng)
- Background Color (Màu nền): Màu nền của ruy băng.
- Text Color (Màu văn bản): Màu chữ của ruy băng.
- Typography (Phông chữ): Tùy chỉnh phông chữ cho ruy băng.
- Distance (Khoảng cách): Khoảng cách từ cạnh của bảng.
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 Bảng giá.
- Bố cục (Layout):
- Margin (Lề): Khoảng cách bên ngoài tiện ích Bảng 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 Bảng 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 Bảng 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 Bảng 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 Bảng 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.
